/* Editfabric web — kurumsal kimlik 1.1 (kurumsal-kimlik/05-renk/renkler.css) */
:root {
  --v1: #8B6CFF; --v2: #4C8DFF; --v3: #2BC6B4; --a1: #3DDC84; --ph: #FF5A36;
  --night: #0C0C0E; --ink: #121214; --panel: #1B1B1F; --line: #2A2A2F;
  --mute: #8A8A96; --paper: #F3F2EE; --white: #FFFFFF;
  --text: #ECECEF; --text2: #B4B4BE;
  --f-head: 'Poppins', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--text); font: 16px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-head); color: var(--white); margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.1; font-weight: 600; }
h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.18; font-weight: 600; }
h3 { font-size: 18px; font-weight: 600; line-height: 1.3; }
p { margin: 0; }
.wrap { width: min(1200px, 100% - 40px); margin: 0 auto; }
.eyebrow { font: 600 12px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--v1); margin-bottom: 18px; }
.hl { color: var(--v1); }
.c1 { --c: var(--v1); } .c2 { --c: var(--v2); } .c3 { --c: var(--v3); }

/* butonlar */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 10px; background: var(--v1); color: #fff; font: 600 15px/1 var(--f-body); text-decoration: none; border: 1px solid transparent; transition: background .2s, transform .2s var(--ease); }
.btn:hover { background: #9b80ff; transform: translateY(-1px); }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn-ghost:hover { background: var(--panel); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--v2); outline-offset: 3px; }

/* menü */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(12, 12, 14, .84); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(42, 42, 47, .7); }
.nav-in { display: flex; align-items: center; gap: 28px; height: 66px; }
.brand img { width: 150px; }
.links { display: flex; gap: 24px; margin-left: auto; }
.links a { text-decoration: none; color: var(--text2); font-size: 14px; font-weight: 500; transition: color .2s; }
.links a:hover { color: #fff; }

/* ------------------------------------------------ giriş */
.hero { position: relative; padding: 64px 0 90px; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 78% 30%, rgba(139, 108, 255, .16), transparent 70%), radial-gradient(40% 40% at 10% 90%, rgba(43, 198, 180, .07), transparent 70%); }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 52px; align-items: center; }
.lead { margin-top: 22px; font-size: 18px; color: var(--text2); max-width: 52ch; }
.cta-row { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.engine-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 34px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--ink); font: 600 12px/1 var(--f-mono); color: var(--text); }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.p-a1 { --c: var(--a1); } .p-v2 { --c: var(--v2); } .p-v1 { --c: var(--v1); }

