/* =====================================================================
   MAKS YAZILIM — v3 tasarım sistemi
   Renk, köşe ve boşluk değişkenleri panelden gelir (layout'taki <style>).
   Animasyon seviyesi: html[data-motion] 0 kapalı · 1 az · 2 normal · 3 yüksek
   Kural: yalnızca transform / opacity / clip-path canlandırılır; sürekli
   animasyonlar yalnızca ekrandaki öğede (.is-on) ve seviye >= 2'de çalışır.
   ===================================================================== */

:root {
    --red: #E3122D; --red-dark: #8C0A1A; --red-rgb: 227,18,45;
    --acc: #F2A93B; --acc-rgb: 242,169,59;
    --bg: #0B0B0D; --bg-1: #111114; --bg-2: #18181C; --bg-rgb: 11,11,13;
    --tx: #F3F3F4; --tx-2: #A9A9B1; --tx-3: #84848C;
    --ln: rgba(255,255,255,.08); --ln-2: rgba(255,255,255,.15);
    --paper: #F4F3EF; --paper-2: #EAE8E2; --ink: #101013; --ink-2: #4A4A52; --ink-3: #6B6B73; --ln-l: rgba(16,16,19,.1);
    --red-tx: #FF4F63;
    --ok: #3DD68C; --warn: #F2A93B; --bad: #FF5A5F;
    --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-btn: 10px;
    --sec: clamp(76px, 9.5vw, 136px);
    --f-d: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
    --f-b: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --f-m: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
    --e-out: cubic-bezier(.16, 1, .3, 1);
    --e-io: cubic-bezier(.65, 0, .35, 1);
    --wrap: 1240px; --gut: clamp(16px, 4vw, 40px);
    --hdr: 68px;
}
@supports (color: color-mix(in oklab, red, white)) {
    :root { --red-tx: color-mix(in oklab, var(--red) 70%, #fff); }
}

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 16px); color-scheme: dark; interpolate-size: allow-keywords; }
body { margin: 0; background: var(--bg); color: var(--tx); font: 400 1rem/1.65 var(--f-b); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; text-rendering: optimizeLegibility; }
img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
em { font-style: normal; }
:focus-visible { outline: 2px solid var(--red-tx); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--red); color: #fff; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mark { fill: none; overflow: visible; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 300; background: #fff; color: #000; padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { width: min(var(--wrap), 100% - var(--gut) * 2); margin-inline: auto; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Tipografi ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 .74rem/1.2 var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-2); }
.eyebrow::before { content: ""; width: 7px; height: 14px; background: var(--red); border-radius: 1px; flex: none; }
.h1 { font: 700 clamp(2.4rem, 1.2rem + 4.9vw, 5.25rem)/.99 var(--f-d); letter-spacing: -.042em; text-wrap: balance; }
.h2 { font: 700 clamp(2rem, 1.25rem + 2.7vw, 3.4rem)/1.04 var(--f-d); letter-spacing: -.036em; text-wrap: balance; }
.h3 { font: 650 clamp(1.3rem, 1.05rem + .9vw, 1.8rem)/1.16 var(--f-d); letter-spacing: -.022em; }
.h1 em, .h2 em, .h3 em { color: var(--red); }
.lead { font-size: clamp(1.04rem, .97rem + .32vw, 1.2rem); line-height: 1.62; color: var(--tx-2); max-width: 60ch; text-wrap: pretty; }
.lead em, p em { color: var(--red-tx); }
.mono { font-family: var(--f-m); }
.rich { color: var(--tx-2); font-size: 1.04rem; line-height: 1.75; }
.rich > * + * { margin-top: 1em; }
.rich h2, .rich h3 { color: var(--tx); font-family: var(--f-d); letter-spacing: -.02em; line-height: 1.2; margin-top: 1.6em; }
.rich h2 { font-size: 1.6rem; } .rich h3 { font-size: 1.25rem; }
.rich a { color: var(--red-tx); text-decoration: underline; text-underline-offset: 3px; }
.rich strong, .rich b { color: var(--tx); font-weight: 600; }
.rich ul { display: grid; gap: .55em; }
.rich ul li { position: relative; padding-left: 1.5em; }
.rich ul li::before { content: ""; position: absolute; left: .2em; top: .62em; width: .5em; height: .5em; border-radius: 2px; background: var(--red); }
.rich ol { list-style: decimal; padding-left: 1.3em; }
.rich img { border-radius: var(--r); }
.rich blockquote { border-left: 3px solid var(--red); padding-left: 1em; color: var(--tx); font-size: 1.1rem; }

/* ---------- Butonlar & bağlantılar ---------- */
.btn { --h: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--h); padding: 0 20px; border-radius: var(--r-btn); border: 1px solid transparent; font: 600 .95rem/1 var(--f-b); letter-spacing: -.005em; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--e-out); -webkit-tap-highlight-color: transparent; }
.btn .i { transition: transform .25s var(--e-out); }
.btn:hover .i:last-child { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn-p { background: var(--red); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.25); }
.btn-p:hover { background: color-mix(in oklab, var(--red) 86%, #fff); }
.btn-ghost { border-color: var(--ln-2); color: var(--tx); }
.btn-ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); }
.btn-wa { background: #1DA851; color: #fff; }
.btn-wa:hover { background: #22bd5c; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #26262b; }
.btn-sm { --h: 40px; padding: 0 14px; font-size: .88rem; gap: 8px; }
.btn-lg { --h: 54px; padding: 0 26px; font-size: 1rem; }
.btn-block { width: 100%; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--tx); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .35s var(--e-out), color .2s; }
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow .i { transition: transform .25s var(--e-out); }
.link-arrow:hover .i { transform: translateX(3px); }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--ln-2); font: 500 .78rem/1.2 var(--f-b); color: var(--tx-2); }
.chip-p { border-color: rgba(var(--p1-rgb, var(--red-rgb)), .4); color: var(--p1, var(--red-tx)); background: rgba(var(--p1-rgb, var(--red-rgb)), .08); }
.chip i { font-size: .85em; }
.tick { display: flex; gap: 10px; align-items: flex-start; }
.tick::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: .22em; border-radius: 5px; background: rgba(var(--p1-rgb, var(--red-rgb)), .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat; box-shadow: inset 0 0 0 1px rgba(var(--p1-rgb, var(--red-rgb)), .5); }

