/* ThePoint — stil referansı: n8n tasarım dili (mor alt tonlu gece zemini, ince başlıklar,
   yalnızca ana düğmede kor geçişi, içten ışıklı gömme paneller, mavi-mor "akım" çizgileri) */
:root {
  /* PALET 1 — Lime (varsayılan): yeşil-siyah zemin, asit yeşili nokta */
  --void: #090E0C; --surface: #111815; --panel: #131C18; --shell: #1E2924; --smoke: #2D3A34;
  --fog: #8A9891; --ash: #C9D3CD; --white: #F4F8F5;
  --surface-rgb: 17,24,21; --shell-rgb: 30,41,36; --line-rgb: 255,255,255; --sheen-rgb: 255,255,255;
  --a-rgb: 198,255,61; --b-rgb: 45,212,191; --c-rgb: 56,189,248; --pt-rgb: 205,230,215; --shadow-rgb: 0,0,0;
  --on-a: #0B1206; --ember: linear-gradient(30deg, #9BEA2E, #DFFF6A); --current: linear-gradient(141deg, #2DD4BF, #38BDF8);
  --scorch: rgb(var(--a-rgb));
  --inset: inset 0 0 0 1px rgba(var(--line-rgb),.10), inset 0 -1px 0 0 rgba(var(--a-rgb),.30);
  --inset-hot: inset 0 0 0 1px rgba(var(--line-rgb),.16), inset 0 -2px 0 0 rgba(var(--a-rgb),.55), inset 0 -28px 40px -30px rgba(var(--a-rgb),.28);
  --wrap: 1200px;
  --font: 'DM Sans', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
/* PALET 2 — Okyanus: lacivert zemin, elektrik mavisi */
[data-palette="okyanus"] {
  --void: #060A14; --surface: #0D1422; --panel: #0F1829; --shell: #1A2438; --smoke: #2A3651;
  --fog: #8B96AE; --ash: #CBD4E4; --white: #F5F8FF;
  --surface-rgb: 13,20,34; --shell-rgb: 26,36,56;
  --a-rgb: 64,156,255; --b-rgb: 34,211,238; --c-rgb: 129,140,248; --pt-rgb: 200,215,255;
  --on-a: #fff; --ember: linear-gradient(30deg, #2563FF, #1FC8FF); --current: linear-gradient(141deg, #22D3EE, #818CF8);
}
/* PALET 3 — Ametist: mürekkep zemin, mor-pembe */
[data-palette="ametist"] {
  --void: #0B0912; --surface: #14111F; --panel: #171326; --shell: #241E36; --smoke: #372F4D;
  --fog: #958EA8; --ash: #D2CCE0; --white: #FAF7FF;
  --surface-rgb: 20,17,31; --shell-rgb: 36,30,54;
  --a-rgb: 192,132,252; --b-rgb: 244,114,182; --c-rgb: 99,102,241; --pt-rgb: 220,205,255;
  --on-a: #fff; --ember: linear-gradient(30deg, #8B5CF6, #EC4899); --current: linear-gradient(141deg, #F472B6, #6366F1);
}
/* PALET 4 — Krem (açık tema): sıcak kâğıt zemin, kobalt nokta */
[data-palette="krem"] {
  --void: #F5F1E8; --surface: #FFFDF8; --panel: #FFFFFF; --shell: #ECE6D8; --smoke: #D8D0BF;
  --fog: #6F6A5E; --ash: #3B382F; --white: #14130F;
  --surface-rgb: 255,253,248; --shell-rgb: 236,230,216; --line-rgb: 20,19,15;
  --a-rgb: 31,64,255; --b-rgb: 31,64,255; --c-rgb: 255,122,60; --pt-rgb: 60,60,80; --shadow-rgb: 60,50,30;
  --on-a: #fff; --ember: linear-gradient(30deg, #1F40FF, #5B7BFF); --current: linear-gradient(141deg, #1F40FF, #FF7A3C);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; background: var(--void); }
body { margin: 0; background: var(--void); color: var(--ash); font: 400 16px/1.600 var(--font); overflow-x: hidden; }
body.lock { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; } ul, ol { list-style: none; }
h1, h2, h3 { font-weight: 300; color: var(--white); letter-spacing: -.02em; text-wrap: balance; }
em { font-style: normal; color: var(--scorch); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.dot { color: var(--scorch); }
svg { fill: none; stroke: currentColor; stroke-width: 1.500; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid rgb(var(--b-rgb)); outline-offset: 3px; border-radius: 8px; }

/* düğmeler — kor geçişi yalnızca ana eylemde */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 8px; border: 0; cursor: pointer; background: var(--ember); color: var(--on-a); font: 400 16px var(--font); letter-spacing: -.01em; transition: filter .2s, transform .15s; white-space: nowrap; }
.btn:hover { filter: brightness(1.120); }
.btn:active { scale: .97; }
.btn svg { width: 17px; height: 17px; stroke-width: 2; transition: transform .2s; } .btn:hover svg { transform: translateX(3px); }
.btn-ghost { background: rgba(var(--shell-rgb),.7); color: var(--white); box-shadow: inset 0 0 0 1px rgba(var(--line-rgb),.10); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-ghost:hover { filter: none; background: var(--smoke); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 15px; }
.btn-block { width: 100%; }

/* üst menü */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; padding-top: 14px; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; max-width: calc(var(--wrap) - 48px); padding: 0 12px 0 22px; border-radius: 12px; transition: background .25s, box-shadow .25s; }
.nav.stuck .wrap, .nav.open .wrap { background: rgba(var(--surface-rgb),.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--smoke); }
.logo { font: 400 22px var(--font); color: var(--white); letter-spacing: -.03em; display: inline-flex; align-items: baseline; }
.logo b { font-weight: 400; } .logo i { width: 7px; height: 7px; border-radius: 50%; background: var(--scorch); margin-left: 3px; box-shadow: 0 0 12px 2px rgba(var(--a-rgb),.6); }
.links { display: flex; align-items: center; gap: 30px; font-size: 15px; }
.links a:not(.btn) { color: var(--ash); position: relative; padding: 6px 0; transition: color .2s; }
.links a:not(.btn)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.500px; background: var(--current); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.links a:not(.btn):hover { color: var(--white); } .links a:not(.btn):hover::after { transform: scaleX(1); }
.burger { display: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 12px; right: 12px; height: 1.500px; background: var(--white); border-radius: 2px; transition: transform .25s, top .25s; }
.burger span:first-child { top: 18px; } .burger span:last-child { top: 25px; }
.open .burger span:first-child { top: 21px; transform: rotate(45deg); } .open .burger span:last-child { top: 21px; transform: rotate(-45deg); }

/* hero */
.hero { position: relative; padding: 168px 0 120px; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background:
  radial-gradient(60% 55% at 78% 62%, rgba(var(--b-rgb),.26), transparent 70%),
  radial-gradient(42% 40% at 70% 78%, rgba(var(--a-rgb),.16), transparent 70%); pointer-events: none; }
.hero::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(var(--line-rgb),.08) 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(ellipse 60% 60% at 70% 50%, #000, transparent); -webkit-mask-image: radial-gradient(ellipse 60% 60% at 70% 50%, #000, transparent); pointer-events: none; }
.glow { --x: 70%; --y: 40%; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--x) var(--y), rgba(var(--c-rgb),.14), transparent 65%); pointer-events: none; z-index: 1; }
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.080fr); gap: 64px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 12px; border-radius: 24px; background: var(--surface); box-shadow: var(--inset); font-size: 14px; color: var(--ash); }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #45e08d; box-shadow: 0 0 10px 1px rgba(69,224,141,.7); }
.hero h1 { font-size: clamp(40px, 4.700vw, 62px); line-height: .960; letter-spacing: -.022em; margin: 26px 0 24px; }
.hero p { font-size: 20px; font-weight: 300; line-height: 1.500; color: var(--ash); max-width: 500px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 34px 0 32px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; color: var(--fog); }
.hero-points li::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--scorch); margin-right: 9px; vertical-align: 2px; }

