/* OmniScreen — site. OmniMotion ana sitesinin editoryal dili: kağıt zemin, mürekkep, tek turuncu vurgu. */
:root {
    --paper: #f1ede6; --ink: #121110; --soft: #5f5a52; --rule: #d6cfc3; --accent: #ff4f1f; --night: #0d0c0b; --cream: #efe9df; --dim: #9b958b;
    --display: "Bricolage Grotesque", "Inter Tight", system-ui, sans-serif; --serif: "Instrument Serif", Georgia, serif;
    --body: "Inter Tight", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
    --pad: clamp(16px, 4vw, 56px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; } a:hover { color: var(--accent); }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pad { padding-inline: var(--pad); }
.skip { position: absolute; left: -999px; } .skip:focus { left: 16px; top: 16px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 50; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

/* Üst şerit */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: baseline; gap: 28px; padding-block: 22px; transition: padding .3s, background .3s, transform .35s cubic-bezier(.2,.7,.2,1); }
.top.stuck { padding-block: 14px; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.top.hide { transform: translateY(-100%); }
.brand { font: 700 19px/1 var(--display); letter-spacing: -0.03em; text-decoration: none; white-space: nowrap; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); align-self: center; } .brand .mark { height: 15px; width: auto; flex: none; }
.top nav { display: flex; gap: 22px; } .top nav a, .top .lang { text-decoration: none; font-size: 15px; }
.top .lang { color: var(--soft); }
.top .spacer { flex: 1; }
.go { font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 2px solid var(--ink); padding-bottom: 2px; white-space: nowrap; }
.suggest { display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 10px 16px; background: var(--ink); color: var(--paper); font-size: 14px; }
.suggest[hidden] { display: none; } .suggest a { font-weight: 600; } .suggest button { background: none; border: 0; cursor: pointer; padding: 6px; min-width: 32px; }

/* Düğmeler */
.btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; background: var(--ink); color: var(--paper); text-decoration: none; font: 600 16px/1 var(--body); border: 0; border-radius: 2px; cursor: pointer; transition: background .15s; }
.btn:hover { background: var(--accent); color: var(--paper); } .btn span { transition: transform .2s; } .btn:hover span { transform: translateX(4px); }
.btn[disabled] { opacity: .6; cursor: wait; }
.link { font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.mono-note, .num, .kick, .outs, .note, .lb, .tag, .nh, .k { font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.mono-note { margin: 28px 0 0; font-size: 11px; color: var(--soft); text-transform: none; letter-spacing: .02em; }

/* Açılış */
.hero { padding-top: clamp(40px, 6vw, 88px); padding-bottom: 44px; display: grid; grid-template-columns: 1fr minmax(260px, 380px); gap: 32px 48px; align-items: end; }
.hero h1 { margin: 0; font: 650 clamp(60px, 10.5vw, 176px)/.86 var(--display); letter-spacing: -0.055em; will-change: transform; }
.hero h1 em { letter-spacing: -0.02em; }
.hero .side { display: grid; gap: 22px; padding-bottom: 14px; }
.hero .side p { margin: 0; font-size: 19px; color: var(--soft); }
.hero .row { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.outs { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--soft); }
.outs span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: var(--accent); vertical-align: 1px; }

/* Ekranlar (genel) — yazı boyutları ekranı taşıyan sarmalın genişliğine göre (cqw) */
.scr { position: absolute; overflow: hidden; background: var(--night); color: var(--cream); box-shadow: 0 0 1.2cqw #f1ede622; }
.scr .lb { position: relative; font-size: .62cqw; line-height: 1; letter-spacing: .08em; color: var(--dim); }
.scr .lb.ac { color: var(--accent); } .scr .lb.sh { color: var(--cream); text-shadow: 0 1px 8px #000a; }
.kb { animation: kb 14s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes pass { 0% { left: -14%; } 22% { left: 104%; } 100% { left: 104%; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 #ff4f1f99; } 100% { box-shadow: 0 0 0 10px #ff4f1f00; } }
@keyframes dash { to { stroke-dashoffset: -16; } }
@keyframes grow { from { width: 0; } to { width: 100%; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fill { 0%, 100% { width: 48%; } 50% { width: 70%; } }
@keyframes flash { 0% { color: #fff; text-shadow: 0 0 1.4cqw #ff4f1f; } 100% { text-shadow: none; } }

/* Kafe bandı */
.cafe { background: var(--night); color: var(--cream); }
.heroband { position: relative; aspect-ratio: 1440/800; overflow: hidden; }
.wall { position: absolute; inset: -2%; container-type: inline-size; will-change: transform; }
.wall > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fgl { position: absolute; inset: -4%; width: 108%; height: 108%; max-width: none; object-fit: cover; pointer-events: none; will-change: transform; }
.shade-t, .shade-b { position: absolute; left: 0; right: 0; pointer-events: none; }
.shade-t { top: 0; height: 9%; background: linear-gradient(180deg, var(--night), #0d0c0b00); }
.shade-b { bottom: 0; height: 13%; background: linear-gradient(0deg, var(--night), #0d0c0b00); }
.cafe-scr { padding: 1.1cqw; }
.cafe-scr img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.cafe-scr img.top { height: 46%; object-position: 50% 40%; } .cafe-scr img.top.tall { height: 68%; object-position: 50% 50%; }
.cafe-scr .fade { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; background: linear-gradient(180deg, #0d0c0b00, #0d0c0bf2 58%); }
.cafe-scr .topfade { position: absolute; left: 0; right: 0; top: 30%; height: 17%; background: linear-gradient(180deg, #0d0c0b00, var(--night)); }
.cafe-scr .rows { margin-top: .9cqw; } .cafe-scr .rows.bottom { position: absolute; left: 1.1cqw; right: 1.1cqw; bottom: 1cqw; margin: 0; }
.cafe-scr .row { display: flex; justify-content: space-between; gap: .4cqw; padding: .42cqw 0; border-bottom: 1px solid #ffffff14; font-size: .82cqw; }
.cafe-scr .row b { font-weight: 500; } .cafe-scr .row span { color: #cfc9be; font-variant-numeric: tabular-nums; }
.cafe-scr .row.out { opacity: .4; } .cafe-scr .row.out b { text-decoration: line-through; }
.cafe-scr .hero-txt { position: absolute; left: 1.1cqw; right: 1.1cqw; bottom: 2.4cqw; }
.cafe-scr .nm { font: 650 1.7cqw/.92 var(--display); letter-spacing: -.05em; }
.cafe-scr .pr { margin-top: .4cqw; font: italic 400 2.9cqw/1 var(--serif); color: var(--accent); }
.cafe-scr .pr.flash { animation: flash 1s ease-out; }
.cafe-scr .nt { margin-top: .4cqw; font-size: .66cqw; color: var(--dim); }
.cafe-scr .mini-rows { position: absolute; left: 1.1cqw; top: 38%; font: 500 .78cqw/1.5 var(--body); text-shadow: 0 1px 8px #000c; }
.cafe-scr .deal { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: var(--accent); color: var(--ink); padding: 1cqw 1.1cqw; }
.cafe-scr .dt { font: 500 .6cqw/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.cafe-scr .dd { margin-top: .35cqw; font: 650 1.45cqw/.95 var(--display); letter-spacing: -.04em; }
.cafe-scr .nx { margin-top: 1.4cqw; font: 500 .62cqw/1 var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.cafe-scr .q { margin-top: .3cqw; font: 650 2.6cqw/1 var(--display); letter-spacing: -.05em; }
.cafe-scr .ord { margin-top: 1cqw; font: italic 400 1.15cqw/1.1 var(--serif); }
.cafe-scr .clk { position: absolute; left: 1.1cqw; bottom: 1.1cqw; font: 500 .9cqw/1 var(--mono); color: var(--accent); }
.cafe-scr .dot { position: absolute; bottom: 4%; width: .9cqw; height: .9cqw; border-radius: 50%; background: var(--accent); animation: pass 6s linear infinite; }
.car { display: none; }
.bar { display: flex; align-items: center; gap: 28px; padding-block: 16px 20px; flex-wrap: wrap; }
.note { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--dim); letter-spacing: .04em; } .note b { color: var(--cream); font-weight: 500; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s infinite; }
.tabs { display: flex; gap: 22px; flex-wrap: wrap; } .bar .tabs { margin-left: auto; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 4px 0; min-height: 44px; color: var(--dim); font: 500 15px/1 var(--body); cursor: pointer; transition: color .2s, border-color .2s; }
.tabs button:hover { color: var(--cream); } .tabs button[aria-selected="true"] { color: var(--cream); border-color: var(--accent); }
.tabs.light button { color: var(--soft); font-weight: 600; } .tabs.light button:hover, .tabs.light button[aria-selected="true"] { color: var(--ink); }

/* Bölüm başlığı */
.sec { padding-top: clamp(72px, 9vw, 128px); }
.sh { display: grid; grid-template-columns: 1fr minmax(240px, 380px); gap: 24px 48px; align-items: end; border-top: 1px solid var(--ink); padding-top: 18px; margin-bottom: 36px; }
.sh h2 { margin: 0; font: 650 clamp(40px, 6vw, 92px)/.92 var(--display); letter-spacing: -0.045em; }
.sh p { margin: 0; color: var(--soft); }
.c3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .c4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.c3 h3, .c4 h3, .mg-list h3, .steps h3 { margin: 0 0 8px; font: 650 24px/1.1 var(--display); letter-spacing: -.03em; }
.c4 h3 { font-size: 20px; } .c4 > div { border-top: 1px solid var(--rule); padding-top: 16px; }
.c3 p, .c4 p, .mg-list p, .steps p { margin: 0; color: var(--soft); }
.num { display: block; margin-bottom: 14px; font-size: 12px; color: var(--accent); }

/* Kaynak akışı */
.flow-band { background: var(--night); color: var(--cream); padding-top: 56px; padding-bottom: 56px; }
.src-tabs { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 24px; }
.src-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 4px 0; min-height: 44px; text-align: left; color: var(--dim); font: 600 clamp(20px, 2vw, 28px)/1.1 var(--display); letter-spacing: -.02em; cursor: pointer; }
.src-tabs button:hover { color: var(--cream); } .src-tabs button[aria-selected="true"] { color: var(--cream); border-color: var(--accent); }
.src-tabs small { display: block; margin-top: 6px; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: #7d776e; }
.src-tabs button[aria-selected="true"] small { color: var(--accent); }
.after { margin: 0 0 36px; max-width: 46ch; font: 400 clamp(22px, 2.2vw, 32px)/1.2 var(--serif); }
.flow2 { display: grid; grid-template-columns: minmax(260px, 340px) 72px minmax(0, 1fr); align-items: center; }
.node { position: relative; border: 1px solid #ffffff24; background: #161513; color: var(--cream); }
.nh { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #ffffff1a; font-size: 11px; line-height: 1; letter-spacing: .06em; color: var(--dim); }
.nh b { color: var(--cream); font-weight: 500; }
.port { position: absolute; width: 9px; height: 9px; background: #161513; border: 1.5px solid #ffffff55; border-radius: 50%; }
.port.hot { background: var(--accent); border-color: var(--accent); animation: ping 1.4s infinite; }
.port.r { right: -5px; top: 50%; margin-top: -4.5px; } .port.up { top: -5px; left: 50%; margin-left: -4.5px; } .port.bottom { bottom: -5px; left: 50%; margin-left: -4.5px; }
.wire, .vwire { width: 100%; height: 100%; overflow: visible; } .wire { min-height: 200px; }
.wire path, .vwire path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 10; animation: dash 1s linear infinite; }
.rows-t { width: 100%; border-collapse: collapse; font-size: 14px; }
.rows-t td { padding: 10px 14px; border-bottom: 1px solid #ffffff0d; color: var(--dim); } .rows-t td + td { text-align: right; color: var(--cream); } .rows-t td.hot { color: var(--accent); }
.json { margin: 0; padding: 14px 16px; font: 500 13px/1.65 var(--mono); color: #cfc9bf; white-space: pre; overflow-x: auto; }
.json.sm { font-size: .95cqw; padding: 8px 12px; }
.ai { padding: 14px 16px; display: grid; gap: 12px; } .ai p { margin: 0; font: 400 20px/1.25 var(--serif); }
.ai .call { font: 500 12px/1.6 var(--mono); color: var(--dim); border-left: 2px solid var(--accent); padding-left: 10px; } .ai .call span { color: #e9d8b4; }
.edit { display: grid; gap: 8px; padding: 14px 16px 16px; border-top: 1px solid #ffffff12; }
.edit > span { font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--accent); } .edit b { font-weight: 500; }
.edit input { height: 52px; border: 0; border-bottom: 1px solid #ffffff33; background: transparent; color: var(--cream); font: 500 28px/1 var(--display); letter-spacing: -.02em; padding: 0; outline: none; width: 100%; }
.edit input:focus { border-color: var(--accent); }
.out-h { display: flex; justify-content: space-between; margin-bottom: 10px; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--dim); } .out-h b { color: var(--cream); font-weight: 500; }
[data-flowout] { container-type: inline-size; }
.mini { position: relative; overflow: hidden; background: var(--night); }
.mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.out-cafe { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mini.menu { aspect-ratio: 4/5; } .mini.menu img { opacity: .55; } .mini.menu.hot { background: var(--accent); color: var(--ink); } .mini.menu.hot img { opacity: .3; }
.mini .lb { position: absolute; left: 10%; top: 9%; font: 500 1.5cqw/1 var(--mono); opacity: .75; }
.mini .bt { position: absolute; left: 10%; right: 8%; bottom: 10%; }
.mini .tt { font: 650 2.6cqw/.95 var(--display); letter-spacing: -.04em; } .mini .vv { margin-top: 2px; font: italic 400 3.6cqw/1 var(--serif); color: var(--accent); } .mini.hot .vv { color: var(--ink); }
.out-retail { display: grid; grid-template-columns: .3fr 1.8fr .3fr; gap: 6px; align-items: end; }
.mini.totem { aspect-ratio: 9/16; background: #d9b48a; } .mini .band { position: absolute; left: 0; right: 0; bottom: 0; padding: 4% 10%; background: var(--accent); color: var(--ink); font: italic 400 3cqw/1 var(--serif); }
.mini.wide { aspect-ratio: 16/9; } .mini.light { background: var(--cream); color: var(--ink); }
.mini .tg { position: absolute; left: 6%; top: 10%; font: 500 1.5cqw/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--soft); }
.mini .hd { position: absolute; left: 6%; bottom: 10%; font: 650 5cqw/.9 var(--display); letter-spacing: -.05em; } .mini .hd em { color: var(--accent); }
.mini.led { aspect-ratio: 2560/1080; } .mini.led .tg { color: var(--dim); } .mini.led .hd { color: var(--cream); font-size: 5.4cqw; } .mini.led .hd em { font-size: 1.15em; }
.orbit { position: absolute; right: -8%; top: -50%; width: 50%; aspect-ratio: 1; border: 1px solid #2a2724; border-radius: 50%; animation: spin 24s linear infinite; }
.orbit i { position: absolute; left: 46%; top: -4%; width: 8%; aspect-ratio: 1; border-radius: 50%; background: var(--accent); }

.studio { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--ink); padding-top: 18px; margin-top: 64px; }
.studio p { margin: 0; max-width: 40ch; font: 400 clamp(22px, 2.4vw, 32px)/1.2 var(--serif); } .studio b { font: 650 1em/1 var(--display); letter-spacing: -.03em; }

/* Mekânlar — masaüstünde ekrana sabitlenir, kaydırdıkça mekân değişir */
.venues { background: var(--night); color: var(--cream); }
.venues.pin { height: 300vh; } .venues.pin .vsticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.vgrid { width: 100%; display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); }
.vlist { padding-block: 40px; display: flex; flex-direction: column; gap: 6px; justify-content: center; border-right: 1px solid #ffffff14; }
.vlist button { position: relative; background: none; border: 0; border-top: 1px solid #ffffff1a; padding: 18px 0 16px; text-align: left; cursor: pointer; opacity: .45; transition: opacity .4s; }
.vlist button[aria-pressed="true"] { opacity: 1; }
.vn { display: block; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: #7d776e; } [aria-pressed="true"] > .vn { color: var(--accent); }
.vt { display: block; margin-top: 10px; font: 650 clamp(26px, 2.4vw, 36px)/1 var(--display); letter-spacing: -.04em; }
.vd { display: none; margin-top: 10px; color: #cfc9be; font-size: 15px; line-height: 1.45; } [aria-pressed="true"] > .vd { display: block; }
.vbar { position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--accent); }
[aria-pressed="true"] > .vbar { width: var(--p, 0%); } .venues:not(.pin) [aria-pressed="true"] > .vbar { animation: grow 6s linear forwards; } .venues.held [aria-pressed="true"] > .vbar { animation: none; width: 100%; }
.vlist .vplay { align-self: flex-start; opacity: 1; margin-top: 14px; min-height: 44px; padding: 0 14px; border: 1px solid #ffffff33; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.venues.pin .vplay { display: none; }
.vdm { display: none; }
.vstage { position: relative; aspect-ratio: 1440/800; overflow: hidden; container-type: inline-size; }
.venue { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity .9s ease, transform 1.4s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.venue.on { opacity: 1; transform: none; pointer-events: auto; }
.vwrap { position: absolute; left: 0; width: 100%; top: 50%; aspect-ratio: 1440/800; container-type: inline-size; transform: translateY(calc(-50% + var(--py, 0px))); }
.vwrap > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.vwrap .vwire { position: absolute; inset: 0; }
.vnode { position: absolute; width: 23%; transform: translateY(var(--cy, 0px)); }
.cr-list { padding: 6px 0; font-size: 1cqw; } .cr { display: flex; justify-content: space-between; gap: 10px; padding: 7px 14px; border-bottom: 1px solid #ffffff0d; } .cr span { color: var(--dim); } .cr b { font-weight: 500; } .cr b.hot { color: var(--accent); }
.sel { position: absolute; outline: 1px solid var(--accent); outline-offset: 3px; pointer-events: none; }
.sel .tag { position: absolute; left: -4px; top: -30px; padding: 4px 7px; background: var(--accent); color: var(--ink); font-size: 10px; white-space: nowrap; }
.sel .h { position: absolute; width: 7px; height: 7px; background: var(--cream); border: 1px solid var(--accent); }
.sel .tl { left: -7px; top: -7px; } .sel .tr { right: -7px; top: -7px; } .sel .bl { left: -7px; bottom: -7px; } .sel .br { right: -7px; bottom: -7px; }
.scr.light { background: var(--cream); color: var(--ink); }
.scr > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r-tag { position: absolute; left: 5%; top: 9%; font: 500 1cqw/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--soft); }
.r-head { position: absolute; left: 5%; bottom: 11%; font: 650 6.4cqw/.86 var(--display); letter-spacing: -.055em; } .r-head em { color: var(--accent); }
.scr.totem { background: #d9b48a; } .scr.totem .band { position: absolute; left: 0; right: 0; bottom: 0; padding: 6% 12%; background: var(--accent); color: var(--ink); font: italic 400 2cqw/1 var(--serif); }
.scr.bank .loan { position: absolute; right: 0; top: 0; bottom: 0; width: 42%; overflow: hidden; }
.scr.bank .loan img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 28% 50%; }
.loan-fade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--night) 0%, #0d0c0b00 30%); }
.loan-txt { position: absolute; left: 12%; right: 8%; bottom: 10%; color: #fff; text-shadow: 0 1px 14px #000c; }
.lt { font: 500 .85cqw/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; } .lh { margin-top: .5cqw; font: 650 2.2cqw/.95 var(--display); letter-spacing: -.04em; } .ln { margin-top: .5cqw; font-size: .85cqw; }
.scr.bank .fxl { position: absolute; left: 5%; top: 9%; font-size: 1cqw; }
.fx { position: absolute; left: 5%; right: 48%; bottom: 12%; display: grid; gap: 1.2cqw; }
.fxr { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #ffffff1a; padding-bottom: .6cqw; } .fxr:last-child { border: 0; }
.fxr .k { font: 650 3cqw/1 var(--display); letter-spacing: -.04em; text-transform: none; }
.fxr .v { font: italic 400 3.6cqw/1 var(--serif); transition: color .4s; } .fxr .v small { font-size: .6em; } .fxr .v.up { color: var(--accent); } .fxr .v.down { color: var(--dim); }
.g-lb { position: absolute; left: 6%; top: 12%; font: 500 .9cqw/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.g-v { position: absolute; left: 6%; top: 30%; font: italic 400 6cqw/1 var(--serif); color: var(--accent); }
.g-bar { position: absolute; left: 6%; right: 6%; bottom: 16%; height: 7%; background: #24211e; } .g-bar i { display: block; height: 100%; width: 62%; background: var(--accent); animation: fill 7s ease-in-out infinite; }
.g-cls { position: absolute; left: 6%; bottom: 16%; font: 650 3.4cqw/.9 var(--display); letter-spacing: -.05em; color: var(--cream); } .g-cls em { color: var(--accent); }
.g-left { position: absolute; left: 6%; bottom: 7%; font: 500 .9cqw/1 var(--mono); color: #cfc9be; }

/* Dizin listeleri */
.idx { list-style: none; margin: 36px 0 0; padding: 0; }
.idx li { display: grid; grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 1.6fr) 170px; gap: 20px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.idx li:first-child { border-top: 1px solid var(--rule); }
.idx .n { font: 500 13px/1 var(--mono); color: var(--soft); }
.idx .t { font: 650 clamp(26px, 3.2vw, 44px)/1 var(--display); letter-spacing: -.04em; }
.idx .o { color: var(--soft); } .idx .k { text-align: right; font-size: 12px; color: var(--soft); }

/* MCP */
.say { margin: 0 0 40px; max-width: 24ch; font: 400 clamp(30px, 4.2vw, 64px)/1.08 var(--serif); letter-spacing: -.015em; }
.say b { font: 650 1em/1 var(--display); letter-spacing: -.04em; }
.mcpg { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 56px; align-items: start; }
.kick { display: flex; justify-content: space-between; border-top: 1px solid var(--ink); padding-top: 14px; font-size: 12px; color: var(--soft); }
.clients { list-style: none; margin: 6px 0 0; padding: 0; }
.clients li { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.clients .t { font: 650 clamp(22px, 2.2vw, 30px)/1 var(--display); letter-spacing: -.04em; } .clients .k { font-size: 12px; color: var(--soft); } .clients .o { grid-column: 1 / -1; font-size: 15px; color: var(--soft); }
.code { margin: 12px 0 0; padding: 22px 24px; background: var(--night); color: #e8e2d8; font: 500 14px/1.6 var(--mono); overflow-x: auto; min-height: 190px; }
.facts { margin-top: 48px; } .facts ul { margin: 0; padding: 0; list-style: none; color: var(--soft); } .facts li { padding: 8px 0; border-bottom: 1px solid var(--rule); }

/* Panel */
.mg { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px 48px; align-items: start; }
.shot { margin: 0; background: var(--night); padding: 10px; box-shadow: 0 40px 80px -40px #0007; } .shot img { width: 100%; }
.mg-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); } .mg-list li { padding: 16px 0; border-bottom: 1px solid var(--rule); } .mg-list .num { margin-bottom: 8px; } .mg-list h3 { font-size: 22px; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.steps li { padding-top: 28px; border-top: 2px solid var(--ink); } .steps li:first-child { border-color: var(--accent); }
.big { display: block; margin-bottom: 18px; font: 650 72px/1 var(--display); letter-spacing: -.05em; } .steps li:first-child .big { color: var(--accent); }

/* Fiyatlar */
.period { margin-bottom: 28px; }
.plan { border-top: 1px solid var(--rule); padding-top: 18px; } .plan.rec { border-top: 2px solid var(--accent); padding-top: 17px; }
.badge { margin-left: 6px; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--accent); vertical-align: middle; }
.price { margin: 10px 0 4px; font: 650 52px/1 var(--display); letter-spacing: -.04em; } .price small { font: 500 12px/1 var(--mono); color: var(--soft); letter-spacing: 0; }
.pnote { margin-bottom: 14px; font: 500 11px/1.4 var(--mono); color: var(--soft); }
.pcta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.plan .buy { font-size: 15px; color: var(--soft); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 1px; } .plan .buy:hover { color: var(--ink); border-color: var(--ink); }
.plan ul { margin: 0 0 22px; padding: 0; list-style: none; color: var(--soft); } .plan li { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.faq h3 { font-size: 22px; }

/* Kapanış + form */
.end { padding-top: clamp(100px, 14vw, 180px); padding-bottom: 88px; }
.endg { display: grid; grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); gap: 48px 64px; align-items: end; }
.end h2 { margin: 0 0 28px; font: 650 clamp(52px, 8.4vw, 140px)/.88 var(--display); letter-spacing: -.055em; } .end h2 em { color: var(--accent); letter-spacing: -.02em; }
.end p { margin: 0 0 28px; max-width: 44ch; font-size: 19px; color: var(--soft); }
.form-box { border-top: 2px solid var(--ink); padding-top: 20px; } .form-box h3 { margin: 0 0 18px; font: 650 26px/1 var(--display); letter-spacing: -.03em; }
form[data-lead] { display: grid; gap: 18px; }
form[data-lead] label { display: grid; gap: 6px; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--soft); }
form[data-lead] input, form[data-lead] select, form[data-lead] textarea { width: 100%; height: 48px; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; font: 500 17px var(--body); color: var(--ink); padding: 0; outline: none; text-transform: none; letter-spacing: 0; }
form[data-lead] textarea { height: auto; min-height: 48px; padding-top: 12px; resize: vertical; }
form[data-lead] :focus { border-color: var(--accent); } form[data-lead] .invalid { border-color: #c0392b; }
form[data-lead] .two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
form[data-lead] .hp { position: absolute; left: -9999px; }
.send { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .send > span { font-size: 13px; color: var(--soft); }
.form-ok { margin: 0; font: 400 28px/1.2 var(--serif); } .form-err { margin: 0; color: #c0392b; font-size: 15px; }
footer { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-block: 22px 40px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--soft); }
footer nav { display: flex; gap: 20px; flex-wrap: wrap; } footer a { text-decoration: none; } footer a:hover { color: var(--ink); }

/* Dar ekran */
@media (max-width: 1000px) {
    .top nav { display: none; }
    .hero, .sh, .mcpg, .mg, .endg { grid-template-columns: 1fr; }
    .c3 { grid-template-columns: 1fr; gap: 28px; } .c4 { grid-template-columns: 1fr 1fr; } .steps { grid-template-columns: 1fr; }
    .flow2 { grid-template-columns: 1fr; gap: 20px; } .wire { display: none; }
    .idx li { grid-template-columns: 40px 1fr; } .idx .o, .idx .k { display: none; }
    .vgrid { grid-template-columns: 1fr; }
    .venues.pin { height: auto; } .venues.pin .vsticky { position: static; height: auto; display: block; }
}
@media (max-width: 760px) {
    .heroband { aspect-ratio: 1.38; }
    .wall { inset: auto; left: 50%; top: 50%; width: 130%; height: auto; aspect-ratio: 1440/800; transform: translate(-51%, -50%) !important; }
    .fgl { display: none; }
    .car { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 16px 16px 4px; scrollbar-width: none; }
    .car::-webkit-scrollbar { display: none; }
    .card { position: relative; flex: none; width: 72vw; height: 93vw; overflow: hidden; scroll-snap-align: center; }
    .card-in { position: absolute; left: 0; top: 0; width: 540vw; aspect-ratio: 1440/800; container-type: inline-size; }
    .bar .tabs { margin-left: 0; }
    .c4 { grid-template-columns: 1fr; }
    .vlist { flex-direction: row; flex-wrap: wrap; gap: 0 12px; border-right: 0; padding-block: 16px 4px; }
    .vlist button { flex: 1 1 0; min-width: 0; padding: 12px 0 10px; } .vt { font-size: 17px; margin-top: 6px; letter-spacing: -.02em; }
    [aria-pressed="true"] > .vd { display: none; } .vlist .vplay { display: none; }
    .vdm { display: block; margin: 0; padding-top: 4px; padding-bottom: 16px; color: #cfc9be; font-size: 15px; line-height: 1.45; }
    .vstage { aspect-ratio: 1.38; }
    .vwrap { width: 130%; left: 50%; transform: translate(-51%, -50%) !important; }
    .vnode, .vwrap .vwire { display: none; }
    .out-cafe { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; }
    .sel .tag { font-size: 9px; top: -24px; }
    form[data-lead] .two { grid-template-columns: 1fr; }
    .price { font-size: 44px; }
}

/* ---------- alt sayfalar ---------- */
.hero.sub h1 { font-size: clamp(52px, 8.4vw, 140px); }
.hero.sub { padding-bottom: 56px; }
.idx.links li { display: block; padding: 0; }
.idx.links a { display: grid; grid-template-columns: 56px minmax(0, 1.1fr) minmax(0, 1.6fr) 170px; gap: 20px; align-items: baseline; padding: 22px 0; text-decoration: none; transition: padding .25s; }
.idx.links a:hover { padding-left: 14px; color: inherit; } .idx.links a:hover .t { color: var(--accent); } .idx.links .t { transition: color .2s; }
.more { margin: 28px 0 0; }
.mono-note .link { margin-left: 12px; font-family: var(--body); font-size: 14px; }
.venues.solo { padding: 0; } .venues.solo .vstage { width: 100%; }
.kick-l { display: block; margin-bottom: 10px; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.facts3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; border-top: 1px solid var(--ink); padding-top: 22px; }
.facts3 p { margin: 0; font: 400 clamp(20px, 1.8vw, 26px)/1.25 var(--serif); }
.devs { border-top: 1px solid var(--ink); }
.dev { padding: 36px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px 48px; }
.dev-h { display: grid; gap: 8px; align-content: start; } .dev-h .num { margin: 0; }
.dev-h h2 { margin: 0; font: 650 clamp(30px, 3.4vw, 48px)/1 var(--display); letter-spacing: -.04em; } .dev-h .k { font-size: 12px; color: var(--soft); }
.dev-b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; } .dev-b p { margin: 0; color: var(--soft); }
.dev-b ol { margin: 0; padding-left: 20px; color: var(--soft); } .dev-b li { padding: 3px 0; }
code { font: 500 .88em var(--mono); background: #e4ddd1; padding: 1px 5px; }
.cmp-wrap { overflow-x: auto; margin-top: 16px; }
.cmp { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 16px; }
.cmp th, .cmp td { padding: 14px 12px; border-bottom: 1px solid var(--rule); text-align: center; }
.cmp thead th { font: 650 20px/1.1 var(--display); letter-spacing: -.02em; border-bottom: 1px solid var(--ink); }
.cmp tbody th { text-align: left; font-weight: 500; } .cmp td { color: var(--soft); } .cmp .rec { background: #ff4f1f0d; color: var(--ink); }
.faq.two { grid-template-columns: 1fr 1fr; }
.say.sm { font-size: clamp(24px, 2.6vw, 38px); max-width: 32ch; } .say.sm a { color: var(--accent); }
.sec-items h3 { font-size: 22px; }
.legal { max-width: 760px; padding-top: clamp(40px, 6vw, 88px); padding-bottom: 96px; }
.legal h1 { margin: 0 0 12px; font: 650 clamp(44px, 6vw, 84px)/.95 var(--display); letter-spacing: -.045em; }
.legal h2 { margin: 40px 0 8px; font: 650 24px/1.15 var(--display); letter-spacing: -.02em; }
.legal p { margin: 0; color: var(--soft); } .legal .mono-note { margin-top: 0; }
@media (max-width: 1000px) {
    .idx.links a { grid-template-columns: 40px 1fr; } .facts3, .dev, .dev-b, .faq.two { grid-template-columns: 1fr; }
}

/* ---------- kiosk demosu ---------- */
.kiosk-band { background: var(--night); color: var(--cream); padding: 56px var(--pad); }
.kiosk-wrap { display: grid; justify-items: center; gap: 16px; }
.kiosk { position: relative; width: min(380px, 78vw); aspect-ratio: 9/16; background: #12100e; border: 14px solid #050404; border-radius: 18px; box-shadow: 0 40px 100px -30px #ff4f1f40, 0 0 0 1px #2a2724; overflow: hidden; cursor: pointer; container-type: inline-size; user-select: none; }
.k-screen { position: absolute; inset: 0; padding: 9cqw 8cqw; opacity: 0; transform: translateY(4%); transition: opacity .45s ease, transform .6s cubic-bezier(.16,1,.3,1); pointer-events: none; }
.k-screen.on { opacity: 1; transform: none; pointer-events: auto; }
.k-attract { display: grid; place-content: center; text-align: center; gap: 4cqw; }
.k-ring { justify-self: center; width: 34cqw; aspect-ratio: 1; border-radius: 50%; border: 1px solid #ff4f1f; position: relative; animation: kpulse 2.4s ease-out infinite; }
.k-ring::after { content: ''; position: absolute; inset: 34%; border-radius: 50%; background: var(--accent); }
@keyframes kpulse { 0% { box-shadow: 0 0 0 0 #ff4f1f66; } 100% { box-shadow: 0 0 0 14cqw #ff4f1f00; } }
.k-title { font: 650 11cqw/.95 var(--display); letter-spacing: -.04em; }
.k-sub, .k-head { font: 500 3.4cqw/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
.k-head { margin: 6cqw 0 5cqw; }
.k-menu { display: grid; gap: 3cqw; }
.k-menu button { display: flex; gap: 4cqw; align-items: baseline; text-align: left; padding: 5cqw 4cqw; background: #1c1916; border: 1px solid #2a2724; color: var(--cream); font: 650 7cqw/1 var(--display); letter-spacing: -.03em; cursor: pointer; }
.k-menu button span { font: 500 3cqw/1 var(--mono); color: var(--accent); }
.k-menu button:hover, .k-menu button:active { border-color: var(--accent); }
.k-back { position: absolute; top: 7cqw; left: 8cqw; background: none; border: 0; color: var(--accent); font: 500 3.6cqw/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: 2cqw 0; cursor: pointer; }
.k-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4cqw; }
.k-list li { display: grid; grid-template-columns: 18cqw 1fr; grid-template-rows: auto auto; column-gap: 4cqw; align-items: center; }
.k-list .k-thumb { grid-row: span 2; aspect-ratio: 1; border-radius: 3px; background: radial-gradient(circle at 35% 35%, #ffb27a, #ff4f1f 45%, #3a1a0c); }
.k-list .k1 { background: radial-gradient(circle at 40% 30%, #e9d8b4, #9b7d4c 50%, #2a2216); } .k-list .k2 { background: linear-gradient(135deg, #d9cbb0, #8a7a5c); }
.k-list b { font: 650 6cqw/1 var(--display); letter-spacing: -.03em; } .k-list span { font-size: 3.6cqw; color: var(--dim); }
.k-time { list-style: none; margin: 0; padding: 0 0 0 5cqw; border-left: 2px solid var(--accent); display: grid; gap: 6cqw; }
.k-time li { display: grid; gap: 1cqw; position: relative; } .k-time li::before { content: ''; position: absolute; left: -6.6cqw; top: 1.4cqw; width: 3cqw; height: 3cqw; border-radius: 50%; background: var(--accent); }
.k-time b { font: italic 400 9cqw/1 var(--serif); color: var(--accent); } .k-time span { font-size: 4cqw; }
.k-map { position: relative; } .k-map svg { width: 100%; } .k-map rect { fill: #1c1916; stroke: #3a3631; } .k-map .you { fill: var(--accent); animation: pulse 1.4s infinite; }
.k-map .pin { position: absolute; font: 500 3.2cqw/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; } .k-map .p0 { left: 10%; top: 16%; } .k-map .p1 { left: 54%; top: 16%; } .k-map .p2 { left: 10%; top: 56%; }
.k-idle { position: absolute; left: 0; right: 0; bottom: 0; padding: 4cqw 8cqw; background: var(--accent); color: var(--ink); font: 500 3.6cqw/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.k-label { margin: 0; display: flex; gap: 10px; align-items: center; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--dim); }
.beyond { display: flex; gap: 22px; flex-wrap: wrap; }

/* yaşayan ekranın dört özelliği + "sizin mekânınız" */
.alive .c4 > div { border-top: 2px solid var(--ink); }
.alive .c4 > div:first-child { border-color: var(--accent); }
.alive h3 { font-size: 22px; }
.ex { display: block; margin-top: 12px; font: 500 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.kick.lives { margin-top: 48px; }
.idx.links .yours .t { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.idx.links .yours .n { color: var(--accent); }

/* güvenlik + SSS: solda kısa başlık, sağda sade liste */
.split { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: 32px 64px; align-items: start; border-top: 1px solid var(--ink); padding-top: 22px; }
.split-h { display: grid; gap: 14px; justify-items: start; position: sticky; top: 96px; }
.split-h h2 { margin: 0; font: 650 clamp(34px, 3.6vw, 52px)/.95 var(--display); letter-spacing: -.04em; }
.split-h .kick-l { margin: 0; }
.trust { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.trust li { display: grid; grid-template-columns: 28px minmax(160px, 1fr) 1.4fr; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.trust svg { width: 24px; height: 24px; color: var(--accent); }
.trust b { font: 650 19px/1.15 var(--display); letter-spacing: -.02em; }
.trust span { color: var(--soft); font-size: 15px; }
.qa { border-top: 1px solid var(--rule); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; cursor: pointer; list-style: none; font: 650 19px/1.2 var(--display); letter-spacing: -.02em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { position: relative; width: 14px; height: 14px; flex: none; }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: currentColor; transition: transform .2s; }
.qa summary i::after { transform: rotate(90deg); }
.qa details[open] summary i::after { transform: rotate(0); }
.qa summary:hover { color: var(--accent); }
.qa p { margin: -4px 0 20px; max-width: 62ch; color: var(--soft); }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 24px; } .split-h { position: static; }
  .trust li { grid-template-columns: 24px 1fr; row-gap: 2px; } .trust span { grid-column: 2; font-size: 14px; }
}

/* Omnigate'e özgü: canlı gösterim (büyük ekran + telefonlar), bağlantı modları, ajans bloğu. Taban: base.css (OmniScreen ile ortak dil). */

/* ---------- canlı gösterim bandı ---------- */
.gband { background: var(--night); color: var(--cream); padding-top: 40px; padding-bottom: 36px; }
.g-tabs { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 26px; }
.g-tabs button { background: none; border: 0; padding: 0 0 8px; cursor: pointer; color: #8e887e; font: 650 clamp(20px, 2vw, 26px)/1 var(--display); letter-spacing: -.03em; border-bottom: 2px solid transparent; text-align: left; }
.g-tabs button small { display: block; margin-top: 6px; font: 500 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #6b665e; }
.g-tabs button[aria-selected="true"] { color: var(--cream); border-color: var(--accent); } .g-tabs button[aria-selected="true"] small { color: var(--accent); }



.phone.you { position: relative; margin: 0 auto; box-shadow: 0 30px 60px -20px #000, inset 0 0 0 1.5px #2e2b28, 0 0 0 3px var(--accent); }
.you-l { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); white-space: nowrap; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.g-note { margin: 22px 0 0; font: 500 12px/1.5 var(--mono); letter-spacing: .03em; color: #8e887e; } .g-note b { color: var(--cream); font-weight: 500; }

/* ---------- panel görüntüsü, modlar, ajans ---------- */
.g-shot { margin-top: 48px; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--ink); }
.mode { padding: 28px 32px 32px 0; } .mode.dark { background: var(--night); color: var(--cream); padding: 28px 32px 32px; }
.mode h3 { margin: 0 0 12px; font: 650 clamp(26px, 2.6vw, 38px)/1.02 var(--display); letter-spacing: -.035em; }
.mode p { margin: 0 0 18px; color: var(--soft); max-width: 46ch; } .mode.dark p { color: #a9a196; }
.mode ul { margin: 0; padding: 0; list-style: none; } .mode li { padding: 9px 0; border-bottom: 1px solid var(--rule); } .mode.dark li { border-color: #2a2724; }
.mode li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; background: var(--accent); vertical-align: 2px; }
.ag .code { min-height: 0; } .ag .code .c { color: #8e887e; }

@media (max-width: 1000px) {
    .modes { grid-template-columns: 1fr; } .mode { padding-right: 0; }
}
@media (max-width: 760px) {
    .g-tabs { gap: 18px; }
}
.phone [data-you] { height: 100%; }
.gband { overflow: hidden; }

/* ---------- gerçek mekân fotoğrafları + içlerine oturan canlı ekranlar (scenes.mjs) ---------- */
.scene { position: relative; overflow: hidden; background: var(--night); }
.scene .frame { position: relative; width: 100%; aspect-ratio: 1440/800; }
.scene.par .frame { transform: translate3d(var(--mx, 0px), var(--py, 0px), 0) scale(1.07); will-change: transform; }
.scene .bg, .scene .fg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene .fg { pointer-events: none; }
.scene .ov { position: absolute; left: 0; top: 0; width: 1440px; height: 800px; transform-origin: 0 0; transform: scale(var(--k, 1)); pointer-events: none; }
.sx { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; container-type: inline-size; background: #0e0d0c; color: var(--cream); pointer-events: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.sx::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, #ffffff12 0%, #ffffff00 38%), radial-gradient(120% 90% at 50% 0%, #ffffff0a, #ffffff00 60%); }
.frame:not([style]) .ov { visibility: hidden; }

/* canlı ekran yazı dili (cqw = ekranın kendi genişliği) */
.r-led { position: absolute; inset: 0; padding: 6cqw; display: grid; align-content: center; gap: 4cqw; }
.r-k { font: 500 2.4cqw/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.r-led h4 { margin: 0; font: 650 6cqw/1.02 var(--display); letter-spacing: -.04em; color: var(--cream); }
.r-sub { margin: 1.4cqw 0 0; font: 500 2cqw/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #8e887e; }
.r-join { display: grid; justify-items: center; gap: 4cqw; text-align: center; font: 500 7cqw/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #8e887e; }
.r-join .qrbox { width: 74%; aspect-ratio: 1; background: #fff; padding: 5cqw; border-radius: 4cqw; } .r-join .qrbox svg { display: block; width: 100%; height: 100%; }
.r-join b { font: 650 12cqw/1 var(--display); letter-spacing: .06em; color: var(--cream); }
.r-side { padding: 10cqw 8cqw; }
.r-count { justify-items: center; text-align: center; gap: 3cqw; }
.r-count b { font: 650 30cqw/.9 var(--display); letter-spacing: -.05em; color: var(--cream); font-variant-numeric: tabular-nums; }
.r-count span { font: 500 7cqw/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #8e887e; }
.r-count .pulse { width: 5cqw; height: 5cqw; }
.r-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6cqw; }
.r-bars li { display: grid; grid-template-columns: 16cqw 1fr 7cqw; gap: 2cqw; align-items: center; font: 500 2.6cqw/1 var(--body); color: #cfc8bc; }
.r-bars .b { height: 4.4cqw; background: #211f1c; } .r-bars .b i { display: block; height: 100%; background: #4a453e; transition: width .5s cubic-bezier(.2,.7,.2,1); }
.r-bars .lead .b i { background: var(--accent); } .r-bars .lead .l { color: var(--cream); }
.r-bars .v { text-align: right; font: 600 2.8cqw/1 var(--mono); color: var(--cream); }

/* lansman: soru solda, çubuklar ortada, QR sağda */
.r-launch { grid-template-columns: 1fr 1.1fr 15cqw; align-items: center; gap: 4cqw; padding: 5cqw 5cqw; }
.r-launch h4 { font-size: 4.6cqw; }
.r-launch .r-join { gap: 1.2cqw; font-size: 1.3cqw; } .r-launch .r-join .qrbox { width: 100%; padding: 1cqw; border-radius: .8cqw; } .r-launch .r-join b { font-size: 2.2cqw; }
/* bayi: sıralama */
.r-board { padding: 4cqw 7cqw; gap: 2.4cqw; }
.r-board ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2cqw; }
.r-board li { display: grid; grid-template-columns: 5cqw 1fr auto; gap: 2cqw; align-items: baseline; padding-bottom: 1cqw; border-bottom: 1px solid #ffffff14; font: 600 6cqw/1 var(--body); color: #cfc8bc; transition: transform .4s; }
.r-board .p { font: 500 4.4cqw/1 var(--mono); color: #8e887e; } .r-board b { font: 600 6cqw/1 var(--mono); color: var(--cream); }
.r-board .r-k { font-size: 3.6cqw; }
.r-board .lead { color: var(--cream); } .r-board .lead .p, .r-board .lead b { color: var(--accent); }
.r-led.r-side .r-join { font-size: 4.4cqw; gap: 3cqw; } .scene .r-led.r-side .r-join b { font-size: 9cqw; }
[data-room="dealer"] .r-side, [data-room="conference"] .r-side { grid-template-columns: auto; padding: 4cqw; }
[data-room="dealer"] .r-side .r-join, [data-room="conference"] .r-side .r-join { grid-template-columns: 40% 1fr; grid-template-rows: auto auto; text-align: left; justify-items: start; align-items: center; column-gap: 6cqw; row-gap: 2cqw; }
[data-room="dealer"] .r-side .qrbox, [data-room="conference"] .r-side .qrbox { width: 100%; grid-row: span 2; padding: 2.4cqw; border-radius: 2cqw; }
[data-room="dealer"] .r-side .r-join span, [data-room="conference"] .r-side .r-join span { align-self: end; font-size: 5.4cqw; }
[data-room="dealer"] .r-side .r-join b, [data-room="conference"] .r-side .r-join b { align-self: start; font-size: 10cqw; }
/* konferans: kelime bulutu */
.r-cloud { padding: 3cqw 5cqw; gap: 1.6cqw; }
.r-cloud h4 { font-size: 4.4cqw; }
.r-cloud .cl { display: flex; flex-wrap: wrap; gap: .4cqw 2.4cqw; align-items: baseline; font: 650 3.2cqw/1.05 var(--display); letter-spacing: -.03em; color: #a9a196; }
.r-cloud .cl span { transition: font-size .5s; } .r-cloud .cl .lead { color: var(--accent); }
/* aktivasyon totemleri */
.r-totem { align-content: start; padding: 12cqw 7cqw; gap: 6cqw; }
.r-totem h4 { font-size: 13cqw; }
.r-totem .r-k { font-size: 5.4cqw; }
.r-totem .sw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3cqw; height: 120cqw; align-items: end; margin-top: 4cqw; }
.r-totem .sw div { display: grid; grid-template-rows: 1fr auto auto; height: 100%; align-items: end; justify-items: center; gap: 3cqw; }
.r-totem .sw i { display: block; width: 100%; border-radius: 3cqw 3cqw 0 0; opacity: .55; transition: height .5s cubic-bezier(.2,.7,.2,1); }
.r-totem .sw .lead i { opacity: 1; }
.r-totem .sw b { font: 600 6.4cqw/1 var(--mono); } .r-totem .sw span { font: 600 5.4cqw/1 var(--body); color: #cfc8bc; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.r-totem2 { background: var(--accent); color: var(--ink); align-content: center; padding: 10cqw; gap: 8cqw; }
.r-totem2 .r-join { color: var(--ink); font-size: 7cqw; } .r-totem2 .r-join b { color: var(--ink); } .r-totem2 .r-join .qrbox { width: 86%; }
.r-totem2 p { margin: 0; text-align: center; font: italic 400 10cqw/1.05 var(--serif); }
/* festival */
.r-team { justify-items: center; text-align: center; gap: 3cqw; }
.r-team b { font: 650 22cqw/.9 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.r-team span { font: 600 7cqw/1 var(--body); } .r-team em { font: 700 9cqw/1 var(--display); font-style: normal; padding: 2cqw 6cqw; border-radius: 99px; color: #fff; }
.r-team.t0 em { background: var(--accent); } .r-team.t1 em { background: #3d7bff; }
.r-team.t0 b { color: #ff8a63; } .r-team.t1 b { color: #86a9ff; }
.r-race { padding: 6cqw 7cqw; gap: 6cqw; }
.r-race h4 { font-size: 6.4cqw; text-align: center; }
.r-race .lane .track { position: relative; display: block; height: 9cqw; border-bottom: 2px dashed #3a3632; }
.r-race .g-car { position: absolute; bottom: 1cqw; width: 11cqw; height: 5.4cqw; margin-left: -11cqw; border-radius: 2.2cqw 4cqw 1cqw 1cqw; transition: left .6s cubic-bezier(.2,.7,.2,1); }
.r-race .t0 .g-car { background: var(--accent); } .r-race .t1 .g-car { background: #3d7bff; }
/* internetsiz: iki kod */
.r-two { grid-template-columns: 1fr 1fr; gap: 5cqw; padding: 6cqw 7cqw; }
.r-two > div { position: relative; display: grid; justify-items: center; gap: 2.4cqw; text-align: center; }
.r-two .n { position: absolute; left: 0; top: 0; width: 6cqw; height: 6cqw; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; font: 650 3.6cqw/1 var(--display); }
.r-two .qrbox { width: 64%; aspect-ratio: 1; background: #fff; padding: 2cqw; border-radius: 1.6cqw; } .r-two .qrbox svg { display: block; width: 100%; height: 100%; }
.r-two b { font: 650 4.4cqw/1 var(--display); letter-spacing: -.03em; } .r-two small { font: 500 2.6cqw/1 var(--mono); letter-spacing: .08em; color: #8e887e; text-transform: uppercase; }

/* ---------- açılış bandı: lansman fotoğrafı, LED'de canlı gösterim, eldeki telefon senin ---------- */
.gband { padding: 0; }
.g-top { display: flex; justify-content: space-between; align-items: end; gap: 12px 32px; flex-wrap: wrap; padding-top: 30px; padding-bottom: 18px; }
.g-top .g-tabs { margin: 0; } .g-top .g-note { margin: 0 0 10px; }
.sx-phone { border-radius: 10px; }
.g-you { position: absolute; right: calc(1440px - 1078px); top: 512px; font: 500 15px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cream); background: var(--accent); padding: 8px 10px; white-space: nowrap; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-8px); } }
.g-mob { display: none; }

/* ---------- uygulama yok: eldeki telefonda katılma ---------- */
.handband { position: relative; background: var(--night); color: var(--cream); overflow: hidden; }
.hb-txt { position: absolute; right: 0; top: 0; bottom: 0; width: min(48%, 660px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.hb-txt h2 { margin: 0; font: 650 clamp(44px, 5.6vw, 92px)/.9 var(--display); letter-spacing: -.05em; } .hb-txt h2 em { color: var(--accent); }
.hb-txt p { margin: 0; max-width: 42ch; color: #cfc9be; font-size: 18px; }
.hb-txt ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; max-width: 420px; }
.hb-txt li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid #ffffff1a; color: #8e887e; transition: color .4s; }
.hb-txt li span { font: 500 12px/1 var(--mono); color: #6b665e; } .hb-txt li.on { color: var(--cream); } .hb-txt li.on span { color: var(--accent); }
.handband .scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, #0d0c0be6 0%, #0d0c0b99 36%, #0d0c0b00 58%); pointer-events: none; }
.hp-scr { position: absolute; inset: 0; background: #f4f1ec; color: #161412; }
.hp-step { position: absolute; inset: 0; padding: 82px 24px 28px; display: flex; flex-direction: column; gap: 14px; opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .6s cubic-bezier(.2,.7,.2,1); }
.hp-step.on { opacity: 1; transform: none; }
.hp-k { font: 500 15px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #8e887e; }
.hp-step h5 { margin: 0; font: 650 36px/1.02 var(--display); letter-spacing: -.035em; }
.hp-step p { margin: 0; font-size: 20px; color: #5f5a52; }
.hp-cam { background: #0d0c0b; color: #fff; align-items: center; justify-content: center; gap: 28px; }
.hp-view { position: relative; width: 210px; aspect-ratio: 1; padding: 16px; }
.hp-view .qrbox { background: #fff; padding: 10px; border-radius: 6px; width: 100%; height: 100%; transform: rotate(-4deg); } .hp-view .qrbox svg { display: block; width: 100%; height: 100%; }
.hp-view::before { content: ""; position: absolute; inset: 0; border: 4px solid #ffd60a; border-radius: 16px; clip-path: polygon(0 0, 30% 0, 30% 4px, 70% 4px, 70% 0, 100% 0, 100% 30%, calc(100% - 4px) 30%, calc(100% - 4px) 70%, 100% 70%, 100% 100%, 70% 100%, 70% calc(100% - 4px), 30% calc(100% - 4px), 30% 100%, 0 100%, 0 70%, 4px 70%, 4px 30%, 0 30%); }
.hp-scan { position: absolute; left: 10px; right: 10px; height: 3px; top: 50%; background: #ffd60a; box-shadow: 0 0 12px #ffd60a; animation: scan 1.6s ease-in-out infinite alternate; }
@keyframes scan { from { top: 14%; } to { top: 86%; } }
.hp-pill { background: #ffd60a; color: #111; font: 600 18px/1 var(--body); padding: 14px 18px; border-radius: 99px; white-space: nowrap; }
.hp-pulse { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); animation: ping 1.4s infinite; }
.hp-opt { display: block; border: 2.5px solid #d6cfc3; border-radius: 14px; background: #fff; padding: 20px 18px; font: 600 24px/1 var(--body); }
.hp-opt.on { border-color: var(--accent); background: #fff1eb; box-shadow: inset 7px 0 0 var(--accent); }
.hp-ok { margin-top: auto !important; text-align: center; font: 500 16px/1.3 var(--mono) !important; }

/* ---------- mekânlar (OmniScreen düzeni) ---------- */
.venues.pin { height: 380vh; }
.venue .scene { position: absolute; inset: 0; background: none; }
.vstage { align-self: center; }
.venue .scene .frame { position: absolute; left: 0; width: 100%; top: 50%; translate: 0 -50%; }

/* ---------- internetsiz arena ---------- */
.arena { margin: 48px 0 0; }
.arena figcaption { margin-top: 14px; font: 500 13px/1.5 var(--mono); letter-spacing: .02em; color: var(--soft); }

@media (max-width: 1000px) {
    .hb-txt { position: relative; width: auto; padding-top: 48px; padding-bottom: 28px; }
    .handband .scene::after { display: none; }
}
@media (max-width: 760px) {
    .g-top { padding-top: 22px; } .g-note { font-size: 11px; }
    .hero-scene .frame { width: 150%; margin-left: -25%; }
    .g-you { display: none; }
    .g-mob { display: block; padding: 28px 16px 36px; }
    .handband .frame { width: 160%; margin-left: -8%; }
    .arena .frame { width: 140%; }
    #uses .vlist { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 0 18px; padding-right: 16px; }
    #uses .vlist button { flex: 0 0 auto; max-width: 150px; } #uses .vlist .vn { display: none; }
    #uses .vstage { aspect-ratio: 1440/800; }
}
.touched .g-you { display: none; }

/* ---------- açılış etkinliğinin kimliği: KORA · lansman gecesi (LED, yan ekranlar, telefon) ---------- */
.gband { --k0: #090a22; --k1: #17124a; --k2: #2a1d78; --kc: #5ef2d6; --kv: #7b5cff; --kp: #ff6ad5; --kw: #f4f2ff; }
.scene .ovm { position: absolute; inset: 0; -webkit-mask-size: 1440px 800px; mask-size: 1440px 800px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.scene .lt { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.k-bg { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(60% 95% at 88% -5%, #7b5cff66, #7b5cff00 62%), radial-gradient(55% 90% at -5% 105%, #5ef2d640, #5ef2d600 60%), linear-gradient(160deg, #15104a 0%, #090a22 62%); }
.k-bg::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(#ffffff0a 1px, transparent 1px), linear-gradient(90deg, #ffffff0a 1px, transparent 1px); background-size: 4cqw 4cqw; -webkit-mask-image: radial-gradient(80% 80% at 70% 30%, #000, transparent); mask-image: radial-gradient(80% 80% at 70% 30%, #000, transparent); }
.k-bg::after { content: ""; position: absolute; width: 60cqw; height: 60cqw; left: 40%; top: -30cqw; border-radius: 50%; background: radial-gradient(circle, #ff6ad52e, #ff6ad500 65%); animation: kdrift 14s ease-in-out infinite alternate; }
@keyframes kdrift { from { transform: translate(-30%, 0); } to { transform: translate(20%, 20%); } }
.k-mark { display: inline-flex; align-items: center; gap: .9em; }
.k-mark::before { content: ""; width: .62em; height: .62em; transform: rotate(45deg); background: linear-gradient(135deg, var(--kc), var(--kv)); box-shadow: 0 0 .8em #5ef2d680; }
.k-mark b { font: 800 1em/1 var(--display); letter-spacing: .16em; }
.k-mark i { font: 500 .5em/1 var(--mono); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: #ffffff99; }
.k-live { display: inline-flex; align-items: center; gap: .7em; padding: .55em 1.1em; border-radius: 99px; background: #ffffff12; box-shadow: inset 0 0 0 1px #ffffff26; font: 600 1em/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--kw); }
.k-live i { width: .62em; height: .62em; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 .8em #ff4d6d; animation: pulse 1.4s infinite; }
.k-live b { font: 700 1.35em/1 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* LED */
.k-scr { position: absolute; inset: 0; padding: 2.6cqw 3.6cqw 2.2cqw; display: grid; grid-template-rows: auto 1fr auto; color: var(--kw); }
.k-top { display: flex; justify-content: space-between; align-items: center; }
.k-scr .k-mark { font-size: 2.1cqw; } .k-scr .k-live { font-size: 1.1cqw; }
.k-main { display: grid; grid-template-columns: 35cqw 1fr; gap: 4.4cqw; align-items: center; }
.k-kick { display: block; font: 600 1.15cqw/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--kc); }
.k-kick em { font-style: normal; color: #ffffff59; margin-left: 1em; }
.k-q h4 { margin: 1.4cqw 0 1.6cqw; font: 700 4.5cqw/.98 var(--display); letter-spacing: -.045em; color: #fff; text-wrap: balance; }
.k-hint { margin: 0; display: inline-flex; align-items: center; gap: .8em; font: 500 1.35cqw/1 var(--body); color: #ffffffb3; }
.k-hint::before { content: ""; width: 1.1em; height: 1.7em; border-radius: .25em; box-shadow: inset 0 0 0 .14em var(--kc); }
.k-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.15cqw; }
.k-opts li { display: grid; grid-template-columns: 1fr 7.6cqw; gap: 1.6cqw; align-items: center; }
.k-t { position: relative; display: block; height: 4.7cqw; border-radius: 1.3cqw; background: #ffffff0c; box-shadow: inset 0 0 0 1px #ffffff17; }
.k-t > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: linear-gradient(90deg, #7b5cff8c, #7b5cffc4); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.lead .k-t > i { background: linear-gradient(90deg, var(--kv), var(--kc)); box-shadow: 0 0 2.6cqw #5ef2d659, inset 0 0 0 1px #ffffff40; }
.k-l { position: relative; display: flex; align-items: center; gap: 1.2cqw; height: 100%; padding-left: 1.1cqw; font: 650 1.85cqw/1 var(--body); color: #fff; text-shadow: 0 1px 6px #0006; }
.k-l b { display: grid; place-items: center; width: 2.6cqw; height: 2.6cqw; border-radius: .7cqw; background: #ffffff21; font: 700 1.2cqw/1 var(--mono); text-shadow: none; }
.lead .k-l b { background: #fff; color: var(--k1); }
.mine .k-l::after { content: "●"; color: var(--kp); font-size: .7em; text-shadow: 0 0 .6em var(--kp); }
.k-v { text-align: right; font: 700 3.1cqw/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #ffffffd9; }
.k-v small { font-size: .45em; margin-left: .1em; opacity: .6; } .lead .k-v { color: var(--kc); text-shadow: 0 0 1.4cqw #5ef2d680; }
.k-foot { display: flex; justify-content: space-between; padding-top: 1.3cqw; border-top: 1px solid #ffffff17; font: 500 1.05cqw/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #ffffff73; }
.k-foot b { color: var(--kc); font-weight: 600; }
.k-lanes { display: grid; gap: 2.4cqw; }
.k-lane { display: grid; grid-template-columns: 9cqw 1fr 7cqw; gap: 1.6cqw; align-items: center; }
.k-lane .k-l { padding: 0; font-size: 2.2cqw; }
.k-lane .k-t { height: 6.4cqw; border-radius: 3.2cqw; }
.k-lane .k-t > i { min-width: 6.4cqw; }
.k-lane.t0 .k-t > i { background: linear-gradient(90deg, #ff3d6e66, #ff5a4f); box-shadow: 0 0 2.6cqw #ff4d5f66; } .k-lane.t0 .k-l { color: #ffb0b8; }
.k-lane.t1 .k-t > i { background: linear-gradient(90deg, #3d6bff66, #4f8bff); box-shadow: 0 0 2.6cqw #4f8bff66; } .k-lane.t1 .k-l { color: #b3c8ff; }
.k-car { position: absolute; right: .9cqw; top: 50%; width: 4.4cqw; height: 4.4cqw; margin-top: -2.2cqw; border-radius: 50%; background: #fff; box-shadow: 0 0 2cqw #fff; }
.k-fin { position: absolute; right: 0; top: 0; bottom: 0; width: 1.4cqw; border-radius: 0 3.2cqw 3.2cqw 0; background: repeating-conic-gradient(#ffffff59 0 25%, transparent 0 50%) 0 0 / .7cqw .7cqw; }
.k-cloud { display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; gap: .4cqw 2.6cqw; font: 700 2.5cqw/1.02 var(--display); letter-spacing: -.035em; color: #ffffff80; }
.k-cloud span { transition: font-size .6s cubic-bezier(.2,.8,.2,1); }
.k-cloud .w0 { background: linear-gradient(90deg, var(--kc), #b9a8ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 1.2cqw #5ef2d64d); }
.k-cloud .w1 { color: #fff; } .k-cloud .w2 { color: #b9a8ff; }
.k-cloud .mine { text-decoration: underline; text-decoration-color: var(--kp); text-decoration-thickness: .1em; text-underline-offset: .15em; }

/* yan ekranlar (dikey) */
.k-join, .k-count { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--kw); }
.k-join { padding: 11cqw 9cqw 10cqw; gap: 4.4cqw; }
.k-join .k-mark { font-size: 8cqw; }
.k-join h5 { margin: 0; font: 700 12.5cqw/.95 var(--display); letter-spacing: -.04em; color: #fff; }
.k-join .qrbox { width: 80%; aspect-ratio: 1; background: #fff; padding: 5cqw; border-radius: 7cqw; box-shadow: 0 0 0 2.2cqw #ffffff17, 0 0 10cqw #5ef2d633; }
.k-join .qrbox svg { display: block; width: 100%; height: 100%; }
.k-code { font: 800 15cqw/1 var(--display); letter-spacing: .06em; background: linear-gradient(90deg, var(--kc), #b9a8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.k-url { margin-top: -2cqw; font: 500 5.4cqw/1 var(--mono); color: #ffffffb3; }
.k-na { margin-top: auto; font: 600 4.6cqw/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--kc); }
.k-count { padding: 13cqw 10cqw 11cqw; gap: 4cqw; }
.k-count .k-live { font-size: 5cqw; }
.k-count > b { margin-top: 6cqw; font: 800 31cqw/.9 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff, #c9bfff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.k-lb { font: 600 5.6cqw/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #ffffffb3; }
.k-spark { margin-top: auto; display: flex; align-items: flex-end; gap: 2cqw; width: 100%; height: 36cqw; }
.k-spark i { flex: 1; height: var(--h); border-radius: 1.6cqw 1.6cqw .4cqw .4cqw; background: linear-gradient(180deg, var(--kc), var(--kv)); transform-origin: bottom; animation: ksp 2.2s ease-in-out infinite alternate; animation-delay: var(--d); }
.k-spark i:last-child { box-shadow: 0 0 4cqw #5ef2d680; }
@keyframes ksp { from { transform: scaleY(.72); } to { transform: scaleY(1); } }
.k-lb2 { font: 500 4.4cqw/1.2 var(--mono); color: #ffffff80; }

/* telefon — gerçek uygulama: durum çubuğu, etkinlik başlığı, büyük dokunma alanları (cqw = telefon ekranı genişliği) */
.phone { position: absolute; width: 228px; height: 470px; border-radius: 36px; background: #050505; padding: 10px; box-shadow: 0 30px 60px -20px #000, inset 0 0 0 1.5px #2e2b28; }
.phone .ph-top { position: absolute; top: 14px; left: 50%; width: 70px; height: 20px; margin-left: -35px; background: #050505; border-radius: 12px; z-index: 2; }
.ph-scr.k-ph { height: 100%; border-radius: 27px; overflow: hidden; container-type: inline-size; display: flex; flex-direction: column; background: linear-gradient(170deg, #1b1552 0%, #2a1d78 36cqw, #f5f4fb 36cqw); color: #121027; font-family: var(--body); }
.k-sb { display: flex; justify-content: space-between; align-items: center; height: 13cqw; padding: 2cqw 9cqw 0 10cqw; color: #fff; }
.k-sb b { font: 650 5.2cqw/1 var(--body); }
.k-sb span { display: flex; align-items: flex-end; gap: .9cqw; height: 4cqw; } .k-sb span i { width: 1.4cqw; background: #fff; border-radius: .4cqw; }
.k-sb span i:nth-child(1) { height: 35%; } .k-sb span i:nth-child(2) { height: 55%; } .k-sb span i:nth-child(3) { height: 78%; } .k-sb span i:nth-child(4) { height: 100%; }
.k-ph-h { display: flex; justify-content: space-between; align-items: center; height: 21cqw; padding: 0 9cqw 4cqw 7cqw; color: #fff; }
.k-ph-h .k-mark { font-size: 6.2cqw; display: grid; grid-template-columns: auto auto; column-gap: .9em; row-gap: .45em; }
.k-ph-h .k-mark::before { grid-row: span 2; align-self: center; }
.k-ph-h .k-mark i { font-size: .5em; letter-spacing: .1em; color: #ffffff8c; }
.k-ph-h .k-live { font-size: 3.4cqw; }
.k-ph-b { flex: 1; min-height: 0; margin-top: -4cqw; padding: 7cqw 6cqw 6cqw; border-radius: 7cqw 7cqw 0 0; background: #f5f4fb; display: flex; flex-direction: column; gap: 3.6cqw; }
.k-ph .k-kick { font-size: 3.8cqw; color: #6a4ff0; }
.k-ph .pq { margin: 0 0 1cqw; font: 700 10.4cqw/1.02 var(--display); letter-spacing: -.035em; color: #121027; text-wrap: balance; }
.k-ph .opts { display: grid; gap: 3.2cqw; }
.k-ph .opt { display: flex; align-items: center; gap: 3.4cqw; width: 100%; min-height: 19.5cqw; padding: 0 4cqw; border: 0; border-radius: 5.4cqw; background: #fff; box-shadow: inset 0 0 0 .5cqw #e4e1f2, 0 1.5cqw 3cqw #1b155210; font: 650 7cqw/1 var(--body); color: #121027; text-align: left; cursor: pointer; transition: background .2s, box-shadow .2s, transform .1s; }
.k-ph .opt:active { transform: scale(.98); }
.k-ph .opt b { flex: none; display: grid; place-items: center; width: 10cqw; height: 10cqw; border-radius: 3cqw; background: #efedf9; color: #4b3fb0; font: 700 4.2cqw/1 var(--mono); }
.k-ph .opt span { flex: 1; }
.k-ph .opt i { flex: none; display: grid; place-items: center; width: 6.4cqw; height: 6.4cqw; border-radius: 50%; box-shadow: inset 0 0 0 .55cqw #d6d1ee; }
.k-ph .opt.on { background: linear-gradient(120deg, #7b5cff, #5636ec); color: #fff; box-shadow: 0 3cqw 6cqw #5636ec4d; }
.k-ph .opt.on b { background: #ffffff2e; color: #fff; }
.k-ph .opt.on i { background: #fff; box-shadow: none; } .k-ph .opt.on i::after { content: "✓"; color: #5636ec; font: 800 4.2cqw/1 var(--body); }
.k-ph .opt.team.t0 b { background: linear-gradient(135deg, #ff4d5f, #ff8a5c); } .k-ph .opt.team.t1 b { background: linear-gradient(135deg, #3d6bff, #6fa0ff); }
.k-ph .ok { margin: auto 0 0; padding: 3.8cqw; border-radius: 4.4cqw; background: #ecebf6; text-align: center; font: 600 4.2cqw/1.3 var(--mono); color: #6d6890; }
.k-ph .ok.sent { background: #dcfaf2; color: #0b7a62; } .k-ph .ok.sent::before { content: "✓ "; font-weight: 700; }
.k-ph .tap { display: grid; place-items: center; margin: auto; width: 74cqw; aspect-ratio: 1; border: 0; border-radius: 50%; color: #fff; font: 800 11cqw/1 var(--display); letter-spacing: .04em; cursor: pointer; box-shadow: 0 0 0 3.4cqw #fff, 0 0 0 4cqw #e4e1f2, 0 6cqw 14cqw #1b155240; transition: transform .07s; }
.k-ph .tap.t0 { background: radial-gradient(circle at 34% 28%, #ffa3a9, #ff4d5f 42%, #c8213f); } .k-ph .tap.t1 { background: radial-gradient(circle at 34% 28%, #9fbcff, #4f7bff 42%, #2a46c9); }
.k-ph .tap:active, .k-ph .tap.hit { transform: scale(.94); }
.k-ph .chips { display: flex; flex-wrap: wrap; gap: 3cqw; }
.k-ph .chips button, .k-ph .chips span { border: 0; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 .5cqw #e4e1f2; padding: 4.4cqw 5.6cqw; font: 650 6.4cqw/1 var(--body); color: #121027; cursor: pointer; }
.k-ph .chips .on { background: linear-gradient(120deg, #7b5cff, #5636ec); color: #fff; box-shadow: none; }
.k-ph .wform { display: flex; gap: 2cqw; }
.k-ph .wform input { flex: 1; min-width: 0; height: 15cqw; border: 0; border-radius: 4cqw; box-shadow: inset 0 0 0 .5cqw #d6d1ee; background: #fff; padding: 0 4cqw; font: 500 5.6cqw var(--body); color: #121027; }
.k-ph .wform button { height: 15cqw; border: 0; border-radius: 4cqw; background: #121027; color: #fff; padding: 0 4.6cqw; font: 600 5.2cqw var(--body); cursor: pointer; }
.ph-photo { position: absolute; inset: 0; filter: blur(.45px) saturate(1.05); }
.ph-photo .ph-top { display: none; }
.ph-photo .ph-scr.k-ph { border-radius: 0; }
.ph-photo .wform { display: none; }
.ph-photo .k-ph-h .k-live { display: none; }
@media (max-width: 760px) {
    .k-hint, .k-foot { visibility: hidden; }
    .k-scr .k-mark { font-size: 2.8cqw; } .k-scr .k-live { font-size: 1.6cqw; }
    .k-main { grid-template-columns: 34cqw 1fr; } .k-q h4 { font-size: 5cqw; }
    .k-l { font-size: 2.6cqw; } .k-t { height: 5.4cqw; } .k-v { font-size: 3.6cqw; }
}

/* ---------- geliştirici sayfası (/developers) ---------- */
.dv-hero { padding-bottom: 28px; }
.dv-hero h1 { font-size: clamp(52px, 8vw, 132px); }
.dv-toc { display: flex; flex-wrap: wrap; gap: 6px 26px; padding-top: 18px; padding-bottom: 22px; border-top: 1px solid var(--rule); font-weight: 600; font-size: 15px; }
.dv-toc a { text-decoration: none; } .dv-toc span { margin-right: 8px; font: 500 11px/1 var(--mono); color: var(--accent); }
.dv .dev { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); scroll-margin-top: 80px; }
.dev-main { min-width: 0; }
.dv-p { margin: 0 0 18px; max-width: 70ch; color: var(--soft); font-size: 18px; }
.dv-h3 { margin: 30px 0 8px; font: 650 22px/1.15 var(--display); letter-spacing: -.02em; }
.dv-flow { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--ink); }
.dv-flow li { position: relative; padding: 22px 24px 24px; } .dv-flow li + li { border-left: 1px solid var(--ink); }
.dv-flow li:last-child { background: var(--night); color: var(--cream); } .dv-flow li:last-child p { color: #a9a196; }
.dv-flow h3 { margin: 0 0 8px; font: 650 30px/1 var(--display); letter-spacing: -.04em; } .dv-flow p { margin: 0; color: var(--soft); }
.dv-flow i { position: absolute; right: -15px; top: 22px; z-index: 1; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--paper); display: grid; place-items: center; font-style: normal; font-weight: 700; }
.dv-chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); border-top: 1px solid var(--rule); }
.dv-chips li { display: grid; gap: 4px; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); }
.dv-chips code, .dv-tags code, .dv-dl code, .dv-api code { font: 500 13px/1.2 var(--mono); color: var(--ink); }
.dv-chips code { color: var(--accent); font-size: 14px; background: none; padding: 0; } .dv-chips span { color: var(--soft); font-size: 15px; }
.dv-tags { margin: 0; line-height: 2.1; } .dv-tags code { display: inline-block; padding: 3px 9px; border: 1px solid var(--rule); border-radius: 99px; background: #fff8; }
.dv-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.dv-two .code { min-height: 0; }
.dv-list { margin: 0; padding: 0; list-style: none; } .dv-list li { padding: 9px 0; border-bottom: 1px solid var(--rule); color: var(--soft); }
.dv-list li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; background: var(--accent); vertical-align: 2px; }
.dv .code { font-size: 13px; line-height: 1.65; min-height: 0; } .dv .code .c { color: #8e887e; }
.dv-ways { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 0; border: 1px solid var(--ink); }
.dv-ways > div { padding: 22px 22px 24px; } .dv-ways > div + div { border-left: 1px solid var(--ink); }
.dv-ways h3 { margin: 0 0 8px; font: 650 26px/1 var(--display); letter-spacing: -.035em; } .dv-ways p { margin: 0; color: var(--soft); }
.dv-ways .rec { background: var(--night); color: var(--cream); position: relative; } .dv-ways .rec p { color: #cfc9be; }
.dv-ways .rec::after { content: "★"; position: absolute; right: 18px; top: 16px; color: var(--accent); }
.dv-why { margin-top: 18px; padding: 24px 26px; background: #ffffff8c; border: 1px solid var(--rule); }
.dv-why h3 { margin: 0 0 14px; font: 650 22px/1.1 var(--display); letter-spacing: -.02em; }
.dv-why ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.dv-why li { display: grid; gap: 4px; } .dv-why b { font-weight: 650; } .dv-why span { color: var(--soft); font-size: 15px; }
.dv-dl { margin: 0; border-top: 1px solid var(--rule); } .dv-dl div { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.dv-dl dd { margin: 0; color: var(--soft); font-size: 15px; }
.dv-tree { white-space: pre; }
.dv-api { width: 100%; border-collapse: collapse; margin: 4px 0 6px; font-size: 15px; }
.dv-api td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; } .dv-api td:last-child { color: var(--soft); }
.dv-api .m { display: inline-block; min-width: 46px; font-weight: 600; color: var(--accent); }
.dv-badge { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 5px 9px; border: 1px solid var(--accent); border-radius: 99px; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.dv-say { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 10px; }
.dv-say li { padding: 16px 20px; background: var(--night); color: var(--cream); border-radius: 2px; }
.dv-say p { margin: 0 0 6px; font: italic 400 22px/1.25 var(--serif); } .dv-say span { font: 500 12px/1.4 var(--mono); color: var(--accent); }
.dv-end .split-h { max-width: 760px; } .dv-end h2 { margin: 0 0 10px; font: 650 clamp(34px, 4vw, 56px)/1 var(--display); letter-spacing: -.04em; } .dv-end p { color: var(--soft); }
@media (max-width: 1000px) {
    .dv .dev { grid-template-columns: 1fr; }
    .dv-flow, .dv-ways, .dv-two, .dv-why ul { grid-template-columns: 1fr; }
    .dv-flow li + li, .dv-ways > div + div { border-left: 0; border-top: 1px solid var(--ink); }
    .dv-flow i { right: 18px; top: auto; bottom: -15px; transform: rotate(90deg); }
    .dv-api td:last-child { display: none; }
}