/* ---------- Duyuru ---------- */
.announce { background: var(--red); color: #fff; font-size: .88rem; }
.announce .wrap { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 42px; padding: 6px 36px; position: relative; text-align: center; }
.announce em { font-weight: 700; color: #fff; }
.announce .link-arrow { color: #fff; }
.announce-x { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; }
.announce-x:hover { background: rgba(0,0,0,.15); }

/* ---------- Üst menü ---------- */
.hdr-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; }
.hdr { position: sticky; top: 0; z-index: 60; height: var(--hdr); background: var(--bg); border-bottom: 1px solid transparent; transition: background-color .3s, border-color .3s, box-shadow .3s; view-transition-name: hdr; }
.hdr.scrolled { background: rgba(var(--bg-rgb), .94); border-bottom-color: var(--ln); box-shadow: 0 10px 30px -18px rgba(0,0,0,.8); }
[data-motion="3"] .hdr.scrolled { background: rgba(var(--bg-rgb), .8); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
.hdr-in { height: 100%; display: flex; align-items: center; gap: 20px; }
.logo { display: block; flex: none; transform-origin: left center; transition: transform .3s var(--e-out); }
.logo img { height: 34px; width: auto; }
.hdr.scrolled .logo { transform: scale(.93); }
.nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-l { display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 12px; border-radius: 9px; font: 500 .93rem/1 var(--f-b); color: var(--tx-2); transition: color .2s, background-color .2s; }
.nav-l:hover, .nav-l[aria-expanded="true"] { color: var(--tx); background: rgba(255,255,255,.05); }
.nav-l[aria-current="page"] { color: var(--tx); }
.nav-l[aria-current="page"]::after { content: ""; width: 5px; height: 5px; border-radius: 1px; background: var(--red); margin-left: 3px; }
.nav-l .i { width: .95em; height: .95em; opacity: .7; transition: transform .25s var(--e-out); }
.nav-l[aria-expanded="true"] .i { transform: rotate(180deg); }
.hdr-act { display: flex; align-items: center; gap: 10px; flex: none; }
.hdr-tel { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border-radius: 9px; color: var(--tx-2); font: 500 .88rem var(--f-b); transition: color .2s; }
.hdr-tel:hover { color: var(--tx); }
.hdr-tel .i { color: var(--red-tx); }
.burger { display: none; width: 44px; height: 44px; border-radius: 10px; place-items: center; border: 1px solid var(--ln-2); }
.burger .i { width: 22px; height: 22px; }
.burger .i-close, .burger[aria-expanded="true"] .i-open { display: none; }
.burger[aria-expanded="true"] .i-close { display: block; }

/* Mega menü */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg-1); border-top: 1px solid var(--ln); border-bottom: 1px solid var(--ln); box-shadow: 0 40px 70px -30px rgba(0,0,0,.75); animation: megaIn .22s var(--e-out); }
@keyframes megaIn { from { opacity: 0; transform: translateY(-8px); } }
.mega-in { padding: 26px 0 20px; display: grid; gap: 22px 36px; }
.mega-p { grid-template-columns: minmax(0, 1fr) 270px; gap: 0 40px; padding-bottom: 26px; }
.mega-p .mega-groups { display: block; columns: 3 200px; column-gap: 28px; }
.mega-p .mega-g { break-inside: avoid; margin-bottom: 14px; }
.mega-p .mega-i { padding: 6px 8px; gap: 11px; align-items: flex-start; }
.mega-p .mega-ic { width: 30px; height: 30px; border-radius: 8px; font-size: .78rem; }
.mega-p .mega-t small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mega-side { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; align-self: start; }
.mega-side .mega-feat { width: 100%; }
.mega-side .link-arrow { font-size: .86rem; color: var(--tx-2); }
.mega-feat-t b { display: flex; align-items: center; gap: 10px; }
.mega-s { grid-template-columns: 250px minmax(0, 1fr); gap: 0 40px; padding-bottom: 26px; }
.mega-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; border-radius: var(--r); background: radial-gradient(120% 90% at 0 0, rgba(var(--red-rgb), .2), transparent 65%), var(--bg-2); border: 1px solid var(--ln); align-self: start; }
.mega-intro .mega-h { margin: 0; }
.mega-intro b { font: 700 1.2rem/1.2 var(--f-d); letter-spacing: -.02em; }
.mega-intro span { font-size: .86rem; line-height: 1.5; color: var(--tx-2); margin-bottom: 4px; }
.mega-intro .link-arrow { font-size: .86rem; color: var(--tx-2); }
.mega-cols { columns: 3 190px; column-gap: 28px; }
.mega-cols .mega-g { break-inside: avoid; margin-bottom: 14px; }
.mega-h em { font-style: normal; opacity: .6; margin-left: 4px; }
.mega-s .mega-i { padding: 6px 8px; gap: 11px; }
.mega-s .mega-ic { width: 30px; height: 30px; border-radius: 8px; font-size: .78rem; }
.mega-s .mega-t b { font-size: .88rem; font-weight: 500; color: var(--tx-2); transition: color .15s; }
.mega-s .mega-i:hover .mega-t b { color: var(--tx); }
.mega-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; align-content: start; }
.mega-h { font: 500 .7rem/1 var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); margin: 0 0 8px 8px; }
.mega-i { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; transition: background-color .15s; }
.mega-i:hover, .mega-i:focus-visible { background: rgba(255,255,255,.05); }
.mega-ic { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; font-size: .85rem; color: var(--p1, var(--red-tx)); background: rgba(var(--p1-rgb, var(--red-rgb)), .12); box-shadow: inset 0 0 0 1px rgba(var(--p1-rgb, var(--red-rgb)), .22); }
.mega-t { min-width: 0; }
.mega-t b { display: block; font: 600 .9rem/1.3 var(--f-b); color: var(--tx); }
.mega-t small { display: block; font-size: .78rem; line-height: 1.35; color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega-feat { display: flex; flex-direction: column; border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--ln); overflow: hidden; transition: border-color .2s; }
.mega-feat:hover { border-color: rgba(var(--p1-rgb), .45); }
.mega-feat-shot { display: block; aspect-ratio: 16 / 10; background: var(--bg); overflow: hidden; }
.mega-feat-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.mega-feat-ic { width: 100%; height: 100%; display: grid; place-items: center; font-size: 2rem; color: var(--p1); }
.mega-feat-t { display: grid; gap: 4px; padding: 14px 16px 16px; }
.mega-feat-t small { font: 500 .68rem var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
.mega-feat-t b { font: 650 1.05rem/1.2 var(--f-d); }
.mega-feat-t span { font-size: .84rem; line-height: 1.45; color: var(--tx-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mega-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 28px; border-top: 1px solid var(--ln); padding-top: 16px; font-size: .9rem; }

/* Mobil menü */
.mnav { position: fixed; inset: var(--hdr) 0 0; z-index: 59; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--ln); animation: fadeIn .2s ease-out; }
@keyframes fadeIn { from { opacity: 0; } }
.mnav-in { padding: 12px 0 calc(120px + env(safe-area-inset-bottom)); display: grid; }
.mnav-g { border-bottom: 1px solid var(--ln); }
.mnav-g summary, .mnav-l { display: flex; align-items: center; gap: 10px; min-height: 58px; font: 650 1.2rem/1.2 var(--f-d); letter-spacing: -.01em; cursor: pointer; list-style: none; }
.mnav-g summary::-webkit-details-marker { display: none; }
.mnav-g summary small { font: 500 .75rem var(--f-m); color: var(--tx-3); }
.mnav-g summary .i { margin-left: auto; transition: transform .25s; }
.mnav-g[open] summary .i { transform: rotate(180deg); }
.mnav-l { border-bottom: 1px solid var(--ln); justify-content: space-between; }
.mnav-list { display: grid; gap: 2px; padding: 0 0 14px; }
.mnav-list a { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-radius: 10px; font-weight: 600; font-size: .95rem; }
.mnav-list a > i { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; font-size: .8rem; color: var(--p1, var(--red-tx)); background: rgba(var(--p1-rgb, var(--red-rgb)), .12); }
.mnav-list a small { font: 500 .72rem var(--f-m); color: var(--tx-3); margin-left: auto; }
.mnav-list a b { display: block; font-weight: 600; font-size: .95rem; }
.mnav-list a small { display: block; font-size: .78rem; color: var(--tx-3); }
.mnav-all { color: var(--red-tx); font-weight: 600; font-size: .92rem; }
.mnav-foot { padding-top: 28px; display: grid; gap: 16px; }
.mnav-title { font: 700 1.6rem/1.1 var(--f-d); letter-spacing: -.03em; }
.mnav-title em { color: var(--red); }
.mnav-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mnav-tel { display: inline-flex; align-items: center; gap: 10px; color: var(--tx-2); }
body.nav-open { overflow: hidden; }

/* ---------- Footer ---------- */
.ft { background: var(--bg); border-top: 1px solid var(--ln); padding: clamp(56px, 8vw, 96px) 0 28px; }
.ft-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px 36px; align-items: center; padding-bottom: clamp(40px, 5vw, 56px); border-bottom: 1px solid var(--ln); }
.ft-mark { width: 64px; height: auto; }
.ft-title { font: 700 clamp(1.5rem, 1rem + 1.9vw, 2.5rem)/1.1 var(--f-d); letter-spacing: -.03em; max-width: 24ch; text-wrap: balance; }
.ft-title em { color: var(--red); }
.ft-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.ft-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 32px; padding: clamp(40px, 5vw, 56px) 0; }
.ft-about p { color: var(--tx-2); font-size: .92rem; margin: 18px 0 20px; max-width: 34ch; }
.socials { display: flex; flex-wrap: wrap; gap: 8px; }
.socials a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--ln-2); color: var(--tx-2); transition: color .2s, border-color .2s, background-color .2s; }
.socials a:hover { color: var(--tx); border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.05); }
.ft-col h2 { font: 500 .72rem/1 var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 18px; }
.ft-col ul { display: grid; gap: 10px; font-size: .92rem; }
.ft-col a, .ft-col span { color: var(--tx-2); transition: color .2s; display: inline-flex; gap: 10px; align-items: flex-start; }
.ft-col a:hover { color: var(--tx); }
.ft-contact .i { margin-top: .2em; color: var(--tx-3); }
.ft-more { color: var(--red-tx) !important; }
.ft-bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 24px; border-top: 1px solid var(--ln); font-size: .85rem; color: var(--tx-3); }
.ft-bot .link-arrow { color: var(--tx-2); font-weight: 500; }

/* Mobil hızlı iletişim çubuğu */
.qbar { display: none; }

/* ---------- Görünür olunca (reveal) ---------- */
.js [data-rv] { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .7s var(--e-out), transform .85s var(--e-out); transition-delay: calc(var(--d, 0) * 70ms); }
.js [data-rv="left"] { transform: translate3d(-26px, 0, 0); }
.js [data-rv="right"] { transform: translate3d(26px, 0, 0); }
.js [data-rv="scale"] { transform: scale(.965); }
.js [data-rv="fade"] { transform: none; }
.js [data-rv="mask"] { opacity: 1; clip-path: inset(0 0 100% 0); transform: translate3d(0, .3em, 0); transition: clip-path .9s var(--e-out), transform .9s var(--e-out); }
.js [data-rv].in { opacity: 1; transform: none; }
.js [data-rv="mask"].in { clip-path: inset(-.15em -.1em -.25em -.1em); }
[data-rv="line"]::before { transform-origin: left; }
.js [data-rv="line"]::before { transform: scaleX(0); transition: transform 1s var(--e-out) calc(var(--d, 0) * 70ms); }
.js [data-rv="line"].in::before { transform: none; }

/* Sayfa girişi (hero) */
.js [data-in] { animation: rise .8s var(--e-out) both; animation-delay: calc(var(--d, 0) * 80ms + 60ms); }
.js [data-in="mask"] { animation-name: clipUp; animation-duration: .9s; }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
@keyframes clipUp { from { clip-path: inset(0 0 100% 0); transform: translate3d(0, .25em, 0); } to { clip-path: inset(-.2em -.2em -.3em -.2em); transform: none; } }