.hero-vis, .case-vis { position: relative; padding: 0 0 44px 0; }
.browser { border-radius: 12px; overflow: hidden; background: var(--surface); padding: 1px; box-shadow: var(--inset), 0 30px 80px -20px rgba(var(--shadow-rgb),.9); }
.browser-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: var(--panel); border-radius: 11px 11px 0 0; }
.browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--smoke); }
.browser-bar span { margin-left: 10px; font-size: 11px; color: var(--fog); background: var(--void); padding: 3px 12px; border-radius: 6px; }
.browser img { width: 100%; border-radius: 0 0 11px 11px; }
.phone { position: absolute; right: -14px; bottom: 0; width: 27%; min-width: 118px; border-radius: 22px; padding: 6px; background: var(--void); box-shadow: inset 0 0 0 1px rgba(var(--line-rgb),.18), 0 24px 60px -12px rgba(var(--shadow-rgb),.95); }
.phone img { width: 100%; border-radius: 17px; }

/* bölümler */
.sec { padding: 112px 0; position: relative; }
.sec-alt::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--smoke) 30%, var(--smoke) 70%, transparent); }
.sec-alt::after { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 40% at 50% 0%, rgba(var(--b-rgb),.10), transparent 70%); pointer-events: none; }
.sec > .wrap { position: relative; z-index: 1; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fog); margin-bottom: 18px; }
.kicker::before { content: ''; width: 22px; height: 1.500px; background: var(--current); border-radius: 2px; }
.sec-head { max-width: 760px; margin-bottom: 56px; }
h2 { font-size: clamp(32px, 3.900vw, 54px); line-height: 1; letter-spacing: -.02em; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { background: var(--surface); border-radius: 16px; padding: 30px 28px; box-shadow: var(--inset); transition: box-shadow .3s, background .3s; }
.card:hover { background-color: var(--panel); box-shadow: var(--inset-hot); }
.card svg { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--shell); box-shadow: inset 0 0 0 1px rgba(var(--line-rgb),.08); color: var(--scorch); margin-bottom: 22px; }
.card h3 { font-size: 24px; font-weight: 400; letter-spacing: -.007em; margin-bottom: 8px; }
.card p { color: var(--fog); }