/* stüdyo: monitör + timeline */
.studio { background: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 14px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8); }
.monitor { background: #000; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.mon-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.mon-scene, .mon-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mon-scene svg { transition: filter .6s; }
.mon-scene.raw svg { filter: saturate(.35) contrast(.85) brightness(.9); }
.mon-tag { position: absolute; left: 12px; top: 10px; font: 600 10.5px/1 var(--f-mono); letter-spacing: .08em; padding: 6px 8px; border-radius: 5px; background: rgba(0, 0, 0, .6); color: #fff; border-left: 3px solid var(--mute); }
.mon-sub { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font: 600 15px/1.3 var(--f-body); color: #fff; background: rgba(0, 0, 0, .55); padding: 4px 10px; border-radius: 4px; white-space: nowrap; opacity: 0; transition: opacity .2s; }
.mon-sub.on { opacity: 1; }
.mon-ai { position: absolute; right: 12px; top: 10px; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.mon-ai span { font: 600 10px/1 var(--f-mono); padding: 5px 7px; border-radius: 4px; background: rgba(0, 0, 0, .6); color: var(--c, #fff); border: 1px solid color-mix(in srgb, var(--c, #fff) 40%, transparent); animation: aiIn .35s var(--ease); }
@keyframes aiIn { from { opacity: 0; transform: translateY(-4px); } }
.mon-bar { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; background: var(--panel); border-top: 1px solid var(--line); }
.tc { font: 600 13px/1 var(--f-mono); color: var(--ph); letter-spacing: .04em; }
.stage { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text2); }
.stage i { width: 7px; height: 7px; border-radius: 50%; background: var(--a1); animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(61, 220, 132, 0); } }

/* sahne: konuşma ve göz kırpma */
.ef-scene .ef-mouth { transform-box: fill-box; transform-origin: center; }
.ef-scene.talk-m .ef-m1, .ef-scene.talk-k .ef-m2 { animation: talk .16s infinite alternate ease-in-out; }
@keyframes talk { from { transform: scaleY(.6) scaleX(.95); } to { transform: scaleY(2.5) scaleX(1.05); } }
.ef-scene .ef-blink { transform-box: fill-box; transform-origin: center; animation: blink 5.2s infinite; }
.ef-scene .ef-b2 { animation-duration: 4.3s; animation-delay: 1.2s; }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }

/* timeline */
.tl { margin-top: 12px; background: var(--night); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tl-ruler { position: relative; height: 22px; margin-left: 38px; border-bottom: 1px solid var(--line); background: var(--ink); font: 500 9px/22px var(--f-mono); color: var(--mute); }
.tl-ruler span { position: absolute; top: 0; padding-left: 4px; border-left: 1px solid var(--line); height: 100%; }
.tl-body { display: flex; }
.tl-heads { width: 38px; flex: none; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--ink); }
.th { height: 28px; display: flex; align-items: center; justify-content: center; font: 600 10px/1 var(--f-mono); border-bottom: 1px solid var(--line); }
.th.a1 { height: 44px; border-bottom: 0; }
.th.v1 { color: var(--v1); } .th.v2 { color: var(--v2); } .th.v3 { color: var(--v3); } .th.a1 { color: var(--a1); }
.tl-lanes { position: relative; flex: 1; min-width: 0; }
.lane { position: relative; height: 28px; border-bottom: 1px solid var(--line); }
.lane-audio { height: 44px; border-bottom: 0; }
.clip { position: absolute; top: 4px; bottom: 4px; border-radius: 4px; overflow: hidden; background: var(--c); transition: opacity .45s, filter .45s, transform .45s var(--ease); }
.clip::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .06) 36%, transparent 37%, rgba(0, 0, 0, .12)); }
.clip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.clip b { position: relative; z-index: 1; display: block; font: 600 9px/20px var(--f-mono); padding-left: 6px; color: rgba(0, 0, 0, .65); white-space: nowrap; overflow: hidden; }
.clip.raw { filter: saturate(.35) brightness(.8); }
.clip.off { filter: grayscale(1) brightness(.42); }
.clip.hidden { opacity: 0; transform: scaleY(.4); }
.wave { position: absolute; inset: 4px 0; width: 100%; height: calc(100% - 8px); }
.wave rect { fill: var(--a1); transform-box: fill-box; transform-origin: center; transition: transform .7s var(--ease), fill .4s; }
.lane-audio::before { content: ""; position: absolute; inset: 4px 0; border-radius: 4px; background: rgba(61, 220, 132, .1); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .25); }
.band { position: absolute; left: 0; right: 0; top: 50%; height: 56%; transform: translateY(-50%); border-top: 1px dashed rgba(255, 255, 255, .5); border-bottom: 1px dashed rgba(255, 255, 255, .5); opacity: 0; transition: opacity .4s; pointer-events: none; }
.band span { position: absolute; right: 4px; font: 600 8px/1 var(--f-mono); color: #fff; background: var(--night); padding: 1px 3px; }
.band span:first-child { top: -5px; } .band span:last-child { bottom: -5px; }
.studio.leveled .band { opacity: 1; }
.spk { position: absolute; left: 0; right: 0; top: 1px; height: 3px; }
.spk i { position: absolute; top: 0; height: 3px; border-radius: 2px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.spk i.on { transform: scaleX(1); }
.cutlines { position: absolute; inset: 0; pointer-events: none; }
.cutlines i { position: absolute; top: 0; bottom: 0; border-left: 1.5px dashed var(--ph); opacity: 0; transform: translateY(-8px); transition: opacity .3s, transform .35s var(--ease); }
.cutlines i.on { opacity: .9; transform: none; }
.cutlines i::before { content: ""; position: absolute; top: -1px; left: -5px; border: 4.5px solid transparent; border-top: 6px solid var(--ph); }
.studio.done .cutlines i { opacity: 0; }
.scan { position: absolute; top: 0; bottom: 0; width: 70px; left: -70px; opacity: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(139, 108, 255, .22)); border-right: 1.5px solid rgba(139, 108, 255, .9); }
.playhead { position: absolute; top: 0; bottom: 0; left: 0; opacity: 0; pointer-events: none; }
.playhead::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--ph); }
.playhead i { position: absolute; top: -1px; left: -6px; width: 12px; height: 10px; background: var(--ph); clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
.steps-mini { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.steps-mini li { position: relative; font: 600 10px/1.2 var(--f-mono); color: var(--mute); padding-top: 9px; transition: color .3s; }
.steps-mini li::before, .steps-mini li::after { content: ""; position: absolute; top: 0; left: 0; height: 3px; border-radius: 2px; }
.steps-mini li::before { right: 0; background: var(--line); }
.steps-mini li::after { width: 0; background: var(--v1); }
.steps-mini li.done { color: var(--text2); } .steps-mini li.done::after { width: 100%; }
.steps-mini li.cur { color: #fff; } .steps-mini li.cur::after { width: var(--p, 0%); }

/* ------------------------------------------------ bölümler */
.sec { padding: 110px 0; position: relative; }
.sec-alt, .chapter.alt { background: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec h2 { margin-bottom: 14px; max-width: 26ch; }
.sec-lead { color: var(--text2); max-width: 68ch; font-size: 17px; }

/* hikâye girişi */
.story-intro { padding-top: 100px; text-align: center; }
.story-intro .wrap { max-width: 860px; }
.clock-row { display: flex; align-items: center; gap: 18px; justify-content: center; margin-bottom: 42px; }
.clock { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.c-time { font: 600 34px/1 var(--f-mono); color: #fff; letter-spacing: .02em; }
.clock.end .c-time { color: var(--a1); }
.c-lbl { font: 600 11px/1 var(--f-mono); color: var(--mute); letter-spacing: .1em; text-transform: uppercase; }
.clock-line { position: relative; width: min(320px, 40vw); height: 2px; background: var(--line); }
.clock-line i { position: absolute; left: 0; top: -1px; height: 4px; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--v1), var(--a1)); transition: width 2.4s var(--ease); }
.clock-line.go i { width: 100%; }
.story-h { margin: 0 auto 22px; max-width: 22ch; font-size: clamp(30px, 3.6vw, 46px); }
.story-p { color: var(--text2); font-size: 18px; margin: 0 auto 14px; max-width: 64ch; }
.story-p b { color: #fff; font-weight: 600; }
.ch-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 42px; text-align: left; }
.ch-index a { display: flex; gap: 12px; align-items: baseline; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--ink); text-decoration: none; color: var(--text); font-weight: 500; font-size: 15px; transition: border-color .2s, background .2s; }
.ch-index a:hover { border-color: #3d3d46; background: var(--panel); }
.ch-index span { font: 600 12px/1 var(--f-mono); color: var(--ph); }

/* bölüm (chapter) */
.chapter { padding: 110px 0; }
.ch-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 64px; align-items: center; }
.ch-grid.rev .ch-text { order: 2; }
.ch-num { font: 600 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin-bottom: 16px; display: flex; gap: 10px; align-items: center; }
.ch-num span { color: #fff; background: var(--ph); padding: 4px 6px; border-radius: 4px; }
.ch-text h2 { margin-bottom: 18px; }
.ch-text > p { color: var(--text2); font-size: 17px; }
.ch-text.wide { max-width: 760px; }
.ch-text em { color: #fff; font-style: normal; }
.facts { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.facts li { position: relative; padding-left: 22px; color: var(--text2); font-size: 15px; }
.facts li::before { content: ""; position: absolute; left: 0; top: 10px; width: 10px; height: 3px; border-radius: 2px; background: var(--v1); }
.facts b { color: #fff; font-weight: 600; }
.vis-card { background: var(--night); border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9); }
.chapter:not(.alt) .vis-card { background: var(--ink); }

/* 01 panel taklidi */
.panel-mock { background: #15141b; border: 1px solid #2d2a38; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9); font-size: 13px; }
.pm-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #2d2a38; background: #1a1922; }
.pm-head img { width: 20px; }
.pm-head b { font: 600 13px/1 var(--f-head); color: #fff; }
.pm-head span { margin-left: auto; font: 600 10px/1 var(--f-mono); color: var(--mute); }
.pm-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid #2d2a38; }
.pm-steps span { padding: 9px 0; text-align: center; font: 600 10.5px/1 var(--f-mono); color: var(--mute); border-bottom: 2px solid transparent; transition: color .3s, border-color .3s; }
.pm-steps span.on { color: #fff; border-color: var(--v1); }
.pm-body { position: relative; padding: 16px 16px 18px; display: grid; gap: 14px; }
.pm-row label { display: block; font: 600 10.5px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
.pm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pm-chips span { padding: 6px 10px; border-radius: 7px; border: 1px solid #34303f; color: var(--text2); font-size: 12px; transition: all .3s; }
.pm-chips span.on { background: rgba(139, 108, 255, .18); border-color: var(--v1); color: #fff; }
.pm-cams { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; }
.pm-cams span { padding: 5px 8px; border-radius: 6px; font: 600 10.5px/1 var(--f-mono); color: #111; background: var(--c, var(--a1)); opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s var(--ease); }
.pm-cams span.a1 { --c: var(--a1); }
.pm-cams span.on { opacity: 1; transform: none; }
.pm-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.pm-dur { display: flex; align-items: center; gap: 10px; }
.pm-dur b { font: 600 18px/1 var(--f-mono); color: #fff; }
.pm-dur i { flex: 1; height: 4px; border-radius: 2px; background: #2d2a38; position: relative; }
.pm-dur s { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: var(--v1); transition: width .8s var(--ease); }
.pm-seg { display: flex; border: 1px solid #34303f; border-radius: 7px; overflow: hidden; }
.pm-seg span { flex: 1; text-align: center; padding: 6px 0; font-size: 12px; color: var(--text2); }
.pm-seg span.on { background: rgba(139, 108, 255, .18); color: #fff; }
.pm-note { min-height: 52px; padding: 9px 11px; border-radius: 8px; background: #1d1b26; border: 1px solid #38324a; color: #fff; font-size: 13.5px; line-height: 1.5; }
.caret { display: inline-block; width: 2px; height: 15px; background: var(--v1); vertical-align: -2px; margin-left: 1px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.pm-sugg { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.pm-sugg span { font-size: 11px; color: var(--mute); padding: 3px 8px; border-radius: 6px; border: 1px dashed #3a3546; transition: all .3s; }
.pm-sugg span.used { color: var(--v1); border-color: var(--v1); }
.pm-toggles { display: flex; gap: 14px; flex-wrap: wrap; }
.tg { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text2); }
.tg::before { content: ""; width: 26px; height: 15px; border-radius: 8px; background: #34303f radial-gradient(circle at 7px 50%, #8a8696 0 5px, transparent 5.5px); transition: background .3s; }
.tg.on::before { background: var(--v1) radial-gradient(circle at 19px 50%, #fff 0 5px, transparent 5.5px); }
.pm-go { width: 100%; padding: 12px; border: 0; border-radius: 9px; background: var(--v1); color: #fff; font: 600 14px/1 var(--f-body); cursor: default; transition: transform .15s, box-shadow .3s; }
.pm-go.press { transform: scale(.97); box-shadow: 0 0 0 6px rgba(139, 108, 255, .25); }
.pm-run { position: absolute; inset: 0; background: #15141b; padding: 26px 18px; display: flex; flex-direction: column; justify-content: center; gap: 16px; opacity: 0; pointer-events: none; transition: opacity .4s; }
.pm-run.on { opacity: 1; }
.pm-run-h { display: flex; justify-content: space-between; align-items: baseline; }
.pm-run-h b { font: 600 16px/1.2 var(--f-head); color: #fff; }
.pm-run-h span { font: 600 26px/1 var(--f-mono); color: var(--v1); }
.pm-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pm-stages span { font: 600 10px/1.2 var(--f-mono); color: var(--mute); padding-top: 8px; border-top: 3px solid #2d2a38; transition: all .3s; }
.pm-stages span.on { color: #fff; border-color: var(--v1); }
.pm-bar { display: block; height: 6px; border-radius: 3px; background: #2d2a38; position: relative; overflow: hidden; }
.pm-bar s { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--v1), var(--v2)); }

/* motor şeması */
.engines-head { padding: 100px 0 80px; }
.eng-diagram { display: flex; align-items: center; margin: 34px 0 26px; flex-wrap: wrap; }
.eng { flex: 1; min-width: 150px; padding: 18px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--c) 45%, var(--line)); background: color-mix(in srgb, var(--c) 9%, var(--ink)); }
.eng b { display: block; font: 600 16px/1.2 var(--f-head); color: #fff; margin-bottom: 6px; }
.eng span { font: 600 11px/1 var(--f-mono); color: var(--c); text-transform: uppercase; letter-spacing: .08em; }
.e-a1 { --c: var(--a1); } .e-v2 { --c: var(--v2); } .e-v1 { --c: var(--v1); } .e-ph { --c: var(--ph); }
.eng-arrow { width: 34px; height: 2px; background: var(--line); position: relative; flex: none; }
.eng-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--line); }

/* 02 ses motoru */
.ae-src { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 26px; }
.src { font: 600 10px/1 var(--f-mono); padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--text2); transition: all .4s; }
.src.on { color: #fff; border-color: var(--a1); background: rgba(61, 220, 132, .12); }
.ae-match { margin-left: auto; font: 600 10.5px/1 var(--f-mono); color: var(--mute); opacity: 0; transition: opacity .4s; }
.ae-match b { color: var(--v2); }
.ae-match.on { opacity: 1; }
.ae-wave { position: relative; height: 84px; margin-top: 14px; display: flex; align-items: center; gap: 2px; border-radius: 8px; background: rgba(61, 220, 132, .06); padding: 0 6px; overflow: hidden; }
.ae-wave i { flex: 1; height: 100%; border-radius: 2px; background: var(--c, #3a3a42); transform: scaleY(var(--a)); transition: background .3s; }
.ae-ph { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--ph); z-index: 2; }
.ae-words { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; height: 100px; margin-top: 12px; overflow: hidden; }
.aw { font: 500 11.5px/1 var(--f-body); padding: 6px 6px; border-radius: 5px; border: 1px solid; white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s var(--ease); }
.aw.on { opacity: 1; transform: none; }
.aw.m { color: #bff3ea; border-color: rgba(43, 198, 180, .5); background: rgba(43, 198, 180, .12); }
.aw.k { color: #cfe0ff; border-color: rgba(76, 141, 255, .5); background: rgba(76, 141, 255, .13); }
.aw.f { color: #ffb3a1; border-color: rgba(255, 90, 54, .6); background: rgba(255, 90, 54, .14); text-decoration: line-through; }
.aw small { display: block; font: 600 8.5px/1 var(--f-mono); opacity: .7; margin-top: 4px; text-decoration: none; }
.ae-chain { display: flex; align-items: center; margin-top: 14px; flex-wrap: wrap; row-gap: 8px; }
.ae-chain span { font: 600 10.5px/1 var(--f-mono); padding: 7px 9px; border-radius: 6px; border: 1px solid var(--line); color: var(--mute); transition: all .3s; }
.ae-chain span.on { color: #fff; border-color: var(--a1); background: rgba(61, 220, 132, .12); }
.ae-chain i { width: 14px; height: 1px; background: var(--line); }
.ae-chain em { margin-left: auto; font: 600 13px/1 var(--f-mono); font-style: normal; color: var(--a1); opacity: 0; transition: opacity .3s; }
.ae-chain em.on { opacity: 1; }

/* 03 görüntü motoru */
.ve-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.ve-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ve-box { position: absolute; border: 2px solid var(--c); border-radius: 6px; transition: box-shadow .3s, opacity .3s; opacity: .55; }
.ve-box em, .ve-box strong { position: absolute; left: -2px; font: 600 9.5px/1 var(--f-mono); font-style: normal; padding: 4px 6px; white-space: nowrap; }
.ve-box em { top: -20px; border-radius: 4px 4px 0 0; background: var(--c); color: #0b0b0d; }
.ve-box strong { bottom: -20px; border-radius: 0 0 4px 4px; background: rgba(0, 0, 0, .7); color: var(--text2); }
.ve-box.speak { opacity: 1; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 25%, transparent); }
.ve-box.speak strong { color: var(--a1); }
.b-m { --c: var(--v3); } .b-k { --c: var(--v2); }
.ve-scene-tag { position: absolute; left: 10px; bottom: 10px; font: 600 9.5px/1 var(--f-mono); padding: 5px 7px; border-radius: 4px; background: rgba(0, 0, 0, .6); color: var(--text2); }
.ve-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.vs { position: relative; transition: transform .3s var(--ease); }
.vs-img { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; border: 2px solid var(--line); transition: border-color .3s; }
.vs-img svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vs span { display: block; margin-top: 6px; font: 600 9.5px/1.3 var(--f-mono); color: var(--mute); transition: color .3s; }
.vs.bad .vs-img svg { filter: blur(3px) brightness(.9); }
.vs.bad.on .vs-img { border-color: var(--ph); } .vs.bad.on span { color: var(--ph); }
.vs.bad .vs-img::after { content: "✕"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 700 26px/1 var(--f-body); background: rgba(255, 90, 54, .25); opacity: 0; transition: opacity .3s; }
.vs.bad.on .vs-img::after { opacity: 1; }
.vs.gold.on .vs-img { border-color: var(--a1); } .vs.gold.on span { color: var(--a1); }
.vs.gold.on { transform: translateY(-3px); }

/* 04 yönetmen */
.director .wrap > .ch-text { margin-bottom: 36px; }
.dir-stage { position: relative; height: 470px; border: 1px solid var(--line); border-radius: 16px; background: var(--night); overflow: hidden; }
.dir-note { position: absolute; left: 18px; top: 16px; right: 18px; font-size: 14px; color: #fff; z-index: 3; }
.dir-note span { font: 600 10.5px/1 var(--f-mono); color: var(--v1); text-transform: uppercase; letter-spacing: .08em; margin-right: 10px; }
.dir-lanes { position: absolute; left: 18px; right: 18px; top: 52px; bottom: 60px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; opacity: 0; transition: opacity .5s; }
.dir-stage.arranged .dir-lanes { opacity: 1; }
.dl { border-radius: 10px; border: 1px dashed #34343c; background: rgba(255, 255, 255, .015); padding: 10px; }
.dl b { font: 600 10.5px/1 var(--f-mono); color: var(--mute); letter-spacing: .1em; }
.dir-cards { position: absolute; inset: 0; }
.dc { position: absolute; left: 0; top: 0; width: var(--cw, 260px); padding: 9px 11px 10px; border-radius: 9px; background: var(--panel); border: 1px solid var(--line); font-size: 12.5px; line-height: 1.35; color: #fff; transition: transform .9s var(--ease), opacity .5s, border-color .3s, background .3s; z-index: 2; }
.dc .who { display: flex; justify-content: space-between; font: 600 9px/1 var(--f-mono); color: var(--mute); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .05em; }
.dc .who b { color: var(--c); font-weight: 600; }
.dc .score { display: block; height: 3px; margin-top: 7px; border-radius: 2px; background: #2c2c33; overflow: hidden; }
.dc .score s { display: block; height: 100%; width: 0; background: var(--c); transition: width .7s var(--ease); }
.dir-stage.scored .dc .score s { width: var(--sc); }
.dc .tag { position: absolute; right: 8px; bottom: -9px; font: 600 9px/1 var(--f-mono); padding: 3px 6px; border-radius: 4px; background: var(--ph); color: #fff; opacity: 0; transition: opacity .3s; }
.dir-stage.scored .dc.drop .tag, .dir-stage.scored .dc.star .tag { opacity: 1; }
.dc.star .tag { background: var(--v1); }
.dir-stage.scored .dc.drop { border-color: rgba(255, 90, 54, .5); }
.dir-stage.arranged .dc.drop { opacity: 0; }
.dir-stage.arranged .dc.star { border-color: var(--v1); background: #231f35; }
.dc.q { --c: var(--v3); } .dc.k { --c: var(--v2); }
.dir-meter { position: absolute; left: 18px; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 12px; }
.dir-meter span { font: 600 10.5px/1 var(--f-mono); color: var(--mute); text-transform: uppercase; }
.dir-meter i { flex: 1; height: 6px; border-radius: 3px; background: #2a2a31; position: relative; overflow: hidden; }
.dir-meter s { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--v1), var(--a1)); transition: width 1.2s var(--ease); }
.dir-meter b { font: 600 13px/1 var(--f-mono); color: #fff; min-width: 98px; text-align: right; }
.dir-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.dir-facts b { display: block; font: 600 15px/1.3 var(--f-head); color: #fff; margin-bottom: 6px; }
.dir-facts p { color: var(--text2); font-size: 14px; }

/* 05 kurgu */
.ce-zoom { position: relative; height: 94px; border-radius: 10px; background: var(--night); border: 1px solid var(--line); padding: 30px 14px 0; overflow: hidden; }
.ce-words { display: flex; gap: 5px; }
.ce-words span { font: 500 12.5px/1 var(--f-body); padding: 8px 8px; border-radius: 5px; color: #cfe0ff; background: rgba(76, 141, 255, .13); border: 1px solid rgba(76, 141, 255, .45); white-space: nowrap; }
.ce-words .gap { flex: 0 0 22px; }
.ce-cutter { position: absolute; top: 10px; bottom: 18px; left: 30%; transition: left .7s var(--ease); }
.ce-cutter b { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--ph); }
.ce-cutter b::before { content: ""; position: absolute; top: -2px; left: -5px; border: 6px solid transparent; border-top: 8px solid var(--ph); }
.ce-cutter em { position: absolute; top: 100%; left: -60px; width: 120px; text-align: center; margin-top: 3px; font: 600 10.5px/1 var(--f-mono); font-style: normal; opacity: 0; transition: opacity .25s; }
.ce-cutter .bad { color: var(--ph); } .ce-cutter .good { color: var(--a1); }
.ce-cutter.is-bad .bad, .ce-cutter.is-good .good { opacity: 1; }
.ce-tl { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--night); }
.ce-row { display: flex; border-bottom: 1px solid var(--line); }
.ce-row:last-child { border-bottom: 0; }
.ce-row > span { width: 34px; flex: none; display: grid; place-items: center; font: 600 10px/1 var(--f-mono); color: var(--mute); background: var(--ink); border-right: 1px solid var(--line); }
.ce-lane { position: relative; flex: 1; height: 30px; }
.ce-lane i { position: absolute; top: 4px; bottom: 4px; border-radius: 4px; background: var(--c); transform-origin: left; transform: scaleX(0); transition: transform .45s var(--ease), filter .4s; }
.ce-lane i.on { transform: scaleX(1); }
.ce-lane i::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .28), transparent 40%); }
.ce-lane i.gray { --c: #34343c; }
.ce-a { height: 26px; }
.ce-a i { --c: rgba(61, 220, 132, .55); }
.ce-legend { display: flex; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.ce-legend span { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px/1 var(--f-mono); color: var(--text2); }
.ce-legend span::before { content: ""; width: 14px; height: 8px; border-radius: 2px; background: var(--c); }

/* 06 teslim */
#deliver { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 14px; }
.dv-bin { border: 1px solid var(--line); border-radius: 10px; background: var(--ink); padding: 10px; }
.dv-h { font: 600 10.5px/1 var(--f-mono); color: var(--mute); text-transform: uppercase; padding: 4px 4px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.dv-i { display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-radius: 6px; font: 500 11.5px/1.2 var(--f-body); color: var(--text); opacity: 0; transform: translateX(-6px); transition: opacity .35s, transform .35s var(--ease), background .3s; }
.dv-i.on { opacity: 1; transform: none; }
.dv-i.new.on { background: rgba(139, 108, 255, .08); }
.dv-i em { margin-left: auto; font: 600 9.5px/1 var(--f-mono); font-style: normal; color: var(--mute); }
.dv-i.ok em { color: var(--a1); }
.ic { width: 14px; height: 11px; border-radius: 2px; background: #555; flex: none; }
.ic.v { background: var(--v1); } .ic.v2 { background: var(--v2); width: 8px; height: 13px; } .ic.v3 { background: var(--v3); }
.dv-seq { min-width: 0; }
.dv-mon { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); }
.dv-scene, .dv-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dv-cap { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; }
.dv-cap span { font: 600 11.5px/1 var(--f-body); background: rgba(0, 0, 0, .6); color: #fff; padding: 3px 7px; border-radius: 3px; }
.dv-tl { position: relative; margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--night); }
.dv-row { display: flex; border-bottom: 1px solid var(--line); }
.dv-row:last-of-type { border-bottom: 0; }
.dv-row > span { width: 24px; flex: none; display: grid; place-items: center; font: 600 9px/1 var(--f-mono); color: var(--mute); background: var(--ink); }
.dv-lane { position: relative; flex: 1; height: 22px; }
.dv-lane i { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; background: var(--c); }
.dv-lane.cap i { background: #E6E6EA; opacity: .85; }
.dv-lane.aud { background: repeating-linear-gradient(90deg, rgba(61, 220, 132, .55) 0 2px, transparent 2px 4px) 0 50% / 100% 60% no-repeat; }
.dv-marks i { position: absolute; top: 0; width: 8px; height: 8px; margin-left: -4px; background: var(--v3); clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); }
.dv-ph { position: absolute; top: 0; bottom: 0; left: 30%; width: 2px; background: var(--ph); }
.play .dv-ph { animation: mph 9s linear infinite; }

/* kurgu türleri */
.types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.type { background: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 20px; transition: border-color .3s, transform .3s var(--ease); }
.type:hover { border-color: #3c3c46; transform: translateY(-2px); }
.ty-bar { position: relative; display: flex; gap: 2px; height: 34px; padding: 6px; border-radius: 8px; background: var(--night); border: 1px solid var(--line); margin-bottom: 16px; overflow: hidden; }
.ty-bar i { flex: 0 0 var(--w); border-radius: 3px; background: var(--c); transform-origin: left; }
.ty-bar i.q { background: repeating-linear-gradient(135deg, #4a4a54 0 3px, #2f2f36 3px 6px); }
.ty-bar i.gap { background: transparent; border: 1px dashed #3a3a44; }
.ty-bar i.m { --c: var(--a1); }
.type.play .ty-bar i { animation: tyIn .6s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes tyIn { from { transform: scaleX(0); opacity: 0; } }
.type h3 { font-size: 16px; margin-bottom: 6px; }
.type p { color: var(--text2); font-size: 13.5px; }
.type.own { border-style: dashed; }
.type.own .ty-bar { justify-content: center; align-items: center; font: 600 18px/1 var(--f-mono); color: var(--v1); }

/* tek işlem kartları */
.tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 46px; }
.tool { background: var(--night); border: 1px solid var(--line); border-radius: 16px; padding: 16px 16px 24px; }
.tool h3 { margin: 20px 6px 8px; font-size: 19px; }
.tool p { margin: 0 6px; color: var(--text2); font-size: 14.5px; }
.tool-more { padding: 26px; }
.tool-more h3 { margin: 0 0 14px; }
.tool-more ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--text2); font-size: 15px; }
.tool-more li { padding-left: 20px; position: relative; }
.tool-more li::before { content: ""; position: absolute; left: 0; top: 10px; width: 10px; height: 3px; border-radius: 2px; background: var(--v3); }
.demo { position: relative; height: 210px; border-radius: 10px; background: var(--ink); border: 1px solid var(--line); overflow: hidden; padding: 18px 16px; }
.d-label { position: absolute; left: 16px; right: 16px; bottom: 14px; font: 600 10.5px/1 var(--f-mono); }
.d-label span { position: absolute; left: 0; bottom: 0; white-space: nowrap; transition: opacity .2s; }
.l-raw { color: var(--mute); } .l-ok { color: var(--a1); opacity: 0; }
.demo.ok .l-raw { opacity: 0; } .demo.ok .l-ok { opacity: 1; transition-delay: .2s; }

/* ses demosu */
.meter { position: absolute; left: 16px; right: 60px; top: 16px; bottom: 46px; opacity: .3; transition: opacity .5s; pointer-events: none; }
.meter::before, .meter::after { content: ""; position: absolute; left: 0; right: 0; height: 7%; border-top: 1px dashed rgba(255, 255, 255, .55); border-bottom: 1px dashed rgba(255, 255, 255, .55); background: rgba(61, 220, 132, .08); }
.meter::before { top: 17%; } .meter::after { bottom: 17%; }
.meter span { position: absolute; right: -52px; font: 600 9.5px/1 var(--f-mono); color: var(--text2); }
.m-top { top: calc(17% - 5px); } .m-bot { top: calc(24% - 2px); }
.bars { position: absolute; left: 16px; right: 60px; top: 16px; bottom: 46px; display: flex; align-items: center; gap: 2px; }
.bars i { flex: 1; height: 100%; background: var(--a1); border-radius: 2px; transform: scaleY(var(--a)); transition: transform 1s var(--ease), background .5s; opacity: .9; }
.bars i.hot { background: var(--ph); }
.demo-audio.ok .bars i { transform: scaleY(var(--b)); background: var(--a1); }
.demo-audio.ok .meter { opacity: 1; }
.d-read { position: absolute; left: 16px; bottom: 14px; font: 600 10.5px/1 var(--f-mono); color: var(--mute); }
.d-read b { position: absolute; left: 40px; top: 0; font-weight: 600; white-space: nowrap; transition: opacity .3s; }
.r-raw { color: var(--ph); } .r-ok { color: var(--a1); opacity: 0; }
.demo-audio.ok .r-raw { opacity: 0; } .demo-audio.ok .r-ok { opacity: 1; }

/* renk demosu */
.thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.thumbs .t { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.thumbs svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: filter 1.2s var(--ease); }
.thumbs .t span { position: absolute; left: 5px; top: 5px; font: 600 8.5px/1 var(--f-mono); padding: 3px 5px; border-radius: 3px; background: rgba(0, 0, 0, .6); color: #fff; z-index: 1; }
.thumbs .t1 svg { filter: hue-rotate(-14deg) saturate(1.5) brightness(1.08); }
.thumbs .t2 svg { filter: hue-rotate(160deg) saturate(.45) brightness(.92); }
.thumbs .t3 svg { filter: sepia(.5) saturate(1.3) brightness(1.04) contrast(.85); }
.demo-color.ok .thumbs svg { filter: none; }

/* dolgu demosu */
.d-words { display: flex; gap: 5px; flex-wrap: nowrap; overflow: hidden; }
.d-words.big { margin-top: 44px; }
.d-words.big span { font: 500 12.5px/1 var(--f-body); padding: 9px 8px; border-radius: 5px; color: #cfe0ff; background: rgba(76, 141, 255, .13); border: 1px solid rgba(76, 141, 255, .45); white-space: nowrap; max-width: 140px; overflow: hidden; flex: none; transition: max-width .7s var(--ease), padding .7s var(--ease), opacity .5s, margin .7s var(--ease); }
.d-words .x { background: rgba(255, 90, 54, .16) !important; border-color: rgba(255, 90, 54, .55) !important; color: #ffb3a1 !important; }
.d-words .x.wide { letter-spacing: .3em; }
.demo-fill.ok .x { max-width: 0; padding-left: 0 !important; padding-right: 0 !important; opacity: 0; margin-left: -5px; border-width: 0 !important; }

/* altyazı demosu */
.mini-mon { position: relative; height: 128px; border-radius: 7px; overflow: hidden; border: 1px solid var(--line); }
.mini-mon svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cap { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font: 600 13px/1 var(--f-body); color: #fff; z-index: 2; }
.cap span { background: rgba(0, 0, 0, .6); padding: 4px 8px; border-radius: 3px; }
.d-track.d-c { position: relative; margin-top: 14px; height: 24px; }
.cseg { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w); border-radius: 4px; background: #E6E6EA; opacity: .18; transition: opacity .3s; }
.cseg.on { opacity: 1; }
.cseg::after { content: "Aa"; position: absolute; left: 6px; font: 600 9px/24px var(--f-mono); color: #222; }
.mph { position: absolute; top: -146px; bottom: -4px; left: 0; width: 2px; background: var(--ph); z-index: 3; }
.play .mph { animation: mph 6s linear infinite; }
@keyframes mph { from { left: 0; } to { left: 100%; } }

/* dikey demosu */
.demo-short { display: flex; gap: 18px; align-items: center; justify-content: center; }
.wide-frame { position: relative; width: 62%; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); }
.wide-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.crop { position: absolute; top: 0; bottom: 0; width: 31.6%; left: 58%; border: 2px solid var(--v1); border-radius: 4px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .5); transition: left .8s var(--ease); z-index: 2; }
.vert { position: relative; height: 170px; aspect-ratio: 9 / 16; border-radius: 9px; overflow: hidden; border: 2px solid var(--v1); }
.vert svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vert::after { content: "9:16"; position: absolute; right: 5px; top: 5px; font: 600 8.5px/1 var(--f-mono); padding: 3px 4px; border-radius: 3px; background: rgba(0, 0, 0, .6); color: #fff; }

/* teaser demosu */
.tz-src, .tz-out { display: flex; gap: 3px; height: 30px; }
.tz-src i, .tz-out i { flex: 1; border-radius: 4px; background: var(--c); transition: opacity .4s, transform .4s var(--ease), box-shadow .3s; }
.tz-src i { opacity: .4; }
.demo-teaser.ok .tz-src i.pick { opacity: 1; box-shadow: 0 0 0 2px #fff inset; transform: translateY(-3px); }
.tz-arrow { text-align: center; font: 600 10.5px/1 var(--f-mono); color: var(--mute); margin: 18px 0; }
.tz-out { position: relative; width: 46%; margin: 0 auto; }
.tz-out i { transform: scaleY(0); }
.demo-teaser.ok .tz-out i { transform: none; }
.demo-teaser.ok .tz-out i:nth-child(2) { transition-delay: .15s; } .demo-teaser.ok .tz-out i:nth-child(3) { transition-delay: .3s; }
.tz-out b { position: absolute; right: -54px; top: 8px; font: 600 12px/1 var(--f-mono); color: var(--v1); }

/* stereo demosu */
.st-clip { display: inline-flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 8px; background: rgba(61, 220, 132, .12); border: 1px solid rgba(61, 220, 132, .4); font: 600 11px/1 var(--f-mono); color: var(--text); }
.st-clip b { color: var(--a1); }
.st-meters { display: grid; gap: 10px; margin-top: 22px; }
.st-meters div { display: flex; align-items: center; gap: 10px; }
.st-meters span { font: 600 11px/1 var(--f-mono); color: var(--mute); width: 12px; }
.st-meters i { flex: 1; height: 12px; border-radius: 3px; background: #24242b; position: relative; overflow: hidden; }
.st-meters s { position: absolute; left: 0; top: 0; bottom: 0; width: 52%; background: linear-gradient(90deg, var(--a1) 70%, #f5c542); transition: width .8s var(--ease); }
.demo-stereo.ok .st-meters s { width: 72%; }

/* ilkeler, uyumluluk */
.rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.rule { padding: 22px; border-radius: 14px; background: var(--ink); border: 1px solid var(--line); }
.ri { display: inline-flex; width: 40px; height: 40px; border-radius: 10px; align-items: center; justify-content: center; background: rgba(139, 108, 255, .12); margin-bottom: 16px; }
.ri svg { width: 20px; height: 20px; fill: none; stroke: var(--v1); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rule h3 { margin-bottom: 8px; }
.rule p { color: var(--text2); font-size: 14.5px; }
.nle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.nle-i { padding: 22px; border-radius: 14px; border: 1px solid var(--line); background: var(--ink); }
.nle-i .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--mute); margin-bottom: 14px; }
.nle-i.on .dot { background: var(--a1); box-shadow: 0 0 0 4px rgba(61, 220, 132, .18); }
.nle-i p { color: var(--mute); font: 600 12px/1 var(--f-mono); margin-top: 8px; }
.nle-i.on p { color: var(--a1); }
.hw { margin-top: 24px; color: var(--text2); font-size: 15px; }
.hw span { color: #fff; font-weight: 600; }

/* erken erişim */
.cta { text-align: center; background: radial-gradient(50% 70% at 50% 0%, rgba(139, 108, 255, .16), transparent 70%), var(--night); border-top: 1px solid var(--line); }
.cta-in { display: flex; flex-direction: column; align-items: center; }
.cta-mark { width: 88px; margin-bottom: 26px; }
.cta h2 { max-width: 24ch; margin-bottom: 12px; }
.cta p { color: var(--text2); margin: 4px 0 30px; font-size: 17px; max-width: 56ch; }
.foot { border-top: 1px solid var(--line); padding: 28px 0; }
.foot-in { display: flex; justify-content: space-between; align-items: center; color: var(--mute); font-size: 13px; }

/* duyarlı */
@media (max-width: 1020px) {
  .hero-grid, .ch-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ch-grid.rev .ch-text { order: 0; }
  .types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules, .dir-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .links { display: none; }
  .nav .btn-sm { margin-left: auto; }
  .eng-arrow { display: none; }
  .eng-diagram { gap: 10px; }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 32px); }
  .hero { padding: 40px 0 64px; }
  .sec, .chapter { padding: 72px 0; }
  .tools, .types, .rules, .nle, .dir-facts, .ch-index { grid-template-columns: minmax(0, 1fr); }
  #deliver { grid-template-columns: minmax(0, 1fr); }
  .steps-mini li { font-size: 8.5px; }
  .brand img { width: 128px; }
  .mon-sub { font-size: 12px; }
  .dir-stage { height: 860px; }
  .dir-lanes { display: none; }
  .c-time { font-size: 26px; }
  .ce-words span, .d-words.big span { font-size: 11px; padding: 7px 5px; }
  .foot-in { flex-direction: column; gap: 12px; }
}
/* ================================================ ana sayfa (2026-10-14): kısa, ne yaptığımız önce */
.trial-badge { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px; padding: 7px 13px 7px 11px; border-radius: 999px;
  background: rgba(61, 220, 132, .1); border: 1px solid rgba(61, 220, 132, .38); color: #bff3d6; font: 600 13px/1.2 var(--f-body); }
.trial-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--a1); box-shadow: 0 0 0 3px rgba(61, 220, 132, .22); flex: none; }
.trust { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--text2); font-size: 14.5px; }
.trust li { position: relative; padding-left: 24px; }
.trust li::before { content: ""; position: absolute; left: 0; top: 4px; width: 15px; height: 15px; border-radius: 50%; background: rgba(61, 220, 132, .16); }
.trust li::after { content: ""; position: absolute; left: 5px; top: 7px; width: 4px; height: 7px; border: solid var(--a1); border-width: 0 2px 2px 0; transform: rotate(45deg); }

[dir="rtl"] .trust li { padding-left: 0; padding-right: 24px; }
[dir="rtl"] .trust li::before { left: auto; right: 0; } [dir="rtl"] .trust li::after { left: auto; right: 6px; }

/* üç adım — kartlar sırayla oynar (site.js: #steps3 .s3.cur) */
.steps3 { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.s3 { position: relative; padding: 22px 22px 26px; border-radius: 16px; background: var(--night); border: 1px solid var(--line); transition: border-color .4s, box-shadow .4s, transform .4s var(--ease); }
.s3.c1 { --c: var(--v1); } .s3.c2 { --c: var(--v2); } .s3.c3 { --c: var(--a1); }
.s3.cur { border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--c) 70%, transparent); transform: translateY(-3px); }
.s3-n { position: absolute; top: 18px; right: 20px; font: 600 13px/1 var(--f-mono); color: var(--c); }
.s3 h3 { margin: 18px 0 8px; font-size: 21px; }
.s3 p { color: var(--text2); font-size: 15px; }
.s3-vis { position: relative; height: 78px; margin-right: 26px; border-radius: 10px; background: var(--ink); border: 1px solid var(--line); display: flex; align-items: center; gap: 8px; padding: 0 14px; overflow: hidden; }
.s3-pick i { position: relative; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); transition: border-color .3s, background .3s, box-shadow .3s; }
.s3-pick i b { position: absolute; left: 6px; right: 6px; bottom: 6px; height: 5px; border-radius: 3px; background: var(--c); opacity: .35; transition: opacity .3s; }
.s3-pick i.on { border-color: var(--v1); background: rgba(139, 108, 255, .2); box-shadow: 0 0 0 3px rgba(139, 108, 255, .14); }
.s3-pick i.on b { opacity: 1; }
.s3-dur { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; min-width: 64px; }
.s3-dur b { font: 600 15px/1 var(--f-mono); color: #fff; }
.s3-dur s { display: block; width: 64px; height: 4px; border-radius: 2px; background: var(--line); position: relative; overflow: hidden; }
.s3-dur s::after { content: ""; position: absolute; inset: 0; width: var(--p, 0%); background: var(--v1); }
.s3-note { flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; }
.s3-note span { position: relative; height: 7px; width: var(--w); }
.s3-note span s { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: rgba(76, 141, 255, .55); }
.s3-note span s::after { content: ""; position: absolute; right: -5px; top: -4px; width: 2px; height: 15px; background: var(--v2); opacity: 0; }
.s3-note span.typing s::after { opacity: 1; animation: caretB .8s steps(1) infinite; }
@keyframes caretB { 50% { opacity: 0; } }
.s3-seq { gap: 3px; }
.s3-seq i { flex: 1; height: 28px; border-radius: 4px; opacity: 0; transform: translateY(-14px); transition: opacity .3s, transform .4s var(--ease); }
.s3-seq i.in { opacity: 1; transform: none; }
.s3-seq i.v1 { background: var(--v1); flex: .6; } .s3-seq i.v2 { background: var(--v2); } .s3-seq i.v3 { background: var(--v3); flex: .5; }
.s3-ph { position: absolute; top: 8px; bottom: 8px; left: 14px; width: 2px; background: var(--ph); opacity: 0; }
.s3-ph.go { opacity: 1; animation: s3ph 2.2s linear forwards; }
@keyframes s3ph { from { left: 14px; } to { left: calc(100% - 16px); } }

/* neler yapar: büyük kartlar */
.feat-lead { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 46px; }
.feat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }
.feat-grid .demo { height: 180px; }
.feat-grid .tool h3 { font-size: 17px; margin-top: 18px; }
.feat-grid .tool p { font-size: 14px; }
/* tam kurgu: dökümü tara → seç/at → kurguya diz */
.demo-story { padding: 18px 20px 38px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.fs-lines { position: relative; display: flex; flex-direction: column; gap: 10px; }
.fs-line { display: flex; align-items: center; gap: 10px; }
.fs-line i { display: block; height: 12px; width: var(--w); border-radius: 4px; background: #34343c; transition: background .35s, width .5s var(--ease), opacity .4s; }
.fs-line em { font: 600 12px/1 var(--f-mono); font-style: normal; opacity: 0; transform: scale(.5); transition: opacity .25s, transform .3s var(--ease); }
.fs-line.keep em { color: var(--a1); } .fs-line.drop em { color: var(--ph); }
.fs-line.judged em { opacity: 1; transform: none; }
.fs-line.keep.judged i { background: linear-gradient(90deg, var(--v1), var(--v2)); }
.fs-line.drop.judged i { background: rgba(255, 90, 54, .35); }
.fs-line.drop.gone i { width: 0; opacity: 0; }
.fs-scan { position: absolute; left: -6px; right: -6px; height: 20px; top: -4px; border-radius: 6px; border: 1px solid rgba(139, 108, 255, .7); background: rgba(139, 108, 255, .08); opacity: 0; transition: top .45s var(--ease), opacity .3s; }
.fs-scan.on { opacity: 1; }
.fs-out { display: flex; gap: 3px; height: 34px; padding: 4px; border-radius: 8px; background: var(--night); border: 1px solid var(--line); }
.fs-out i { flex: 0 0 var(--w); border-radius: 4px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.fs-out i.c1 { --c: var(--v1); } .fs-out i.c2 { --c: var(--v2); } .fs-out i.c3 { --c: var(--v3); }
.fs-out i.in { transform: none; }
.fs-time { position: absolute; left: 20px; right: 20px; bottom: 14px; display: flex; justify-content: space-between; font: 600 11px/1 var(--f-mono); color: var(--mute); }
.fs-time b { color: var(--a1); }
/* çok kamera: monitör + timeline, aktif açı konuşana */
.demo-mcam { padding: 14px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; align-items: center; }
.mc-mon { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; border: 2px solid var(--mc, var(--v2)); background: #000; transition: border-color .2s; }
.mc-mon svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mc-mon.flash::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: .0; animation: mcFlash .25s ease-out; }
@keyframes mcFlash { from { opacity: .35; } }
.mc-tag { position: absolute; left: 6px; top: 6px; z-index: 2; font: 600 8.5px/1 var(--f-mono); letter-spacing: .06em; padding: 4px 6px; border-radius: 4px; background: rgba(0, 0, 0, .65); color: #fff; border-left: 3px solid var(--mc, var(--v2)); white-space: nowrap; }
.mc-tl { position: relative; display: flex; flex-direction: column; gap: 6px; }
.mc-row { display: flex; align-items: center; gap: 8px; }
.mc-row span { width: 20px; font: 600 9.5px/1 var(--f-mono); color: var(--mute); }
.mc-row div { position: relative; flex: 1; height: 22px; border-radius: 4px; background: var(--night); }
.mc-row i { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; background: var(--c); }
.mc-row i.c1 { --c: var(--v1); } .mc-row i.c2 { --c: var(--v2); } .mc-row i.c3 { --c: var(--v3); }
.mc-row i.off { filter: grayscale(1) brightness(.42); }
.mc-a i { background: rgba(61, 220, 132, .35); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .5); }
.mc-over { position: absolute; left: 28px; right: 0; top: 0; bottom: 0; pointer-events: none; }
.mc-ph { position: absolute; top: -4px; bottom: -4px; left: 0; width: 2px; background: var(--ph); }
.mc-ph::before { content: ""; position: absolute; top: -1px; left: -5px; width: 12px; height: 9px; background: var(--ph); clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
.mc-cut { position: absolute; top: 0; bottom: 0; border-left: 1.5px dashed var(--ph); opacity: .85; }
.story-link { margin-top: 30px; text-align: center; }
.story-link a { color: var(--v1); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(139, 108, 255, .4); padding-bottom: 2px; }
.story-link a:hover { color: #fff; border-color: #fff; }

/* neden editfabric — kart başına hareketli görsel; .play görünürken (site.js) */
.why-vis { position: relative; height: 92px; border-radius: 12px; background: var(--ink); border: 1px solid var(--line); margin-bottom: 18px; overflow: hidden; }
.why-vis * { animation-play-state: paused; }
.why-i.play .why-vis * { animation-play-state: running; }
/* motorlar: Ses → Görüntü → Yönetmen → kurgu */
.wv-eng { display: grid; align-content: start; gap: 7px; padding: 10px 12px 30px; }
.wv-eng > i { display: none; }
.wv-eng span { display: flex; align-items: center; gap: 8px; font: 600 9.5px/1 var(--f-mono); color: var(--mute); white-space: nowrap; animation: wvEngT 4.8s infinite; }
.wv-eng span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); flex: none; }
.wv-eng span::after { content: ""; flex: 1; min-width: 20px; height: 4px; border-radius: 2px; background: linear-gradient(var(--c), var(--c)) no-repeat var(--line); background-size: 0% 100%; animation: wvEngB 4.8s infinite; }
.wv-eng .e-a1 { --c: var(--a1); } .wv-eng .e-v2 { --c: var(--v2); } .wv-eng .e-v1 { --c: var(--v1); }
.wv-eng .e-v2, .wv-eng .e-v2::after { animation-delay: .5s; } .wv-eng .e-v1, .wv-eng .e-v1::after { animation-delay: 1s; }
@keyframes wvEngT { 0%, 6% { color: var(--mute); } 14%, 78% { color: #fff; } 90%, 100% { color: var(--mute); } }
@keyframes wvEngB { 0%, 4% { background-size: 0% 100%; } 22%, 80% { background-size: 100% 100%; } 92%, 100% { background-size: 0% 100%; } }
.wv-out { position: absolute; left: 12px; right: 12px; bottom: 10px; display: flex; gap: 3px; height: 12px; }
.wv-out b { flex: 1; border-radius: 3px; background: var(--c); transform: scaleX(0); transform-origin: left; animation: wvOut 4.8s infinite; }
.wv-out b.c1 { --c: var(--v1); } .wv-out b.c2 { --c: var(--v2); } .wv-out b.c3 { --c: var(--v3); }
.wv-out b:nth-child(2) { animation-delay: .15s; } .wv-out b:nth-child(3) { animation-delay: .3s; } .wv-out b:nth-child(4) { animation-delay: .45s; }
@keyframes wvOut { 0%, 34% { transform: scaleX(0); } 44%, 82% { transform: none; } 92%, 100% { transform: scaleX(0); } }
/* ses: sıçrayan barlar bant içine oturur */
.wv-lvl { padding: 10px 12px 26px; }
.wv-band { position: absolute; left: 12px; right: 12px; top: 26%; height: 28%; border-top: 1px dashed rgba(255, 255, 255, .45); border-bottom: 1px dashed rgba(255, 255, 255, .45); background: rgba(61, 220, 132, .07); }
.wv-bars { position: absolute; left: 12px; right: 12px; top: 10px; bottom: 26px; display: flex; align-items: center; gap: 2px; }
.wv-bars i { flex: 1; height: 100%; border-radius: 2px; background: var(--a1); transform: scaleY(var(--a)); animation: wvLvl 4.4s var(--ease) infinite; }
.wv-bars i.hot { background: var(--ph); }
@keyframes wvLvl { 0%, 30% { transform: scaleY(var(--a)); } 50%, 85% { transform: scaleY(var(--b)); background: var(--a1); } 100% { transform: scaleY(var(--a)); } }
.wv-read { position: absolute; left: 12px; bottom: 8px; font: 600 10px/1 var(--f-mono); font-style: normal; color: var(--mute); }
.wv-read b { color: var(--ph); } .wv-read b.ok { color: var(--a1); }
/* renk: üç farklı renk tek görünüme */
.wv-col { display: flex; align-items: center; justify-content: center; gap: 16px; }
.wv-sw { display: flex; gap: 6px; }
.wv-sw i { width: 46px; height: 34px; border-radius: 6px; background: linear-gradient(135deg, #d6a37e 0 38%, #3d4b63 38% 100%); animation: wvCol 4.6s infinite; }
.wv-sw i:nth-child(1) { --f: hue-rotate(-18deg) saturate(1.6) brightness(1.1); }
.wv-sw i:nth-child(2) { --f: hue-rotate(150deg) saturate(.5) brightness(.85); }
.wv-sw i:nth-child(3) { --f: sepia(.6) saturate(1.4) contrast(.85); }
@keyframes wvCol { 0%, 25% { filter: var(--f); } 45%, 85% { filter: none; } 100% { filter: var(--f); } }
.wv-skin { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--v3); display: flex; align-items: center; justify-content: center; }
.wv-skin span { width: 14px; height: 14px; border-radius: 50%; background: #d6a37e; }
/* bin: dosyalar kopyalanmadan sekansa dizilir */
.wv-bin { display: flex; align-items: center; gap: 10px; padding: 0 12px; }
.wv-files { display: grid; gap: 4px; width: 34%; }
.wv-files i { height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--c) 55%, #1b1b1f); }
.wv-files i.c1 { --c: var(--v1); } .wv-files i.c2 { --c: var(--v2); } .wv-files i.c3 { --c: var(--v3); }
.wv-arrow { width: 26px; height: 2px; background: var(--line); position: relative; }
.wv-arrow::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left-color: var(--line); }
.wv-seq { flex: 1; display: flex; gap: 3px; height: 24px; padding: 3px; border-radius: 6px; background: var(--night); }
.wv-seq i { flex: 1; border-radius: 3px; background: var(--c); transform: translateX(-40px); opacity: 0; animation: wvSeq 4.4s var(--ease) infinite; }
.wv-seq i.c1 { --c: var(--v1); } .wv-seq i.c2 { --c: var(--v2); } .wv-seq i.c3 { --c: var(--v3); }
.wv-seq i:nth-child(2) { animation-delay: .25s; } .wv-seq i:nth-child(3) { animation-delay: .5s; } .wv-seq i:nth-child(4) { animation-delay: .75s; }
@keyframes wvSeq { 0%, 10% { transform: translateX(-40px); opacity: 0; } 25%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.wv-zero { position: absolute; right: 10px; top: 8px; font: 600 10px/1 var(--f-mono); font-style: normal; color: var(--a1); padding: 3px 6px; border-radius: 4px; background: rgba(61, 220, 132, .12); }
/* ara plan: anahtar söz → uygun plan seçilir → kurguya */
.wv-broll { display: flex; align-items: center; gap: 10px; padding: 0 12px; }
.wv-words { display: grid; gap: 5px; width: 30%; }
.wv-words span { height: 8px; border-radius: 4px; background: rgba(76, 141, 255, .4); }
.wv-words span.key { animation: wvKey 4.6s infinite; }
@keyframes wvKey { 0%, 15% { background: rgba(76, 141, 255, .4); } 25%, 80% { background: var(--ph); } 100% { background: rgba(76, 141, 255, .4); } }
.wv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 38%; }
.wv-grid i { height: 16px; border-radius: 3px; background: #2c2c34; }
.wv-grid i.pick { animation: wvPick 4.6s infinite; }
@keyframes wvPick { 0%, 30% { box-shadow: none; background: #2c2c34; } 40%, 85% { box-shadow: 0 0 0 2px var(--ph); background: #5a4a40; } 100% { box-shadow: none; } }
.wv-slot { flex: 1; height: 22px; border-radius: 5px; background: var(--night); position: relative; overflow: hidden; }
.wv-slot b { position: absolute; left: 30%; width: 40%; top: 3px; bottom: 3px; border-radius: 3px; background: #5a4a40; box-shadow: inset 0 0 0 1px var(--ph); transform: scaleY(0); animation: wvSlot 4.6s infinite; }
@keyframes wvSlot { 0%, 48% { transform: scaleY(0); } 58%, 88% { transform: none; } 100% { transform: scaleY(0); } }

/* kimler için: çiplerde mini kurgu şeridi */
.chips li { display: inline-flex; flex-direction: column; gap: 8px; }
.chip-bar { display: flex; gap: 2px; width: 120px; height: 8px; }
.chip-bar i { flex: 0 0 var(--w); border-radius: 2px; background: var(--c); transform-origin: left; }
.chip-bar i.q { background: repeating-linear-gradient(135deg, #4a4a54 0 3px, #2f2f36 3px 6px); }
.chip-bar i.gap { background: transparent; border: 1px dashed #3a3a44; }
.chip-bar i.m { --c: var(--a1); }
.chips.play .chip-bar i { animation: tyIn .6s var(--ease) both; animation-delay: calc(var(--i) * 60ms + var(--j) * 120ms); }

@media (prefers-reduced-motion: reduce) { .why-vis * { animation: none !important; } }

/* neden editfabric */
.why { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 40px; }
.why-i { padding: 24px; border-radius: 16px; background: var(--night); border: 1px solid var(--line); }
.why-i.c1 { --c: var(--v1); } .why-i.c2 { --c: var(--v2); } .why-i.c3 { --c: var(--a1); } .why-i.c4 { --c: var(--v3); } .why-i.c5 { --c: var(--ph); }
.why-ic { display: inline-flex; width: 42px; height: 42px; border-radius: 11px; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c) 16%, transparent); margin-bottom: 16px; }
.why-ic svg { width: 21px; height: 21px; fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.why-i h3 { margin-bottom: 8px; }
.why-i p { color: var(--text2); font-size: 14.5px; }

/* kimler için */
.chips { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 10px 16px; border-radius: 999px; background: var(--ink); border: 1px solid var(--line); font-weight: 500; font-size: 15px; color: var(--text); }
.chips li.own { border-style: dashed; color: var(--v1); }

/* fiyat: deneme notu */
.trial-note { margin-top: 26px; padding: 16px 20px; border-radius: 14px; background: rgba(61, 220, 132, .08); border: 1px solid rgba(61, 220, 132, .35); color: var(--text); font-size: 15.5px; }
.trial-note b { color: #bff3d6; }

/* sss */
.faq-wrap { max-width: 860px; }
.faq { margin-top: 32px; display: grid; gap: 10px; }
.faq details { border-radius: 14px; background: var(--night); border: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 52px 18px 20px; position: relative; font: 600 16px/1.4 var(--f-head); color: #fff; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font: 500 22px/1 var(--f-mono); color: var(--v1); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 20px 20px; color: var(--text2); font-size: 15px; }

/* nasıl çalışır: sayfa başlığı */
.page-head { padding: 72px 0 0; text-align: center; }
.page-head h1 { max-width: 22ch; margin: 0 auto; }
.page-story .story-intro { padding-top: 56px; }
.cta-in .story-back { margin-top: 12px; }

@media (max-width: 1020px) {
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .feat-lead, .feat-grid { grid-template-columns: minmax(0, 1fr); }
  .trust { flex-direction: column; gap: 8px; }
  .page-head { padding-top: 44px; }
  .faq summary { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* tür kartları: simge + oynayan kafa (2026-10-25) */
.ty-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--v1) 14%, transparent); margin-bottom: 10px; }
.ty-ic svg { width: 19px; height: 19px; fill: none; stroke: var(--v1); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ty-ph { position: absolute; top: 3px; bottom: 3px; left: 6px; width: 2px; background: var(--ph); box-shadow: 0 0 8px var(--ph); opacity: 0; }
.type.play .ty-ph { animation: tyPh 4.5s linear infinite; animation-delay: .8s; }
@keyframes tyPh { 0% { left: 6px; opacity: 1; } 92% { left: calc(100% - 8px); opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
.type { transition: border-color .3s, transform .3s var(--ease), box-shadow .3s; }
.type:hover { box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--v1) 45%, transparent); }
.home-types .type h3 { font-size: 17px; }
@media (prefers-reduced-motion: reduce) { .type.play .ty-ph { animation: none; } }