/* ---------- Bölüm iskeleti ---------- */
.sec { padding: var(--sec) 0; position: relative; }
.sec-tight { padding: calc(var(--sec) * .6) 0; }
.paper { background: var(--paper); color: var(--ink); color-scheme: light;
    --tx: var(--ink); --tx-2: var(--ink-2); --tx-3: var(--ink-3); --ln: var(--ln-l); --ln-2: rgba(16,16,19,.18); --red-tx: #B40E25; --bg-card: #fff; }
.paper .btn-ghost:hover { background: rgba(16,16,19,.05); border-color: rgba(16,16,19,.3); }
.paper :focus-visible { outline-color: var(--red); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px 64px; align-items: end; margin-bottom: clamp(40px, 5vw, 68px); }
.sec-head .eyebrow { margin-bottom: 18px; }
.sec-head > :last-child:not(:first-child) { justify-self: end; }
.sec-head-c { display: grid; justify-items: center; text-align: center; max-width: 820px; margin: 0 auto clamp(40px, 5vw, 64px); }
.sec-head-c .eyebrow { margin-bottom: 18px; }
.sec-head-c .lead { margin-top: 18px; }
.sec-foot { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 64px); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(36px, 5.5vw, 84px) 0 clamp(56px, 7vw, 100px); overflow: clip; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--ln) 1px, transparent 1px), linear-gradient(90deg, var(--ln) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 75% 42%, #000 10%, transparent 72%); mask-image: radial-gradient(ellipse 60% 70% at 75% 42%, #000 10%, transparent 72%); opacity: .55; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(38% 46% at 76% 34%, rgba(var(--red-rgb), .15), transparent 72%); }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-t .eyebrow { margin-bottom: 22px; }
.hero-t .h1 { max-width: 12.5ch; }
.caret { display: inline-block; width: .085em; height: .78em; margin-left: .07em; vertical-align: -.02em; background: var(--red); border-radius: 1px; }
[data-motion="2"] .caret, [data-motion="3"] .caret { animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-t .lead { margin-top: 22px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-prods { margin-top: clamp(32px, 4vw, 44px); padding-top: 20px; border-top: 1px solid var(--ln); max-width: 620px; }
.hero-prods p { font: 500 .7rem/1 var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 12px; }
.hp-list { display: flex; flex-wrap: wrap; gap: 8px; }
.hp { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px 0 5px; border-radius: 999px; background: rgba(255,255,255,.035); border: 1px solid var(--ln); font: 500 .85rem/1 var(--f-b); color: var(--tx); transition: border-color .2s, background-color .2s; }
.hp .ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; color: var(--p1); background: rgba(var(--p1-rgb), .16); }
.hp:hover { border-color: rgba(var(--p1-rgb), .55); background: rgba(var(--p1-rgb), .08); }
.hp-more { color: var(--tx-2); padding: 0 13px; }

/* Canlı arayüz duvarı */
.wall { position: relative; container-type: inline-size; aspect-ratio: 1 / .9; max-width: 640px; justify-self: end; width: 100%; }
.wall > * { position: absolute; }
.w-card { background: var(--bg-1); border: 1px solid var(--ln-2); border-radius: 2.4cqw; box-shadow: 0 30px 60px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.3); overflow: hidden; font-size: 2.05cqw; line-height: 1.3; }
.w-bar { display: flex; align-items: center; gap: .5em; padding: .8em 1em; border-bottom: 1px solid var(--ln); color: var(--tx-2); font-size: .92em; }
.w-bar > i { width: .62em; height: .62em; border-radius: 50%; background: rgba(255,255,255,.14); }
.w-bar > span { margin-left: .5em; }
.live { margin-left: auto; display: inline-flex; align-items: center; gap: .4em; font: 500 .82em var(--f-m); color: var(--ok); }
.live::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 .22em rgba(61,214,140,.18); }
.w-dash { left: 0; top: 7%; width: 64%; z-index: 1; }
.w-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; padding: 1em; }
.w-kpis > div { padding: .75em .85em; border-radius: .7em; background: var(--bg-2); border: 1px solid var(--ln); }
.w-kpis small { display: block; color: var(--tx-3); font-size: .8em; }
.w-kpis b { display: flex; align-items: baseline; gap: .35em; font: 700 1.55em/1.2 var(--f-d); letter-spacing: -.02em; margin-top: .15em; }
.w-kpis b em { font: 600 .5em var(--f-b); color: var(--ok); }
.w-chart { display: flex; align-items: flex-end; gap: 3.5%; height: 9.5em; padding: 0 1em .9em; }
.w-chart span { flex: 1; height: var(--h); border-radius: .3em .3em .12em .12em; background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.06)); transform-origin: bottom; }
.w-chart span.hi { background: linear-gradient(180deg, var(--red), rgba(var(--red-rgb), .35)); }
.w-rows { display: grid; gap: .45em; padding: 0 1em 1em; }
.w-rows > div { display: flex; align-items: center; gap: .7em; padding: .55em .7em; border-radius: .6em; background: rgba(255,255,255,.025); font-size: .9em; color: var(--tx-2); }
.w-rows i { width: .55em; height: .55em; border-radius: 50%; background: var(--c, var(--ok)); flex: none; }
.w-rows span { flex: 1; }
.w-rows b { font: 500 .85em var(--f-m); color: var(--tx-3); }
.w-map { right: 0; bottom: 0; width: 40%; aspect-ratio: 1 / .92; z-index: 3; }
.w-map .map { position: absolute; inset: 0; background-color: #0E1116; background-image: radial-gradient(rgba(255,255,255,.1) 1px, transparent 1.2px); background-size: 1.4em 1.4em; }
.w-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.w-map .route { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 2.4; stroke-dasharray: 5 6; }
.w-map .route-done { fill: none; stroke: var(--red); stroke-width: 2.6; stroke-linecap: round; }
.w-map .trk2 circle { fill: var(--red); stroke: rgba(var(--red-rgb), .3); stroke-width: 8; paint-order: stroke; }
.w-map .pin { position: absolute; font: 500 .78em var(--f-m); color: var(--tx-2); display: flex; align-items: center; gap: .35em; }
.w-map .pin::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .25em rgba(255,255,255,.15); }
.w-map .tag { position: absolute; left: .8em; right: .8em; bottom: .8em; padding: .6em .7em; border-radius: .6em; background: rgba(11,11,13,.85); border: 1px solid var(--ln); display: grid; gap: .35em; font-size: .85em; }
.w-map .tag b { font-weight: 600; color: var(--tx); display: flex; justify-content: space-between; }
.w-map .tag b span { color: var(--ok); font: 500 .9em var(--f-m); }
.fill { height: .45em; border-radius: 1em; background: rgba(255,255,255,.08); overflow: hidden; }
.fill i { display: block; height: 100%; width: var(--w, 100%); border-radius: inherit; background: linear-gradient(90deg, var(--red), var(--acc)); transform-origin: left; }
.w-phone { right: 1%; top: 0; width: 28%; aspect-ratio: 9 / 18.5; border-radius: 3.6cqw; padding: .55em; background: #050506; z-index: 2; }
.w-phone .scr { height: 100%; border-radius: 2.6cqw; background: var(--bg-1); overflow: hidden; padding: 1.4em .8em .8em; display: flex; flex-direction: column; gap: .7em; font-size: .9em; position: relative; }
.w-phone .scr::before { content: ""; position: absolute; top: .45em; left: 50%; width: 30%; height: .5em; margin-left: -15%; border-radius: 1em; background: #000; }
.w-phone h4 { font: 650 1.05em/1.2 var(--f-d); }
.days { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3em; text-align: center; }
.days span { padding: .35em 0; border-radius: .5em; background: rgba(255,255,255,.04); font: 500 .75em/1.25 var(--f-m); color: var(--tx-3); }
.days span b { display: block; font: 600 1.25em var(--f-b); color: var(--tx); }
.days span.on { background: var(--red); color: rgba(255,255,255,.8); }
.days span.on b { color: #fff; }
.slots { display: grid; gap: .4em; }
.slot { display: flex; justify-content: space-between; align-items: center; padding: .55em .6em; border-radius: .55em; border: 1px solid var(--ln); font: 500 .82em var(--f-m); color: var(--tx-2); position: relative; overflow: hidden; }
.slot.busy { opacity: .45; text-decoration: line-through; }
.slot em { font: 600 .9em var(--f-b); color: var(--ok); }
.slot .bk { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .3em; background: var(--ok); color: #05210F; font: 600 .95em var(--f-b); opacity: 0; }
.w-phone .left { margin-top: auto; padding: .55em .6em; border-radius: .55em; background: rgba(var(--acc-rgb), .12); color: var(--acc); font: 500 .8em var(--f-m); display: flex; justify-content: space-between; }
.w-toasts { left: 3%; bottom: 9%; width: 52%; height: 4.2em; font-size: 2.05cqw; z-index: 4; }
.toast { position: absolute; inset: 0; display: flex; align-items: center; gap: .8em; padding: .8em 1em; border-radius: .9em; background: rgba(24,24,28,.97); border: 1px solid var(--ln-2); box-shadow: 0 20px 40px -18px rgba(0,0,0,.9); font-size: .95em; opacity: 0; }
.w-toasts .toast:first-child { opacity: 1; }
.toast .ti { width: 2.1em; height: 2.1em; flex: none; border-radius: .6em; display: grid; place-items: center; background: rgba(61,214,140,.14); color: var(--ok); }
.toast .ti svg { width: 1.1em; height: 1.1em; }
.toast b { display: block; font-weight: 600; color: var(--tx); }
.toast small { display: block; color: var(--tx-3); font-size: .85em; }

/* Duvar animasyonları (yalnızca .is-on + seviye >= 2) */
[data-motion="2"] .is-on .w-chart span, [data-motion="3"] .is-on .w-chart span { animation: barPulse 4.8s var(--e-io) infinite; animation-delay: calc(var(--i) * -380ms); }
@keyframes barPulse { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(var(--s, .72)); } }
[data-motion="2"] .is-on .w-toasts .toast, [data-motion="3"] .is-on .w-toasts .toast { animation: toastCycle 16s var(--e-out) infinite; animation-delay: calc(var(--i) * 4s); opacity: 0; }
@keyframes toastCycle { 0% { opacity: 0; transform: translateY(.8em) scale(.98); } 3%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(-.6em); } }
[data-motion="2"] .is-on .slot .bk, [data-motion="3"] .is-on .slot .bk { animation: book 6s var(--e-out) infinite; }
@keyframes book { 0%, 35% { opacity: 0; transform: scale(.96); } 42%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
[data-motion="2"] .is-on .fill i, [data-motion="3"] .is-on .fill i { animation: fillUp 9s var(--e-io) infinite; }
@keyframes fillUp { 0% { transform: scaleX(.55); } 80%, 100% { transform: scaleX(1); } }

/* ---------- İmza animasyonu: Fikirden Yazılıma ---------- */
.sig { position: relative; }
.sig-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); }
.sig-steps { position: relative; padding-left: 34px; }
.sig-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--ln); }
.sig-rail i { position: absolute; inset: 0 0 auto; height: calc(var(--p, 0) * 100%); background: var(--red); transition: height .6s var(--e-out); }
.sig-step { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; position: relative; opacity: .32; transition: opacity .5s; }
.sig-step:first-child { min-height: 58vh; justify-content: flex-start; padding-top: 12vh; }
.sig-step:last-child { min-height: 64vh; }
.sig-step.on { opacity: 1; }
.sig-step::before { content: ""; position: absolute; left: -39px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 3px; background: var(--bg); border: 2px solid var(--ln-2); transition: background-color .3s, border-color .3s; }
.sig-step:first-child::before { top: calc(12vh + .8em); }
.sig-step.on::before { background: var(--red); border-color: var(--red); }
.sig-num { font: 500 .78rem var(--f-m); color: var(--red-tx); letter-spacing: .1em; }
.sig-step h3 { font: 700 clamp(1.8rem, 1.2rem + 2vw, 2.8rem)/1.05 var(--f-d); letter-spacing: -.035em; margin: 10px 0 14px; }
.sig-step p { color: var(--tx-2); font-size: 1.06rem; max-width: 42ch; }
.sig-stage-wrap { position: relative; }
.sig-stage { position: sticky; top: calc(50vh - min(44vh, 290px) + var(--hdr) / 2); height: min(88vh, 580px); display: grid; place-items: center; }
.stage { position: relative; width: 100%; max-width: 580px; aspect-ratio: 1; container-type: inline-size; border-radius: var(--r-lg); background: radial-gradient(60% 60% at 50% 50%, rgba(var(--red-rgb), .07), transparent 70%), var(--bg-1); border: 1px solid var(--ln); overflow: hidden; }
.stage::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.3px); background-size: 4.4cqw 4.4cqw; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 75%); mask-image: radial-gradient(circle at 50% 50%, #000 20%, transparent 75%); opacity: .6; }
.st-label { position: absolute; z-index: 5; left: 4cqw; top: 4cqw; font: 500 2.2cqw var(--f-m); color: var(--tx-3); letter-spacing: .1em; text-transform: uppercase; display: flex; gap: 1.2cqw; }
.st-label b { color: var(--red-tx); font-weight: 500; }
.st-label span { display: none; }
.stage[data-s="0"] .st-label span:nth-of-type(1), .stage[data-s="1"] .st-label span:nth-of-type(2), .stage[data-s="2"] .st-label span:nth-of-type(3),
.stage[data-s="3"] .st-label span:nth-of-type(4), .stage[data-s="4"] .st-label span:nth-of-type(5), .stage[data-s="5"] .st-label span:nth-of-type(6) { display: inline; }
.st { position: absolute; transition: opacity .6s var(--e-out), transform .8s var(--e-out); }
.st-off { opacity: 0; pointer-events: none; }

/* 0 Fikir: imleç */
.st-cursor { left: 50%; top: 50%; width: 3cqw; height: 6.4cqw; margin: -3.2cqw 0 0 -1.5cqw; background: var(--red); border-radius: .4cqw; box-shadow: 0 0 0 1.4cqw rgba(var(--red-rgb), .12), 0 0 6cqw rgba(var(--red-rgb), .35); }
.stage[data-s="1"] .st-cursor { transform: translate(18cqw, -1.3cqw) scale(.42); box-shadow: none; }
.stage:not([data-s="0"]):not([data-s="1"]) .st-cursor { opacity: 0; transform: scale(0); }
[data-motion="2"] .is-on .stage[data-s="0"] .st-cursor, [data-motion="3"] .is-on .stage[data-s="0"] .st-cursor,
[data-motion="2"] .is-on .stage[data-s="1"] .st-cursor, [data-motion="3"] .is-on .stage[data-s="1"] .st-cursor { animation: blink 1.05s steps(1) infinite; }
.st-cursor::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16cqw; height: 16cqw; margin: -8cqw 0 0 -8cqw; border-radius: 50%; border: 1px solid rgba(var(--red-rgb), .45); opacity: 0; }
[data-motion="2"] .is-on .stage[data-s="0"] .st-cursor::after, [data-motion="3"] .is-on .stage[data-s="0"] .st-cursor::after { animation: seedPulse 2.6s ease-out infinite; }
@keyframes seedPulse { 0% { opacity: .9; transform: scale(.25); } 100% { opacity: 0; transform: scale(1.25); } }
.st-idea { left: 50%; top: 62%; transform: translateX(-50%); font: 500 2.3cqw var(--f-m); color: var(--tx-3); white-space: nowrap; }
.stage:not([data-s="0"]) .st-idea { opacity: 0; transform: translate(-50%, 2cqw); }