.case { display: grid; grid-template-columns: minmax(0, 1.150fr) minmax(0, 1fr); gap: 56px; align-items: center; background: var(--panel); border-radius: 24px; padding: 48px; box-shadow: var(--inset-hot); }
.case-vis { padding-right: 14px; }
.tag { display: inline-block; font-size: 13px; color: var(--ash); background: var(--shell); padding: 5px 14px; border-radius: 24px; box-shadow: inset 0 0 0 1px rgba(var(--line-rgb),.08); }
.case h3 { font-size: 40px; line-height: 1.050; margin: 18px 0 14px; }
.case-txt > p { color: var(--ash); font-size: 18px; font-weight: 300; }
.feat { margin: 28px 0; display: grid; gap: 0; }
.feat li { display: grid; grid-template-columns: 62px 1fr; align-items: center; padding: 12px 0; border-top: 1px solid rgba(var(--line-rgb),.08); }
.feat b { font-weight: 300; font-size: 34px; color: var(--white); line-height: 1; letter-spacing: -.02em; } .feat span { color: var(--fog); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { font-size: 13px; padding: 5px 12px; border-radius: 24px; color: var(--fog); box-shadow: inset 0 0 0 1px var(--smoke); }
.next { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 28px; background: var(--surface); border-radius: 24px; padding: 36px 48px; box-shadow: var(--inset); }
.next h3 { font-size: 28px; margin-bottom: 6px; } .next p { color: var(--fog); max-width: 560px; }

/* süreç — akış düğümleri */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.steps li { position: relative; background: var(--surface); border-radius: 12px; padding: 26px 24px 28px; box-shadow: var(--inset); }
.steps li::before { content: ''; position: absolute; top: 44px; right: 100%; width: 28px; height: 1.500px; background: var(--current); }
.steps li::after { content: ''; position: absolute; top: 40px; left: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--void); box-shadow: inset 0 0 0 1.500px rgb(var(--b-rgb)); }
.steps li:first-child::before, .steps li:first-child::after { display: none; }
.steps span { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--shell); color: var(--white); font-size: 14px; box-shadow: inset 0 0 0 1px rgba(var(--line-rgb),.10); }
.steps h3 { font-size: 24px; font-weight: 400; margin: 18px 0 8px; } .steps p { color: var(--fog); font-size: 15px; }

.about { display: grid; grid-template-columns: minmax(0, .800fr) minmax(0, 1.200fr); gap: 64px; align-items: start; }
.about-txt p { font-size: 20px; font-weight: 300; line-height: 1.500; color: var(--ash); } .about-txt p + p { margin-top: 18px; }
.vals { margin-top: 36px; background: var(--surface); border-radius: 16px; box-shadow: var(--inset); padding: 4px 24px; }
.vals li { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 16px 0; }
.vals li + li { border-top: 1px solid rgba(var(--line-rgb),.08); }
.vals b { font-weight: 400; color: var(--white); } .vals span { color: var(--fog); }

