/* OrtoSporLab v2 — "Tahmin etme. Ölç." Siyah sahne + beyaz sayfa, tek vurgu logo mavisi. */
/* Düzen fikri: her bölüm tek cümle, tek görsel, tek hareket. Az kelime, büyük yazı. */
:root {
  --night: #08090B;     /* sahne */
  --night-2: #15171B;   /* sahne içi yüzey */
  --paper: #F5F6F7;     /* açık sayfa (hafif soğuk beyaz) */
  --white: #FFFFFF;
  --ink: #0B0C0E;       /* açık sayfada metin */
  --dim: #8A9099;       /* sahnede ikincil metin */
  --steel: #5A616B;     /* açık sayfada ikincil metin */
  --line-d: #262A30;    /* sahnede çizgi */
  --line-l: #DADDE2;    /* açık sayfada çizgi */
  --blue: #004AAD;      /* logo mavisi */
  --volt: #3D86FF;      /* sahnede parlayan mavi (logo mavisinin açığı) */
  color-scheme: dark;

  --f-head: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --f-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --gl: max(20px, env(safe-area-inset-left, 0px));
  --gr: max(20px, env(safe-area-inset-right, 0px));
  --max: 1320px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night); color: var(--white); font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.5; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 90; background: var(--night); }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--f-head); font-weight: 900; text-transform: uppercase; line-height: 1; letter-spacing: -0.005em; text-wrap: balance; padding-top: .08em; }
:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }
[hidden] { display: none !important; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gl); padding-right: var(--gr); }
.mono { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.blue { color: var(--volt); }
.light { background: var(--paper); color: var(--ink); color-scheme: light; }
.light .blue { color: var(--blue); }

/* Dev başlık ölçeği */
.mega { font-size: clamp(3.6rem, 1.6rem + 10vw, 11.5rem); }
.huge { font-size: clamp(2.8rem, 1.4rem + 6.4vw, 7.5rem); }
.big  { font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.6rem); }
.mid  { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem); }
.say  { font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); line-height: 1.35; max-width: 34ch; color: var(--dim); }
.light .say { color: var(--steel); }