/* 1 Kod */
.st-code { left: 12%; top: 22%; width: 76%; border-radius: 2cqw; background: #0C0C0F; border: 1px solid var(--ln-2); font: 500 2.35cqw/1.75 var(--f-m); padding: 0 0 3cqw; opacity: 0; transform: translateY(3cqw) scale(.96); }
.st-code .bar { display: flex; align-items: center; gap: 1cqw; padding: 2cqw 2.6cqw; border-bottom: 1px solid var(--ln); margin-bottom: 2cqw; }
.st-code .bar i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: rgba(255,255,255,.14); }
.st-code .bar span { margin-left: 1.4cqw; color: var(--tx-3); font-size: .9em; }
.st-code .ln { display: flex; padding: 0 2.6cqw; white-space: pre; color: rgba(255,255,255,.8); clip-path: inset(0 100% 0 0); transition: clip-path .8s steps(22) calc(var(--i) * 140ms); }
.st-code .ln u { text-decoration: none; width: 5cqw; flex: none; color: rgba(255,255,255,.22); }
.st-code .k { color: #FF7A8A; } .st-code .t { color: var(--acc); } .st-code .s { color: #7EE2A8; } .st-code .c { color: rgba(255,255,255,.4); }
.stage[data-s="1"] .st-code { opacity: 1; transform: none; }
.stage[data-s="1"] .st-code .ln { clip-path: inset(0 0 0 0); }
.stage[data-s="2"] .st-code { opacity: 0; transform: translateY(9cqw) scale(.3); }
.stage[data-s="2"] .st-code .ln { clip-path: inset(0 0 0 0); transition: none; }
.stage[data-s="3"] .st-code, .stage[data-s="4"] .st-code, .stage[data-s="5"] .st-code { opacity: 0; transform: scale(.2); }

/* 2 Veri: düğümler ve bağlantılar */
.st-net { inset: 0; width: 100%; height: 100%; opacity: 0; }
.st-net line { stroke: rgba(255,255,255,.22); stroke-width: .35; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--e-out) calc(var(--i) * 90ms + 200ms); }
.st-net .pk { fill: var(--red); opacity: 0; }
.stage[data-s="2"] .st-net { opacity: 1; }
.stage[data-s="2"] .st-net line { stroke-dashoffset: 0; }
.st-node { left: var(--x); top: var(--y); transform: translate(-50%, -50%) scale(.6); opacity: 0; display: flex; align-items: center; gap: 1.2cqw; padding: 1.4cqw 2.4cqw 1.4cqw 1.6cqw; border-radius: 99px; background: var(--bg-2); border: 1px solid var(--ln-2); font: 600 2.4cqw var(--f-b); white-space: nowrap; transition-delay: calc(var(--i) * 90ms + 300ms); }
.st-node i { width: 3.8cqw; height: 3.8cqw; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--red-rgb), .14); color: var(--red-tx); font-size: 1.8cqw; font-style: normal; }
.stage[data-s="2"] .st-node { opacity: 1; transform: translate(-50%, -50%); }
.stage[data-s="3"] .st-node, .stage[data-s="4"] .st-node, .stage[data-s="5"] .st-node { opacity: 0; transform: translate(-50%, -50%) scale(.8); transition-delay: 0s; }
.st-hub { left: 50%; top: 50%; width: 15cqw; height: 15cqw; margin: -7.5cqw 0 0 -7.5cqw; border-radius: 3.4cqw; display: grid; place-items: center; background: var(--red); color: #fff; font: 700 3cqw var(--f-m); opacity: 0; transform: scale(.4); box-shadow: 0 0 0 2cqw rgba(var(--red-rgb), .12); }
.stage[data-s="2"] .st-hub { opacity: 1; transform: none; transition-delay: .15s; }

/* 3 Arayüz: panel */
.st-ui { left: 8%; top: 15%; width: 84%; height: 72%; border-radius: 2.2cqw; background: #0E0E11; border: 1px solid var(--ln-2); overflow: hidden; display: grid; grid-template-columns: 11cqw 1fr; opacity: 0; transform: scale(.9); }
.st-ui .side { border-right: 1px solid var(--ln); padding: 2.4cqw 2cqw; display: grid; gap: 1.8cqw; align-content: start; }
.st-ui .side i { height: 5cqw; border-radius: 1.2cqw; background: rgba(255,255,255,.05); }
.st-ui .side i:first-child { background: var(--red); height: 5cqw; width: 5cqw; }
.st-ui .main { padding: 2.4cqw; display: grid; grid-template-rows: auto auto 1fr; gap: 2cqw; min-width: 0; }
.st-ui .top { display: flex; justify-content: space-between; align-items: center; font: 650 2.8cqw var(--f-d); }
.st-ui .top small { font: 500 1.9cqw var(--f-m); color: var(--ok); }
.st-ui .kp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.st-ui .kp div { padding: 1.6cqw; border-radius: 1.4cqw; background: rgba(255,255,255,.035); border: 1px solid var(--ln); transform: translateY(2cqw); opacity: 0; transition: transform .6s var(--e-out) calc(var(--i) * 90ms + 300ms), opacity .6s calc(var(--i) * 90ms + 300ms); }
.st-ui .kp small { display: block; font-size: 1.7cqw; color: var(--tx-3); }
.st-ui .kp b { font: 700 3.6cqw/1.2 var(--f-d); }
.st-ui .ch { display: flex; align-items: flex-end; gap: 1.4cqw; padding-top: 1cqw; }
.st-ui .ch span { flex: 1; height: var(--h); border-radius: .8cqw .8cqw .3cqw .3cqw; background: rgba(255,255,255,.12); transform: scaleY(0); transform-origin: bottom; transition: transform .8s var(--e-out) calc(var(--i) * 60ms + 450ms); }
.st-ui .ch span.hi { background: var(--red); }
.stage[data-s="3"] .st-ui, .stage[data-s="4"] .st-ui { opacity: 1; transform: none; }
.stage[data-s="3"] .st-ui .kp div, .stage[data-s="4"] .st-ui .kp div { transform: none; opacity: 1; }
.stage[data-s="3"] .st-ui .ch span, .stage[data-s="4"] .st-ui .ch span { transform: none; }
.stage[data-s="5"] .st-ui { opacity: 0; transform: scale(.55); }

/* 4 Otomasyon: bildirimler ve akış */
.st-flow { left: 7%; bottom: 6%; width: 66%; transform: translateY(4cqw); opacity: 0; display: grid; gap: 1.4cqw; z-index: 3; }
.st-flow .toast { position: relative; inset: auto; opacity: 0; transform: translateX(6cqw); font-size: 2.3cqw; transition: opacity .5s var(--e-out) calc(var(--i) * 550ms + 200ms), transform .6s var(--e-out) calc(var(--i) * 550ms + 200ms); }
.stage[data-s="4"] .st-flow { opacity: 1; transform: none; }
.stage[data-s="4"] .st-flow .toast { opacity: 1; transform: none; }
.stage[data-s="4"] .st-ui { transform: translateY(-13cqw) scale(.8); }
.st-gear { right: 8%; bottom: 11%; width: 12cqw; height: 12cqw; border-radius: 50%; border: .9cqw dashed rgba(var(--acc-rgb), .7); opacity: 0; transform: scale(.5); }
.stage[data-s="4"] .st-gear { opacity: 1; transform: none; }
[data-motion="2"] .is-on .stage[data-s="4"] .st-gear, [data-motion="3"] .is-on .stage[data-s="4"] .st-gear { animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 5 Çalışan ürün: M kurdele + ürün ekosistemi */
.st-mark { left: 50%; top: 50%; width: 34cqw; margin: -14cqw 0 0 -17cqw; opacity: 0; }
.st-mark path { stroke-dasharray: 1 3; stroke-dashoffset: 1.02; transition: stroke-dashoffset .9s var(--e-io); }
.st-mark .m-dl { transition-delay: .25s; } .st-mark .m-dr { transition-delay: .45s; } .st-mark .m-r { transition-delay: .6s; } .st-mark .m-ch { transition-delay: .85s; }
.stage[data-s="5"] .st-mark { opacity: 1; }
.stage[data-s="5"] .st-mark path { stroke-dashoffset: 0; }
.st-ring { inset: 0; opacity: 0; }
.st-ring a, .st-ring span { position: absolute; left: 50%; top: 50%; width: 9.5cqw; height: 9.5cqw; margin: -4.75cqw 0 0 -4.75cqw; border-radius: 2.6cqw; display: grid; place-items: center; background: var(--bg-2); border: 1px solid rgba(var(--p1-rgb), .35); color: var(--p1); font-size: 3.6cqw; transform: rotate(var(--a)) translateX(37cqw) rotate(calc(var(--a) * -1)) scale(.4); opacity: 0; transition: transform .8s var(--e-out) calc(var(--i) * 60ms + .7s), opacity .5s calc(var(--i) * 60ms + .7s), border-color .2s; }
.st-ring a:hover { border-color: var(--p1); }
.stage[data-s="5"] .st-ring { opacity: 1; }
.stage[data-s="5"] .st-ring a, .stage[data-s="5"] .st-ring span { opacity: 1; transform: rotate(var(--a)) translateX(37cqw) rotate(calc(var(--a) * -1)); }
.st-ring::before { content: ""; position: absolute; left: 50%; top: 50%; width: 74cqw; height: 74cqw; margin: -37cqw 0 0 -37cqw; border-radius: 50%; border: 1px dashed var(--ln-2); }
.st-cap { left: 50%; top: 76%; transform: translateX(-50%); font: 600 2.4cqw var(--f-b); color: var(--tx-2); white-space: nowrap; opacity: 0; }
.stage[data-s="5"] .st-cap { opacity: 1; transition-delay: 1.1s; }

/* ---------- Ürün sunumları (ana sayfa) ---------- */
.shows { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(72px, 10vw, 140px); }
.show { display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.show:nth-child(even) { grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); }
.show:nth-child(even) .show-t { order: 2; }
.show-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 18px; font: 500 .74rem var(--f-m); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.show-meta .n { color: var(--p1); }
.show-meta .badge { color: var(--acc); }
.show-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.25rem; color: var(--p1); background: rgba(var(--p1-rgb), .12); box-shadow: inset 0 0 0 1px rgba(var(--p1-rgb), .3); margin-bottom: 20px; }
.show-ic img { width: 30px; height: 30px; object-fit: contain; }
.show-t h3 { font: 700 clamp(2rem, 1.3rem + 2.6vw, 3.3rem)/1.02 var(--f-d); letter-spacing: -.04em; }
.show-full { display: block; margin-top: 8px; font: 500 .9rem var(--f-b); color: var(--tx-3); }
.show-value { margin-top: 18px; font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem); color: var(--tx); line-height: 1.55; max-width: 48ch; }
.show-prob { margin-top: 24px; padding: 16px 18px; border-radius: var(--r); background: var(--bg-1); border: 1px solid var(--ln); display: grid; gap: 8px; font-size: .92rem; }
.show-prob small { font: 500 .68rem var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
.show-prob .was { color: var(--tx-3); text-decoration: line-through; text-decoration-color: rgba(var(--red-rgb), .6); }
.show-prob .now { color: var(--tx); display: flex; gap: 10px; }
.show-prob .now::before { content: "→"; color: var(--p1); font-weight: 700; }
.show-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-top: 24px; font-size: .93rem; color: var(--tx-2); }
.show-stats { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--ln); }
.show-stats div { display: grid; gap: 2px; max-width: 150px; }
.show-stats b { font: 700 1.6rem/1.1 var(--f-d); color: var(--tx); letter-spacing: -.02em; }
.show-stats span { font-size: .78rem; line-height: 1.35; color: var(--tx-3); }
.show-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.show-cta .btn-p { background: var(--red); }
.show-v { position: relative; }
.show-v::before { content: ""; position: absolute; inset: -12% -8%; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, rgba(var(--p1-rgb), .16), transparent 70%); }
.more-rail { margin-top: clamp(72px, 9vw, 120px); }
.rail-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.rail-head h3 { font: 650 clamp(1.3rem, 1rem + 1vw, 1.8rem)/1.2 var(--f-d); letter-spacing: -.02em; }
.rail-nav { display: flex; gap: 8px; }
.rail-nav button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--ln-2); display: grid; place-items: center; transition: background-color .2s, border-color .2s; }
.rail-nav button:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--ln-2) transparent; }
.rail > * { scroll-snap-align: start; }