.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.lead { color: var(--ash); font-size: 20px; font-weight: 300; line-height: 1.500; margin: 20px 0 36px; max-width: 440px; }
.ways { display: grid; gap: 14px; }
.ways li { display: flex; align-items: center; gap: 16px; }
.ways svg { width: 46px; height: 46px; padding: 12px; border-radius: 12px; background: var(--surface); box-shadow: var(--inset); color: var(--scorch); flex: none; }
.ways span { display: flex; flex-direction: column; line-height: 1.350; } .ways small { color: var(--fog); font-size: 13px; }
.ways a { font-size: 20px; color: var(--white); letter-spacing: -.01em; background: var(--current) no-repeat 0 100% / 0 1.500px; transition: background-size .25s; } .ways a[href]:hover { background-size: 100% 1.500px; }
.form { background: var(--panel); border-radius: 24px; padding: 36px; display: grid; gap: 18px; box-shadow: var(--inset-hot); }
.form label, .form legend { display: grid; gap: 8px; font-size: 14px; color: var(--fog); padding: 0; }
.form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.form input:not([type=radio]), .form textarea { width: 100%; background: var(--void); border: 0; border-radius: 8px; padding: 13px 14px; color: var(--white); font: 400 16px var(--font); outline: 0; box-shadow: inset 0 0 0 1px var(--smoke); transition: box-shadow .2s; resize: vertical; }
.form input:not([type=radio]):focus, .form textarea:focus { box-shadow: inset 0 0 0 1.500px rgb(var(--b-rgb)), 0 0 0 4px rgba(var(--b-rgb),.22); }
.form ::placeholder { color: var(--fog); opacity: .6; }
.pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pick label { display: block; cursor: pointer; } .pick input { position: absolute; opacity: 0; }
.pick span { display: block; padding: 8px 16px; border-radius: 24px; background: var(--shell); color: var(--ash); font-size: 15px; box-shadow: inset 0 0 0 1px rgba(var(--line-rgb),.08); transition: .2s; }
.pick input:checked + span { background: var(--white); color: var(--void); }
.pick input:focus-visible + span { outline: 2px solid rgb(var(--b-rgb)); outline-offset: 3px; }
.form-note { font-size: 14px; min-height: 1.500em; } .form-note.err { color: #ff8f7a; } .form-note.ok { color: #45e08d; }

.ftr { padding: 36px 0 44px; font-size: 14px; color: var(--fog); position: relative; }
.ftr::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--smoke) 30%, var(--smoke) 70%, transparent); }
.ftr .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ftr nav { display: flex; gap: 24px; } .ftr nav a:hover { color: var(--white); }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* hakkımda: portre, bilgiler, zaman çizgisi */
.portrait { margin: 0; position: sticky; top: 100px; padding: 8px; border-radius: 24px; background: var(--panel); box-shadow: var(--inset-hot); }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 42%; border-radius: 18px; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.portrait { overflow: hidden; } .portrait:hover img { transform: scale(1.030); }
.portrait figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 10px 10px; }
.portrait figcaption > span:first-child { display: flex; flex-direction: column; line-height: 1.350; min-width: 0; }
.portrait b { font-weight: 400; font-size: 19px; color: var(--white); letter-spacing: -.01em; } .portrait small { color: var(--fog); font-size: 14px; }
.socials { display: flex; gap: 8px; flex: none; }
.socials a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--shell); color: var(--ash); box-shadow: inset 0 0 0 1px rgba(var(--line-rgb),.08); transition: background .25s, color .25s, transform .3s cubic-bezier(.2,1.4,.4,1); }
.socials a:hover { background: var(--scorch); color: var(--on-a); transform: translateY(-3px); } .socials svg { width: 19px; height: 19px; }
.about h2 { margin-bottom: 26px; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 34px 0 0; }
.facts li { background: var(--surface); border-radius: 16px; box-shadow: var(--inset); padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.facts b { font-weight: 300; font-size: 28px; line-height: 1.100; color: var(--white); letter-spacing: -.02em; } .facts span { color: var(--fog); font-size: 14px; line-height: 1.400; }
.timeline { position: relative; margin-top: 36px; padding-left: 28px; display: grid; gap: 22px; }
.timeline::before { content: ''; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1.500px; background: var(--current); border-radius: 2px; }
.timeline li { position: relative; display: grid; grid-template-columns: 130px 1fr; column-gap: 16px; align-items: baseline; }
.timeline li::before { content: ''; position: absolute; left: -28px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--void); box-shadow: inset 0 0 0 1.500px rgb(var(--b-rgb)); }
.timeline li:last-child::before { background: var(--scorch); box-shadow: 0 0 12px 2px rgba(var(--a-rgb),.6); }
.timeline time { color: var(--fog); font-size: 14px; grid-row: span 2; } .timeline b { font-weight: 400; font-size: 19px; color: var(--white); } .timeline span { color: var(--fog); font-size: 15px; grid-column: 2; }
.skills { margin-top: 30px; } .skills span { font-size: 14px; padding: 6px 14px; color: var(--ash); }

