/* Fitkur — pazarlama sitesi */
:root {
  --ink: #0a0a0a; --ink-2: #111111; --ink-3: #171717;
  --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16);
  --bone: #f3f0e8; --dim: #a3a09a; --dimmer: #6b6964;
  --volt: #d4ff3a; --volt-ink: #0d1200; --signal: #ff5a1f; --sky: #7db7ff;
  --r: 22px; --maxw: 1240px;
  --display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--ink); color: var(--bone); font-family: 'Inter Tight', system-ui, sans-serif; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--volt); color: var(--volt-ink); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
/* .98: Ç/Ş çengelleri alt satırın harflerine değmesin */
.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .98; letter-spacing: .005em; }
.mono { font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--volt); }
.kicker::before { content: ""; width: 8px; height: 8px; background: var(--volt); border-radius: 2px; transform: rotate(45deg); }
.v { color: var(--volt); }
.section { padding: 130px 0; position: relative; }
.head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 60px; }
.head h2 { font-size: clamp(2.8rem, 6.4vw, 5.6rem); margin-top: 16px; }
.head p { color: var(--dim); font-size: 1.12rem; max-width: 470px; justify-self: end; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 17px 28px; border-radius: 999px; font-weight: 700; font-size: 1rem; border: none; cursor: pointer; font-family: inherit; transition: transform .2s, background .2s, box-shadow .2s, color .2s; white-space: nowrap; text-decoration: none; }
.btn-volt { background: var(--volt); color: var(--volt-ink); }
.btn-volt:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(212,255,58,.65); }
.btn-volt i { transition: transform .2s; }
.btn-volt:hover i.fa-arrow-right { transform: translateX(4px) rotate(-45deg); }
.btn-line { background: rgba(255,255,255,.04); color: var(--bone); border: 1px solid var(--line-2); backdrop-filter: blur(8px); }
.btn-line:hover { background: rgba(255,255,255,.1); }
.btn-ink { background: var(--ink); color: var(--bone); }
.btn-ink:hover { transform: translateY(-2px); }

/* ===== NAV ===== */
.nav { position: fixed; top: 14px; left: 0; right: 0; z-index: 60; }
.nav-in { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.nav-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 10px 10px 22px; border-radius: 999px; border: 1px solid transparent; transition: background .3s, border-color .3s; }
.nav.solid .nav-bar { background: rgba(14,14,14,.82); border-color: var(--line); backdrop-filter: blur(16px) saturate(140%); }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 1.7rem; letter-spacing: .04em; line-height: 1; }
.logo-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--volt); display: grid; place-items: center; }
.nav-links { display: flex; gap: 4px; }
.nav-links a { padding: 9px 15px; border-radius: 999px; color: var(--dim); font-weight: 600; font-size: .94rem; transition: color .2s, background .2s; }
.nav-links a:hover, .nav-links a.cur { color: var(--bone); background: rgba(255,255,255,.07); }
.nav-cta { display: flex; gap: 8px; }
.nav-cta .btn { padding: 12px 20px; font-size: .92rem; }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255,255,255,.05); color: var(--bone); font-size: 1.1rem; cursor: pointer; }

/* ===== HERO ===== */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; transform: scale(1.06); animation: slowzoom 18s ease-out forwards; filter: saturate(.85) contrast(1.05); }
@keyframes slowzoom { to { transform: scale(1); } }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(10,10,10,.96) 0%, rgba(10,10,10,.82) 38%, rgba(10,10,10,.35) 70%, rgba(10,10,10,.55) 100%),
  linear-gradient(0deg, var(--ink) 0%, rgba(10,10,10,0) 30%); }
.hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: end; padding-top: 140px; padding-bottom: 50px; }
.hero h1 { font-size: clamp(3.6rem, 10vw, 9.4rem); }
/* Ç, Ş, Ğ çengelleri ve İ noktası maske tarafından kesilmesin */
.hero h1 .line { display: block; overflow: hidden; padding: .1em 0 .12em; margin: -.1em 0 -.12em; }
.hero h1 .line > span { display: inline-block; transform: translateY(105%); animation: rise .9s cubic-bezier(.2,.7,.1,1) forwards; }
.hero h1 .line:nth-child(2) > span { animation-delay: .08s; }
.hero h1 .line:nth-child(3) > span { animation-delay: .16s; }
.hero h1 .line:nth-child(4) > span { animation-delay: .24s; }
@keyframes rise { to { transform: none; } }
.out { color: transparent; -webkit-text-stroke: 2px var(--bone); }
.hero-sub { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; margin-top: 34px; max-width: 760px; }
.hero-sub .bar { width: 3px; height: 100%; background: var(--volt); border-radius: 3px; }
.hero-sub p { font-size: 1.2rem; color: #d6d2c9; max-width: 560px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.hero-note { margin-top: 18px; color: var(--dim); font-size: .9rem; display: flex; gap: 18px; flex-wrap: wrap; }
.hero-note i { color: var(--volt); margin-right: 6px; }
.founder { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 16px; border-radius: 999px; background: rgba(212,255,58,.08); border: 1px solid rgba(212,255,58,.3); color: var(--bone); font-size: .9rem; margin-bottom: 22px; transition: background .2s; }
.founder:hover { background: rgba(212,255,58,.15); }
.founder b { color: var(--volt); }
.founder i { font-size: .8rem; color: var(--volt); }
.dotlive { width: 8px; height: 8px; border-radius: 50%; background: var(--volt); box-shadow: 0 0 0 0 rgba(212,255,58,.7); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(212,255,58,0); } 100% { box-shadow: 0 0 0 0 rgba(212,255,58,0); } }