/* ---------- Ürün kartı (vitrin + ana sayfa şeridi + diğer ürünler) ---------- */
.pc { position: relative; display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--bg-1); border: 1px solid var(--ln); overflow: hidden; transition: border-color .3s, transform .4s var(--e-out); }
.pc:hover { border-color: rgba(var(--p1-rgb), .45); }
.pc-vis { position: relative; aspect-ratio: 16 / 10; background: var(--bg); overflow: hidden; border-bottom: 1px solid var(--ln); }
.pc-vis > picture, .pc-vis > img { position: absolute; inset: 0; }
.pc-vis img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .8s var(--e-out); }
.pc:hover .pc-vis img { transform: scale(1.035); }
.pc-vis .scene { position: absolute; inset: 0; }
.pc-use { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; padding: 9px 12px; border-radius: 10px; background: rgba(11,11,13,.9); border: 1px solid var(--ln-2); font-size: .8rem; line-height: 1.4; color: var(--tx-2); }
.pc-use b { color: var(--tx); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
    .pc-use { opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .35s var(--e-out); }
    .pc:hover .pc-use, .pc:focus-within .pc-use { opacity: 1; transform: none; }
}
.pc-b { display: flex; flex-direction: column; gap: 12px; padding: 20px 20px 18px; flex: 1; }
.pc-meta { display: flex; align-items: center; gap: 10px; font: 500 .72rem var(--f-m); letter-spacing: .1em; text-transform: uppercase; color: var(--tx-3); }
.pc-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: .78rem; color: var(--p1); background: rgba(var(--p1-rgb), .12); }
.pc-meta { min-width: 0; }
.pc-meta .badge { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; margin-left: auto; color: var(--acc); text-transform: none; letter-spacing: 0; font-family: var(--f-b); font-size: .76rem; }
.pc-t { font: 650 1.35rem/1.18 var(--f-d); letter-spacing: -.02em; }
.pc-t a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pc-t a:focus-visible { outline: none; }
.pc:has(.pc-t a:focus-visible) { outline: 2px solid var(--red-tx); outline-offset: 2px; }
.pc-l { color: var(--tx-2); font-size: .92rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pc-f { display: grid; gap: 7px; font-size: .86rem; color: var(--tx-2); }
.pc-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ln); font-size: .9rem; }
.pc-demo { position: relative; z-index: 2; color: var(--tx-2); font-weight: 500; transition: color .2s; }
.pc-demo:hover { color: var(--tx); }

/* ---------- Hizmet kartları ---------- */
.svc-groups { display: grid; }
.svc-g { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 28px 48px; padding: 36px 0; border-top: 1px solid var(--ln); }
.svc-g:last-child { border-bottom: 1px solid var(--ln); }
.svc-gh { position: sticky; top: calc(var(--hdr) + 24px); align-self: start; }
.svc-gh b { display: block; font: 700 1.4rem/1.2 var(--f-d); letter-spacing: -.02em; }
.svc-gh span { font: 500 .74rem var(--f-m); color: var(--tx-3); letter-spacing: .1em; }
.svc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 16px; }
.svc { position: relative; display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--bg-card, var(--bg-1)); border: 1px solid var(--ln); overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.svc:hover { border-color: rgba(var(--red-rgb), .4); box-shadow: 0 24px 44px -30px rgba(0,0,0,.45); }
.svc-scene { position: relative; aspect-ratio: 16 / 9; background: var(--bg-1); overflow: hidden; }
.svc-b { display: grid; gap: 10px; padding: 18px 20px 20px; }
.svc-b h3 { font: 650 1.2rem/1.2 var(--f-d); letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.svc-b h3 i { color: var(--red); font-size: .9em; }
.svc-b h3 a::after { content: ""; position: absolute; inset: 0; }
.svc-b p { color: var(--tx-2); font-size: .9rem; line-height: 1.55; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.svc-tags span { font-size: .74rem; padding: 3px 9px; border-radius: 99px; background: rgba(var(--red-rgb), .07); color: var(--tx-2); border: 1px solid var(--ln); }

/* ---------- İstatistikler ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ln); border-bottom: 1px solid var(--ln); }
.stat { padding: clamp(28px, 4vw, 44px) clamp(16px, 2.5vw, 32px); display: grid; gap: 10px; border-left: 1px solid var(--ln); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat b { font: 700 clamp(2.5rem, 1.5rem + 3vw, 4.2rem)/1 var(--f-d); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.stat b sup { font-size: .5em; color: var(--red); vertical-align: .55em; margin-left: .05em; }
.stat > span { color: var(--tx-2); font-size: .95rem; }

/* ---------- Neden biz ---------- */
.why { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); }
.why-side { position: sticky; top: calc(var(--hdr) + 40px); align-self: start; }
.why-side .lead { margin-top: 20px; }
.why-list { display: grid; }
.why-i { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 20px; padding: 28px 0; }
.why-i::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ln-2); }
.why-i .n { font: 500 .78rem var(--f-m); color: var(--red-tx); padding-top: .4em; grid-row: span 2; }
.why-i h3 { font: 650 1.25rem/1.25 var(--f-d); letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.why-i h3 i { color: var(--tx-3); font-size: .85em; }
.why-i p { color: var(--tx-2); font-size: .96rem; }

/* ---------- Süreç ---------- */
.proc { position: relative; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 24px; }
.proc-line { position: absolute; left: 28px; right: 28px; top: 27px; height: 2px; background: var(--ln-2); }
.proc-line i { position: absolute; inset: 0; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--e-io) .2s; }
.proc.in .proc-line i { transform: none; }
.js .proc:not(.in) .proc-line i { transform: scaleX(0); }
.proc-s { position: relative; display: grid; gap: 10px; align-content: start; }
.proc-dot { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--bg-card, var(--bg-1)); border: 1px solid var(--ln-2); color: var(--tx-2); font-size: 1.05rem; position: relative; z-index: 1; transition: background-color .4s, color .4s, border-color .4s; transition-delay: calc(var(--i) * 300ms + 300ms); }
.proc.in .proc-dot { background: var(--red); border-color: var(--red); color: #fff; }
.proc-s small { font: 500 .7rem var(--f-m); letter-spacing: .12em; color: var(--tx-3); margin-top: 8px; }
.proc-s h3 { font: 650 1.12rem/1.25 var(--f-d); letter-spacing: -.015em; }
.proc-s p { color: var(--tx-2); font-size: .9rem; }

/* ---------- Teknolojiler ---------- */
.tech-t { text-align: center; font: 500 .76rem var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 26px; }
.tech { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 920px; margin: 0 auto; }
.tech span { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--ln); background: rgba(255,255,255,.02); color: var(--tx-2); font-weight: 500; font-size: .92rem; transition: border-color .2s, color .2s; }
.tech span:hover { border-color: var(--ln-2); color: var(--tx); }
.tech i { color: var(--tx-3); }

/* ---------- Referanslar ---------- */
.refs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 1px; background: var(--ln); border: 1px solid var(--ln); border-radius: var(--r-lg); overflow: hidden; }
.ref { display: grid; place-items: center; gap: 8px; min-height: 120px; padding: 22px; background: var(--bg-card, var(--bg-1)); text-align: center; }
.ref img { max-height: 52px; max-width: 150px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter .3s, opacity .3s; }
.ref:hover img { filter: none; opacity: 1; }
.ref .ini { font: 700 1.3rem var(--f-d); color: var(--tx-3); }
.ref h3 { font: 600 .9rem/1.3 var(--f-b); }
.ref small { font-size: .78rem; color: var(--tx-3); }
.ref a { font-size: .8rem; color: var(--red-tx); display: inline-flex; gap: 6px; align-items: center; }