/* hizmetler: çalışma biçimleri */
.modes-wrap { margin-top: 72px; display: grid; grid-template-columns: minmax(0, .800fr) minmax(0, 1.200fr); gap: 56px; align-items: start; }
.modes-wrap h3 { font-size: clamp(26px, 2.800vw, 36px); line-height: 1.050; margin-bottom: 12px; } .modes-wrap > div > p { color: var(--fog); font-size: 18px; font-weight: 300; max-width: 340px; }
.modes { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.modes li { display: grid; grid-template-columns: 40px 1fr; padding: 18px 0; border-top: 1px solid rgba(var(--line-rgb),.10); }
.modes li > span { color: var(--scorch); font-size: 14px; padding-top: 3px; } .modes b { font-weight: 400; font-size: 18px; color: var(--white); } .modes p { color: var(--fog); font-size: 15px; margin-top: 2px; }

/* projeler: ters yerleşim ve bağlantı */
.case + .case { margin-top: 16px; }
.case.flip .case-vis { order: 2; padding: 0; }
.feat.wide li { grid-template-columns: 112px 1fr; }
.case-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; color: var(--white); padding-bottom: 3px; background: var(--current) no-repeat 0 100% / 100% 1.500px; }
.case-link svg { width: 16px; height: 16px; stroke-width: 2; transition: transform .25s; } .case-link:hover svg { transform: translate(3px, -3px); }

/* mini renk teması seçici */
.palette { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 70; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.palette-toggle { width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; color: var(--ash); background: rgba(var(--surface-rgb),.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px var(--smoke), 0 8px 24px rgba(var(--shadow-rgb),.28); transition: color .25s, transform .4s cubic-bezier(.2,1.4,.4,1), box-shadow .25s; }
.palette-toggle svg { width: 19px; height: 19px; } .palette-toggle circle { fill: currentColor; stroke: none; }
.palette-toggle:hover, .palette.open .palette-toggle { color: var(--scorch); box-shadow: inset 0 0 0 1px rgba(var(--a-rgb),.6), 0 8px 24px rgba(var(--shadow-rgb),.28); }
.palette.open .palette-toggle { transform: rotate(-90deg); }
.palette-list { display: flex; flex-direction: column; gap: 8px; padding: 7px; border-radius: 24px; background: rgba(var(--surface-rgb),.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px var(--smoke), 0 8px 24px rgba(var(--shadow-rgb),.28); visibility: hidden; opacity: 0; transform: translateY(10px) scale(.9); transform-origin: bottom center; transition: opacity .25s, transform .3s cubic-bezier(.2,1.2,.4,1), visibility 0s .3s; }
.palette.open .palette-list { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.palette-list button { width: 26px; height: 26px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: linear-gradient(135deg, var(--p1) 50%, var(--p2) 50%); box-shadow: inset 0 0 0 1px rgba(128,128,128,.55); transition: transform .25s cubic-bezier(.2,1.4,.4,1); }
.palette-list button:hover { transform: scale(1.180); }
.palette-list button[aria-pressed="true"] { outline: 2px solid var(--white); outline-offset: 2px; }
html, body, .card, .case, .form, .next, .vals, .nav .wrap { transition-property: background-color, color, box-shadow; transition-duration: .4s; }
[data-palette="krem"] .browser, [data-palette="krem"] .phone { box-shadow: inset 0 0 0 1px rgba(var(--line-rgb),.14), 0 30px 60px -24px rgba(var(--shadow-rgb),.45); }
[data-palette="krem"] .phone { background: #14130F; }
[data-palette="krem"] .aurora { opacity: .55; }

/* ===================== HAREKET ===================== */
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; background: var(--current); transform: scaleX(0); transform-origin: left; }

/* imleci izleyen "nokta" */
.cur-dot, .cur-ring { position: fixed; top: 0; left: 0; z-index: 100; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity .3s; will-change: transform; }
.cur-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--scorch); box-shadow: 0 0 14px 3px rgba(var(--a-rgb),.55); }
.cur-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; box-shadow: inset 0 0 0 1px rgba(var(--line-rgb),.35); transition: opacity .3s, width .25s, height .25s, margin .25s, background .25s, box-shadow .25s; }
.has-cursor .cur-dot, .has-cursor .cur-ring { opacity: 1; }
.cur-hover .cur-ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(var(--a-rgb),.10); box-shadow: inset 0 0 0 1px rgba(var(--a-rgb),.6); }
.cur-down .cur-ring { width: 26px; height: 26px; margin: -13px 0 0 -13px; }

