@font-face{font-family:'PInter';src:url('fonts/Inter-Regular.ttf');font-weight:400}
@font-face{font-family:'PInter';src:url('fonts/Inter-SemiBold.ttf');font-weight:600}
@font-face{font-family:'PInter';src:url('fonts/Inter-Bold.ttf');font-weight:700}
@font-face{font-family:'PDisp';src:url('fonts/InterDisplay-ExtraBold.ttf');font-weight:800}
@font-face{font-family:'PMono';src:url('fonts/JetBrainsMono-Regular.ttf');font-weight:400}
@font-face{font-family:'PMono';src:url('fonts/JetBrainsMono-Bold.ttf');font-weight:700}
@font-face{font-family:'PMono';src:url('fonts/JetBrainsMono-ExtraBold.ttf');font-weight:800}

:root{--ink:#1C1C1E;--ink2:#26262A;--line:rgba(255,255,255,.14);--tq:#08F7CD;--paper:#FAFAF7;--mute:rgba(255,255,255,.66);
  --c-carbon:#08F7CD;--c-water:#4FC3FF;--c-energy:#FFD23F;--c-waste:#B6F36A}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#000;user-select:none;-webkit-user-select:none;touch-action:none;cursor:default}
img{-webkit-user-drag:none;user-select:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;background:var(--ink);color:#fff;font-family:'PInter';overflow:hidden}
.disp{font-family:'PDisp';font-weight:800;letter-spacing:-.02em}
.kick{font-family:'PMono';font-weight:700;font-size:22px;letter-spacing:.14em;color:var(--tq);text-transform:uppercase}
.c-water{color:var(--c-water)}.c-energy{color:var(--c-energy)}.c-waste{color:var(--c-waste)}
.hl{background:var(--tq);color:var(--ink);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.screen{position:absolute;inset:0;padding:120px 80px 60px;opacity:0;pointer-events:none;transition:opacity .45s}
.screen.on{opacity:1;pointer-events:auto}
svg{display:block}

/* ---------- bar ---------- */
#bar{position:absolute;left:0;right:0;top:0;height:92px;display:flex;align-items:center;justify-content:space-between;padding:0 48px;border-bottom:1px solid var(--line);z-index:20;transition:opacity .4s}
#bar.off{opacity:0;pointer-events:none}
.bar-logo{height:44px}
.bar-mid{font-family:'PMono';font-size:20px;letter-spacing:.12em;color:var(--mute);display:flex;align-items:center;gap:14px;text-transform:uppercase}
.dot{width:12px;height:12px;border-radius:50%;background:var(--tq);box-shadow:0 0 0 6px rgba(8,247,205,.18)}
.bar-right{display:flex;align-items:center;gap:18px}
.pts{font-family:'PMono';font-size:22px;padding:12px 20px;border:1px solid var(--line);border-radius:999px}
.pts b{color:var(--tq);font-weight:800}
.lang{display:flex;border:2px solid var(--line);border-radius:999px;overflow:hidden;font-family:'PMono';font-weight:800;font-size:22px}
.lang span{padding:12px 20px;color:var(--mute)} .lang span.on{background:var(--tq);color:var(--ink)}
.home{width:62px;height:62px;border-radius:50%;border:2px solid var(--line);font-size:30px}

/* ---------- attract ---------- */
#attract{padding:0}
.att-ring{position:absolute;left:-200px;top:-80px;width:1240px;height:1240px;opacity:.12;animation:spin 60s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.att-left{position:absolute;left:110px;top:120px;width:900px}
.att-logo{height:84px}
#attract h1{font-size:104px;line-height:1.02;margin-top:26px}
.att-sub{font-size:34px;line-height:1.35;color:var(--mute);margin-top:30px;max-width:700px}
.att-four{display:flex;gap:14px;margin-top:40px;flex-wrap:wrap}
.att-four span{font-family:'PMono';font-weight:700;font-size:24px;padding:12px 22px;border:2px solid var(--line);border-radius:999px}
.touch{position:absolute;left:0;top:760px;display:flex;align-items:center;gap:26px}
.touch b{font-family:'PDisp';font-weight:800;font-size:44px}
.touch small{font-size:26px;color:var(--mute);margin-left:4px}
.pulse{width:34px;height:34px;border-radius:50%;background:var(--tq);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(8,247,205,.6)}100%{box-shadow:0 0 0 40px rgba(8,247,205,0)}}
.att-receipt{position:absolute;right:130px;top:0;width:620px;height:1080px;overflow:hidden}
.att-receipt .receipt{position:absolute;left:0;top:0;width:620px;transition:none}
/* giriş ekranı: açık renk tema */
#attract{--att-bg:#F3F2EC;background:var(--att-bg);color:var(--ink)}
#attract .att-ring{opacity:.22}
#attract .att-sub,#attract .touch small{color:rgba(28,28,30,.66)}
#attract .att-four span{border-color:rgba(28,28,30,.16);background:#fff}
#attract .receipt{box-shadow:0 30px 70px rgba(28,28,30,.14)}
#attract .receipt:after{background:linear-gradient(-45deg,var(--att-bg) 16px,transparent 0),linear-gradient(45deg,var(--att-bg) 16px,transparent 0);background-size:32px 32px}
/* Zero maskotu */
.att-zero{position:absolute;left:845px;top:540px;width:310px;height:460px;color:var(--ink);pointer-events:none}
.z-body{position:absolute;left:50px;top:150px;width:210px;animation:zfloat 3.5s ease-in-out infinite;filter:drop-shadow(0 18px 18px rgba(28,28,30,.12))}
.z-orbit{position:absolute;border-radius:50%;border:2px solid rgba(28,28,30,.12)}
.z1{left:5px;top:120px;width:300px;height:300px;animation:spin 16s linear infinite}
.z2{left:50px;top:165px;width:210px;height:210px;border-style:dashed;animation:spin 10s linear infinite reverse}
.z-bubble{position:absolute;left:0;right:0;top:0;text-align:center;background:#fff;border:2px solid rgba(28,28,30,.12);border-radius:22px;padding:16px 18px;font-size:24px;line-height:1.3;box-shadow:0 10px 30px rgba(28,28,30,.08)}
.z-bubble b{font-family:'PDisp';font-weight:800}
.z-bubble:after{content:"";position:absolute;left:50%;bottom:-11px;width:20px;height:20px;background:#fff;border-right:2px solid rgba(28,28,30,.12);border-bottom:2px solid rgba(28,28,30,.12);transform:translateX(-50%) rotate(45deg)}
@keyframes zfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ---------- receipt ---------- */
.receipt{background:var(--paper);color:var(--ink);font-family:'PMono';padding:44px 42px 52px;position:relative}
.receipt:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:16px;background:linear-gradient(-45deg,var(--ink) 16px,transparent 0),linear-gradient(45deg,var(--ink) 16px,transparent 0);background-size:32px 32px}
.receipt .r-logo{width:210px;margin:0 auto 16px}
.receipt .r-c{text-align:center;font-size:19px;line-height:1.5}
.receipt .r-hr{border-top:3px dashed var(--ink);margin:16px 0}
.receipt .r-row{display:flex;justify-content:space-between;font-size:23px;line-height:1.75;gap:20px}
.receipt .r-row b{font-weight:800}
.receipt .r-tot{font-weight:800;font-size:27px}
.receipt .r-imp{background:var(--ink);color:var(--paper);margin:14px -42px;padding:20px 42px}
.receipt .r-imp .r-h{display:flex;justify-content:space-between;font-weight:800;letter-spacing:.12em;font-size:23px}
.receipt .r-imp .r-h span{color:var(--tq)}
.receipt .r-imp i{font-style:normal;color:#9a9aa0}
.receipt .r-pts{display:flex;justify-content:space-between;font-weight:800;font-size:27px;margin-top:14px}
.receipt .r-pts span:first-child{background:var(--tq);padding:2px 10px}
.receipt .r-sm{font-size:19px;line-height:1.55;color:#3c3c40}
.receipt .r-big{font-family:'PDisp';font-weight:800;font-size:34px;line-height:1.1;margin-top:10px}
.receipt .r-big span{background:var(--tq);padding:0 6px}
.receipt.print{animation:printin 1.6s cubic-bezier(.2,.8,.2,1) both}
@keyframes printin{from{transform:translateY(-105%)}to{transform:translateY(0)}}

/* ---------- home ---------- */
.home-head h1{font-size:76px;margin-top:14px;line-height:1.02}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:46px}
.tile{position:relative;height:520px;border-radius:36px;background:var(--ink2);border:2px solid var(--line);text-align:left;padding:40px 36px;display:flex;flex-direction:column;transition:transform .15s}
.tile:active{transform:scale(.97)}
.tile .t-ic{width:110px;height:110px;border-radius:30px;display:flex;align-items:center;justify-content:center}
.tile .t-ic svg{width:60px;height:60px}
.tile .t-tag{font-family:'PMono';font-weight:700;font-size:22px;letter-spacing:.12em;text-transform:uppercase;margin-top:48px}
.tile b{font-family:'PDisp';font-weight:800;font-size:46px;line-height:1.05;margin-top:12px}
.tile small{font-size:24px;line-height:1.35;color:var(--mute);margin-top:14px;padding-right:70px}
.tile .t-go{position:absolute;right:34px;bottom:30px;width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:700;color:var(--ink)}
.t-carbon .t-ic{background:rgba(8,247,205,.14);color:var(--c-carbon)} .t-carbon .t-tag{color:var(--c-carbon)} .t-carbon .t-go{background:var(--c-carbon)}
.t-water .t-ic{background:rgba(79,195,255,.14);color:var(--c-water)} .t-water .t-tag{color:var(--c-water)} .t-water .t-go{background:var(--c-water)}
.t-energy .t-ic{background:rgba(255,210,63,.14);color:var(--c-energy)} .t-energy .t-tag{color:var(--c-energy)} .t-energy .t-go{background:var(--c-energy)}
.t-waste .t-ic{background:rgba(182,243,106,.14);color:var(--c-waste)} .t-waste .t-tag{color:var(--c-waste)} .t-waste .t-go{background:var(--c-waste)}
.home-bottom{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:28px}
.about-btn{display:flex;align-items:center;gap:28px;height:150px;border-radius:30px;border:2px solid var(--tq);padding:0 36px;text-align:left}
.about-btn .q{flex:none;width:84px;height:84px;border-radius:50%;background:var(--tq);color:var(--ink);font-family:'PDisp';font-weight:800;font-size:50px;display:flex;align-items:center;justify-content:center}
.about-btn b{display:block;font-family:'PDisp';font-weight:800;font-size:38px}
.about-btn small{display:block;font-size:24px;color:var(--mute);margin-top:6px}
.pilot{display:flex;align-items:center;gap:28px;height:150px;border-radius:30px;background:var(--ink2);padding:0 36px}
.pilot img{height:110px}
.pilot small{display:block;font-family:'PMono';font-weight:700;font-size:20px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase}
.pilot b{display:block;font-family:'PDisp';font-weight:800;font-size:36px;margin-top:4px}
.pilot span{display:block;font-size:22px;color:var(--mute);margin-top:4px}

/* ---------- games shared ---------- */
.g-head h1{font-size:66px;margin-top:10px;line-height:1.02}
.g-head p{font-size:28px;color:var(--mute);margin-top:12px}
.cta{display:inline-flex;align-items:center;gap:14px;background:var(--tq);color:var(--ink);font-family:'PDisp';font-weight:800;font-size:36px;padding:26px 46px;border-radius:999px}
.cta:active{transform:scale(.97)}
.overlay{position:absolute;inset:92px 0 0;background:rgba(28,28,30,.92);display:flex;align-items:center;justify-content:center;z-index:5}
.overlay.off{display:none}
.ov-card{width:880px;text-align:center;padding:70px;border-radius:40px;background:var(--ink2);border:2px solid var(--line)}
.ov-card .ov-ic{width:130px;height:130px;margin:0 auto;border-radius:36px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06)}
.ov-card .ov-ic svg{width:72px;height:72px}
.ov-card h2{font-size:64px;margin-top:30px}
.ov-card p{font-size:30px;line-height:1.4;color:var(--mute);margin:20px 0 44px}
#water .ov-ic{color:var(--c-water)} #energy .ov-ic{color:var(--c-energy)} #waste .ov-ic{color:var(--c-waste)}
.hud{display:flex;gap:22px}
.hud>div{flex:1;background:var(--ink2);border:2px solid var(--line);border-radius:26px;padding:22px 28px}
.hud small{display:block;font-family:'PMono';font-size:20px;letter-spacing:.1em;color:var(--mute);text-transform:uppercase}
.hud b{font-family:'PMono';font-weight:800;font-size:56px}
.hud span{font-family:'PMono';font-size:26px;color:var(--mute)}
.hud.vert{flex-direction:column;width:360px}
.foot-note{position:absolute;left:80px;right:80px;bottom:26px;font-family:'PMono';font-size:18px;color:rgba(255,255,255,.5)}

/* ---------- coffee ---------- */
.cf-grid{display:grid;grid-template-columns:1fr 820px;gap:60px;margin-top:30px}
.cf-pick h3{font-family:'PMono';font-size:22px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase;margin:24px 0 14px}
.cf-pick h3:first-child{margin-top:0}
.opts{display:flex;flex-wrap:wrap;gap:12px}
.opt{font-size:27px;font-weight:600;padding:18px 26px;border-radius:20px;border:2px solid var(--line);background:var(--ink2);min-width:120px}
.opt.on{background:var(--tq);color:var(--ink);border-color:var(--tq)}
.opt.dis{opacity:.3;pointer-events:none}
.cf-vis{display:grid;grid-template-columns:300px 1fr;grid-template-rows:auto auto;gap:20px 40px;align-items:start}
.cup-stage{grid-row:1/3;height:520px;display:flex;align-items:flex-end;justify-content:center}
.cup-stage svg{width:290px;height:auto}
.meter .m-val b{font-family:'PMono';font-weight:800;font-size:110px;line-height:1;color:var(--tq)}
.meter .m-val span{font-family:'PMono';font-size:30px;color:var(--mute);margin-left:12px}
.m-bars{margin-top:24px}
.m-bars>div{display:grid;grid-template-columns:170px 1fr 130px;align-items:center;gap:16px;font-size:22px;color:var(--mute);margin-top:12px}
.mb{height:30px;background:rgba(255,255,255,.08);border-radius:8px;overflow:hidden}
.mb i{display:block;height:100%;background:rgba(255,255,255,.45);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.mb.you i{background:var(--tq)}
.m-bars em{font-style:normal;font-family:'PMono';font-weight:700;color:#fff;text-align:right}
.m-save{margin-top:24px;font-family:'PDisp';font-weight:800;font-size:40px;min-height:50px}
.m-save .good{color:var(--tq)}
.m-split{margin-top:10px;font-size:22px;line-height:1.5;color:var(--mute)}
#cfDone{grid-column:2;justify-self:start;margin-top:10px}

/* ---------- water ---------- */
.gw{display:grid;grid-template-columns:1fr 420px;gap:60px;margin-top:40px}
.taps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.tap{position:relative;height:300px;border-radius:30px;background:var(--ink2);border:2px solid var(--line);overflow:hidden}
.tap svg.faucet{position:absolute;left:50%;top:30px;width:150px;margin-left:-75px;color:#cfd3d8}
.tap .drops{position:absolute;left:50%;top:150px;width:20px;margin-left:12px}
.tap .drop{position:absolute;left:0;width:20px;height:28px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--c-water);opacity:0}
.tap.leak{border-color:var(--c-water);box-shadow:inset 0 0 0 2px rgba(79,195,255,.4)}
.tap.leak .drop{animation:drip 1s infinite}
.tap.leak .drop:nth-child(2){animation-delay:.33s}.tap.leak .drop:nth-child(3){animation-delay:.66s}
@keyframes drip{0%{transform:translateY(0);opacity:1}100%{transform:translateY(110px);opacity:0}}
.tap .st{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-family:'PMono';font-weight:700;font-size:22px;color:var(--mute)}
.tap.leak .st{color:var(--c-water)}
.tap.fixed{border-color:var(--tq)} .tap.fixed .st{color:var(--tq)}
.tank-wrap{display:flex;flex-direction:column;gap:22px}
.tank{position:relative;height:440px;border-radius:30px;border:3px solid var(--c-water);overflow:hidden}
.tank-fill{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(79,195,255,.55),rgba(79,195,255,.85));transition:height .25s linear}
.tank-lbl{position:absolute;left:0;right:0;top:40%;text-align:center;font-family:'PMono';font-size:34px}
.tank-lbl b{font-weight:800;font-size:76px}

/* ---------- energy ---------- */
.ge{display:grid;grid-template-columns:1fr 360px;gap:50px;margin-top:40px}
.room{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,330px);gap:22px}
.dev{position:relative;border-radius:30px;background:var(--ink2);border:2px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:20px}
.dev .d-ic{font-size:86px;line-height:1;filter:grayscale(1) brightness(.7)}
.dev b{font-size:26px;font-weight:700;line-height:1.2}
.dev small{font-family:'PMono';font-size:20px;color:var(--mute)}
.dev.waste{border-color:var(--c-energy);box-shadow:0 0 40px rgba(255,210,63,.25) inset}
.dev.waste .d-ic{filter:none}
.dev.waste:after{content:"ON";position:absolute;top:18px;right:20px;font-family:'PMono';font-weight:800;font-size:20px;color:var(--ink);background:var(--c-energy);padding:4px 10px;border-radius:8px}
.dev.done{border-color:var(--tq)} .dev.done:after{content:"OFF ✓";position:absolute;top:18px;right:20px;font-family:'PMono';font-weight:800;font-size:20px;color:var(--ink);background:var(--tq);padding:4px 10px;border-radius:8px}

/* ---------- waste ---------- */
.gx{display:grid;grid-template-columns:520px 1fr;gap:60px;margin-top:40px;align-items:start}
.item-zone{position:relative;height:640px;border-radius:36px;background:var(--ink2);border:2px dashed var(--line);display:flex;align-items:center;justify-content:center}
.item{width:300px;height:300px;border-radius:40px;background:#fff;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;box-shadow:0 20px 50px rgba(0,0,0,.4);touch-action:none;z-index:4}
.item .i-ic{font-size:120px;line-height:1}
.item b{font-size:28px;font-weight:700;text-align:center;padding:0 16px;line-height:1.15}
.item.drag{cursor:grabbing;transform:scale(1.05)}
.item-cnt{position:absolute;top:24px;left:30px;font-family:'PMono';font-size:26px;color:var(--mute)} .item-cnt b{color:#fff}
.fb{position:absolute;bottom:30px;left:20px;right:20px;text-align:center;font-family:'PDisp';font-weight:800;font-size:36px;min-height:44px}
.bins{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.bin{height:640px;border-radius:36px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;padding:40px 24px;position:relative;transition:transform .15s}
.bin .lid{position:absolute;top:36px;left:40px;right:40px;height:34px;border-radius:14px;background:rgba(0,0,0,.25)}
.bin b{font-family:'PDisp';font-weight:800;font-size:44px;color:var(--ink)}
.bin small{font-size:22px;line-height:1.35;color:rgba(28,28,30,.75);margin-top:10px}
.b-rec{background:#4FC3FF}.b-org{background:#B6F36A}.b-gen{background:#B9BCC2}
.bin.hot{transform:scale(1.04);box-shadow:0 0 0 8px rgba(255,255,255,.6)}

/* ---------- about ---------- */
#about{display:grid;grid-template-columns:1fr 760px;gap:70px;padding-top:140px}
#about h1{font-size:70px;line-height:1.02;margin-top:14px}
.ab-lead{font-size:30px;line-height:1.4;color:var(--mute);margin-top:22px}
.ab-four{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.ab-four div{background:var(--ink2);border:2px solid var(--line);border-radius:24px;padding:22px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ab-four i{width:58px;height:58px;color:var(--tq)} .ab-four i svg{width:100%;height:100%}
.ab-four b{font-size:28px}
.ab-four div:nth-child(2) i{color:var(--c-water)}.ab-four div:nth-child(3) i{color:var(--c-energy)}.ab-four div:nth-child(4) i{color:var(--c-waste)}
.ab-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.ab-steps div{border-top:4px solid var(--tq);padding-top:16px}
.ab-steps span{font-family:'PMono';font-weight:800;font-size:22px;color:var(--tq)}
.ab-steps b{display:block;font-family:'PDisp';font-weight:800;font-size:36px;margin-top:6px}
.ab-steps small{display:block;font-size:22px;line-height:1.4;color:var(--mute);margin-top:8px}
.ab-box{background:var(--ink2);border:2px solid var(--line);border-radius:30px;padding:30px 34px;margin-bottom:22px}
.ab-box ul{list-style:none;margin-top:12px}
.ab-box li{font-size:26px;line-height:1.35;padding:10px 0 10px 40px;position:relative}
.ab-box li:before{content:"";position:absolute;left:0;top:20px;width:18px;height:18px;border-radius:50%;background:var(--tq)}
.ab-cta{display:flex;align-items:center;gap:28px;background:var(--tq);color:var(--ink);border-radius:30px;padding:26px 30px}
.ab-cta img{width:150px;height:150px;background:#fff;border-radius:16px;padding:6px}
.ab-cta b{display:block;font-family:'PDisp';font-weight:800;font-size:38px;line-height:1.05}
.ab-cta span{display:block;font-family:'PMono';font-weight:800;font-size:28px;margin-top:8px}
.ab-cta small{display:block;font-size:20px;margin-top:8px;line-height:1.35}

/* ---------- modal ---------- */
.modal{position:absolute;inset:0;background:rgba(10,10,12,.94);z-index:40;display:none;align-items:flex-start;justify-content:center;gap:90px;padding-top:0}
.modal.on{display:flex}
.rc-wrap{width:600px;height:1080px;overflow:hidden;padding-top:0}
.rc-wrap .receipt{width:600px}
.rc-side{width:640px;margin-top:300px}
.rc-side h2{font-size:72px;line-height:1.02}
.rc-side p{font-size:30px;line-height:1.4;color:var(--mute);margin:22px 0 34px}
.rc-qr{display:flex;align-items:center;gap:24px;margin-bottom:40px}
.rc-qr img{width:170px;height:170px;background:#fff;border-radius:18px;padding:8px}
.rc-qr span{font-family:'PMono';font-weight:800;font-size:34px;color:var(--tq)}

/* ================= v4: açık tema (giriş, ana ekran, kafe) ================= */
#stage{transition:background .45s}
#stage.light{background:#F3F2EC;color:var(--ink);--ink2:#fff;--line:rgba(28,28,30,.14);--mute:rgba(28,28,30,.68)}
.l-light{display:none}
#stage.light .l-light{display:block}#stage.light .l-dark{display:none}
#stage.light #bar{background:#F3F2EC}
#stage.light .pts{background:#fff}#stage.light .pts b{color:var(--ink);background:var(--tq);padding:0 8px;border-radius:6px}
#stage.light .lang,#stage.light .home{background:#fff}
#stage.light .kick{color:#06705F}
#stage.light .tile,#stage.light .pr,#stage.light .neg{box-shadow:0 14px 40px rgba(28,28,30,.07)}
#stage.light .tile .t-ic{color:var(--ink)}
#stage.light .t-carbon .t-ic{background:var(--c-carbon)}#stage.light .t-water .t-ic{background:var(--c-water)}
#stage.light .t-energy .t-ic{background:var(--c-energy)}#stage.light .t-waste .t-ic{background:var(--c-waste)}
#stage.light .tile .t-tag{color:rgba(28,28,30,.6)}
#stage.light .about-btn{background:#fff;border-color:var(--ink)}

/* giriş ekranı: Ground Zero rozeti */
.att-gz{display:inline-flex;align-items:center;gap:16px;margin-top:36px;background:#fff;border:2px solid rgba(28,28,30,.14);border-radius:999px;padding:8px 28px 8px 8px;font-size:25px}
.att-gz i,.pilot i,.gz-strip i{flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--ink)}
.att-gz i{width:54px;height:54px}.att-gz i img{height:38px}
.att-gz b{font-family:'PDisp';font-weight:800}

/* ana ekran: Zero + kafe düğmesi */
.home-zero{position:absolute;right:80px;top:112px;display:flex;align-items:center;gap:26px;pointer-events:none}
.home-zero .z-body{position:static;width:128px}
.z-bubble.side{position:relative;left:auto;right:auto;top:auto;padding:16px 26px;font-size:26px;white-space:nowrap}
.z-bubble.side:after{left:auto;right:-11px;bottom:auto;top:50%;transform:translateY(-50%) rotate(-45deg)}
.pilot{background:var(--ink);color:#fff;text-align:left;position:relative;transition:transform .15s}
.pilot:active,.cafe-cta:active{transform:scale(.98)}
.pilot i{width:104px;height:104px;background:rgba(255,255,255,.08)}.pilot img{height:76px}
.pilot small{color:var(--tq)}
.pilot b{font-size:32px;line-height:1.1}
.pilot span{color:rgba(255,255,255,.7)}
.p-go{flex:none;margin-left:auto;width:72px;height:72px;border-radius:50%;background:var(--tq);color:var(--ink)!important;display:flex!important;align-items:center;justify-content:center;font-size:38px!important;font-weight:700;margin-top:0!important}

/* ---------- kafe sayfası ---------- */
#cafe{display:grid;grid-template-columns:1fr 820px;gap:64px;padding-top:132px}
#cafe h1{font-size:78px;line-height:1.04;margin-top:14px}
.cafe-lead{font-size:29px;line-height:1.4;color:var(--mute);margin-top:22px}
.neg{display:grid;grid-template-columns:1fr 350px;gap:34px;align-items:center;background:#fff;border:2px solid var(--line);border-radius:30px;padding:30px 34px;margin-top:30px}
.neg-txt b{font-family:'PDisp';font-weight:800;font-size:32px}
.neg-txt p{font-size:23px;line-height:1.4;color:var(--mute);margin-top:10px}
.neg-vis>div{margin-top:12px}.neg-vis>div:first-child{margin-top:0}
.neg-vis span{font-family:'PMono';font-weight:700;font-size:18px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.nb{height:28px;border-radius:8px;background:rgba(28,28,30,.07);margin-top:6px;overflow:hidden}
.nb i{display:block;height:100%;border-radius:8px}
.nb .e{width:62%;background:rgba(28,28,30,.4)}.nb .o{width:100%;background:var(--tq)}
.neg-net{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.neg-net em{font-style:normal;font-family:'PDisp';font-weight:800;font-size:28px;background:var(--tq);padding:0 10px}
.neg-net small{font-size:17px;color:var(--mute)}
.gz-strip{display:flex;align-items:center;gap:22px;margin-top:26px}
.gz-strip i{width:92px;height:92px}.gz-strip img{height:66px}
.gz-strip b{display:block;font-family:'PDisp';font-weight:800;font-size:30px}
.gz-strip span{display:block;font-size:22px;color:var(--mute);margin-top:2px}
.pr-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:18px}
.pr{background:#fff;border:2px solid var(--line);border-radius:30px;padding:24px 28px;min-height:262px}
.pr i{display:flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:22px;color:var(--ink)}
.pr i svg{width:44px;height:44px}
.p1 i{background:#E7C9A5}.p2 i{background:var(--c-waste)}.p3 i{background:var(--c-water)}.p4 i{background:var(--c-carbon)}
.pr small{display:block;font-family:'PMono';font-weight:700;font-size:18px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:14px}
.pr b{display:block;font-family:'PDisp';font-weight:800;font-size:31px;line-height:1.08;margin-top:6px}
.pr p{font-size:22px;line-height:1.38;color:var(--mute);margin-top:10px}
.cafe-cta{display:flex;align-items:center;gap:26px;width:100%;margin-top:22px;background:var(--ink);color:#fff;border-radius:30px;padding:12px 34px;text-align:left;transition:transform .15s}
.cafe-cta .z-body{position:static;width:96px;color:var(--ink);filter:none}
.cafe-cta b{display:block;font-family:'PDisp';font-weight:800;font-size:36px}
.cafe-cta div span{display:block;font-size:23px;color:rgba(255,255,255,.7);margin-top:4px}