/* ---------- Blog kartları ---------- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.post { position: relative; display: flex; flex-direction: column; gap: 14px; }
.post-img { aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background: var(--bg-2); border: 1px solid var(--ln); }
.post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--e-out); }
.post:hover .post-img img { transform: scale(1.04); }
.post-img .ph { width: 100%; height: 100%; display: grid; place-items: center; }
.post-img .ph svg { width: 22%; opacity: .5; }
.post-meta { display: flex; gap: 12px; font: 500 .72rem var(--f-m); letter-spacing: .08em; text-transform: uppercase; color: var(--tx-3); }
.post-meta b { color: var(--red-tx); font-weight: 500; }
.post h3 { font: 650 1.25rem/1.25 var(--f-d); letter-spacing: -.02em; }
.post h3 a::after { content: ""; position: absolute; inset: 0; }
.post p { color: var(--tx-2); font-size: .92rem; }

/* ---------- SSS ---------- */
.faq { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 96px); }
.faq-side .lead { margin-top: 18px; }
.faq-help { margin-top: 30px; padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--ln); background: var(--bg-card, var(--bg-1)); display: grid; gap: 10px; justify-items: start; }
.faq-help b { font: 650 1.1rem var(--f-d); }
.faq-help p { color: var(--tx-2); font-size: .92rem; }
.qa { border-bottom: 1px solid var(--ln-2); }
.qa:first-child { border-top: 1px solid var(--ln-2); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font: 600 1.06rem/1.4 var(--f-b); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .pm { position: relative; width: 28px; height: 28px; flex: none; border-radius: 8px; border: 1px solid var(--ln-2); transition: background-color .25s, border-color .25s, transform .3s var(--e-out); }
.qa summary .pm::before, .qa summary .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 2px; margin: -1px 0 0 -5.5px; background: currentColor; border-radius: 1px; transition: transform .3s var(--e-out); }
.qa summary .pm::after { transform: rotate(90deg); }
.qa[open] summary .pm { background: var(--red); border-color: var(--red); color: #fff; }
.qa[open] summary .pm::after { transform: rotate(0); }
.qa summary:hover .pm { border-color: var(--red); }
.qa-a { padding: 0 48px 24px 0; color: var(--tx-2); }
.qa::details-content { block-size: 0; overflow: hidden; transition: block-size .4s var(--e-out), content-visibility .4s allow-discrete; }
.qa[open]::details-content { block-size: auto; }
[data-motion="0"] .qa::details-content { transition: none; }

/* ---------- Son çağrı ---------- */
.cta { padding: var(--sec) 0; }
.cta-box { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(32px, 5vw, 64px); border-radius: var(--r-lg); background: radial-gradient(70% 140% at 0% 0%, rgba(var(--red-rgb), .22), transparent 60%), var(--bg-1); border: 1px solid var(--ln-2); overflow: hidden; }
.cta-mark { width: clamp(88px, 11vw, 150px); }
.cta-mark path { stroke-dasharray: 1 3; stroke-dashoffset: 0; }
.js .cta-box:not(.in) .cta-mark path { stroke-dashoffset: 1.02; }
.cta-mark path { transition: stroke-dashoffset 1s var(--e-io); }
.cta-mark .m-dl { transition-delay: .2s; } .cta-mark .m-dr { transition-delay: .35s; } .cta-mark .m-r { transition-delay: .5s; } .cta-mark .m-ch { transition-delay: .75s; }
.cta-box h2 { font: 700 clamp(1.9rem, 1.2rem + 2.6vw, 3.3rem)/1.04 var(--f-d); letter-spacing: -.038em; }
.cta-box h2 em { color: var(--red); }
.cta-box p { color: var(--tx-2); margin-top: 14px; max-width: 52ch; }
.cta-act { display: grid; gap: 10px; justify-items: stretch; min-width: 230px; }
.cta-tel { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--tx-2); font-size: .92rem; margin-top: 4px; }
.cta-tel:hover { color: var(--tx); }

/* ---------- İç sayfa girişi ---------- */
.phero { position: relative; padding: clamp(40px, 6vw, 96px) 0 clamp(40px, 5vw, 72px); overflow: clip; isolation: isolate; }
.phero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 70% at 85% 0%, rgba(var(--red-rgb), .12), transparent 70%); }
.phero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px 64px; align-items: end; }
.phero .eyebrow { margin: 22px 0 18px; }
.phero .h1 { font-size: clamp(2.3rem, 1.3rem + 3.8vw, 4.4rem); max-width: 16ch; }
.phero .lead { margin-top: 20px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .84rem; color: var(--tx-3); }
.crumbs a { color: var(--tx-2); transition: color .2s; }
.crumbs a:hover { color: var(--tx); }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: "/"; opacity: .5; }
.phero-aside { display: grid; justify-items: end; gap: 10px; }
.phero-n { font: 700 clamp(4rem, 3rem + 5vw, 8rem)/.85 var(--f-d); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--ln-2); }
.phero-aside small { font: 500 .72rem var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); }

/* ---------- Ürün vitrini ---------- */
.shop-bar { position: sticky; top: var(--hdr); z-index: 20; background: rgba(var(--bg-rgb), .95); border-bottom: 1px solid var(--ln); border-top: 1px solid var(--ln); }
.shop-bar .wrap { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; margin: 0 -4px; }
.filters::-webkit-scrollbar { display: none; }
.filters button { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--ln-2); font: 500 .9rem var(--f-b); color: var(--tx-2); transition: color .2s, background-color .2s, border-color .2s; }
.filters button small { font: 500 .72rem var(--f-m); color: var(--tx-3); }
.filters button:hover { color: var(--tx); border-color: rgba(255,255,255,.3); }
.filters button[aria-pressed="true"] { background: var(--tx); color: var(--bg); border-color: var(--tx); }
.filters button[aria-pressed="true"] small { color: rgba(0,0,0,.55); }
.shop-count { margin-left: auto; flex: none; font: 500 .78rem var(--f-m); color: var(--tx-3); }
.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; grid-auto-flow: dense; }
.shop-grid .pc.is-feat { grid-column: span 2; flex-direction: row; }
.shop-grid .pc.is-feat .pc-vis { flex: 1.35; aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: 1px solid var(--ln); }
.shop-grid .pc.is-feat .pc-vis .scene.mini { inset: 50% 0 auto; aspect-ratio: 16 / 10; transform: translateY(-50%); }
.shop-grid .pc.is-feat .pc-b { flex: 1; padding: 26px; }
.shop-grid .pc.is-feat .pc-t { font-size: 1.8rem; }
.shop-empty { text-align: center; color: var(--tx-3); padding: 60px 0; }