/* Düğmeler */
.btn { display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 28px; border-radius: 999px; background: var(--blue); color: #fff; font-weight: 600; font-size: 1.05rem; text-decoration: none; border: 0; transition: transform .25s, background .25s; }
.btn:hover { background: #0A5BD1; transform: translateY(-2px); }
.btn i { font-style: normal; transition: transform .25s; }
.btn:hover i { transform: translateX(4px); }
.btn--line { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; color: inherit; }
.btn--line:hover { background: var(--white); color: var(--night); }
.light .btn--line:hover { background: var(--ink); color: var(--paper); }
.acts { display: flex; flex-wrap: wrap; gap: 12px; }

/* Taslak şeridi */
.draft { background: var(--blue); color: #fff; text-align: center; padding: 6px var(--gr) 6px var(--gl); font-family: var(--f-mono); font-size: .7rem; letter-spacing: .06em; }

/* Başlık çubuğu */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 80; background: rgba(8,9,11,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-d); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 38px; height: auto; }
.brand b { font-family: var(--f-head); font-weight: 900; font-size: 1.45rem; letter-spacing: .01em; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a { text-decoration: none; font-weight: 600; font-size: .95rem; padding: 10px 11px; border-radius: 8px; color: #D7DAE0; }
.nav a:hover { color: #fff; background: var(--night-2); }
.nav a[aria-current="page"] { color: var(--volt); }
.nav .btn { min-height: 44px; padding: 0 20px; margin-left: 8px; color: #fff; font-size: .95rem; }
.tools { display: none; gap: 8px; }
.ib { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-d); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; }
.ib svg { width: 20px; height: 20px; }
.callpop { position: absolute; right: var(--gr); top: 62px; background: var(--night-2); border: 1px solid var(--line-d); border-radius: 16px; padding: 8px; min-width: 250px; display: grid; box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.callpop a { text-decoration: none; padding: 12px 14px; border-radius: 10px; font-weight: 600; }
.callpop a:hover { background: #20232A; }
.callpop small { display: block; font-family: var(--f-mono); color: var(--dim); font-weight: 400; }
@media (max-width: 980px) {
  .tools { display: flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; height: calc(100dvh - 66px - env(safe-area-inset-top, 0px)); background: var(--night); flex-direction: column; align-items: stretch; padding: 8px var(--gr) 32px var(--gl); overflow-y: auto; }
  .nav.open { display: flex; }
  .nav a { font-family: var(--f-head); font-weight: 900; text-transform: uppercase; font-size: 2.6rem; line-height: 1; padding: 14px 0; border-bottom: 1px solid var(--line-d); border-radius: 0; color: #fff; }
  .nav .btn { margin: 22px 0 0; justify-content: center; font-family: var(--f-body); text-transform: none; font-size: 1.05rem; border-radius: 999px; }
}

/* SAHNE (giriş) */
.stage { position: relative; overflow: hidden; border-bottom: 1px solid var(--line-d); }
.stage .wrap { position: relative; z-index: 2; padding-block: clamp(56px, 9vw, 120px) clamp(48px, 7vw, 96px); display: grid; gap: 28px; }
.stage .bg { position: absolute; inset: 0; z-index: 0; background: #111317; }
.stage .bg > span { position: absolute; right: var(--gr); bottom: 14px; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .06em; color: #6B717B; }
.stage .fade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8,9,11,.95) 0%, rgba(8,9,11,.55) 55%, rgba(8,9,11,.25) 100%); }
.kick { display: inline-flex; align-items: center; gap: 10px; color: var(--dim); }
.kick::before { content: ""; width: 28px; height: 2px; background: var(--volt); }

/* Canlı kuvvet eğrisi (sahne süsü değil: platformun çizdiği sol/sağ eğri) */
.trace { position: absolute; z-index: 1; right: -4%; bottom: 8%; width: min(900px, 92%); opacity: .95; pointer-events: none; }
.trace path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.trace .l { stroke: var(--volt); stroke-dasharray: 1400; stroke-dashoffset: 0; }
.trace .r { stroke: #FFFFFF; opacity: .55; stroke-dasharray: 1400; stroke-dashoffset: 0; }
.trace text { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; fill: #8A9099; }
.trace .grid { stroke: #2A2E35; stroke-width: 1; }
@media (max-width: 760px) { .trace { width: 120%; right: -30%; bottom: auto; top: 14%; opacity: .2; } }
@media (prefers-reduced-motion: no-preference) {
  .trace .l { animation: draw 4.8s cubic-bezier(.45,0,.2,1) infinite; }
  .trace .r { animation: draw 4.8s cubic-bezier(.45,0,.2,1) .25s infinite; }
}
@keyframes draw { 0% { stroke-dashoffset: 1400; } 55% { stroke-dashoffset: 0; } 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* Kayan yazı */
.marq { overflow: hidden; border-block: 1px solid var(--line-d); background: var(--night); padding-block: 18px; }
.marq .rail { display: flex; width: max-content; gap: 0; }
.marq .set { display: flex; align-items: center; gap: 34px; padding-right: 34px; font-family: var(--f-head); font-weight: 900; text-transform: uppercase; font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1; white-space: nowrap; }
.marq .set img { width: 34px; height: auto; opacity: .9; }
.marq .set .o { -webkit-text-stroke: 1.5px #fff; color: transparent; }
@media (prefers-reduced-motion: no-preference) { .marq .rail { animation: slide 32s linear infinite; } .marq:hover .rail { animation-play-state: paused; } }
@keyframes slide { to { transform: translateX(-50%); } }
.light .marq, .marq.light { background: var(--paper); border-color: var(--line-l); }
.marq.light .set .o { -webkit-text-stroke-color: var(--ink); }

/* Kapılar: dev satırlar */
.doors { border-bottom: 1px solid var(--line-d); }
.door { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding-block: clamp(28px, 4vw, 52px); border-top: 1px solid var(--line-d); text-decoration: none; overflow: hidden; }
.door:first-child { border-top: 0; }
.door .t { display: grid; gap: 10px; position: relative; z-index: 2; min-width: 0; }
.door h2, .door h3 { font-size: clamp(2.6rem, 1.4rem + 5.6vw, 6.8rem); transition: color .3s, transform .4s cubic-bezier(.2,.7,.2,1); }
.door p { color: var(--dim); font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); max-width: 36ch; }
.door .arr { position: relative; z-index: 2; width: clamp(52px, 6vw, 84px); height: clamp(52px, 6vw, 84px); border-radius: 50%; border: 1.5px solid #3A3F47; display: grid; place-items: center; font-size: 1.6rem; transition: background .3s, border-color .3s, transform .3s; }
.door .pic { position: absolute; z-index: 1; right: 14%; top: 50%; width: clamp(160px, 22vw, 320px); aspect-ratio: 4/5; transform: translateY(-50%) scale(.85) rotate(-2deg); opacity: 0; transition: opacity .35s, transform .45s cubic-bezier(.2,.7,.2,1); border-radius: 12px; background: #262A31; display: flex; align-items: flex-end; }
.door .pic span { font-family: var(--f-mono); font-size: .65rem; color: #9AA0A9; padding: 10px; }
.door:hover h2, .door:hover h3 { color: var(--volt); transform: translateX(10px); }
.door:hover .arr { background: var(--blue); border-color: var(--blue); transform: rotate(-45deg); }
.door:hover .pic { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); }
@media (hover: none), (max-width: 760px) { .door .pic { display: none; } }

/* Soru karoları */
.qs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--line-l); border: 1px solid var(--line-l); border-radius: 18px; overflow: hidden; }
.q { background: var(--paper); padding: clamp(22px, 3vw, 36px); min-height: 220px; display: grid; align-content: space-between; gap: 22px; transition: background .3s; text-decoration: none; }
.q:hover { background: #fff; }
.q h3 { font-size: clamp(1.9rem, 1.3rem + 1.7vw, 2.8rem); line-height: 1.02; padding-top: .06em; }
.q p { color: var(--steel); font-size: 1rem; }
.q .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; }
.q .ic svg { width: 22px; height: 22px; }
@media (max-width: 900px) { .qs { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .qs { grid-template-columns: 1fr; } .q { min-height: 0; } }

/* Kaydırınca yanan üç kelime */
.chant { position: relative; }
.chant .sticky { position: sticky; top: calc(66px + env(safe-area-inset-top, 0px)); min-height: calc(100vh - 66px); display: grid; align-content: center; }
.chant .w { display: block; font-family: var(--f-head); font-weight: 900; text-transform: uppercase; line-height: .98; font-size: clamp(4rem, 1.5rem + 12vw, 13rem); color: #2A2E35; transition: color .35s; padding-top: .1em; }
.chant .w.on { color: #fff; }
.chant .w.on b { color: var(--volt); font-weight: 900; }
.chant .note { margin-top: 26px; color: var(--dim); max-width: 46ch; font-size: 1.15rem; }
.chant { height: 220vh; }
@media (prefers-reduced-motion: reduce) { .chant { height: auto; } .chant .sticky { position: static; min-height: 0; padding-block: 80px; } .chant .w { color: #fff; } }

/* Kanıt bandı */
.proof { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(24px, 4vw, 64px); align-items: start; }
.num { font-family: var(--f-head); font-weight: 900; font-size: clamp(7rem, 4rem + 14vw, 17rem); line-height: .8; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.num + p { margin-top: 12px; font-size: 1.15rem; max-width: 26ch; }
.logos { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: clamp(32px, 5vw, 64px); }
.logo-ph { aspect-ratio: 3/2; border-radius: 14px; border: 1px dashed #B6BBC3; display: grid; place-items: center; text-align: center; padding: 12px; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .04em; color: var(--steel); }
.logo-ph b { display: block; font-family: var(--f-head); font-weight: 900; font-size: 1.5rem; color: var(--ink); letter-spacing: 0; text-transform: uppercase; }
.stage .logo-ph, .dark .logo-ph { border-color: #3A3F47; color: var(--dim); }
.stage .logo-ph b, .dark .logo-ph b { color: #fff; }
@media (max-width: 760px) { .proof { grid-template-columns: 1fr; } .logos { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Video şeridi */
.reel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 30%); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.clip { scroll-snap-align: start; position: relative; aspect-ratio: 9/14; border-radius: 16px; background: #1A1D22; overflow: hidden; display: grid; align-content: end; padding: 16px; }
.clip::before { content: ""; position: absolute; left: 16px; top: 16px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E") center/22px no-repeat; }
.clip .bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--volt); transform-origin: left; transform: scaleX(.35); }
@media (prefers-reduced-motion: no-preference) { .clip .bar { animation: prog 7s linear infinite; } .clip:nth-child(2) .bar { animation-delay: -2.3s; } .clip:nth-child(3) .bar { animation-delay: -4.6s; } }
@keyframes prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.clip b { font-family: var(--f-head); font-weight: 900; text-transform: uppercase; font-size: 2rem; line-height: 1; position: relative; }
.clip small { font-family: var(--f-mono); font-size: .65rem; color: var(--dim); position: relative; margin-top: 6px; }
@media (max-width: 760px) { .reel { grid-auto-columns: 72%; } }

/* Telefon */
.phone { width: min(280px, 72vw); aspect-ratio: 9/19; border-radius: 40px; border: 10px solid #1C1F24; background: #2A2E35; position: relative; box-shadow: 0 30px 60px rgba(0,0,0,.35); display: grid; place-items: end center; padding-bottom: 28px; }
.phone::before { content: ""; position: absolute; top: 10px; left: 50%; width: 32%; height: 22px; margin-left: -16%; border-radius: 12px; background: #1C1F24; }
.phone span { font-family: var(--f-mono); font-size: .65rem; color: #A3A9B2; text-align: center; padding: 0 18px; }

/* Bölümler */
.sec { padding-block: clamp(72px, 11vw, 160px); }
.sec--tight { padding-block: clamp(48px, 7vw, 96px); }
.head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); }
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.ph { position: relative; border-radius: 18px; background: #1E2126; aspect-ratio: 4/5; display: flex; align-items: flex-end; overflow: hidden; }
.light .ph { background: #C9CDD3; }
.ph > span { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .04em; padding: 12px 14px; color: #A3A9B2; }
.light .ph > span { color: #3E444C; }
.ph--wide { aspect-ratio: 16/9; }
.ph--video::after { content: ""; position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(0,74,173,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E") center/32px no-repeat; }

/* HUD halkası (fotoğraf üstü veri işareti) */
.hud { position: absolute; inset: 0; pointer-events: none; }
.hud i { position: absolute; border: 2px solid var(--volt); border-radius: 50%; opacity: .85; }
.hud i:nth-child(1) { width: 46%; aspect-ratio: 1; left: 18%; top: 22%; }
.hud i:nth-child(2) { width: 62%; aspect-ratio: 1; left: 10%; top: 14%; border-width: 1px; border-style: dashed; opacity: .5; }
.hud em { position: absolute; font-style: normal; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .08em; background: rgba(8,9,11,.75); color: #fff; padding: 6px 9px; border-radius: 999px; }
@media (prefers-reduced-motion: no-preference) { .hud i:nth-child(2) { animation: spin 18s linear infinite; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Fayda üçlüsü */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(20px, 3vw, 40px); }
.trio > div { border-top: 2px solid currentColor; padding-top: 18px; display: grid; gap: 10px; }
.trio h3 { font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); }
.trio p { color: var(--dim); }
.light .trio p { color: var(--steel); }
@media (max-width: 760px) { .trio { grid-template-columns: 1fr; } }

/* Etiketler */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1.5px solid currentColor; font-weight: 600; text-decoration: none; transition: background .25s, color .25s; }
a.chip:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Kapanış çağrısı */
.call { text-align: left; }
.call .tel { font-family: var(--f-head); font-weight: 900; font-size: clamp(3rem, 1.6rem + 7vw, 8.5rem); line-height: .9; letter-spacing: .005em; text-decoration: none; display: inline-block; user-select: all; }
.call .tel:hover { color: var(--volt); }

/* Alt bilgi */
.foot { border-top: 1px solid var(--line-d); padding-block: 56px 28px; font-size: .92rem; color: #C9CDD3; }
.foot .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { text-decoration: none; color: #E4E6EA; }
.foot a:hover { color: var(--volt); }
.foot .legal { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line-d); color: #7B818B; font-size: .78rem; display: grid; gap: 6px; max-width: 110ch; }

/* Yükselme (öğeler başından görünür) */
.rv { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.js .rv:not(.in) { transform: translateY(28px); }
@media (prefers-reduced-motion: reduce) { .js .rv:not(.in) { transform: none; } .btn, .door h2, .door h3, .door .pic { transition: none; } }

/* Giriş başlığı satır satır */
.lines > span { display: block; overflow: hidden; padding-top: .14em; margin-top: -.04em; padding-bottom: .06em; margin-bottom: -.06em; }
.lines > span > span { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .lines > span > span { animation: up .9s cubic-bezier(.2,.7,.2,1) both; }
  .lines > span:nth-child(2) > span { animation-delay: .12s; }
  .lines > span:nth-child(3) > span { animation-delay: .24s; }
}
@keyframes up { from { transform: translateY(100%); } to { transform: none; } }

.totop { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-d); background: rgba(8,9,11,.8); color: #fff; font-size: 18px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 60; }
.totop.show { opacity: 1; pointer-events: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ---------- Medya yerleri (şeffaf yer tutucu) ---------- */
[data-m] { --sl: rgba(125,170,255,.75); background: transparent !important; outline: 1.5px dashed var(--sl); outline-offset: -1.5px; }
.light [data-m] { --sl: rgba(0,74,173,.6); }
[data-m]:not(.has)::after { content: attr(data-label); position: absolute; left: 10px; top: 10px; right: auto; z-index: 3; max-width: calc(100% - 20px); font: 500 .66rem/1.35 var(--f-mono); letter-spacing: .03em; text-transform: none; color: #fff; background: rgba(0,74,173,.88); padding: 5px 8px; border-radius: 6px; pointer-events: none; text-align: left; }
.stage .bg[data-m] { inset: 12px; border-radius: 14px; }
.stage .bg[data-m]::after { left: auto; right: 12px; top: auto; bottom: 12px; }
.logo-ph[data-m] { position: relative; border: 0; }
.logo-ph[data-m]::after { left: 8px; top: 8px; font-size: .6rem; }
.clip[data-m] { border: 0; }
.clip[data-m]::before { top: auto; bottom: 64px; }
.phone .scr { position: absolute; inset: 0; border-radius: 30px; overflow: hidden; display: block; }
.phone .scr[data-m]::after { top: 44px; }
.phone { padding: 0; }
.door .pic[data-m]:not(.has) { opacity: 1; transform: translateY(-50%); }
.door .pic[data-m] { overflow: hidden; }
[data-m] > .fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; z-index: 0; }
.logo-ph[data-m] > .fill { object-fit: contain; padding: 14%; background: transparent; }
[data-m].has { outline: 0; }
.stage .bg.has { inset: 0; border-radius: 0; }
.stage .bg.has > .fill { opacity: .55; }

.team2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.team2 p { margin-top: 12px; font-size: .98rem; line-height: 1.4; }
.team2 p span { color: var(--dim); }

/* ---------- Düzenleme modu (yalnız sahibi görür) ---------- */
.draft { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.dbtn { font: 600 .72rem/1 var(--f-mono); letter-spacing: .04em; background: #fff; color: var(--blue); border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.dbtn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
body.editing .draft { position: sticky; top: 0; z-index: 95; background: #0B2E66; padding-block: 8px; }
body.editing .top { top: 40px; }
body.editing [data-e] { outline: 1px dashed rgba(61,134,255,.55); outline-offset: 3px; border-radius: 3px; cursor: text; }
body.editing [data-e]:hover, body.editing [data-e]:focus { outline: 2px solid var(--volt); background: rgba(61,134,255,.08); }
body.editing [data-e].ed { box-shadow: inset 3px 0 0 #FFB020; }
body.editing [data-m] { cursor: pointer; outline: 2px dashed #FFB020; }
body.editing [data-m].has::after { content: "Değiştirmek için tıkla · " attr(data-label); position: absolute; left: 10px; top: 10px; z-index: 3; font: 500 .62rem/1.3 var(--f-mono); color: #111; background: #FFB020; padding: 4px 7px; border-radius: 6px; }
body.editing .door .pic { opacity: 1 !important; }
@media (hover: none), (max-width: 760px) { body.editing .door .pic { display: flex; position: relative; right: auto; top: auto; transform: none !important; width: 140px; grid-column: 1 / -1; } }
.busy::before { content: "Yükleniyor…"; position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; font: 500 .8rem var(--f-mono); }
.epanel { position: fixed; z-index: 120; right: 16px; top: 56px; width: min(380px, calc(100vw - 32px)); max-height: calc(100dvh - 80px); overflow: auto; background: #fff; color: #111; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.35); padding: 16px; font: 400 .9rem/1.4 var(--f-body); }
.epanel h4 { font: 900 1.2rem/1 var(--f-head); text-transform: uppercase; margin-bottom: 8px; }
.epanel ol { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.epanel li { border-top: 1px solid #e3e5e8; padding-top: 8px; display: grid; gap: 4px; }
.epanel li s { color: #8a9099; }
.epanel button { justify-self: start; font: 600 .75rem var(--f-mono); background: #eef1f5; border: 0; border-radius: 6px; padding: 5px 9px; cursor: pointer; color: #111; }
.epanel .x { position: absolute; right: 10px; top: 10px; }
.etoast { position: fixed; z-index: 130; left: 50%; top: 52px; transform: translateX(-50%); background: #111; color: #fff; font: 500 .8rem var(--f-mono); padding: 8px 14px; border-radius: 999px; }
.phone::before { z-index: 2; }
body.editing .stage .fade, body.editing .stage .wrap { pointer-events: none; }
body.editing .stage .wrap [data-e], body.editing .stage .wrap a, body.editing .stage .wrap .acts { pointer-events: auto; }
body.editing .lines > span > span { display: inline-block; }
.door .pic[data-m]:not(.has) { top: 12px; bottom: 12px; height: auto; width: auto; aspect-ratio: 4/5; transform: none; }


/* ---------- Yerleşik medya ---------- */
.fill.baked { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; z-index: 0; }
[data-m].has { outline: 0; }
.has.dbm > .baked { display: none; }
.stage .bg.has { background: #000 !important; overflow: hidden; }
@media (min-width: 761px) {
  .stage .bg.has { inset: auto; right: var(--gr); top: 50%; transform: translateY(-50%); height: min(78%, 640px); aspect-ratio: 9/16; width: auto; border-radius: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
  .stage .bg.has > .fill { opacity: 1; }
  .stage .fade { background: linear-gradient(90deg, rgba(8,9,11,.96) 0%, rgba(8,9,11,.75) 45%, rgba(8,9,11,0) 70%); }
}
@media (max-width: 760px) {
  .stage .bg.has { inset: 0; border-radius: 0; }
  .stage .bg.has > .fill { opacity: .42; }
}
.door .pic.has { background: #000 !important; }
.clip.has > .fill { z-index: 0; }
.clip.has::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.75) 100%); z-index: 0; pointer-events: none; }
.clip.has > b, .clip.has > .bar { z-index: 1; }
.clip.has::before { z-index: 1; }
.logo-ph.has { display: grid; place-items: center; align-content: center; gap: 10px; }
.logo-ph .lg { width: auto; height: clamp(58px, 6.5vw, 96px); background: #fff; border-radius: 14px; padding: 6px; position: static; }
.logo-ph.has > div b { font-size: 1.15rem; }
.monotile { position: absolute; inset: 0; display: grid; place-items: center; font: 900 clamp(4rem, 9vw, 7rem)/1 var(--f-head); color: #fff; background: linear-gradient(160deg, #0A2F6B, #004AAD 60%, #3D86FF); border-radius: inherit; letter-spacing: .02em; }
.appsplash { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; background: radial-gradient(120% 80% at 50% 20%, #0B3A82 0%, #08162E 70%); border-radius: inherit; color: #fff; text-align: center; }
.appsplash b { font: 900 1.9rem/1 var(--f-head); text-transform: uppercase; }
.appsplash small { font: 500 .7rem var(--f-mono); color: #9FB6DA; letter-spacing: .06em; }
.phone .scr.has { background: transparent !important; }

.logo-ph.has { border: 1px solid var(--line-l); }
.stage .logo-ph.has, .dark .logo-ph.has { border-color: #2E333B; }
.ph > .monotile { font: 900 clamp(4rem, 9vw, 7rem)/1 var(--f-head); padding: 0; color: #fff; }
.phone .appsplash { font-family: var(--f-body); padding: 0; color: #fff; }
.phone .appsplash small { font: 500 .7rem var(--f-mono); color: #9FB6DA; }
@media (min-width: 761px) { .stage .bg.has { z-index: 2; } .stage .wrap { position: relative; z-index: 3; } }

/* Sık sorulanlar */
.fqs { display: grid; gap: 0; border-top: 1px solid var(--line-l); max-width: 900px; }
.fq { border-bottom: 1px solid var(--line-l); }
.fq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font: 900 clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem)/1.05 var(--f-head); text-transform: uppercase; padding-top: calc(22px + .06em); }
.fq summary::-webkit-details-marker { display: none; }
.fq summary::after { content: "+"; font: 500 1.6rem/1 var(--f-body); color: var(--blue); flex: none; transition: transform .25s; }
.fq[open] summary::after { transform: rotate(45deg); }
.fq p { padding: 0 0 24px; max-width: 64ch; color: var(--steel); font-size: 1.08rem; line-height: 1.5; }
.fq summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

.nav .btn[aria-current="page"] { color: #fff; background: var(--blue); box-shadow: inset 0 0 0 2px #fff; }

/* Açılışta üçlü kısa video (sıçrama / takım) */
.stage .bg.has:has(.tri) { background: transparent !important; box-shadow: none; overflow: visible; }
.tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; position: absolute; inset: 0; }
.tri .tv { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; background: #000; display: block; }
@media (min-width: 761px) {
  .stage .bg.has:has(.tri) { aspect-ratio: auto; height: min(74%, 560px); width: min(46vw, 640px); }
  .tri .tv { height: 88%; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
  .tri .tv:nth-child(2) { margin-top: 12%; }
  .tri .tv:nth-child(3) { margin-top: 6%; }
}
@media (max-width: 760px) {
  .tri { gap: 4px; }
  .tri .tv { border-radius: 0; opacity: .45; }
}
@media (min-width: 761px) {
  .stage:has(.tri) h1.mega { font-size: clamp(3.4rem, 1.2rem + 6.4vw, 8.6rem); }
  .stage .bg.has:has(.tri) { width: min(40vw, 580px); }
}

/* ===== Ana sayfa v6 ===== */
.hero2{position:relative;min-height:min(100svh,940px);display:flex;align-items:flex-end;overflow:hidden;background:var(--night);padding:120px 0 clamp(40px,7vh,84px)}
.hero2 .mosaic{position:absolute;inset:0;z-index:0}
.hero2 .mosaic .tri{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:3px}
.hero2 .mosaic .tri .tv{width:100%;height:100%;object-fit:cover;border-radius:0;margin:0!important;opacity:1;box-shadow:none;background:#000}
.hero2 .shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(8,9,11,.55) 0%,rgba(8,9,11,.05) 28%,rgba(8,9,11,.25) 55%,rgba(8,9,11,.92) 100%),linear-gradient(90deg,rgba(8,9,11,.55),rgba(8,9,11,0) 60%)}
.hero2-in{position:relative;z-index:2;display:grid;gap:20px;width:100%}
.hero2 h1.mega{font-size:clamp(4rem,1rem + 10vw,11rem);margin:0}
.hero2 .say{max-width:34ch;margin:0;font-size:clamp(1.1rem,.9rem + .6vw,1.45rem)}
.hero2 .acts{display:flex;flex-wrap:wrap;gap:12px}
.hero2 .kick{margin:0;color:var(--dim)}
@media(max-width:760px){.hero2{min-height:92svh;padding-top:96px}.hero2 .mosaic .tri{grid-template-columns:repeat(3,minmax(0,1fr))}.hero2 .mosaic .tri .tv:nth-child(n+4){display:none}}

.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(28px,4vw,48px)}
.card3{position:relative;display:block;border-radius:18px;overflow:hidden;aspect-ratio:4/5;color:var(--white);text-decoration:none;background:var(--night-2);isolation:isolate}
.card3 .ph{position:absolute;inset:0;z-index:0}
.card3 .ph > .fill{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card3:hover .ph > .fill{transform:scale(1.05)}
.card3::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,9,11,0) 35%,rgba(8,9,11,.88) 100%);pointer-events:none}
.card3 .ct{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(18px,2.2vw,28px);display:grid;gap:6px}
.card3 .ct .mono{margin:0;color:var(--volt);font-size:.78rem}
.card3 h3{margin:0;font-family:var(--f-head);font-size:clamp(2rem,1.2rem + 2vw,3.2rem);text-transform:uppercase;line-height:1}
.card3 .ct p:not(.mono){margin:0;color:#D6D9DE;max-width:30ch}
.card3 .arr{position:absolute;right:clamp(18px,2.2vw,28px);bottom:clamp(18px,2.2vw,28px);font-size:1.6rem;transition:transform .3s}
.card3:hover .arr{transform:translateX(6px)}
@media(max-width:760px){.cards3{grid-template-columns:1fr}.card3{aspect-ratio:5/4}}

.tgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.4vw,18px);margin-top:clamp(28px,4vw,48px)}
.tcell{display:grid;gap:12px;color:var(--ink);text-decoration:none}
.tcell .tv2{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#111}
.tcell .tc{display:grid;gap:4px}
.tcell .tc b{font-family:var(--f-head);text-transform:uppercase;font-size:1.5rem;line-height:1}
.tcell .tc span{color:var(--steel);font-size:.95rem;line-height:1.35}
.tcell:hover .tc b{color:var(--blue)}
@media(max-width:1100px){.tgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.steps3{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.steps3 li{display:grid;gap:10px;align-content:start}
.steps3 .ph{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:var(--night-2);margin-bottom:8px}
.steps3 .n{font-family:var(--f-mono);color:var(--volt);font-size:.85rem}
.steps3 h3{margin:0;font-family:var(--f-head);text-transform:uppercase;font-size:clamp(2rem,1.4rem + 1.6vw,3rem)}
.steps3 p{margin:0;color:#C9CDD3;max-width:32ch}
@media(max-width:760px){.steps3{grid-template-columns:1fr}.steps3 .ph{aspect-ratio:4/3}}

.teamwide{margin-bottom:clamp(32px,5vw,64px)}
.teamwide .ph--wide{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#ddd}
.teamwide .cap{margin:12px 0 0;color:var(--steel);font-size:.8rem}
@media(max-width:760px){.teamwide .ph--wide{aspect-ratio:4/3}}
.hero2 .shade{background:linear-gradient(180deg,rgba(8,9,11,.6) 0%,rgba(8,9,11,.15) 22%,rgba(8,9,11,.35) 50%,rgba(8,9,11,.94) 100%),linear-gradient(90deg,rgba(8,9,11,.82) 0%,rgba(8,9,11,.55) 35%,rgba(8,9,11,0) 62%)}
.hero2 .kick{color:#C9CDD3}
.hero2 .say{color:#E4E6EA}
.card3::after{background:linear-gradient(180deg,rgba(8,9,11,0) 25%,rgba(8,9,11,.6) 55%,rgba(8,9,11,.94) 100%)}
.card3 .ct .mono{color:#9DC1FF}
@media(max-width:760px){.hero2 .shade{background:linear-gradient(180deg,rgba(8,9,11,.5) 0%,rgba(8,9,11,.35) 30%,rgba(8,9,11,.8) 55%,rgba(8,9,11,.96) 100%)}.card3::after{background:linear-gradient(180deg,rgba(8,9,11,0) 15%,rgba(8,9,11,.75) 50%,rgba(8,9,11,.95) 100%)}}
.hero2 .tri .tv[src$="r4.mp4"]{object-position:22% 50%}
/* v6.1 · daha az karanlık */
.hero2{background:#1a1d22}
.hero2 .mosaic .tri .tv{filter:brightness(1.08) saturate(1.05)}
.hero2 .shade{background:linear-gradient(90deg,rgba(8,9,11,.62) 0%,rgba(8,9,11,.38) 30%,rgba(8,9,11,0) 55%),linear-gradient(180deg,rgba(8,9,11,.35) 0%,rgba(8,9,11,0) 18%,rgba(8,9,11,0) 60%,rgba(8,9,11,.55) 100%)}
.hero2 h1.mega,.hero2 .say{text-shadow:0 2px 24px rgba(0,0,0,.45)}
.cards3sec{background:var(--white)}
.steps3sec{background:#1B1F26}
@media(max-width:760px){.hero2 .shade{background:linear-gradient(180deg,rgba(8,9,11,.3) 0%,rgba(8,9,11,.1) 30%,rgba(8,9,11,.5) 55%,rgba(8,9,11,.82) 100%)}}
.hero2 .kick{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 18px rgba(0,0,0,.6)}

/* Masaüstü üst çubuk: menü yazıları + telefon + ☰ */
@media (min-width: 981px) {
  .tools { display: flex; margin-left: 6px; }
  .nav .btn { display: none; }
  .nav a { white-space: nowrap; }
  .nav.open { position: absolute; left: 0; right: 0; top: 100%; height: calc(100dvh - 66px); background: var(--night); flex-direction: column; align-items: stretch; padding: 8px var(--gr) 40px var(--gl); overflow-y: auto; z-index: 60; }
  .nav.open a { font-family: var(--f-head); font-weight: 900; text-transform: uppercase; font-size: 2.6rem; line-height: 1; padding: 14px 0; border-bottom: 1px solid var(--line-d); border-radius: 0; color: #fff; }
  .nav.open .btn { display: flex; margin: 22px 0 0; justify-content: center; font-family: var(--f-body); text-transform: none; font-size: 1.05rem; border-radius: 999px; }
}
@media (min-width: 981px) and (max-width: 1180px) { .nav a { padding: 10px 7px; font-size: .88rem; } }
.sec.white{background:var(--white)}
.vclip{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;width:min(100%,380px);margin-inline:auto;background:#111}
.tgrid--3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px;margin-inline:auto;margin-top:clamp(36px,5vw,64px)}
@media(max-width:560px){.tgrid--3{grid-template-columns:repeat(2,minmax(0,1fr))}.tgrid--3 .tcell:last-child{display:none}}
.cliprow{display:grid;gap:clamp(10px,1.4vw,18px);margin-top:clamp(36px,5vw,64px)}
.cliprow--3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:960px;margin-inline:auto}
.cliprow--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cliprow .vc{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#111}
.cliplead{margin:clamp(36px,5vw,64px) 0 0;color:var(--steel);font-size:.8rem}
.cliplead + .cliprow{margin-top:16px}
@media(max-width:760px){.cliprow--4{grid-template-columns:repeat(2,minmax(0,1fr))}.cliprow--3{gap:6px}.cliprow .vc{border-radius:12px}}
.cliprow--8{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.cliprow--8 .vc{border-radius:12px}
@media(max-width:900px){.cliprow--8{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}}
.cliprow--12{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.cliprow--12 .vc{aspect-ratio:4/5;border-radius:12px}
@media(max-width:900px){.cliprow--12{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}}

/* ===== ÖÇB rehberi sayfası · 3B telefonlar ===== */
.dev{--w:250px;position:relative;margin:0;width:var(--w);aspect-ratio:640/1385;border-radius:calc(var(--w)*.16);padding:calc(var(--w)*.032);
  background:linear-gradient(150deg,#4a505a 0%,#16181c 22%,#0b0c0e 60%,#30353d 100%);
  box-shadow:inset 0 0 0 1.5px #5c636e,inset 0 0 0 calc(var(--w)*.012) #0b0c0e,0 50px 90px -30px rgba(10,14,40,.55),0 22px 40px -22px rgba(0,0,0,.6);
  transform-style:preserve-3d;flex:none}
.dev img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:calc(var(--w)*.13);background:#0b0c0e}
.dev::before{content:"";position:absolute;left:50%;top:calc(var(--w)*.058);transform:translateX(-50%);width:30%;height:calc(var(--w)*.085);border-radius:99px;background:#050506;z-index:2}
.dev::after{content:"";position:absolute;right:calc(var(--w)*-.014);top:26%;width:calc(var(--w)*.014);height:12%;border-radius:0 3px 3px 0;background:linear-gradient(#3d424a,#1a1c20)}
.dev.sm{--w:190px}
.t-l{transform:perspective(1600px) rotateY(24deg) rotateX(6deg) rotateZ(-3deg);box-shadow:inset 0 0 0 1.5px #5c636e,inset 0 0 0 calc(var(--w)*.012) #0b0c0e,-6px 4px 0 -1px #23262c,-12px 8px 0 -2px #1a1c20,-30px 60px 90px -30px rgba(10,14,40,.55)}
.t-r{transform:perspective(1600px) rotateY(-24deg) rotateX(6deg) rotateZ(3deg);box-shadow:inset 0 0 0 1.5px #5c636e,inset 0 0 0 calc(var(--w)*.012) #0b0c0e,6px 4px 0 -1px #23262c,12px 8px 0 -2px #1a1c20,30px 60px 90px -30px rgba(10,14,40,.55)}
.t-f{transform:perspective(1400px) rotateX(16deg) rotateZ(-10deg) rotateY(8deg);box-shadow:inset 0 0 0 1.5px #5c636e,inset 0 0 0 calc(var(--w)*.012) #0b0c0e,4px 7px 0 -1px #23262c,8px 13px 0 -2px #1a1c20,20px 50px 70px -24px rgba(10,14,40,.55)}
@media (prefers-reduced-motion:no-preference){
  .dev.front{animation:devfloat 7s ease-in-out infinite}
  .hstage .dev.h1{animation:devfloat 8s ease-in-out -2s infinite}
  .hstage .dev.h3{animation:devfloat 9s ease-in-out -4s infinite}
}
@keyframes devfloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
.glow{position:absolute;inset:8% 6%;border-radius:50%;background:radial-gradient(closest-side,rgba(61,134,255,.45),rgba(112,72,232,.22) 55%,transparent);filter:blur(30px);z-index:0;pointer-events:none}
.light .glow,.white .glow{background:radial-gradient(closest-side,rgba(0,74,173,.18),rgba(112,72,232,.12) 55%,transparent)}
.fstage,.hstage{position:relative;display:flex;justify-content:center;align-items:center;min-height:560px}
.fstage .dev,.hstage .dev{position:relative;z-index:1}
.fstage .dev.back{--w:220px;margin-right:-70px;z-index:0;opacity:.96}
.fstage .dev:not(.back){margin-top:40px}
.frow.flip .fstage{flex-direction:row-reverse}
.frow.flip .fstage .dev.back{margin-right:0;margin-left:-70px}

.ocbhero{position:relative;overflow:hidden;background:linear-gradient(160deg,#0a0d1f 0%,#0b1636 45%,#160f35 100%);padding:clamp(70px,9vw,120px) 0 clamp(60px,8vw,110px);color:#fff}
.ocbhero .aura,.ocbstore .aura{position:absolute;inset:0;background:radial-gradient(60% 60% at 75% 45%,rgba(61,134,255,.35),transparent 70%),radial-gradient(40% 50% at 95% 90%,rgba(112,72,232,.35),transparent 70%);pointer-events:none}
.ocbhero-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center}
.ocbhero .htxt{display:grid;gap:22px}
.ocbhero .kick{margin:0;color:#B9C6E8}
.ocbhero h1.mega{font-size:clamp(3.4rem,1rem + 7.4vw,8.6rem);margin:0}
.ocbhero .say{color:#DCE3F5;max-width:40ch;margin:0}
.hstage{min-height:640px}
.hstage .dev.h2{--w:280px;z-index:2}
.hstage .dev.h1{--w:230px;margin-right:-80px;margin-top:70px;z-index:1}
.hstage .dev.h3{--w:230px;margin-left:-80px;margin-top:70px;z-index:1}
.stores{display:flex;flex-wrap:wrap;gap:12px}
.store{display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 14px;border-radius:14px;background:#000;border:1px solid rgba(255,255,255,.28);color:#fff;line-height:1.1;font-weight:600}
.store svg{width:24px;height:24px}
.store small{display:block;font-size:.68rem;font-weight:500;color:#B9C6E8;letter-spacing:.04em}
@media(max-width:960px){.ocbhero-in{grid-template-columns:1fr}.hstage{min-height:520px}.hstage .dev.h2{--w:230px}.hstage .dev.h1,.hstage .dev.h3{--w:180px}}
@media(max-width:560px){.hstage{min-height:440px}.hstage .dev.h2{--w:200px}.hstage .dev.h1,.hstage .dev.h3{--w:150px;margin-top:50px}.hstage .dev.h1{margin-right:-70px}.hstage .dev.h3{margin-left:-70px}}

.empath .worries{list-style:none;margin:clamp(28px,4vw,48px) 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.empath .worries li{font-family:var(--f-head);text-transform:uppercase;font-size:clamp(1.5rem,1rem + 1.6vw,2.6rem);line-height:1.02;padding:22px 24px;border-radius:18px;background:var(--white);border:1px solid var(--line-l);position:relative}
.empath .worries li::before{content:"“";position:absolute;right:18px;top:4px;font-size:3.4rem;color:var(--blue);opacity:.25;font-family:Georgia,serif}
.empath .say{max-width:52ch}
@media(max-width:700px){.empath .worries{grid-template-columns:1fr}}

.ocbroad{background:linear-gradient(170deg,#0b0c0f,#12152a)}
.stops{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.stops li{display:flex;align-items:center;gap:14px;padding:8px 14px 8px 8px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.stops b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--c);color:#fff;font-family:var(--f-mono);font-size:.78rem}
.stops span{font-weight:600}
.ocbroad .note{color:var(--dim);margin:0}

.ocbfeat .frow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);align-items:center;padding:clamp(28px,5vw,64px) 0;border-top:1px solid var(--line-l)}
.ocbfeat .frow:first-of-type{border-top:0}
.ocbfeat .frow.flip .ftxt{order:2}
.ftxt{display:grid;gap:14px}
.ftxt .mono{margin:0}
.ftxt h3{margin:0;font-family:var(--f-head);text-transform:uppercase;font-size:clamp(2.2rem,1.2rem + 2.6vw,4rem);line-height:1}
.ftxt p:not(.mono){margin:0;color:var(--steel);font-size:1.08rem;max-width:44ch}
@media(max-width:860px){.ocbfeat .frow{grid-template-columns:1fr}.ocbfeat .frow.flip .ftxt{order:0}.fstage{min-height:480px}.fstage .dev{--w:210px}.fstage .dev.back{--w:180px}}
@media(max-width:480px){.fstage{min-height:420px}.fstage .dev{--w:180px}.fstage .dev.back{--w:150px;margin-right:-60px}.frow.flip .fstage .dev.back{margin-left:-60px}}

.ocbpaths{background:linear-gradient(170deg,#12152a,#0b0c0f)}
.ocbpaths .say{max-width:48ch}
.pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-top:clamp(28px,4vw,56px)}
.pcard{border-radius:22px;padding:28px 24px 30px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);display:grid;gap:10px;justify-items:center;text-align:center;overflow:hidden}
.pcard .dev{--w:190px;margin:10px 0 24px}
.pcard h3{margin:0;font-family:var(--f-head);text-transform:uppercase;font-size:clamp(1.7rem,1.2rem + 1vw,2.4rem)}
.pcard p{margin:0;color:#C9CDD3}
@media(max-width:860px){.pcards{grid-template-columns:1fr}}

.ocbgal{background:#0b0c0f;overflow:hidden;padding:20px 0 150px;perspective:1600px}
.gtrack{display:flex;gap:34px;width:max-content;transform:rotateX(14deg) rotateZ(-4deg);transform-origin:center;padding:40px 0}
.gtrack .dev{--w:180px}
@media (prefers-reduced-motion:no-preference){.gtrack{animation:galslide 70s linear infinite}}
@keyframes galslide{from{translate:0 0}to{translate:-50% 0}}

.ocbmeet .btn--line.dark{color:var(--ink);border-color:var(--ink)}
.ocbtrust .tr3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px)}
.ocbtrust h3{margin:0 0 8px;font-family:var(--f-head);text-transform:uppercase;font-size:clamp(1.6rem,1.1rem + 1.2vw,2.4rem);line-height:1}
.ocbtrust p{margin:0;color:var(--steel)}
.ocbtrust .fine{margin-top:clamp(28px,4vw,48px);font-size:.9rem;color:var(--steel);border-top:1px solid var(--line-l);padding-top:18px}
@media(max-width:860px){.ocbtrust .tr3{grid-template-columns:1fr}}

.ocbstore{position:relative;overflow:hidden;background:linear-gradient(160deg,#0b1636,#160f35);padding:clamp(70px,9vw,120px) 0;color:#fff}
.ocbstore .wrap{position:relative}
.ocbstore .kick{color:#B9C6E8;margin:0}
.ocbstore .say{color:#DCE3F5;margin:0}
.ocbstore .glow{background:radial-gradient(closest-side,rgba(61,134,255,.5),rgba(112,72,232,.25) 55%,transparent)}
.phone .scr.has img.fill{object-position:top}
.ocbhero,.ocbroad,.ocbcrit,.ocbfeat,.ocbpaths,.ocbmeet,.ocbstore,.empath{overflow-x:clip}
.phone .scr.has{top:34px;border-radius:0 0 30px 30px}
.phone:has(.scr[data-m="E01"].has){background:#07111f}
.phone:has(.scr[data-m="E02"].has){background:#f8fafc}
/* açılış 3. klip: lunge */
.hero2 .tri .tv[src$="r5.mp4"]{object-position:55% 50%}
@media(max-width:760px){.hero2 .tri .tv[src$="r5.mp4"]{object-position:64% 50%}}
/* uygulama hukuk/destek sayfaları (6 Kasım) */
.lgl h1{margin-bottom:4px}.lgl h2.mid{margin-top:18px}.lgl h3{font-family:var(--f-body);font-weight:600;font-size:1.05rem;margin-top:12px}
.lgl p,.lgl li{line-height:1.65}.lgl .lgl-ul{padding-left:1.2em;display:grid;gap:8px}
.lgl-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.lgl-top a{color:inherit;text-decoration:none}
.lgl a{color:var(--blue,#2F6BFF)}.lgl-links{margin-top:22px;padding-top:16px;border-top:1px solid var(--line-l);font-size:.8rem;line-height:1.8}
.faqsec .lgl-links{margin-top:28px}.lgl-links a{color:inherit}
.foot .legal a{color:inherit;text-decoration:underline}
.ocbtrust .fine--pub{border-top:0;padding-top:0;margin-top:8px;font-size:.82rem}
.lgl-top{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}.lgl-top a{color:var(--blue,#2F6BFF)}
.lgl h3{text-transform:none;letter-spacing:0}
.lgl-en{font-size:.78rem;line-height:1.6;color:var(--steel,#6b7280)}