/* Phone */
.phone-wrap { position: relative; justify-self: end; animation: fadein 1s .4s both; }
@keyframes fadein { from { opacity: 0; transform: translateY(30px); } }
.phone { width: 300px; border-radius: 46px; padding: 10px; background: linear-gradient(145deg, #2a2a2a, #0c0c0c); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 50px 120px -30px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.05); transform: rotate(-4deg); }
.screen { border-radius: 37px; overflow: hidden; background: #0e0f0c; height: 600px; position: relative; }
.notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; background: #000; border-radius: 20px; z-index: 3; }
.app { padding: 50px 16px 16px; display: flex; flex-direction: column; gap: 12px; height: 100%; font-size: .82rem; }
.app-top { display: flex; justify-content: space-between; align-items: center; }
.app-top b { font-size: 1.05rem; }
.app-top small { color: var(--dimmer); display: block; font-size: .72rem; }
.app-av { width: 34px; height: 34px; border-radius: 50%; background: var(--volt); color: var(--volt-ink); display: grid; place-items: center; font-weight: 800; }
.app-day { border-radius: 18px; padding: 14px; background: linear-gradient(140deg, rgba(212,255,58,.16), rgba(212,255,58,.03)); border: 1px solid rgba(212,255,58,.25); }
.app-day .mono { color: var(--volt); font-size: .62rem; }
.app-day h4 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; text-transform: uppercase; line-height: 1.02; margin: 6px 0 2px; }
.app-day small { color: var(--dim); }
.ex { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #171815; border: 1px solid rgba(255,255,255,.06); }
.ex .n { width: 26px; height: 26px; border-radius: 8px; background: #22231f; display: grid; place-items: center; font-family: var(--mono); font-size: .7rem; color: var(--dim); }
.ex b { display: block; font-size: .84rem; }
.ex span { color: var(--dimmer); font-size: .72rem; }
.ex .chip { margin-left: auto; font-size: .6rem; font-weight: 800; padding: 3px 7px; border-radius: 99px; background: rgba(255,90,31,.16); color: var(--signal); text-transform: uppercase; letter-spacing: .04em; }
.ex.done .n { background: var(--volt); color: var(--volt-ink); }
.macro { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.macro div { background: #171815; border-radius: 12px; padding: 8px; border: 1px solid rgba(255,255,255,.06); }
.macro small { color: var(--dimmer); font-size: .64rem; display: block; }
.macro b { font-size: .86rem; }
.macro i { display: block; height: 4px; border-radius: 4px; background: #262722; margin-top: 6px; overflow: hidden; }
.macro i::after { content: ""; display: block; height: 100%; width: var(--p); background: var(--c); }
.app-btn { margin-top: auto; background: var(--volt); color: var(--volt-ink); border-radius: 14px; padding: 13px; text-align: center; font-weight: 800; }
.toast { position: absolute; display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 18px; background: rgba(22,22,22,.9); backdrop-filter: blur(14px); border: 1px solid var(--line-2); box-shadow: 0 24px 60px -20px rgba(0,0,0,.9); font-size: .84rem; width: max-content; max-width: 270px; animation: float 6s ease-in-out infinite; }
.toast .ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.toast b { display: block; }
.toast span { color: var(--dim); font-size: .78rem; }
.t1 { left: -150px; top: 90px; }
.t2 { right: -40px; bottom: 120px; animation-delay: -3s; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.hero-strip { border-top: 1px solid var(--line); background: rgba(10,10,10,.6); backdrop-filter: blur(10px); }
.hero-strip .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.hero-strip div.s { padding: 22px 0 22px 22px; display: flex; gap: 14px; align-items: center; border-left: 1px solid var(--line); }
.hero-strip div.s:first-child { border-left: none; padding-left: 0; }
.hero-strip i { color: var(--volt); font-size: 1.1rem; }
.hero-strip b { display: block; font-size: .98rem; }
.hero-strip span { color: var(--dimmer); font-size: .85rem; }

/* ===== Alt sayfa başlığı ===== */
.phero { position: relative; isolation: isolate; overflow: hidden; padding: 190px 0 90px; border-bottom: 1px solid var(--line); }
.phero-bg { position: absolute; inset: 0; z-index: -2; }
.phero-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3) contrast(1.05); }
.phero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,10,10,.97) 25%, rgba(10,10,10,.6)), linear-gradient(0deg, var(--ink), transparent 40%); }
.phero h1 { font-size: clamp(3rem, 8vw, 7rem); margin: 18px 0 20px; max-width: 900px; }
.phero p { color: #d6d2c9; font-size: 1.2rem; max-width: 620px; }
.phero.plain { padding: 170px 0 60px; }
.phero.plain::before { background: radial-gradient(800px 400px at 85% 0%, rgba(212,255,58,.1), transparent 60%); }

/* ===== WHO ===== */
.who { padding: 40px 0; border-bottom: 1px solid var(--line); overflow: hidden; }
.who-track { display: flex; gap: 14px; width: max-content; animation: marquee 38s linear infinite; }
.who:hover .who-track { animation-play-state: paused; }
.who-chip { display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; border-radius: 999px; border: 1px solid var(--line); font-family: var(--display); text-transform: uppercase; font-size: 1.5rem; letter-spacing: .02em; color: var(--dim); white-space: nowrap; }
.who-chip i { font-size: 1.1rem; color: var(--volt); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ===== MANIFESTO ===== */
.mani { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.mani-photo { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4/5; }
.mani-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) contrast(1.05); }
.mani-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,10,.85), transparent 55%); }
.mani-photo .cap { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 1; }
.chat-old { display: grid; gap: 8px; }
.chat-old div { background: rgba(37,211,102,.12); border: 1px solid rgba(37,211,102,.25); color: #cdeed9; padding: 9px 13px; border-radius: 14px 14px 14px 4px; font-size: .88rem; width: fit-content; max-width: 90%; }
.chat-old div small { color: #7fae90; margin-left: 8px; font-size: .72rem; }
.mani-text h2 { font-size: clamp(2.6rem, 5.4vw, 4.8rem); margin: 16px 0 28px; }
.mani-text h2 s { text-decoration-color: var(--signal); text-decoration-thickness: 6px; color: var(--dimmer); }
.pains { display: grid; border-top: 1px solid var(--line); }
.pain { display: grid; grid-template-columns: 54px 1fr auto; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.pain .no { font-family: var(--mono); color: var(--dimmer); font-size: .8rem; }
.pain b { font-weight: 600; font-size: 1.08rem; }
.pain .fix { font-family: var(--mono); font-size: .7rem; color: var(--volt); letter-spacing: .1em; text-transform: uppercase; text-align: right; }

/* ===== SHOWCASE ===== */
.show { background: var(--ink-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.tab { display: inline-flex; gap: 10px; align-items: center; padding: 12px 20px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--dim); font-family: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; transition: all .2s; }
.tab:hover { color: var(--bone); }
.tab.on { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.browser { border-radius: 20px; border: 1px solid var(--line-2); background: #f6f5f1; color: #111; overflow: hidden; box-shadow: 0 60px 140px -50px rgba(212,255,58,.25), 0 40px 100px -40px rgba(0,0,0,.9); }
.b-chrome { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #e9e7e1; border-bottom: 1px solid #dad7cf; }
.b-dots { display: flex; gap: 7px; }
.b-dots i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.b-url { flex: 1; max-width: 420px; margin: 0 auto; background: #fff; border-radius: 8px; padding: 6px 12px; font-size: .78rem; color: #555; display: flex; gap: 8px; align-items: center; }
.b-url i { color: #1a9e57; font-size: .7rem; }
.b-body { display: grid; grid-template-columns: 200px 1fr; min-height: 470px; }
.b-side { background: #111; color: #bbb; padding: 18px 14px; display: flex; flex-direction: column; gap: 4px; font-size: .84rem; }
.b-side .lg { display: flex; align-items: center; gap: 8px; color: #fff; font-family: var(--display); font-size: 1.25rem; text-transform: uppercase; margin-bottom: 14px; padding-left: 6px; }
.b-side .lg span { width: 22px; height: 22px; border-radius: 6px; background: var(--volt); }
.b-side a { padding: 9px 10px; border-radius: 8px; display: flex; gap: 10px; align-items: center; cursor: pointer; }
.b-side a.on { background: rgba(212,255,58,.12); color: var(--volt); }
.b-side a em { margin-left: auto; font-style: normal; background: var(--signal); color: #fff; font-size: .66rem; font-weight: 800; padding: 1px 6px; border-radius: 99px; }
.b-main { padding: 22px; position: relative; }
.pane { display: none; animation: paneIn .45s ease; }
.pane.on { display: block; }
@keyframes paneIn { from { opacity: 0; transform: translateY(10px); } }
.p-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 10px; flex-wrap: wrap; }
.p-head h5 { font-size: 1.15rem; font-weight: 800; }
.p-head small { color: #777; font-size: .8rem; }
.p-btn { background: #111; color: #fff; font-weight: 700; font-size: .78rem; padding: 8px 14px; border-radius: 8px; }
.kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kcol { background: #ecebe6; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.kcol h6 { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; gap: 6px; color: #444; padding: 2px 4px 4px; }
.kcol h6 i { width: 8px; height: 8px; border-radius: 50%; }
.kcol h6 em { margin-left: auto; font-style: normal; color: #888; }
.kcard { background: #fff; border-radius: 10px; padding: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.06); font-size: .78rem; }
.kcard .who2 { display: flex; gap: 8px; align-items: center; font-weight: 700; margin-bottom: 6px; }
.kcard .who2 span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .66rem; color: #fff; }
.tag { display: inline-flex; gap: 4px; align-items: center; font-size: .64rem; font-weight: 700; padding: 2px 7px; border-radius: 99px; margin: 2px 2px 0 0; }
.tg-y { background: #fef3c7; color: #a16207; } .tg-b { background: #dbeafe; color: #1d4ed8; } .tg-o { background: #ffedd5; color: #c2410c; } .tg-g { background: #dcfce7; color: #15803d; } .tg-r { background: #fee2e2; color: #b91c1c; }
.prog-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; background: #111; color: #fff; border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.prog-sum small { color: #888; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; display: block; }
.prog-sum b { font-size: 1.15rem; }
.prow { display: grid; grid-template-columns: 18px 110px 1fr 70px 70px 90px; gap: 10px; align-items: center; background: #fff; border: 1px solid #e3e1db; border-radius: 10px; padding: 9px 12px; margin-bottom: 7px; font-size: .8rem; }
.prow .grip { color: #bbb; }
.prow .fld { background: #f4f3ef; border-radius: 6px; padding: 5px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .mod { font-size: .66rem; font-weight: 800; text-align: center; border-radius: 6px; padding: 5px; }
.ck-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; }
.ck-card { background: #fff; border: 1px solid #e3e1db; border-radius: 12px; padding: 14px; }
.ck-card h6 { font-size: .8rem; color: #666; margin-bottom: 8px; font-weight: 700; }
.ck-card svg { width: 100%; height: 150px; }
.thumbs { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 10px 0; }
.thumbs div { aspect-ratio: 3/4; border-radius: 8px; background: linear-gradient(160deg, #d9d6cd, #bdb9ae); display: grid; place-items: center; color: #8d897e; }
.fb { border: 1.5px solid #111; border-radius: 10px; padding: 10px; font-size: .78rem; color: #333; min-height: 64px; }
.fb .caret { display: inline-block; width: 2px; height: 14px; background: #111; vertical-align: middle; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.msgs { display: grid; grid-template-columns: 220px 1fr; gap: 14px; height: 400px; }
.msg-list { background: #fff; border: 1px solid #e3e1db; border-radius: 12px; overflow: hidden; }
.msg-list div { padding: 11px 12px; border-bottom: 1px solid #efede8; font-size: .78rem; }
.msg-list div.on { background: #f3f9e0; }
.msg-list b { display: block; }
.msg-list span { color: #888; }
.chat { background: #fff; border: 1px solid #e3e1db; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; justify-content: flex-end; }
.bub { max-width: 75%; padding: 9px 13px; border-radius: 14px; font-size: .8rem; }
.bub.l { background: #f0eee9; border-bottom-left-radius: 4px; }
.bub.r { background: #111; color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.bub small { display: block; opacity: .55; font-size: .66rem; margin-top: 3px; text-align: right; }
.show-foot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 34px; }
.show-foot div { border-top: 2px solid var(--line-2); padding-top: 14px; color: var(--dim); font-size: .95rem; transition: border-color .3s; }
.show-foot div b { display: block; color: var(--bone); margin-bottom: 4px; }
.show-foot div.on { border-color: var(--volt); }

/* ===== BENTO ===== */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(240px, auto); gap: 14px; }
.bx { position: relative; border-radius: var(--r); background: var(--ink-3); border: 1px solid var(--line); padding: 28px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .3s, transform .3s; }
.bx:hover { border-color: var(--line-2); transform: translateY(-3px); }
.bx h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 2rem; line-height: 1.02; margin-bottom: 10px; }
.bx p { color: var(--dim); font-size: .98rem; }
.bx .mono { color: var(--dimmer); margin-bottom: 14px; }
.s2 { grid-column: span 2; } .s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .r2 { grid-row: span 2; }
.bx-photo { padding: 0; justify-content: flex-end; }
.bx-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s; filter: saturate(.8); }
.bx-photo:hover img { transform: scale(1.04); }
.bx-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(10,10,10,.97) 15%, rgba(10,10,10,.55) 55%, rgba(10,10,10,.15)); }
.bx-photo .in { position: relative; z-index: 2; padding: 30px; }
.bx-photo h3 { font-size: clamp(2.4rem, 4vw, 3.6rem); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pills span { padding: 7px 13px; border-radius: 99px; background: rgba(255,255,255,.08); border: 1px solid var(--line-2); font-size: .82rem; font-weight: 600; backdrop-filter: blur(6px); }
.mini-chat { margin-top: auto; display: grid; gap: 7px; padding-top: 18px; }
.mini-chat div { padding: 8px 12px; border-radius: 12px; font-size: .82rem; width: fit-content; max-width: 88%; }
.mini-chat .a { background: #232323; border-bottom-left-radius: 3px; }
.mini-chat .b { background: var(--volt); color: var(--volt-ink); justify-self: end; border-bottom-right-radius: 3px; font-weight: 600; }
.paycard { margin-top: auto; border-radius: 16px; padding: 16px; background: linear-gradient(135deg, #1f2a05, #0f1402); border: 1px solid rgba(212,255,58,.25); }
.paycard .row { display: flex; justify-content: space-between; align-items: center; }
.paycard b { font-family: var(--display); font-weight: 400; font-size: 2rem; color: var(--volt); }
.paycard small { color: var(--dim); }
.heat { margin-top: auto; display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; padding-top: 18px; }
.heat i { aspect-ratio: 1; border-radius: 3px; background: #252525; display: block; }
.heat i.h1 { background: rgba(212,255,58,.35); } .heat i.h2 { background: rgba(212,255,58,.65); } .heat i.h3 { background: var(--volt); }
.pr { margin-top: auto; padding-top: 18px; }
.pr-big { font-family: var(--display); font-size: 3.4rem; line-height: .95; color: var(--bone); }
.pr-big em { font-style: normal; color: var(--volt); }
.pr small { color: var(--dim); }
.remind { margin-top: auto; display: grid; gap: 8px; padding-top: 18px; }
.remind div { display: flex; gap: 10px; align-items: center; font-size: .84rem; padding: 9px 12px; background: #1d1d1d; border-radius: 12px; }
.remind div i { color: var(--signal); }
.brand-demo { margin-top: auto; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding-top: 20px; }
.swatches { display: flex; gap: 8px; }
.swatches button { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform .2s; }
.swatches button.on { border-color: var(--bone); transform: scale(1.12); }
.brand-url { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: #1d1d1d; font-family: var(--mono); font-size: .82rem; }
.brand-url .dot { width: 22px; height: 22px; border-radius: 6px; background: var(--brand, var(--volt)); transition: background .3s; flex-shrink: 0; }
.shield { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 18px; }
.shield div { background: #1d1d1d; border-radius: 14px; padding: 12px; font-size: .82rem; }
.shield i { color: var(--volt); display: block; font-size: 1.1rem; margin-bottom: 6px; }

/* ===== TIMELINE ===== */
.tl { position: relative; max-width: 980px; margin: 0 auto; }
.tl::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--line-2), var(--volt), var(--line-2)); transform: translateX(-1px); }
.ev { display: grid; grid-template-columns: 1fr 70px 1fr; align-items: center; margin-bottom: 26px; }
.ev .dot { width: 18px; height: 18px; border-radius: 50%; background: var(--ink); border: 3px solid var(--volt); justify-self: center; box-shadow: 0 0 0 6px rgba(212,255,58,.08); }
.ev .card { background: var(--ink-3); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; }
.ev .card .mono { color: var(--dimmer); display: block; margin-bottom: 6px; }
.ev .card b { font-size: 1.05rem; }
.ev .card p { color: var(--dim); font-size: .92rem; margin-top: 4px; }
.ev.L .card { grid-column: 1; border-left: 3px solid var(--signal); } .ev.L .dot { grid-column: 2; grid-row: 1; border-color: var(--signal); box-shadow: 0 0 0 6px rgba(255,90,31,.1); } .ev.L .side { grid-column: 3; }
.ev.R .card { grid-column: 3; grid-row: 1; border-left: 3px solid var(--volt); } .ev.R .dot { grid-column: 2; grid-row: 1; } .ev.R .side { grid-column: 1; grid-row: 1; text-align: right; }
.ev.L .card .mono::after { content: " · Danışan"; color: var(--signal); }
.ev.R .card .mono::after { content: " · Koç"; color: var(--volt); }
.ev .side { color: var(--dimmer); padding: 0 10px; }
.ev .side span { display: inline-flex; gap: 8px; align-items: center; }
.tl-legend { display: flex; justify-content: space-between; max-width: 980px; margin: 0 auto 36px; font-family: var(--display); text-transform: uppercase; font-size: 1.6rem; }
.who-l { color: var(--signal); } .who-r { color: var(--volt); }

/* ===== STEPS ===== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.step { position: relative; border-radius: var(--r); overflow: hidden; min-height: 460px; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; isolation: isolate; border: 1px solid var(--line); }
.step img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: grayscale(.4); transition: transform .8s, filter .8s; }
.step:hover img { transform: scale(1.05); filter: grayscale(0); }
.step::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10,10,10,.96) 25%, rgba(10,10,10,.25)); }
.step .num { position: absolute; top: 18px; right: 22px; font-family: var(--display); font-size: 7rem; line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(212,255,58,.85); }
.step h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 2.3rem; line-height: 1.02; margin-bottom: 10px; }
.step p { color: #cfcbc2; }

/* ===== PRICING ===== */
.pricing { background: var(--bone); color: var(--ink); border-radius: 40px; margin: 0 14px; }
.pricing .head p { color: #5e5b55; }
.pricing .kicker { color: #5a7a00; } .pricing .kicker::before { background: #5a7a00; }
.cycle { display: inline-flex; padding: 5px; border-radius: 999px; background: #e3dfd4; margin-bottom: 34px; }
.cycle button { border: none; background: none; font-family: inherit; font-weight: 700; font-size: .95rem; padding: 11px 22px; border-radius: 999px; cursor: pointer; color: #5e5b55; }
.cycle button.on { background: var(--ink); color: var(--bone); }
.cycle em { font-style: normal; background: var(--signal); color: #fff; font-size: .68rem; padding: 2px 7px; border-radius: 99px; margin-left: 6px; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
.plan { background: #fff; border-radius: 26px; padding: 32px; display: flex; flex-direction: column; border: 1px solid #e3dfd4; position: relative; }
.plan.hot { background: var(--ink); color: var(--bone); border-color: var(--ink); box-shadow: 0 40px 80px -30px rgba(0,0,0,.45); }
.plan .ribbon { position: absolute; top: 22px; right: 22px; background: var(--volt); color: var(--volt-ink); font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .1em; padding: 6px 10px; border-radius: 99px; text-transform: uppercase; }
.plan h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 2.2rem; line-height: 1.02; }
.plan .for { color: #77736b; font-size: .95rem; margin-top: 6px; min-height: 46px; }
.plan.hot .for { color: var(--dim); }
.price { display: flex; align-items: flex-start; gap: 4px; margin: 26px 0 2px; }
.price .cur { font-weight: 800; font-size: 1.3rem; margin-top: 10px; }
.price b { font-family: var(--display); font-weight: 400; font-size: 5rem; line-height: 1; letter-spacing: -.01em; }
.price .per { align-self: flex-end; color: #77736b; font-weight: 600; margin-bottom: 12px; margin-left: 4px; }
.plan.hot .price .per { color: var(--dim); }
.pnote { font-size: .84rem; color: #77736b; min-height: 22px; margin-bottom: 24px; }
.plan.hot .pnote { color: var(--dim); }
.plan ul { list-style: none; display: grid; gap: 11px; margin-bottom: 28px; flex: 1; }
.plan li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; font-size: .95rem; }
.plan li i { color: #5a7a00; margin-top: 5px; font-size: .8rem; }
.plan.hot li i { color: var(--volt); }
.plan li.no { color: #b0aca2; } .plan li.no i { color: #c9c5bb; }
.plan .btn { width: 100%; }
.extras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.extra { border-radius: 20px; padding: 20px 22px; border: 1px dashed #c9c4b6; display: flex; gap: 14px; }
.extra i { color: var(--signal); font-size: 1.2rem; margin-top: 3px; }
.extra b { display: block; }
.extra span { color: #6e6a62; font-size: .9rem; }
.compare { margin-top: 30px; border-radius: 20px; background: #fff; border: 1px solid #e3dfd4; overflow: hidden; }
.compare summary { list-style: none; cursor: pointer; padding: 20px 24px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.compare summary::-webkit-details-marker { display: none; }
.compare summary i { transition: transform .3s; }
.compare[open] summary i { transform: rotate(180deg); }
.ctable { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ctable th, .ctable td { padding: 13px 24px; text-align: center; border-top: 1px solid #efece4; }
.ctable th:first-child, .ctable td:first-child { text-align: left; }
.ctable thead th { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #77736b; }
.ctable .y { color: #5a7a00; } .ctable .n { color: #c9c5bb; }
.ctable tr.grp td { background: #f7f5ef; font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: #5e5b55; }
.founder-box { margin-top: 14px; border-radius: 20px; padding: 22px 26px; background: var(--ink); color: var(--bone); display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.founder-box b { color: var(--volt); }
.founder-box .meter { flex: 1; min-width: 200px; height: 8px; background: #2a2a2a; border-radius: 8px; overflow: hidden; }
.founder-box .meter i { display: block; height: 100%; background: var(--volt); }

/* ===== ROI ===== */
.roi { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.roi h2 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); margin: 16px 0 20px; }
.roi > div > p { color: var(--dim); font-size: 1.1rem; max-width: 460px; }
.calc { border-radius: 28px; padding: 32px; background: var(--ink-3); border: 1px solid var(--line); }
.sl { margin-bottom: 26px; }
.sl label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; margin-bottom: 12px; color: var(--dim); }
.sl output { font-family: var(--display); font-size: 2rem; color: var(--bone); line-height: 1; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: #2a2a2a; outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--volt); border: 5px solid var(--ink); box-shadow: 0 0 0 1px var(--volt); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--volt); border: 5px solid var(--ink); cursor: pointer; }
.res { border-top: 1px solid var(--line); padding-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.res div small { color: var(--dimmer); display: block; font-size: .82rem; }
.res div b { font-size: 1.2rem; }
.res .big { grid-column: span 2; background: rgba(212,255,58,.08); border: 1px solid rgba(212,255,58,.25); border-radius: 16px; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.res .big b { font-family: var(--display); font-weight: 400; font-size: 2.6rem; color: var(--volt); line-height: 1; }

/* ===== FAQ ===== */
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: start; }
.faq-side { position: sticky; top: 110px; }
.faq-side h2 { font-size: clamp(2.6rem, 5vw, 4.4rem); margin: 16px 0 20px; }
.faq-side p { color: var(--dim); margin-bottom: 24px; }
.qa { border-top: 1px solid var(--line); }
.qa:last-child { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; padding: 24px 0; display: flex; gap: 20px; justify-content: space-between; align-items: center; font-weight: 700; font-size: 1.12rem; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .pm { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; flex-shrink: 0; transition: transform .3s, background .3s, color .3s; }
.qa[open] summary .pm { transform: rotate(45deg); background: var(--volt); color: var(--volt-ink); border-color: var(--volt); }
.qa p { color: var(--dim); padding: 0 50px 26px 0; }

/* ===== FINAL CTA ===== */
.final { position: relative; overflow: hidden; isolation: isolate; border-radius: 40px; margin: 0 14px; padding: 120px 0; }
.final > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; object-position: 50% 30%; }
.final::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,10,10,.95) 30%, rgba(10,10,10,.55)); }
.final-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.final h2 { font-size: clamp(3.4rem, 8vw, 7.4rem); }
.final h2 .out { -webkit-text-stroke: 2px var(--volt); }
.final-grid > div > p { color: #d6d2c9; font-size: 1.15rem; margin-top: 22px; max-width: 480px; }

/* ===== FORMS ===== */
.lead { background: rgba(14,14,14,.86); backdrop-filter: blur(16px); border: 1px solid var(--line-2); border-radius: 26px; padding: 30px; display: grid; gap: 14px; }
.lead h4 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 1.9rem; line-height: 1.02; }
.lead .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fld-l { display: grid; gap: 6px; font-size: .86rem; color: var(--dim); font-weight: 600; }
.lead input, .lead select, .lead textarea { width: 100%; padding: 15px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--bone); font-family: inherit; font-size: 1rem; }
.lead textarea { resize: vertical; min-height: 96px; }
.lead select option { background: #161616; }
.lead input:focus, .lead select:focus, .lead textarea:focus { outline: none; border-color: var(--volt); }
.lead small { color: var(--dimmer); font-size: .82rem; }
.chk { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: .86rem; color: var(--dim); cursor: pointer; }
.chk input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--volt); }
.chk a { color: var(--bone); text-decoration: underline; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 14px; border-radius: 14px; border: 1px solid var(--line-2); font-weight: 700; transition: all .2s; }
.seg input:checked + span { border-color: var(--volt); background: rgba(212,255,58,.1); color: var(--volt); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.alert { padding: 14px 18px; border-radius: 14px; font-weight: 600; }
.alert.err { background: rgba(255,90,31,.12); border: 1px solid rgba(255,90,31,.4); color: #ffb196; }
.alert.ok { background: rgba(212,255,58,.1); border: 1px solid rgba(212,255,58,.35); color: var(--volt); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.perks { display: grid; gap: 16px; margin-top: 30px; }
.perk { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; }
.perk i { width: 46px; height: 46px; border-radius: 14px; background: rgba(212,255,58,.1); color: var(--volt); display: grid; place-items: center; font-size: 1.1rem; }
.perk b { display: block; font-size: 1.05rem; }
.perk span { color: var(--dim); font-size: .95rem; }

/* ===== Blog + yasal metin ===== */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.post-card { border-radius: var(--r); overflow: hidden; background: var(--ink-3); border: 1px solid var(--line); display: flex; flex-direction: column; transition: transform .3s, border-color .3s; }
.post-card:hover { transform: translateY(-4px); border-color: var(--line-2); }
.post-card .cv { aspect-ratio: 16/10; overflow: hidden; }
.post-card .cv img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: transform .8s; }
.post-card:hover .cv img { transform: scale(1.05); }
.post-card .bd { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card .mono { color: var(--dimmer); }
.post-card h3 { font-size: 1.3rem; line-height: 1.25; }
.post-card p { color: var(--dim); font-size: .95rem; }
.post-card .more { margin-top: auto; color: var(--volt); font-weight: 700; font-size: .92rem; }
.article { max-width: 760px; margin: 0 auto; }
.article .cover { border-radius: var(--r); overflow: hidden; margin: -40px 0 50px; aspect-ratio: 16/8; }
.article .cover img { width: 100%; height: 100%; object-fit: cover; }
.prose { font-size: 1.1rem; color: #dcd8cf; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 2.1rem; line-height: 1.05; color: var(--bone); margin-top: 1.8em; }
.prose h3 { font-size: 1.3rem; color: var(--bone); margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .5em; }
.prose b, .prose strong { color: var(--bone); }
.prose a { color: var(--volt); text-decoration: underline; }
.prose i { color: var(--dim); }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose td, .prose th { border: 1px solid var(--line-2); padding: 10px 12px; text-align: left; vertical-align: top; }
.post-cta { margin-top: 2.4em !important; border-radius: 22px; padding: 28px; background: linear-gradient(140deg, rgba(212,255,58,.14), rgba(212,255,58,.03)); border: 1px solid rgba(212,255,58,.3); }
.post-cta b { font-size: 1.3rem; color: var(--bone); display: block; }
.post-cta p { color: var(--dim); margin: 8px 0 18px; font-size: 1rem; }
.post-cta .btn { text-decoration: none; color: var(--volt-ink); }
.legal-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }
.legal-nav a { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--dim); font-weight: 600; font-size: .9rem; }
.legal-nav a.on { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.big-404 { font-family: var(--display); font-size: clamp(8rem, 30vw, 22rem); line-height: .85; color: transparent; -webkit-text-stroke: 2px var(--volt); }

/* ===== FOOTER ===== */
footer { padding: 90px 0 30px; overflow: hidden; }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 70px; }
.foot-top p { color: var(--dim); margin-top: 16px; max-width: 320px; }
.foot-top p.legal-id { font-size: .82rem; color: var(--dimmer); }
.foot-top h6 { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dimmer); margin-bottom: 16px; font-weight: 700; }
.foot-top a { display: block; color: var(--dim); margin-bottom: 10px; transition: color .2s; }
.foot-top a:hover { color: var(--volt); }
.foot-top a.logo { color: var(--bone); }
.wordmark { font-family: var(--display); text-transform: uppercase; font-size: 22vw; line-height: .8; text-align: center; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.14); letter-spacing: .02em; user-select: none; margin-bottom: 30px; white-space: nowrap; }
.foot-bot { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: var(--dimmer); font-size: .88rem; border-top: 1px solid var(--line); padding-top: 24px; }

.wa { position: fixed; right: 20px; bottom: 20px; z-index: 70; width: 60px; height: 60px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; font-size: 1.75rem; box-shadow: 0 14px 34px -10px rgba(37,211,102,.7); transition: transform .2s; }
.wa:hover { transform: scale(1.08) rotate(-6deg); }
.cookie { position: fixed; left: 20px; bottom: 20px; z-index: 80; max-width: 440px; background: rgba(20,20,20,.96); border: 1px solid var(--line-2); border-radius: 20px; padding: 20px; backdrop-filter: blur(12px); box-shadow: 0 30px 60px -20px rgba(0,0,0,.9); font-size: .9rem; color: var(--dim); }
.cookie a { color: var(--bone); text-decoration: underline; }
.cookie div { display: flex; gap: 8px; margin-top: 14px; }
.cookie .btn { padding: 11px 18px; font-size: .88rem; }

/* reveal */
.rv { opacity: 0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.2,.7,.1,1), transform .8s cubic-bezier(.2,.7,.1,1); }
.rv.in { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
  .hero h1 .line > span { transform: none; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; }
  .phone-wrap { justify-self: center; margin-top: 30px; }
  .t1 { left: -110px; }
  .b-body { grid-template-columns: 1fr; }
  .b-side { display: none; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .s2, .s3, .s4 { grid-column: span 1; }
  .bx-photo.s4 { grid-column: span 2; min-height: 420px; }
  .s3 { grid-column: span 2; }
  .mani, .roi, .faq-grid, .final-grid, .split { grid-template-columns: 1fr; gap: 40px; }
  .faq-side { position: static; }
  .mani-photo { aspect-ratio: 16/11; }
  .plans, .extras { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
  .posts { grid-template-columns: 1fr 1fr; }
  .foot-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  body { font-size: 16px; }
  .nav-links, .nav-cta .btn-line { display: none; }
  .burger { display: grid; place-items: center; }
  .nav.open .nav-bar { background: rgba(14,14,14,.97); border-color: var(--line); border-radius: 26px; flex-wrap: wrap; }
  .nav.open .nav-links { display: flex; flex-direction: column; width: 100%; order: 3; padding: 8px 0 6px; }
  .nav-cta .btn-volt { padding: 12px 16px; }
  .head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; }
  .head p { justify-self: start; }
  .section { padding: 90px 0; }
  .hero-grid { padding-top: 120px; }
  .hero-sub { grid-template-columns: 1fr; gap: 0; }
  .hero-sub .bar { display: none; }
  .hero-strip .wrap { grid-template-columns: 1fr 1fr; }
  .hero-strip div.s { border-left: none; padding: 16px 0; }
  .toast { display: none; }
  .phone { transform: none; width: 280px; }
  .screen { height: 560px; }
  .kanban { grid-template-columns: 1fr 1fr; }
  .prow { grid-template-columns: 1fr 1fr; }
  .prow .grip, .prow .opt { display: none; }
  .ck-grid, .msgs { grid-template-columns: 1fr; height: auto; }
  .msg-list { display: none; }
  .show-foot { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: 1fr; }
  .bx-photo.s4, .s3 { grid-column: span 1; }
  .tl::before { left: 9px; }
  .ev { grid-template-columns: 40px 1fr; }
  .ev .dot { grid-column: 1 !important; grid-row: 1 !important; justify-self: start; }
  .ev .card { grid-column: 2 !important; grid-row: 1 !important; }
  .ev .side { display: none; }
  .tl-legend { font-size: 1.1rem; padding-left: 40px; gap: 10px; }
  .steps, .posts { grid-template-columns: 1fr; }
  .step { min-height: 340px; }
  .pricing, .final { border-radius: 28px; margin: 0 8px; }
  .price b { font-size: 4.2rem; }
  .ctable th, .ctable td { padding: 11px 10px; font-size: .82rem; }
  .res { grid-template-columns: 1fr; }
  .res .big { grid-column: span 1; }
  .final { padding: 80px 0; }
  .qa p { padding-right: 0; }
  .foot-top { grid-template-columns: 1fr; gap: 30px; margin-bottom: 40px; }
  footer { padding-bottom: 100px; }
  .pain { grid-template-columns: 34px 1fr; row-gap: 6px; }
  .pain .fix { grid-column: 2; text-align: left; }
  .plan.hot { order: -1; }
  .lead .row2, .seg { grid-template-columns: 1fr; }
  .phero { padding: 150px 0 60px; }
  .cookie { left: 10px; right: 10px; bottom: 90px; max-width: none; }
}

/* ---- Alan adı sorgusu ---- */
.dq { display: grid; gap: 10px; }
.dq-row { display: flex; gap: 8px; }
.dq-row input { flex: 1; min-width: 0; padding: 15px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255,255,255,.04); color: var(--bone); font: inherit; }
.dq-row input:focus { outline: none; border-color: var(--volt); }
.dq-row .btn { white-space: nowrap; }
.dq-row.big input { font-size: 1.1rem; padding: 18px 20px; }
.dq-out { display: grid; gap: 6px; }
.dq-out:empty { display: none; }
.dq-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); font-size: .95rem; }
.dq-item b { font-weight: 700; word-break: break-all; }
.dq-item .st { font-size: .8rem; font-weight: 700; white-space: nowrap; }
.dq-item.bos { border-color: rgba(212,255,58,.35); }
.dq-item.bos .st { color: var(--volt); }
.dq-item.dolu { opacity: .6; }
.dq-item.dolu .st { color: var(--signal); }
.dq-item.bilinmiyor .st { color: var(--dim); }
.dq-item button, .dq-item a.pick { background: var(--volt); color: var(--volt-ink); border: 0; border-radius: 9px; padding: 6px 12px; font-weight: 700; font-size: .8rem; cursor: pointer; text-decoration: none; }
.dq-item.chosen { outline: 2px solid var(--volt); }
.dq-note { color: var(--dim); font-size: .85rem; }
.dq-card { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 44px; border: 1px solid var(--line-2); border-radius: 28px; background: linear-gradient(135deg, rgba(212,255,58,.06), rgba(255,255,255,.02)); }
@media (max-width: 820px) { .dq-card { grid-template-columns: 1fr; padding: 26px; gap: 22px; } .dq-row { flex-direction: column; } }

/* =====================================================================
   AÇIK TEMA (varsayılan) — fotoğraflı bölümler okunaklı kalsın diye koyu "ada" olarak kalır.
   Koyu temaya dönmek için bu bloğu silmek yeterli.
   ===================================================================== */
:root {
  --ink: #f6f4ee; --ink-2: #ffffff; --ink-3: #ffffff;
  --line: rgba(24,22,14,.09); --line-2: rgba(24,22,14,.16);
  --bone: #16150f; --dim: #57544d; --dimmer: #8a867d;
  --volt-t: #4a6a00; /* beyaz zeminde okunur neon yeşil (yazı/ikon) */
  --shadow: 0 1px 2px rgba(24,22,14,.05), 0 18px 40px -24px rgba(24,22,14,.22);
}
body::after { opacity: .035; mix-blend-mode: multiply; }

/* Koyu adalar: fotoğraf üstü bölümler, telefon/uygulama maketi, öne çıkan paket */
.bx-photo, .step, .final, .mani-photo, .plan.hot, .founder-box, .toast, .phone {
  --bone: #f3f0e8; --dim: #c2beb4; --dimmer: #9a968d; --ink: #0a0a0a; --ink-3: #171717;
  --line: rgba(255,255,255,.1); --line-2: rgba(255,255,255,.18); --volt-t: var(--volt);
  color: var(--bone);
}
/* Açık ada: koyu bölümün içindeki formlar beyaz kart olarak kalır */
.lead { --bone: #16150f; --dim: #57544d; --dimmer: #8a867d; --line: rgba(24,22,14,.09); --line-2: rgba(24,22,14,.16); --volt-t: #4a6a00;
  color: var(--bone); background: #fff; border-color: var(--line); box-shadow: 0 30px 70px -30px rgba(0,0,0,.35); backdrop-filter: none; }
.lead input, .lead select, .lead textarea, .dq-row input { background: #faf9f6; color: var(--bone); }
.lead select option { background: #fff; color: #16150f; }

/* Vurgu yazıları: neon yeşil beyazda okunmaz → koyu zeytin */
.kicker, .v, .founder b, .founder i, .pain .fix, .who-chip i, .pr-big em, .shield i, .who-r, .ev.R .card .mono::after,
.res .big b, .post-card .more, .prose a, .alert.ok, .seg input:checked + span, .perk i, .foot-top a:hover, .dq-item.bos .st,
.hero-strip i, .hero-note i, .plan.hot li i, .founder-box b, .paycard b, .heat-legend b { color: var(--volt-t); }
.kicker::before { background: var(--volt-t); }
.big-404 { -webkit-text-stroke-color: var(--volt-t); }
.btn-volt:hover { box-shadow: 0 18px 40px -14px rgba(120,160,0,.55); }
.dq-item.bos { border-color: rgba(74,106,0,.35); background: rgba(212,255,58,.12); }
.dq-item.chosen { outline-color: var(--volt-t); }
.seg input:checked + span { border-color: var(--volt-t); background: rgba(212,255,58,.22); }
.qa[open] summary .pm { color: var(--volt-ink); }

/* Nav: her zaman açık cam (koyu fotoğrafın üstünde de okunur) */
.nav .nav-bar, .nav.solid .nav-bar { background: rgba(255,255,255,.86); border-color: var(--line); backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 10px 30px -18px rgba(24,22,14,.25); }
.nav-links a:hover, .nav-links a.cur { background: rgba(24,22,14,.06); }
.burger { background: #fff; }
@media (max-width: 820px) { .nav.open .nav-bar { background: rgba(255,255,255,.98); } }

/* Butonlar */
.btn-line { background: #fff; color: var(--bone); border-color: var(--line-2); }
.btn-line:hover { background: #f1efe9; }
.final .btn-line, .step .btn-line, .bx-photo .btn-line { background: rgba(255,255,255,.08); color: #f3f0e8; }
.final .btn-line:hover { background: rgba(255,255,255,.16); }
.btn-ink { background: #121212; color: #f3f0e8; }

/* Kartlar: beyaz + yumuşak gölge */
.bx, .ev .card, .calc, .post-card, .dq-card, .compare { box-shadow: var(--shadow); }
.bx { border-color: var(--line); }
.show { background: #fff; }
.mini-chat .a, .remind div, .brand-url, .shield div { background: #f1efe9; color: var(--bone); }
.heat i { background: #ebe8e0; }
.paycard { background: linear-gradient(135deg, #f3fbd6, #fbfdf2); border-color: rgba(74,106,0,.25); }
input[type=range] { background: #e3e0d8; }
input[type=range]::-webkit-slider-thumb { border-color: #fff; }
input[type=range]::-moz-range-thumb { border-color: #fff; }
.res .big { background: rgba(212,255,58,.18); border-color: rgba(74,106,0,.25); }
.app-day, .ex, .macro div { color: #f3f0e8; }

/* Fiyatlar: sayfa zaten açık → bölüm beyaz kart, öne çıkan paket koyu */
.pricing { background: #fff; color: var(--bone); border: 1px solid var(--line); box-shadow: var(--shadow); }
.plan { background: #faf9f6; }
.plan.hot { background: #121212; border-color: #121212; }
.cycle button.on { background: #121212; color: #f3f0e8; }
.founder-box { background: #121212; }

/* Sade sayfa başlıkları (fotoğrafsız) */
.phero.plain p { color: var(--dim); }
.phero.plain::before { background: radial-gradient(800px 400px at 85% 0%, rgba(212,255,58,.28), transparent 60%); }

/* Metin, uyarı, alt bilgi, çerez */
.prose { color: #2b2a26; }
.alert.err { color: #b4380a; background: rgba(255,90,31,.08); }
.alert.ok { background: rgba(212,255,58,.18); border-color: rgba(74,106,0,.3); }
.wordmark { -webkit-text-stroke-color: rgba(24,22,14,.1); }
footer { background: #efece4; border-top: 1px solid var(--line); margin-top: 40px; }
.cookie { background: #fff; color: var(--dim); box-shadow: 0 30px 60px -20px rgba(24,22,14,.35); }
.legal-nav a.on, .tab.on { background: #121212; color: #f3f0e8; border-color: #121212; }

/* Ana görsel ve alt sayfa başlıkları: açık (fotoğraf sağda, krem geçiş solda) */
.hero::before { background:
  linear-gradient(90deg, rgba(246,244,238,.98) 0%, rgba(246,244,238,.93) 36%, rgba(246,244,238,.55) 64%, rgba(246,244,238,.28) 100%),
  linear-gradient(0deg, var(--ink) 0%, rgba(246,244,238,0) 28%); }
.hero-bg img { filter: saturate(.85) contrast(.95) brightness(1.35); }
.hero-sub p, .phero p { color: var(--dim); }
.hero-strip { background: rgba(255,255,255,.75); }
.founder { background: rgba(212,255,58,.22); border-color: rgba(74,106,0,.3); }
.phero::before { background: linear-gradient(90deg, rgba(246,244,238,.98) 30%, rgba(246,244,238,.7)), linear-gradient(0deg, var(--ink), transparent 40%); }
.phero-bg img { filter: grayscale(.2) contrast(1.02) brightness(1.08); }

/* Büyük başlıklardaki neon kelimeler: açık zeminde fosforlu kalem */
.display .v { color: var(--bone); background-image: linear-gradient(transparent 60%, var(--volt) 60%, var(--volt) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .04em; }
.bx-photo .display .v, .step .display .v, .final .display .v, .plan.hot .display .v, .mani-photo .display .v { color: var(--volt); background: none; padding: 0; }
/* =====================================================================
   2026 PALETİ (renk psikolojisi)
   Zemin: Cloud Dancer (Pantone 2026) · Yazı: mürekkep · Marka: elektrik lime (logo)
   Güven: derin zümrüt (sağlık, gelişim) · Aciliyet: mercan (eylem) · Koyu bölümler: zümrüt-siyah
   ===================================================================== */
:root {
  --ink: #f3f1ec; --ink-2: #ffffff; --ink-3: #ffffff;
  --bone: #15181e; --dim: #4f5560; --dimmer: #858b95;
  --line: rgba(21,24,30,.09); --line-2: rgba(21,24,30,.16);
  --volt-t: #0b5d4b; --signal: #ff5a36; --deep: #0f2420;
}
.lead { --bone: #15181e; --dim: #4f5560; --dimmer: #858b95; --volt-t: #0b5d4b; }
.bx-photo, .step, .final, .mani-photo, .plan.hot, .founder-box, .toast, .phone { --signal: #ff7a5c; }
.plan.hot, .founder-box, .cycle button.on, .legal-nav a.on, .tab.on, .btn-ink { background: var(--deep); border-color: var(--deep); }
.final::before { background: linear-gradient(90deg, rgba(15,36,32,.96) 30%, rgba(15,36,32,.55)); }
.step::before { background: linear-gradient(0deg, rgba(15,36,32,.96) 25%, rgba(15,36,32,.2)); }
.bx-photo::before { background: linear-gradient(0deg, rgba(15,36,32,.97) 15%, rgba(15,36,32,.5) 55%, rgba(15,36,32,.1)); }
.mani-photo::after { background: linear-gradient(0deg, rgba(15,36,32,.88), transparent 55%); }
.hero::before { background:
  linear-gradient(90deg, rgba(243,241,236,.98) 0%, rgba(243,241,236,.93) 36%, rgba(243,241,236,.55) 64%, rgba(243,241,236,.28) 100%),
  linear-gradient(0deg, var(--ink) 0%, rgba(243,241,236,0) 28%); }
.phero::before { background: linear-gradient(90deg, rgba(243,241,236,.98) 30%, rgba(243,241,236,.7)), linear-gradient(0deg, var(--ink), transparent 40%); }
footer { background: #ebe8e1; }
.perk i { background: rgba(11,93,75,.1); }
.founder { background: rgba(212,255,58,.3); border-color: rgba(11,93,75,.25); }
.dq-item.bos { border-color: rgba(11,93,75,.35); background: rgba(11,93,75,.06); }
.res .big, .alert.ok { background: rgba(11,93,75,.07); border-color: rgba(11,93,75,.25); }
.paycard { background: linear-gradient(135deg, #e6f3ee, #f7fbf9); border-color: rgba(11,93,75,.22); }
.plan li i, .ctable .y { color: var(--volt-t); }
.pricing .kicker { color: var(--volt-t); } .pricing .kicker::before { background: var(--volt-t); }
.cycle em, .ex .chip { background: var(--signal); color: #fff; }
.btn-volt { box-shadow: 0 10px 24px -14px rgba(11,93,75,.45); }

/* ---- Fotoğraf şeridi (ana sayfa) ---- */
.gal { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; gap: 14px; }
.g-it { position: relative; margin: 0; border-radius: var(--r); overflow: hidden; isolation: isolate; }
.g-it.g-big { grid-column: span 2; grid-row: span 2; }
.g-it img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.g-it:hover img { transform: scale(1.05); }
.g-it::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(11,18,32,.78) 0%, rgba(11,18,32,0) 55%); z-index: 1; }
.g-it figcaption { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; color: #fff; display: grid; gap: 2px; }
.g-it figcaption b { font-size: 1.05rem; }
.g-it figcaption span { font-size: .85rem; opacity: .85; }
.g-it.g-big figcaption b { font-size: 1.4rem; }
@media (max-width: 1080px) { .gal { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .gal { grid-template-columns: 1fr 1fr; grid-auto-rows: 190px; } .g-it.g-big { grid-column: span 2; grid-row: span 1; height: 260px; } }