/* ---------- Ürün detayı ---------- */
.pd-hero { position: relative; padding: clamp(28px, 4vw, 56px) 0 clamp(40px, 5vw, 72px); overflow: clip; isolation: isolate; }
.pd-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 60% at 78% 30%, rgba(var(--p1-rgb), .14), transparent 72%); }
.pd-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(32px, 5vw, 72px); align-items: center; margin-top: 28px; }
.pd-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.pd-hero h1 { font: 700 clamp(2.3rem, 1.3rem + 3.6vw, 4.4rem)/1 var(--f-d); letter-spacing: -.045em; text-wrap: balance; }
.pd-full { margin-top: 10px; color: var(--tx-3); font-size: .95rem; }
.pd-hero .lead { margin-top: 20px; color: var(--tx); }
.pd-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.pd-guar { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; font-size: .86rem; color: var(--tx-2); }
.pd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--ln); }
.pd-stats div { padding: 22px 20px 0 0; display: grid; gap: 6px; }
.pd-stats b { font: 700 clamp(1.8rem, 1.3rem + 1.5vw, 2.6rem)/1 var(--f-d); letter-spacing: -.035em; color: var(--tx); }
.pd-stats span { font-size: .86rem; color: var(--tx-2); max-width: 26ch; }
.pd-nav { position: sticky; top: var(--hdr); z-index: 20; background: rgba(var(--bg-rgb), .95); border-top: 1px solid var(--ln); border-bottom: 1px solid var(--ln); }
.pd-nav .wrap { display: flex; align-items: center; gap: 18px; min-height: 58px; }
.pd-nav b { flex: none; font: 650 .98rem var(--f-d); display: flex; align-items: center; gap: 10px; }
.pd-nav b i { color: var(--p1); }
.pd-nav nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.pd-nav nav::-webkit-scrollbar { display: none; }
.pd-nav nav a { flex: none; padding: 8px 12px; border-radius: 8px; font-size: .88rem; color: var(--tx-2); transition: color .2s, background-color .2s; }
.pd-nav nav a:hover { color: var(--tx); }
.pd-nav nav a.on { color: var(--tx); background: rgba(255,255,255,.06); }
.pd-nav .btn { flex: none; }
.probs { display: grid; gap: 10px; }
.prob { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); align-items: stretch; }
.prob > div { padding: 20px 22px; border-radius: var(--r); font-size: .98rem; line-height: 1.55; display: flex; gap: 12px; }
.prob .was { background: var(--bg-card, rgba(255,255,255,.02)); border: 1px solid var(--ln); color: var(--tx-2); }
.prob .now { background: rgba(var(--p1-rgb), .08); border: 1px solid rgba(var(--p1-rgb), .3); color: var(--tx); }
.prob .was::before { content: "✕"; color: var(--bad); font-weight: 700; flex: none; }
.prob .now::before { content: "✓"; color: var(--p1); font-weight: 700; flex: none; }
.prob .arr { display: grid; place-items: center; color: var(--tx-3); }
.probs-head { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); font: 500 .72rem var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 4px; }
.probs-head span:last-child { grid-column: 3; }
.advs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 1px; background: var(--ln); border: 1px solid var(--ln); border-radius: var(--r-lg); overflow: hidden; }
.adv { padding: 26px; background: var(--bg-card, var(--bg-1)); display: grid; gap: 10px; align-content: start; }
.adv i { color: var(--p1); font-size: 1.2rem; }
.adv h3 { font: 650 1.12rem/1.25 var(--f-d); }
.adv p { color: var(--tx-2); font-size: .92rem; }
.overview { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); }
.overview .tech-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.feat { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); }
.feat-list { display: grid; }
.feat-i { padding: 26px 0 26px 22px; border-left: 2px solid var(--ln); transition: border-color .4s, opacity .4s; }
.feat-i.on { border-left-color: var(--p1); }
.feat-i h3 { font: 650 1.2rem/1.25 var(--f-d); letter-spacing: -.015em; display: flex; gap: 12px; align-items: center; }
.feat-i h3 i { color: var(--p1); width: 1.2em; text-align: center; }
.feat-i p { color: var(--tx-2); font-size: .95rem; margin-top: 8px; }
.feat-i .feat-m { display: none; margin-top: 16px; }
.feat-stage { position: sticky; top: calc(var(--hdr) + 90px); align-self: start; }
.feat-screens { position: relative; aspect-ratio: 16 / 10.6; }
.feat-sc { position: absolute; inset: 0; opacity: 0; transform: scale(.98); transition: opacity .5s var(--e-out), transform .6s var(--e-out); }
.feat-sc.on { opacity: 1; transform: none; }
.frame { border-radius: var(--r); background: #0C0C0F; border: 1px solid var(--ln-2); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0,0,0,.9); }
.frame-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-bottom: 1px solid var(--ln); }
.frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.14); }
.frame-bar span { margin-left: 10px; font: 500 .7rem var(--f-m); color: var(--tx-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame-scr { position: relative; aspect-ratio: 16 / 10; background: var(--bg); overflow: hidden; }
.frame-scr img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.frame-scr .ph { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 12px; color: var(--tx-3); text-align: center; padding: 20px; }
.frame-scr .ph i { font-size: 2.4rem; color: var(--p1); }
.mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.mod { padding: 22px; border-radius: var(--r-lg); background: var(--bg-card, var(--bg-1)); border: 1px solid var(--ln); display: grid; gap: 10px; align-content: start; transition: border-color .3s; }
.mod:hover { border-color: rgba(var(--p1-rgb), .45); }
.mod .ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; color: var(--p1); background: rgba(var(--p1-rgb), .12); }
.mod h3 { font: 650 1.08rem/1.25 var(--f-d); }
.mod p { color: var(--tx-2); font-size: .9rem; }
.dtl { columns: 3 300px; column-gap: 20px; }
.dtl-g { break-inside: avoid; margin-bottom: 20px; padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--ln); background: var(--bg-card, var(--bg-1)); }
.dtl-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dtl-h i { color: var(--p1); }
.dtl-h h3 { font: 650 1.05rem var(--f-d); flex: 1; }
.dtl-h span { font: 500 .72rem var(--f-m); color: var(--tx-3); }
.dtl ul { display: grid; gap: 8px; font-size: .9rem; color: var(--tx-2); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; counter-reset: st; }
.step { counter-increment: st; padding: 24px; border-radius: var(--r-lg); border: 1px solid var(--ln); position: relative; }
.step::before { content: counter(st, decimal-leading-zero); font: 500 .76rem var(--f-m); color: var(--p1); letter-spacing: .1em; }
.step h3 { font: 650 1.1rem/1.25 var(--f-d); margin: 12px 0 8px; }
.step p { color: var(--tx-2); font-size: .9rem; }
.aud { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.aud-i { display: flex; gap: 14px; padding: 18px; border-radius: var(--r); border: 1px solid var(--ln); background: var(--bg-card, var(--bg-1)); }
.aud-i i { color: var(--p1); margin-top: 3px; }
.aud-i b { display: block; font-weight: 600; }
.aud-i span { display: block; color: var(--tx-2); font-size: .88rem; margin-top: 2px; }
.gal { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 46%); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--ln-2) transparent; }
.gal a { scroll-snap-align: start; border-radius: var(--r); overflow: hidden; border: 1px solid var(--ln); aspect-ratio: 16 / 10; background: var(--bg-2); display: block; }
.gal a.m { aspect-ratio: 9 / 16; grid-column: auto; }
.gal img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--e-out); }
.gal a:hover img { transform: scale(1.03); }
.video { aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--ln); margin-bottom: 20px; background: #000; }
.video iframe { width: 100%; height: 100%; border: 0; }
.lb { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lb::backdrop { background: rgba(5,5,7,.92); }
.lb-in { width: 100%; height: 100%; display: grid; place-items: center; padding: 60px 70px; }
.lb img { max-width: 100%; max-height: 100%; border-radius: var(--r); object-fit: contain; }
.lb button { position: fixed; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; }
.lb button:hover { background: rgba(255,255,255,.16); }
.lb .x { right: 18px; top: 18px; } .lb .p { left: 18px; top: 50%; margin-top: -24px; } .lb .n { right: 18px; top: 50%; margin-top: -24px; }
.others { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.stickybar { position: fixed; left: 50%; bottom: 18px; z-index: 40; transform: translate(-50%, 140%); display: flex; align-items: center; gap: 16px; padding: 8px 8px 8px 18px; border-radius: 14px; background: rgba(24,24,28,.97); border: 1px solid var(--ln-2); box-shadow: 0 20px 50px -20px rgba(0,0,0,.9); transition: transform .45s var(--e-out); max-width: calc(100% - 32px); }
.stickybar.on { transform: translate(-50%, 0); }
.stickybar b { font: 650 .95rem var(--f-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Hizmetler sayfası ---------- */
.sgroup + .sgroup { margin-top: clamp(64px, 8vw, 110px); }
.sgroup-h { display: flex; align-items: baseline; gap: 16px; padding-bottom: 18px; margin-bottom: 36px; border-bottom: 1px solid var(--ln-2); }
.sgroup-h h2 { font: 700 clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem)/1.1 var(--f-d); letter-spacing: -.03em; }
.sgroup-h span { font: 500 .76rem var(--f-m); color: var(--tx-3); }
.srows { display: grid; gap: clamp(40px, 5vw, 64px); }
.srow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.srow:nth-child(even) .srow-v { order: 2; }
.srow-v { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--ln); aspect-ratio: 16 / 10; position: relative; background: var(--bg-1); }
.srow h3 { font: 700 clamp(1.6rem, 1.15rem + 1.5vw, 2.4rem)/1.08 var(--f-d); letter-spacing: -.035em; display: flex; align-items: center; gap: 14px; }
.srow h3 i { font-size: .7em; color: var(--red); }
.srow .tag { margin-top: 12px; font-size: 1.08rem; color: var(--tx); }
.srow p { margin-top: 12px; color: var(--tx-2); }
.srow ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 20px 0 26px; font-size: .92rem; color: var(--tx-2); }
.srow-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.sd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.sd-scene { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--ln-2); aspect-ratio: 16 / 10; position: relative; background: var(--bg-1); }
.sd-cover { border-radius: var(--r-lg); overflow: hidden; margin-bottom: 36px; border: 1px solid var(--ln); }
.sd-cover img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.sd-hl { margin-top: 40px; padding: 26px; border-radius: var(--r-lg); border: 1px solid var(--ln); background: var(--bg-card, var(--bg-1)); }
.sd-hl h2 { font: 650 1.2rem var(--f-d); margin-bottom: 16px; }
.sd-hl ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; color: var(--tx-2); font-size: .95rem; }
.aside { position: sticky; top: calc(var(--hdr) + 24px); display: grid; gap: 16px; }
.aside-box { padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--ln); background: var(--bg-card, var(--bg-1)); }
.aside-box h2 { font: 500 .72rem var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 12px; }
.aside-nav { display: grid; gap: 2px; }
.aside-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; font-size: .92rem; color: var(--tx-2); transition: background-color .2s, color .2s; }
.aside-nav a i { width: 1.1em; text-align: center; color: var(--tx-3); }
.aside-nav a:hover { background: rgba(127,127,127,.08); color: var(--tx); }
.aside-nav a[aria-current="page"] { background: var(--red); color: #fff; }
.aside-nav a[aria-current="page"] i { color: #fff; }
.aside-cta { background: radial-gradient(90% 90% at 0 0, rgba(var(--red-rgb), .35), transparent 70%), var(--bg-2); border-color: var(--ln-2); color: var(--tx); }
.paper .aside-cta { background: radial-gradient(90% 90% at 0 0, rgba(var(--red-rgb), .5), transparent 70%), #16161A; color: #F3F3F4; --tx: #F3F3F4; --tx-2: #A9A9B1; }
.aside-cta b { display: block; font: 650 1.15rem var(--f-d); }
.aside-cta p { color: var(--tx-2); font-size: .9rem; margin: 8px 0 16px; }

/* ---------- Hakkımızda ---------- */
.ab-vis { width: min(100%, 340px); aspect-ratio: 1; border-radius: var(--r-lg); border: 1px solid var(--ln); background: radial-gradient(60% 60% at 50% 50%, rgba(var(--red-rgb), .14), transparent 70%), var(--bg-1); display: grid; place-items: center; position: relative; overflow: hidden; }
.ab-vis::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.3px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 70%); mask-image: radial-gradient(circle, #000 20%, transparent 70%); }
.ab-vis .mark { width: 52%; position: relative; }
.ab-photo { width: min(100%, 420px); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--ln); }
.story { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); }
.story-badge { display: inline-grid; gap: 4px; margin-top: 30px; padding: 20px 24px; border-radius: var(--r-lg); background: var(--red); color: #fff; }
.story-badge b { font: 700 2.6rem/1 var(--f-d); letter-spacing: -.04em; }
.story-badge span { font-size: .9rem; opacity: .9; }
.vm { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vm-c { padding: clamp(28px, 4vw, 44px); border-radius: var(--r-lg); border: 1px solid var(--ln); background: var(--bg-1); position: relative; overflow: hidden; }
.vm-c small { font: 500 .72rem var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--red-tx); }
.vm-c h2 { font: 700 1.8rem/1.1 var(--f-d); letter-spacing: -.03em; margin: 12px 0 14px; }
.vm-c p { color: var(--tx-2); font-size: 1.02rem; }
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1px; background: var(--ln); border: 1px solid var(--ln); border-radius: var(--r-lg); overflow: hidden; }
.val { padding: 28px; background: var(--bg-card, var(--bg-1)); display: grid; gap: 10px; align-content: start; }
.val .n { font: 500 .74rem var(--f-m); color: var(--red-tx); }
.val i { font-size: 1.2rem; color: var(--tx-3); }
.val h3 { font: 650 1.18rem var(--f-d); }
.val p { color: var(--tx-2); font-size: .92rem; }
.tline { position: relative; display: grid; gap: 0; max-width: 820px; }
.tline::before { content: ""; position: absolute; left: 110px; top: 8px; bottom: 8px; width: 1px; background: var(--ln-2); }
.tl-i { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 0 36px; padding: 18px 0; position: relative; }
.tl-i::before { content: ""; position: absolute; left: 105px; top: 28px; width: 11px; height: 11px; border-radius: 3px; background: var(--red); }
.tl-i .y { font: 700 1.5rem/1.2 var(--f-d); color: var(--tx); }
.tl-i h3 { font: 650 1.12rem var(--f-d); }
.tl-i p { color: var(--tx-2); font-size: .94rem; margin-top: 4px; }
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 20px; }
.tm .ph { aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-2); display: grid; place-items: center; font: 700 2.4rem var(--f-d); color: var(--tx-3); border: 1px solid var(--ln); }
.tm .ph img { width: 100%; height: 100%; object-fit: cover; }
.tm h3 { font: 650 1.1rem var(--f-d); margin-top: 14px; }
.tm span { color: var(--tx-2); font-size: .9rem; }