/* hero: nokta ağı, ışık dalgaları, giriş */
.net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .9; }
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; filter: blur(70px); }
.aurora i { position: absolute; border-radius: 50%; opacity: .55; animation: drift 16s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { width: 520px; height: 520px; right: 4%; top: 22%; background: rgba(var(--b-rgb),.42); }
.aurora i:nth-child(2) { width: 380px; height: 380px; right: 22%; bottom: -6%; background: rgba(var(--a-rgb),.26); animation-duration: 20s; animation-delay: -6s; }
.aurora i:nth-child(3) { width: 320px; height: 320px; left: -4%; top: 6%; background: rgba(var(--c-rgb),.20); animation-duration: 24s; animation-delay: -11s; }
@keyframes drift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-60px,40px,0) scale(1.150); } 100% { transform: translate3d(50px,-30px,0) scale(.92); } }

.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.hero h1 .w > span { display: inline-block; transform: translateY(110%) rotate(6deg); animation: wordUp .9s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(.15s + var(--i) * .09s); }
@keyframes wordUp { to { transform: none; } }
.hero .eyebrow, .hero-txt > p, .hero-cta, .hero-points, .hero-vis { opacity: 0; animation: riseIn .9s cubic-bezier(.2,.8,.2,1) both; }
.hero .eyebrow { animation-delay: .05s; } .hero-txt > p { animation-delay: .55s; } .hero-cta { animation-delay: .7s; } .hero-points { animation-delay: .85s; }
.hero-vis { animation-name: visIn; animation-duration: 1.300s; animation-delay: .35s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes visIn { from { opacity: 0; transform: translateY(40px) scale(.94); } to { opacity: 1; transform: none; } }
.eyebrow i { animation: ping 2s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(69,224,141,.6); } 100% { box-shadow: 0 0 0 9px rgba(69,224,141,0); } }
.logo i { animation: ember 2.600s ease-in-out infinite; }
@keyframes ember { 50% { box-shadow: 0 0 18px 5px rgba(var(--a-rgb),.85); transform: scale(1.250); } }

/* 3B eğilen maketler */
.hero-grid { perspective: 1400px; }
.tilt { --rx: 0deg; --ry: 0deg; }
.tilt .browser { transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.tilt .phone { transform: translate(var(--tx, 0px), var(--ty, 0px)) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.hero-vis .phone { animation: bob 6s ease-in-out infinite; }
@keyframes bob { 50% { translate: 0 -12px; } }
.browser { position: relative; }
.hero-vis .browser::after { content: ''; position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(115deg, transparent 40%, rgba(var(--sheen-rgb),.14) 50%, transparent 60%) no-repeat; background-size: 250% 100%; animation: sheen 7s ease-in-out infinite; pointer-events: none; }
@keyframes sheen { 0%, 55% { background-position: 120% 0; } 100% { background-position: -80% 0; } }
.case-vis .phone { transform: translateY(calc(var(--p, 0) * -34px)); transition: transform .15s linear; }
.case-vis .browser { transform: translateY(calc(var(--p, 0) * 14px)); transition: transform .15s linear; }

/* ana düğmede ışık süpürmesi */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn:not(.btn-ghost)::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 35%, rgba(var(--sheen-rgb),.38) 50%, transparent 65%) no-repeat; background-size: 220% 100%; animation: sweep 4.500s ease-in-out infinite; }
@keyframes sweep { 0%, 60% { background-position: 130% 0; } 100% { background-position: -90% 0; } }
.btn:not(.btn-ghost) { box-shadow: 0 0 0 0 rgba(var(--a-rgb),.0); transition: filter .2s, transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.btn:not(.btn-ghost):hover { box-shadow: 0 8px 34px -6px rgba(var(--a-rgb),.65); }

/* kayan şerit */
.marquee { position: relative; overflow: hidden; padding: 22px 0; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee::before, .marquee::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--smoke); opacity: .7; } .marquee::before { top: 0; } .marquee::after { bottom: 0; }
.marquee-track { display: flex; width: max-content; animation: slide 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { display: inline-flex; align-items: center; font-size: 20px; font-weight: 300; color: var(--ash); white-space: nowrap; padding: 0 28px; letter-spacing: -.01em; }
.marquee span::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--scorch); margin-left: 56px; box-shadow: 0 0 10px 1px rgba(var(--a-rgb),.6); }
@keyframes slide { to { transform: translateX(-50%); } }