/* ---------- İletişim ---------- */
.ct { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.ct-ways { display: grid; gap: 10px; }
.ct-way { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--ln); background: var(--bg-1); transition: border-color .25s; }
a.ct-way:hover { border-color: rgba(var(--red-rgb), .5); }
.ct-way .ic { width: 46px; height: 46px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--red-rgb), .12); color: var(--red-tx); }
.ct-way .ic.wa { background: rgba(29,168,81,.15); color: #3fd67a; }
.ct-way small { display: block; font-size: .78rem; color: var(--tx-3); }
.ct-way b { display: block; font-weight: 600; word-break: break-word; }
.ct-way > .i:last-child { margin-left: auto; color: var(--tx-3); }
.form-card { padding: clamp(24px, 4vw, 40px); border-radius: var(--r-lg); border: 1px solid var(--ln-2); background: var(--bg-1); }
.form-card h2 { font: 700 1.7rem/1.15 var(--f-d); letter-spacing: -.03em; }
.form-card > p { color: var(--tx-2); margin: 8px 0 24px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fld { display: grid; gap: 7px; }
.fld.full, .fset { grid-column: 1 / -1; }
.fld label, .fset legend { font-size: .86rem; font-weight: 500; color: var(--tx-2); }
.fld input, .fld textarea { width: 100%; height: 50px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--ln-2); background: var(--bg); color: var(--tx); font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.fld textarea { height: 130px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(var(--red-rgb), .2); }
.fset { border: 0; padding: 0; margin: 4px 0 0; }
.fset legend { margin-bottom: 10px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt span { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ln-2); font-size: .88rem; color: var(--tx-2); cursor: pointer; transition: all .2s; }
.opt span:hover { border-color: rgba(255,255,255,.3); color: var(--tx); }
.opt input:checked + span { background: var(--red); border-color: var(--red); color: #fff; }
.opt input:focus-visible + span { outline: 2px solid var(--red-tx); outline-offset: 2px; }
.f-msg { margin-top: 14px; font-size: .92rem; display: flex; gap: 8px; align-items: center; }
.f-msg.ok { color: var(--ok); } .f-msg.err { color: var(--bad); }
.f-note { margin-top: 12px; font-size: .8rem; color: var(--tx-3); }
.map { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--ln); }
.map iframe { display: block; width: 100%; height: 420px; border: 0; filter: grayscale(.6) invert(.9) hue-rotate(180deg); }

/* ---------- Blog ---------- */
.blog-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.blog-cats a { height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ln-2); font-size: .88rem; color: var(--tx-2); }
.blog-cats a[aria-current="page"] { background: var(--tx); color: var(--bg); border-color: var(--tx); }
.article { max-width: 760px; margin: 0 auto; }
.article-cover { border-radius: var(--r-lg); overflow: hidden; margin: 36px 0; border: 1px solid var(--ln); }
.article .rich { font-size: 1.1rem; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 20px; font-size: .88rem; color: var(--tx-3); }

/* ---------- Hata ---------- */
.err { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 60px 0; }
.err .mark { width: 110px; margin: 0 auto 28px; }
.err-code { font: 500 .8rem var(--f-m); letter-spacing: .2em; color: var(--red-tx); }
.err h1 { margin: 16px 0 12px; }
.err .lead { margin: 0 auto; }
.err .hero-cta { justify-content: center; }
.empty { text-align: center; color: var(--tx-3); padding: 40px 0; }


/* ---------- Ek bileşenler ---------- */
html:not([data-motion="0"]) { scroll-behavior: smooth; }
.show-v { display: block; }
.shop-facts { display: flex; flex-wrap: wrap; gap: 14px 32px; justify-content: flex-end; }
.shop-facts div { display: grid; gap: 4px; text-align: right; }
.shop-facts b { font: 700 clamp(1.5rem, 1.1rem + 1.3vw, 2.2rem)/1 var(--f-d); letter-spacing: -.03em; }
.shop-facts span { font: 500 .7rem var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
.sjump { display: grid; gap: 6px; min-width: min(100%, 300px); }
.sjump a { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--ln); background: var(--bg-1); font-weight: 600; transition: border-color .2s; }
.sjump a:hover { border-color: rgba(var(--red-rgb), .5); }
.sjump small { font: 500 .75rem var(--f-m); color: var(--tx-3); }
.pd-live { margin-top: 16px; }
.pd-phone { width: 190px; margin-top: 32px; padding: 7px; border-radius: 28px; background: #050506; border: 1px solid var(--ln-2); box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); }
.pd-phone img { border-radius: 22px; aspect-ratio: 9 / 19; object-fit: cover; object-position: top; width: 100%; }
.frame-scr .ph b { color: var(--tx); font: 650 1.2rem var(--f-d); }
.frame-scr .ph span { font-size: .9rem; max-width: 40ch; }
.stickybar { visibility: hidden; transition: transform .45s var(--e-out), visibility 0s linear .45s; }
.stickybar.on { visibility: visible; transition: transform .45s var(--e-out), visibility 0s; }
.ab-vis .mark path { stroke-dasharray: 1 3; }
.js .ab-vis .mark path { animation: drawIn 1.2s var(--e-io) both .3s; }
.js .ab-vis .mark .m-dl { animation-delay: .5s; } .js .ab-vis .mark .m-dr { animation-delay: .7s; } .js .ab-vis .mark .m-r { animation-delay: .85s; } .js .ab-vis .mark .m-ch { animation-delay: 1.1s; }
@keyframes drawIn { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
.faq-list { min-width: 0; }
.feat-scene { position: relative; padding-top: 34px; }
.feat-badges { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: min(92%, 440px); height: 64px; z-index: 3; }
.feat-badge { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px; background: rgba(22,22,26,.98); border: 1px solid rgba(var(--p1-rgb), .45); box-shadow: 0 20px 40px -20px rgba(0,0,0,.9); }
.feat-badge > i { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--p1-rgb), .14); color: var(--p1); }
.feat-badge small { display: block; font: 500 .68rem var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-3); }
.feat-badge b { display: block; font: 650 1rem/1.25 var(--f-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Ekran dışındaki bölümlerin yerleşim/çizim işi tarayıcıya bırakılır (ilk açılış ve kaydırma hafifler) */
.sec:not(.sig), .show, .more-rail, .ft { content-visibility: auto; contain-intrinsic-block-size: auto 900px; }
.show { contain-intrinsic-block-size: auto 720px; }

/* ---------- Hareket seviyeleri ---------- */
[data-motion="0"] *, [data-motion="0"] *::before, [data-motion="0"] *::after { animation: none !important; transition: none !important; }
[data-motion="0"] [data-rv], [data-motion="0"] [data-in] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
[data-motion="1"] [data-rv] { transition-duration: .45s; }
[data-motion="1"] [data-rv]:not([data-rv="fade"]) { transform: translate3d(0, 8px, 0); }
[data-motion="1"] [data-rv].in { transform: none; }
[data-motion="1"] [data-in] { animation-duration: .45s; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    [data-rv], [data-in] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* Yüksek seviye: kaydırmaya bağlı hafif derinlik (yalnızca destekleyen tarayıcılarda, JS yok) */
@supports (animation-timeline: view()) {
    [data-motion="3"] .show-v .scene, [data-motion="3"] .srow-v { animation: depth linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
    @keyframes depth { from { transform: translate3d(0, 40px, 0) scale(.97); } to { transform: none; } }
}

/* ---------- Sayfa geçişleri (View Transitions) ---------- */
::view-transition-old(root) { animation: vtOut .18s ease-in both; }
::view-transition-new(root) { animation: vtIn .34s var(--e-out) both; }
::view-transition-group(hdr) { animation: none; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translate3d(0, 10px, 0); } }

/* ---------- Duyarlı yerleşim ---------- */
@media (max-width: 1180px) {
    .hdr-tel span { display: none; }
    .mega-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ft-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ft-about { grid-column: 1 / -1; }
    .shop-grid, .others, .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
    :root { --hdr: 62px; }
    .nav, .hdr-tel { display: none; }
    .burger { display: grid; }
    .hdr-in { justify-content: space-between; }
    .hdr-act { margin-left: auto; }
    .hero-in, .phero-grid, .pd-grid, .sig-grid, .show, .show:nth-child(even), .why, .faq, .story, .overview, .feat, .ct, .sd-grid, .srow, .cta-box, .svc-g { grid-template-columns: minmax(0, 1fr); }
    .show:nth-child(even) .show-t, .srow:nth-child(even) .srow-v { order: 0; }
    .show-v { order: -1; }
    .srow-v { order: -1; }
    .wall { justify-self: center; max-width: 560px; }
    .sec-head { grid-template-columns: minmax(0, 1fr); }
    .sec-head > :last-child:not(:first-child) { justify-self: start; }
    .why-side, .svc-gh, .aside, .feat-stage { position: static; }
    .phero-aside { justify-items: start; }
    .phero-n { display: none; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat:nth-child(3) { border-left: 0; padding-left: 0; }
    .stat:nth-child(n+3) { border-top: 1px solid var(--ln); }
    .proc { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .proc-line { left: 27px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; }
    .proc-line i { transform-origin: top; }
    .js .proc:not(.in) .proc-line i { transform: scaleY(0); }
    .proc-s { grid-template-columns: 56px minmax(0, 1fr); gap: 4px 18px; padding-bottom: 28px; }
    .proc-dot { grid-row: span 3; }
    .proc-s small { margin-top: 0; }
    .feat-stage { display: none; }
    .feat-i { border-left: 0; padding-left: 0; border-top: 1px solid var(--ln); }
    .feat-i .feat-m { display: block; }
    .cta-box { text-align: left; }
    .cta-act { min-width: 0; grid-template-columns: 1fr 1fr; }
    .cta-tel { grid-column: 1 / -1; justify-content: flex-start; }
    .ft-top { grid-template-columns: minmax(0, 1fr); }
    /* İmza: sahne üstte yapışkan, adımlar altında akar */
    .sig-grid { gap: 0; }
    .sig-stage-wrap { order: -1; position: sticky; top: var(--hdr); z-index: 2; background: var(--bg); padding: 10px 0 14px; margin: 0 calc(var(--gut) * -1); padding-inline: var(--gut); }
    .sig-stage-wrap::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px; background: linear-gradient(var(--bg), transparent); pointer-events: none; }
    .sig-stage { position: static; height: auto; }
    .stage { width: min(100%, 44vh, 420px); margin: 0 auto; }
    .sig-steps { padding-left: 24px; }
    .sig-step, .sig-step:first-child, .sig-step:last-child { min-height: 50vh; padding-top: 3vh; justify-content: flex-start; }
    .sig-step:last-child { min-height: 62vh; }
    .sig-step::before, .sig-step:first-child::before { left: -29px; top: calc(3vh + .35em); margin-top: 0; }
    .sd-hl ul, .srow ul { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    body { font-size: .98rem; }
    .qbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(var(--bg-rgb), .97); border-top: 1px solid var(--ln); }
    .qbar a { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 44px; border-radius: 10px; font-weight: 600; font-size: .88rem; border: 1px solid var(--ln-2); }
    .qbar .qbar-wa { background: #1DA851; border-color: #1DA851; color: #fff; }
    .qbar .qbar-p { background: var(--red); border-color: var(--red); color: #fff; }
    body:has(.qbar) { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
    body:has(.qbar) .stickybar { bottom: calc(72px + env(safe-area-inset-bottom)); }
    .hdr-cta { display: none; }
    .logo img { height: 30px; }
    .hero-cta .btn, .show-cta .btn, .pd-cta .btn { flex: 1 1 auto; }
    .hp-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); }
    .hp-list::-webkit-scrollbar { display: none; }
    .hp { flex: none; }
    .wall { aspect-ratio: 1 / 1.02; }
    .w-dash { width: 86%; top: 0; }
    .w-map { width: 44%; bottom: 14%; }
    .w-phone { display: none; }
    .w-toasts { width: 68%; left: 0; bottom: 2%; }
    .shop-grid, .others, .posts, .vm { grid-template-columns: minmax(0, 1fr); }
    .shop-grid .pc.is-feat { grid-column: auto; flex-direction: column; }
    .shop-grid .pc.is-feat .pc-vis { flex: none; aspect-ratio: 16 / 10; min-height: 0; border-right: 0; border-bottom: 1px solid var(--ln); }
    .shop-grid .pc.is-feat .pc-vis .scene.mini { inset: 0; transform: none; }
    .shop-count { display: none; }
    .show-feats { grid-template-columns: minmax(0, 1fr); }
    .fgrid { grid-template-columns: minmax(0, 1fr); }
    .prob { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .prob .arr { transform: rotate(90deg); height: 24px; }
    .probs-head { display: none; }
    .ft-grid { grid-template-columns: 1fr 1fr; }
    .ft-contact { grid-column: 1 / -1; }
    .pd-nav .btn { display: none; }
    .stickybar { width: calc(100% - 24px); justify-content: space-between; }
    .qa-a { padding-right: 0; }
    .tline::before { left: 70px; }
    .tl-i { grid-template-columns: 70px minmax(0, 1fr); gap: 0 26px; }
    .tl-i::before { left: 65px; }
    .tl-i .y { font-size: 1.15rem; }
    .gal { grid-auto-columns: 84%; }
    .lb-in { padding: 60px 12px; }
    .cta-act { grid-template-columns: minmax(0, 1fr); }
    .stat { padding-left: 0; padding-right: 12px; }
}
@media (hover: none) {
    .btn:hover .i:last-child, .link-arrow:hover .i { transform: none; }
}