/* imleç ışığı taşıyan paneller */
.spot { --mx: 50%; --my: -200px; background-image: radial-gradient(340px circle at var(--mx) var(--my), rgba(var(--a-rgb),.13), transparent 62%); background-repeat: no-repeat; }
.card { transition: box-shadow .3s, background-color .3s, transform .4s cubic-bezier(.2,.8,.2,1); }
.card:hover { transform: translateY(-6px); }
.card svg { transition: transform .5s cubic-bezier(.2,1.4,.4,1), background .3s, color .3s; }
.card:hover svg { transform: scale(1.120) rotate(-6deg); background: var(--scorch); color: var(--on-a); }
.chips span, .tag { transition: color .2s, box-shadow .2s, transform .2s; } .chips span:hover { color: var(--white); box-shadow: inset 0 0 0 1px rgba(var(--a-rgb),.6); transform: translateY(-2px); }

/* görünürken belirme — bulanıktan nete */
.reveal { filter: blur(8px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), filter .8s; }
.reveal.in { filter: none; }
.kicker::before { width: 0; transition: width .8s .25s cubic-bezier(.2,.8,.2,1); } .reveal.in .kicker::before { width: 22px; }
.case.reveal { transform: translateY(40px) scale(.97); } .case.reveal.in { transform: none; }
.case .browser, .case .phone { opacity: 0; transition: opacity .9s .2s, transform .15s linear; } .case .phone { transition-delay: .5s, 0s; }
.case.in .browser, .case.in .phone { opacity: 1; }
.feat li { opacity: 0; transform: translateX(-14px); transition: opacity .6s, transform .6s cubic-bezier(.2,.8,.2,1); }
.case.in .feat li { opacity: 1; transform: none; } .case.in .feat li:nth-child(1) { transition-delay: .35s; } .case.in .feat li:nth-child(2) { transition-delay: .5s; } .case.in .feat li:nth-child(3) { transition-delay: .65s; }
.feat b { font-variant-numeric: tabular-nums; }

/* süreç: sırayla yanan düğümler ve akan veri */
.steps li { animation: nodeOn 8s linear infinite; animation-delay: calc(var(--n) * 2s); }
.steps li span { animation: badgeOn 8s linear infinite; animation-delay: calc(var(--n) * 2s); }
@keyframes nodeOn { 0%, 24% { box-shadow: var(--inset-hot); background-color: var(--panel); } 30%, 100% { box-shadow: var(--inset); background-color: var(--surface); } }
@keyframes badgeOn { 0%, 24% { background: var(--scorch); color: var(--on-a); box-shadow: 0 0 18px 0 rgba(var(--a-rgb),.6); } 30%, 100% { background: var(--shell); color: var(--white); box-shadow: inset 0 0 0 1px rgba(var(--line-rgb),.10); } }
.steps .pulse { position: absolute; top: 41px; right: 100%; width: 28px; height: 7px; pointer-events: none; }
.steps .pulse::before { content: ''; position: absolute; top: 0; left: 0; width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--b-rgb)); box-shadow: 0 0 10px 3px rgba(var(--b-rgb),.9); opacity: 0; animation: flow 8s linear infinite; animation-delay: calc(var(--n) * 2s - 0.600s); }
@keyframes flow { 0% { opacity: 0; transform: translateX(-4px); } 1% { opacity: 1; } 7% { opacity: 1; transform: translateX(24px); } 8%, 100% { opacity: 0; transform: translateX(24px); } }
.steps li:first-child .pulse { display: none; }

.vals li { transition: padding-left .3s; } .vals li:hover { padding-left: 8px; }
.ways li svg { transition: transform .4s cubic-bezier(.2,1.4,.4,1); } .ways li:hover svg { transform: scale(1.100) rotate(-6deg); }
.form.sent { animation: sent .7s; } @keyframes sent { 40% { box-shadow: var(--inset-hot), 0 0 0 6px rgba(69,224,141,.25); } }
.form.shake { animation: shake .4s; } @keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

@media (max-width: 980px) {
  .hero { padding: 132px 0 72px; }
  .hero-grid, .case, .about, .contact { grid-template-columns: 1fr; }
  .hero-grid { gap: 52px; } .hero-vis { padding-right: 14px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps li:nth-child(3)::before, .steps li:nth-child(3)::after { display: none; }
  .about, .contact { gap: 40px; } .case { gap: 36px; padding: 28px; }
  .portrait { position: static; max-width: 440px; } .case.flip .case-vis { order: 0; }
  .modes-wrap { grid-template-columns: 1fr; gap: 28px; margin-top: 56px; }
  .sec { padding: 84px 0; }
}
@media (max-width: 720px) {
  .wrap { padding: 0 20px; }
  .nav { padding: 8px 10px 0; } .nav .wrap { padding: 0 6px 0 16px; height: 56px; }
  .burger { display: block; }
  .links { position: fixed; inset: 72px 0 0; background: var(--void); flex-direction: column; align-items: stretch; gap: 0; padding: 12px 20px 32px; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: .25s; }
  .open .links { transform: none; opacity: 1; pointer-events: auto; }
  .links a:not(.btn) { font-size: 28px; font-weight: 300; color: var(--white); padding: 16px 0; border-bottom: 1px solid rgba(var(--line-rgb),.08); }
  .links a:not(.btn)::after { display: none; }
  .links .btn { margin-top: 24px; height: 52px; font-size: 16px; }
  .hero { padding: 112px 0 56px; } .hero p, .lead, .about-txt p { font-size: 18px; }
  .hero-cta .btn { flex: 1; padding: 0 14px; }
  .cards, .steps { grid-template-columns: 1fr; } .card { padding: 24px 22px; }
  .steps { gap: 22px; }
  .steps li::before { display: block !important; top: auto; bottom: 100%; right: auto; left: 43px; width: 1.500px; height: 22px; }
  .steps li::after { display: block !important; top: -5px; left: 39px; }
  .steps li:first-child::before, .steps li:first-child::after { display: none !important; }
  .steps .pulse { top: auto; bottom: 100%; right: auto; left: 40px; width: 7px; height: 22px; } .steps .pulse::before { animation-name: flowY; }
  @keyframes flowY { 0% { opacity: 0; transform: translateY(-4px); } 1% { opacity: 1; } 7% { opacity: 1; transform: translateY(18px); } 8%, 100% { opacity: 0; transform: translateY(18px); } }
  .marquee span { font-size: 17px; padding: 0 18px; } .marquee span::after { margin-left: 36px; }
  .aurora { filter: blur(50px); } .aurora i:nth-child(1) { width: 300px; height: 300px; right: -20%; top: 40%; } .aurora i:nth-child(2) { width: 240px; height: 240px; }
  .sec { padding: 68px 0; } .sec-head { margin-bottom: 36px; }
  .case { padding: 20px; border-radius: 16px; } .case h3 { font-size: 30px; } .case-txt > p { font-size: 16px; }
  .next { flex-direction: column; align-items: flex-start; padding: 26px 22px; border-radius: 16px; } .next .btn { width: 100%; }
  .vals li { grid-template-columns: 1fr; gap: 2px; }
  .modes { grid-template-columns: 1fr; } .facts { grid-template-columns: 1fr; gap: 8px; } .facts li { flex-direction: row; align-items: baseline; gap: 12px; padding: 14px 16px; } .facts b { font-size: 22px; flex: none; }
  .timeline li { grid-template-columns: 1fr; } .timeline time { grid-row: auto; } .timeline span { grid-column: 1; }
  .portrait figcaption { flex-wrap: wrap; }
  .form { padding: 22px; border-radius: 16px; }
  .ftr .wrap { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } .reveal { opacity: 1; transform: none; filter: none; } .hero .eyebrow, .hero-txt > p, .hero-cta, .hero-points, .hero-vis, .case .browser, .case .phone, .feat li { opacity: 1; } .hero h1 .w > span { transform: none; } .net, .cur-dot, .cur-ring { display: none; } }