/*
 * CBA Theme — ana sayfa scroll hikâyesi
 * Kural: buradaki her kural JS'SİZ son, okunur durumu tanımlar. Hareket (assets/js/home.js)
 * yalnızca başlangıç durumlarını JS ile uygular; JS yoksa, reduced motion açıksa ya da
 * motion_intensity=off ise sayfa olduğu gibi eksiksiz okunur.
 */

.cba-home { background: var(--cba-night); }
.cba-story { position: relative; overflow-x: clip; }
.cba-anchor { position: absolute; inset-block-end: 0; }
/* ── 0 · Intro ──────────────────────────────────────────────────────── */
.cba-intro { display: none; }
html.cba-intro-play .cba-intro {
    position: fixed; inset: 0; z-index: 2600; display: grid; place-content: center; justify-items: center; gap: 1.5rem;
    background: var(--cba-night); color: var(--cba-paper);
    animation: cba-intro-out 340ms var(--cba-ease-in-out) 860ms forwards;
}
.cba-intro-word { display: flex; overflow: hidden; font-family: var(--cba-font-display); font-weight: 800; font-size: var(--cba-step-6); letter-spacing: -.05em; line-height: 1; }
.cba-intro-word span { display: inline-block; transform: translateY(110%); animation: cba-intro-letter 520ms var(--cba-ease-expo) calc(var(--i) * 42ms) forwards; white-space: pre; }
.cba-intro-bar { inline-size: min(14rem, 50vw); block-size: 2px; background: var(--cba-brand); transform: scaleX(0); transform-origin: left; animation: cba-intro-bar 760ms var(--cba-ease-in-out) 80ms forwards; }
@keyframes cba-intro-letter { to { transform: none; } }
@keyframes cba-intro-bar { to { transform: scaleX(1); } }
@keyframes cba-intro-out { to { transform: translateY(-100%); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { html.cba-intro-play .cba-intro { display: none; } }
html[data-motion=off] .cba-intro { display: none !important; }

/* ── 1 · Hero ───────────────────────────────────────────────────────── */
.cba-hero {
    --mx: .72; --my: .38;
    position: relative; isolation: isolate; display: flex; align-items: flex-end;
    min-block-size: 100svh; padding-block: calc(var(--cba-header-h) + 3rem) clamp(5rem, 4rem + 4vw, 8rem);
    background: var(--cba-night); overflow: hidden;
}
.cba-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cba-hero-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; transition: transform 1.2s var(--cba-ease-out); }
.cba-hero-blob-a {
    inline-size: 46vmax; block-size: 46vmax; background: radial-gradient(circle, rgba(var(--cba-brand-rgb), .75), transparent 62%);
    inset-inline-start: calc(var(--mx) * 100% - 23vmax); inset-block-start: calc(var(--my) * 100% - 23vmax);
}
.cba-hero-blob-b {
    inline-size: 38vmax; block-size: 38vmax; background: radial-gradient(circle, color-mix(in srgb, var(--cba-paper) 22%, transparent), transparent 60%);
    inset-inline-start: calc((1 - var(--mx)) * 70% - 10vmax); inset-block-start: calc((1 - var(--my)) * 80% - 12vmax); opacity: .25;
}
@media (max-width: 767.98px), (prefers-reduced-motion: reduce) {
    /* mobil: ağır efektler sadeleşir — bulanıklık küçülür, gren kapanır, imleç takibi yok */
    .cba-hero-blob { filter: blur(40px); transition: none; }
    .cba-hero-blob-b, .cba-hero-grain { display: none; }
}
.cba-hero-gl { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; transition: opacity 1.2s ease; }
.cba-hero-gl.is-ready { opacity: 1; }
.cba-hero-gl.is-ready ~ .cba-hero-grain { opacity: .05; }
.cba-hero-grain {
    position: absolute; inset: 0; opacity: .08; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cba-hero-inner { position: relative; }
.cba-hero-kicker { font-family: var(--cba-font-display); font-size: var(--cba-step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--cba-paper-dim); margin-block-end: 1.5rem; }
.cba-hero-title { font-size: var(--cba-step-7); max-inline-size: 13ch; margin: 0 0 clamp(2rem, 1rem + 4vw, 4rem); color: var(--cba-paper); }
.cba-hero-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem 3rem; }
.cba-hero-lead { margin: 0; }
.cba-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.cba-hero-scroll {
    /* writing-mode dikey olduğu için mantıksal değil fiziksel konum (mantıksal kenarlar dikey eksene döner) */
    position: absolute; right: var(--cba-gutter); bottom: 2rem; display: inline-flex; align-items: center; gap: .75rem;
    color: var(--cba-paper-dim); text-decoration: none; font-size: var(--cba-step--1); writing-mode: vertical-rl; min-inline-size: 2.75rem;
}
.cba-hero-scroll:hover { color: var(--cba-paper); }
.cba-hero-scroll-line { position: relative; inline-size: 1px; block-size: 4.5rem; background: var(--cba-line); overflow: hidden; }
.cba-hero-scroll-line::after { content: ""; position: absolute; inset: 0; background: var(--cba-brand); transform: translateY(-100%); animation: cba-scroll-line 2.2s var(--cba-ease-in-out) infinite; }
@keyframes cba-scroll-line { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(100%); } }
[dir=rtl] .cba-hero-scroll { right: auto; left: var(--cba-gutter); }
@media (max-width: 767.98px) { .cba-hero-scroll { display: none; } }

/* ── 2 · Bir isim ───────────────────────────────────────────────────── */
.cba-name-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 2rem + 4vw, 6rem); align-items: center; }
@media (max-width: 991.98px) { .cba-name-grid { grid-template-columns: 1fr; } }
.cba-name-preview {
    display: flex; flex-wrap: wrap; align-items: baseline; margin: 0 0 2rem; min-block-size: 1.1em;
    font-family: var(--cba-font-display); font-weight: 800; font-size: var(--cba-step-4); letter-spacing: -.04em; line-height: 1.05;
    word-break: break-all;
}
.cba-name-www { color: var(--cba-paper-dim); }
.cba-name-tld { color: var(--cba-paper); }
.cba-name-caret { inline-size: .06em; min-inline-size: 3px; block-size: .9em; margin-inline-start: .06em; background: var(--cba-brand); align-self: center; animation: cba-caret 1s steps(2) infinite; }
@keyframes cba-caret { 50% { opacity: 0; } }
.cba-name-label { display: block; margin-block-end: .6rem; color: var(--cba-paper-dim); font-size: var(--cba-step--1); }
.cba-name-field { display: flex; gap: .5rem; padding: .4rem; border: 1px solid var(--cba-line); border-radius: var(--cba-radius-pill); background: var(--cba-night-2); transition: border-color var(--cba-dur-1) ease; }
.cba-name-field:focus-within { border-color: var(--cba-brand); }
.cba-name-field .form-control { border: 0; background: transparent; color: var(--cba-paper); padding-inline: 1.1rem; font-size: var(--cba-step-1); box-shadow: none; min-inline-size: 0; }
.cba-name-field .form-control::placeholder { color: color-mix(in srgb, var(--cba-paper) 40%, transparent); }
.cba-name-field .form-control:focus { box-shadow: none; }
.cba-name-tlds-label { margin: 2rem 0 .75rem; color: var(--cba-paper-dim); font-size: var(--cba-step--1); text-transform: uppercase; letter-spacing: .12em; }
.cba-tld-list { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; }
.cba-tld { display: inline-flex; align-items: baseline; gap: .6rem; min-block-size: 2.75rem; padding: .55rem 1rem; border: 1px solid var(--cba-line); border-radius: var(--cba-radius-pill); background: transparent; color: var(--cba-paper); cursor: pointer; transition: background-color var(--cba-dur-1) ease, border-color var(--cba-dur-1) ease; }
.cba-tld:hover, .cba-tld:focus-visible, .cba-tld.is-active { border-color: var(--cba-brand); background: var(--cba-brand-soft); }
.cba-tld-name { font-family: var(--cba-font-display); font-weight: 600; }
.cba-tld-price { color: var(--cba-paper-dim); font-size: var(--cba-step--1); }
.cba-tld-was { color: color-mix(in srgb, var(--cba-paper) 40%, transparent); font-size: var(--cba-step--1); }

/* ── 3 · Bir ev: sunucu rafı ────────────────────────────────────────── */
.cba-homes { padding-block: 0; }
.cba-homes-pin { display: flex; align-items: center; min-block-size: 100svh; padding-block: var(--cba-section); }
.cba-homes-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 2rem + 4vw, 6rem); align-items: center; }
@media (max-width: 991.98px) { .cba-homes-grid { grid-template-columns: 1fr; } }
.cba-homes-layers { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: layer; }
.cba-homes-layer { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; padding-block: 1rem; border-block-start: 1px solid var(--cba-line); transition: opacity var(--cba-dur-2) ease; }
.cba-homes-layer::before { counter-increment: layer; content: "0" counter(layer); grid-row: span 2; font-family: var(--cba-font-display); color: var(--cba-brand); font-variant-numeric: tabular-nums; }
.cba-homes-layer-name { font-family: var(--cba-font-display); font-size: var(--cba-step-2); color: var(--cba-paper); line-height: 1.1; }
.cba-homes-layer-desc { color: var(--cba-paper-dim); }
.cba-homes.is-staged .cba-homes-layer { opacity: .35; }
.cba-homes.is-staged .cba-homes-layer.is-on { opacity: 1; }

.cba-rack { position: relative; perspective: 1200px; }
.cba-rack-frame {
    position: relative; display: grid; gap: .55rem; padding: 1.1rem; border-radius: var(--cba-radius-lg);
    background: linear-gradient(180deg, var(--cba-night-3), var(--cba-night-2)); border: 1px solid var(--cba-line);
    box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8), inset 0 1px 0 color-mix(in srgb, var(--cba-paper) 8%, transparent);
    transform: rotateY(-12deg) rotateX(4deg); transform-style: preserve-3d;
}
.cba-rack-unit {
    --on: 1;
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
    block-size: clamp(2.6rem, 2rem + 1.6vw, 3.4rem); padding-inline: 1rem; border-radius: var(--cba-radius-sm);
    background: color-mix(in srgb, var(--cba-night) 70%, var(--cba-night-3)); border: 1px solid var(--cba-line);
    transition: border-color var(--cba-dur-2) ease, box-shadow var(--cba-dur-2) ease;
}
.cba-rack-unit.is-on, .cba-rack:not(.is-staged) .cba-rack-unit { border-color: color-mix(in srgb, var(--cba-brand) 45%, var(--cba-line)); box-shadow: 0 0 24px -8px rgba(var(--cba-brand-rgb), .45); }
.cba-rack-leds { display: inline-flex; gap: .35rem; }
.cba-rack-leds i { inline-size: .45rem; block-size: .45rem; border-radius: 50%; background: color-mix(in srgb, var(--cba-paper) 15%, transparent); transition: background-color var(--cba-dur-2) ease, box-shadow var(--cba-dur-2) ease; }
.cba-rack-unit.is-on .cba-rack-leds i, .cba-rack:not(.is-staged) .cba-rack-leds i { background: var(--cba-brand); box-shadow: 0 0 10px rgba(var(--cba-brand-rgb), .9); }
.cba-rack-unit.is-on .cba-rack-leds i:nth-child(2), .cba-rack:not(.is-staged) .cba-rack-leds i:nth-child(2) { animation: cba-blink 1.4s steps(2) infinite; }
@keyframes cba-blink { 50% { opacity: .35; } }
.cba-rack-vent { block-size: 40%; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--cba-paper) 10%, transparent) 0 2px, transparent 2px 7px); border-radius: 2px; }
.cba-rack-label { font-family: var(--cba-font-display); font-size: var(--cba-step--1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 10rem; }
.cba-rack-glow { position: absolute; inset: 10% 5%; z-index: -1; background: radial-gradient(closest-side, rgba(var(--cba-brand-rgb), .28), transparent); filter: blur(40px); }

.cba-homes-packages { padding-block-end: var(--cba-section); }
.cba-homes-packages-title { font-size: var(--cba-step-2); margin-block-end: 1.5rem; }
.cba-group-grid { list-style: none; padding: 0; margin: 0 0 3rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.cba-group-card {
    position: relative; display: grid; gap: .4rem; block-size: 100%; padding: 1.5rem; border-radius: var(--cba-radius-lg);
    background: var(--cba-night-2); border: 1px solid var(--cba-line); color: var(--cba-paper); text-decoration: none;
    transition: transform var(--cba-dur-2) var(--cba-ease-expo), border-color var(--cba-dur-1) ease;
}
.cba-group-card:hover, .cba-group-card:focus-visible { transform: translateY(-4px); border-color: var(--cba-brand); color: var(--cba-paper); }
.cba-group-icon { font-size: 1.5rem; color: var(--cba-brand); }
.cba-group-title { font-family: var(--cba-font-display); font-size: var(--cba-step-1); }
.cba-group-sub { color: var(--cba-paper-dim); font-size: var(--cba-step--1); }
.cba-group-price { display: grid; margin-block-start: .75rem; font-family: var(--cba-font-display); font-size: var(--cba-step-1); }
.cba-group-from { font-family: var(--cba-font-body); font-size: var(--cba-step--1); color: var(--cba-paper-dim); }
.cba-group-arrow { position: absolute; inset-block-start: 1.5rem; inset-inline-end: 1.5rem; color: var(--cba-paper-dim); }
.cba-homes-rack .billing-toggle { margin: 0 auto 1.5rem; }

/* ── 4 · Bir yüz: kırtasiye masası ──────────────────────────────────── */
.cba-face-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 2rem + 4vw, 6rem); align-items: center; }
@media (max-width: 991.98px) { .cba-face-grid { grid-template-columns: 1fr; } }
.cba-desk { perspective: 1400px; }
.cba-desk-surface { position: relative; aspect-ratio: 5 / 4; transform-style: preserve-3d; }
.cba-paper {
    position: absolute; display: block; border-radius: 6px; background: #f7f4ee; color: var(--cba-ink);
    box-shadow: 0 30px 50px -25px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .25);
    will-change: transform;
}
.cba-paper-tag {
    position: absolute; inset-block-end: -2rem; inset-inline-start: 0; font-family: var(--cba-font-display); font-size: var(--cba-step--1);
    color: var(--cba-paper-dim); white-space: nowrap;
}
.cba-paper .cba-brandname { color: inherit; }
.cba-paper-logo { position: absolute; font-family: var(--cba-font-display); font-weight: 700; letter-spacing: -.03em; }
.cba-paper-letter { inset-inline-start: 2%; inset-block-start: 4%; inline-size: 44%; aspect-ratio: 210 / 297; transform: rotate(-4deg); }
.cba-paper-letter .cba-paper-logo { inset-block-start: 8%; inset-inline-start: 10%; font-size: clamp(.7rem, .5rem + .5vw, 1rem); }
.cba-paper-letter .cba-paper-logo::before { content: ""; display: inline-block; inline-size: .8em; block-size: .8em; margin-inline-end: .35em; border-radius: 50%; background: var(--cba-brand); vertical-align: -.05em; }
.cba-paper-lines { position: absolute; inset: 24% 10% auto; display: grid; gap: .55rem; }
.cba-paper-lines i { block-size: 4px; border-radius: 2px; background: color-mix(in srgb, var(--cba-ink) 14%, transparent); }
.cba-paper-lines i:nth-child(3n) { inline-size: 70%; }
.cba-paper-catalog { inset-inline-end: 4%; inset-block-start: 2%; inline-size: 34%; aspect-ratio: 3 / 4; background: var(--cba-brand); transform: rotate(5deg); overflow: hidden; }
.cba-paper-cover { position: absolute; inset: auto 10% 12%; font-family: var(--cba-font-display); font-weight: 700; font-size: clamp(1rem, .6rem + 1.4vw, 2rem); line-height: .95; letter-spacing: -.04em; color: var(--cba-on-brand); word-break: break-word; }
.cba-paper-catalog::before { content: ""; position: absolute; inset: 12% 10% auto auto; inline-size: 45%; aspect-ratio: 1; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--cba-on-brand) 60%, transparent); }
.cba-paper-envelope { inset-inline-start: 34%; inset-block-end: 6%; inline-size: 42%; aspect-ratio: 220 / 110; transform: rotate(-2deg); overflow: hidden; }
.cba-paper-flap { position: absolute; inset: 0 0 45%; background: linear-gradient(to bottom right, transparent 49.5%, color-mix(in srgb, var(--cba-ink) 10%, transparent) 50%) left / 50% 100% no-repeat, linear-gradient(to bottom left, transparent 49.5%, color-mix(in srgb, var(--cba-ink) 10%, transparent) 50%) right / 50% 100% no-repeat; }
.cba-paper-envelope .cba-paper-logo { inset-block-end: 14%; inset-inline-start: 8%; font-size: clamp(.6rem, .45rem + .4vw, .85rem); }
.cba-paper-card { inset-inline-end: 6%; inset-block-end: 14%; inline-size: 28%; aspect-ratio: 85 / 55; background: var(--cba-ink); color: var(--cba-paper); transform: rotate(8deg); }
.cba-paper-catalog .cba-paper-tag { inset-block: -1.9rem auto; }
.cba-paper-envelope .cba-paper-tag { inset-inline: auto 0; }
.cba-paper-card .cba-paper-logo { inset-block-end: 14%; inset-inline-start: 10%; font-size: clamp(.6rem, .45rem + .4vw, .9rem); }
.cba-paper-mark { position: absolute; inset-block-start: 14%; inset-inline-start: 10%; inline-size: 18%; aspect-ratio: 1; border-radius: 50%; background: var(--cba-brand); }

/* ── 5 · Bir vitrin: yatay şerit ────────────────────────────────────── */
.cba-show { padding-block: 0; }
.cba-show-pin { padding-block: var(--cba-section); overflow: hidden; }
.cba-show-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-block-end: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.cba-show-hint { display: inline-flex; gap: .6rem; align-items: center; color: var(--cba-paper-dim); margin: 0; }
.cba-show-track {
    display: flex; gap: clamp(1rem, .5rem + 2vw, 2.5rem); padding-inline: var(--cba-gutter);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--cba-gutter); scrollbar-width: thin; padding-block-end: 1rem;
}
.cba-show-track.is-pinned { overflow: visible; scroll-snap-type: none; inline-size: max-content; }
.cba-shot { flex: 0 0 min(62vw, 54rem); scroll-snap-align: start; }
.cba-shot.is-premium { flex-basis: min(72vw, 64rem); }
.cba-shot-link { display: block; color: var(--cba-paper); text-decoration: none; }
.cba-browser { border-radius: var(--cba-radius-lg); overflow: hidden; background: var(--cba-night-3); border: 1px solid var(--cba-line); box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .9); transition: transform var(--cba-dur-3) var(--cba-ease-expo); }
.cba-shot-link:hover .cba-browser { transform: translateY(-6px); }
.cba-browser-bar { display: flex; align-items: center; gap: .4rem; padding: .7rem 1rem; border-block-end: 1px solid var(--cba-line); }
.cba-browser-bar > i { inline-size: .6rem; block-size: .6rem; border-radius: 50%; background: color-mix(in srgb, var(--cba-paper) 20%, transparent); }
.cba-browser-url { margin-inline-start: 1rem; flex: 1; max-inline-size: 22rem; padding: .25rem .9rem; border-radius: var(--cba-radius-pill); background: var(--cba-night); color: var(--cba-paper-dim); font-size: var(--cba-step--1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cba-browser img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.cba-shot-meta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem 2rem; padding-block-start: 1.5rem; }
@media (max-width: 767.98px) { .cba-shot-meta { grid-template-columns: 1fr; } }
.cba-shot-title { font-size: var(--cba-step-2); margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.cba-shot-desc { margin: 0; color: var(--cba-paper-dim); }
.cba-shot-badge { display: inline-block; padding: .2rem .7rem; border-radius: var(--cba-radius-pill); background: var(--cba-brand); color: var(--cba-on-brand); font-size: var(--cba-step--1); font-weight: 600; letter-spacing: .02em; }
.cba-shot.is-premium .cba-browser { border-color: rgba(var(--cba-brand-rgb), .55); box-shadow: 0 0 0 1px rgba(var(--cba-brand-rgb), .25), 0 60px 120px -50px rgba(var(--cba-brand-rgb), .45); }
@media (max-width: 767.98px) {
    .cba-show-track { flex-direction: column; overflow: visible; scroll-snap-type: none; }
    .cba-shot, .cba-shot.is-premium { flex-basis: auto; }
}

/* ── 6 · Bir hikâye: vizör + deklanşör ──────────────────────────────── */
.cba-storys-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 2rem + 4vw, 6rem); align-items: center; }
@media (max-width: 991.98px) { .cba-storys-grid { grid-template-columns: 1fr; } }
.cba-viewfinder { position: relative; padding: clamp(.75rem, .5rem + 1vw, 1.5rem); }
.cba-viewfinder-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--cba-radius); background: var(--cba-night-3); }
.cba-viewfinder-photo img, .cba-viewfinder-video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.cba-viewfinder-video { opacity: 0; transition: opacity var(--cba-dur-3) ease; }
.cba-viewfinder.is-video .cba-viewfinder-video { opacity: 1; }
.cba-viewfinder.is-video .cba-viewfinder-photo { visibility: hidden; transition: visibility 0s var(--cba-dur-3); }
.cba-shutter { position: absolute; inset: 0; pointer-events: none; }
.cba-shutter i {
    position: absolute; inset-inline-start: 50%; inset-block-start: 50%; inline-size: 120%; block-size: 120%;
    background: var(--cba-night); transform-origin: 0 0;
    transform: rotate(calc(var(--b) * 60deg)) translate(var(--shut, 60%), 0) skewX(-30deg);
}
.cba-viewfinder-corners i { position: absolute; inline-size: 1.5rem; block-size: 1.5rem; border: 2px solid var(--cba-paper); }
.cba-viewfinder-corners i:nth-child(1) { inset-block-start: 0; inset-inline-start: 0; border-inline-end: 0; border-block-end: 0; }
.cba-viewfinder-corners i:nth-child(2) { inset-block-start: 0; inset-inline-end: 0; border-inline-start: 0; border-block-end: 0; }
.cba-viewfinder-corners i:nth-child(3) { inset-block-end: 0; inset-inline-start: 0; border-inline-end: 0; border-block-start: 0; }
.cba-viewfinder-corners i:nth-child(4) { inset-block-end: 0; inset-inline-end: 0; border-inline-start: 0; border-block-start: 0; }
.cba-viewfinder-hud { position: absolute; inset-block-start: 2rem; inset-inline: 2rem; display: flex; justify-content: space-between; font-family: var(--cba-font-display); font-size: var(--cba-step--1); color: var(--cba-paper); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); font-variant-numeric: tabular-nums; }
.cba-rec { display: inline-flex; align-items: center; gap: .45rem; }
.cba-rec i { inline-size: .6rem; block-size: .6rem; border-radius: 50%; background: #ff3b30; animation: cba-blink 1.2s steps(2) infinite; }

/* ── 7 · Bir sistem ─────────────────────────────────────────────────── */
.cba-system-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 2rem + 4vw, 6rem); align-items: center; }
@media (max-width: 991.98px) { .cba-system-grid { grid-template-columns: 1fr; } }
.cba-system-scene { position: relative; aspect-ratio: 10 / 7; }
.cba-system-wires { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.cba-system-wires path, .cba-dash-chart path { fill: none; stroke: var(--cba-brand); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: .75; }
.cba-system-pulse { fill: var(--cba-paper); }
@media (prefers-reduced-motion: reduce) { .cba-system-pulse { display: none; } }
html[data-motion=off] .cba-system-pulse { display: none; }
.cba-phone {
    position: absolute; inset-inline-start: 2%; inset-block-start: 4%; inline-size: 28%; aspect-ratio: 9 / 19; display: flex; flex-direction: column; gap: 6%;
    padding: 9% 7%; border-radius: 1.6rem; background: var(--cba-night-2); border: 1px solid color-mix(in srgb, var(--cba-paper) 22%, transparent);
    box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .8);
}
.cba-phone-notch { position: absolute; inset-block-start: 3%; inset-inline: 35%; block-size: 3%; border-radius: 1rem; background: var(--cba-night); }
.cba-phone-title { font-family: var(--cba-font-display); font-weight: 700; font-size: clamp(.6rem, .4rem + .5vw, .95rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cba-phone-card { display: grid; gap: .3rem; padding: 10%; border-radius: .6rem; background: var(--cba-night-3); }
.cba-phone-card i { block-size: 4px; border-radius: 2px; background: color-mix(in srgb, var(--cba-paper) 18%, transparent); }
.cba-phone-card i:first-child { inline-size: 60%; background: rgba(var(--cba-brand-rgb), .8); }
.cba-phone-tab { margin-block-start: auto; display: flex; justify-content: space-around; }
.cba-phone-tab i { inline-size: 12%; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--cba-paper) 20%, transparent); }
.cba-dash {
    position: absolute; inset-inline-end: 0; inset-block-start: 12%; inline-size: 52%; display: grid; gap: .9rem;
    padding: clamp(1rem, .6rem + 1vw, 1.6rem); border-radius: var(--cba-radius-lg); background: var(--cba-night-2); border: 1px solid var(--cba-line);
    box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .8);
}
.cba-dash-top { display: flex; align-items: center; gap: .5rem; color: var(--cba-paper-dim); font-size: var(--cba-step--1); }
.cba-dash-dot { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: #34c759; box-shadow: 0 0 8px #34c759; }
.cba-dash-row { display: grid; grid-template-columns: 6.5rem 1fr; align-items: center; gap: .75rem; font-size: var(--cba-step--1); }
.cba-dash-label { color: var(--cba-paper-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cba-dash-bar { block-size: .5rem; border-radius: 1rem; background: color-mix(in srgb, var(--cba-paper) 10%, transparent); position: relative; overflow: hidden; }
.cba-dash-bar::after { content: ""; position: absolute; inset: 0; background: var(--cba-brand); transform: scaleX(var(--w)); transform-origin: left; border-radius: inherit; }
.cba-dash-chart { inline-size: 100%; block-size: 3.5rem; }
@media (max-width: 575.98px) { .cba-system-scene { aspect-ratio: 4 / 5; } .cba-phone { inline-size: 40%; } .cba-dash { inline-size: 64%; inset-block-start: auto; inset-block-end: 4%; } .cba-system-wires { display: none; } }

/* ── 8 · Kanıt ──────────────────────────────────────────────────────── */
.cba-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 2rem; margin: 3rem 0 0; }
.cba-stat { display: flex; flex-direction: column-reverse; gap: .5rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--cba-line); }
.cba-stat-value { margin: 0; font-family: var(--cba-font-display); font-weight: 800; font-size: var(--cba-step-6); line-height: 1; letter-spacing: -.04em; color: var(--cba-paper); }
.cba-stat-label { color: var(--cba-paper-dim); font-weight: 400; }
.cba-proof-refs-title { margin: 4rem 0 1.5rem; font-size: var(--cba-step-1); color: var(--cba-paper-dim); font-weight: 500; }
.cba-refs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1px; background: var(--cba-line); border: 1px solid var(--cba-line); }
.cba-ref { display: grid; place-items: center; min-block-size: 7rem; padding: 1.25rem; background: var(--cba-night); color: var(--cba-paper); text-decoration: none; font-family: var(--cba-font-display); text-align: center; }
.cba-ref img { max-inline-size: 100%; block-size: auto; max-block-size: 3.5rem; object-fit: contain; filter: grayscale(1) brightness(1.6); opacity: .8; transition: filter var(--cba-dur-2) ease, opacity var(--cba-dur-2) ease; }
.cba-ref:hover img { filter: none; opacity: 1; }

/* ── 10 · Final ─────────────────────────────────────────────────────── */
.cba-final { padding-block: clamp(7rem, 4rem + 12vw, 14rem); }
.cba-final-title { font-size: var(--cba-step-7); max-inline-size: 12ch; margin: 0 0 3rem; }
.cba-final-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 2rem; }
.cba-final-foot .cba-lead { margin: 0; }

/* Ana sayfada final CTA zaten var: footer'daki büyük çağrı tekrar etmesin. */
.cba-home .cba-footer-lead { display: none; }

@media (min-width: 768px) { .cba-hero-foot { padding-inline-end: 3.5rem; } }

/* ══ Dala tarzı anlatım ══════════════════════════════════════════════════
   Başlıklar ince ve büyük (Archivo Expanded 300), bol siyah boşluk. */
.cba-hero-title, .cba-h2, .cba-final-title { font-weight: 400; letter-spacing: -.04em; }
.cba-hero-title { font-size: clamp(2.8rem, 1.2rem + 7vw, 8.4rem); max-inline-size: 12ch; }
.cba-h2 { font-size: clamp(2.3rem, 1.3rem + 4.2vw, 5.4rem); max-inline-size: 13ch; }
.cba-final-title { font-size: clamp(2.8rem, 1.2rem + 7vw, 8.4rem); }
.cba-lead { font-weight: 500; }

/* ── Dağınık (kaos) ──────────────────────────────────────────────────── */
.cba-chaos-lines { list-style: none; margin: 0 auto; padding: 0; max-inline-size: 46rem; display: grid; gap: 2.25rem; text-align: center; }
.cba-chaos-line { font-family: var(--cba-font-display); font-weight: 400; font-size: clamp(1.35rem, 1rem + 1.4vw, 2.3rem); line-height: 1.3; letter-spacing: -.02em; color: var(--cba-paper); text-wrap: balance; }
/* hareketli kip: bölüm uzar, cümleler yapışkan sahnede tek tek */
.cba-chaos.is-scrolly { block-size: 420vh; padding-block: 0; border: 0; }
.cba-chaos.is-scrolly .cba-chaos-sticky { position: sticky; inset-block-start: 0; block-size: 100svh; display: grid; align-items: center; }
.cba-chaos.is-scrolly .cba-chaos-lines { display: block; position: relative; block-size: 12rem; }
.cba-chaos.is-scrolly .cba-chaos-line {
    position: absolute; inset-inline: 0; inset-block-start: 50%; translate: 0 -50%;
    opacity: 0; transform: translateY(1.5rem); filter: blur(10px);
    transition: opacity 700ms var(--cba-ease-out), transform 900ms var(--cba-ease-expo), filter 700ms ease;
}
.cba-chaos.is-scrolly .cba-chaos-line.is-past { transform: translateY(-1.5rem); }
.cba-chaos.is-scrolly .cba-chaos-line.is-active { opacity: 1; transform: none; filter: none; }

/* ── Sürekli WebGL sahnesi (assets/js/cba-story-gl.js) ───────────────── */
.cba-story-gl { position: fixed; inset: 0; inline-size: 100%; block-size: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; display: block; }
.cba-story-gl.is-ready { opacity: 1; }
html:not(.cba-gl-on) .cba-story-gl { display: none; }
.cba-story > :not(.cba-story-gl) { position: relative; z-index: 1; }
.cba-home .cba-footer.site-footer { position: relative; z-index: 2; }
/* Parçacıklar sahneyi taşırken DOM çizimleri ve zemin efektleri çekilir; metin siyah boşlukta durur. */
html.cba-gl-on .cba-hero, html.cba-gl-on .cba-story .cba-chapter { background: transparent; }
html.cba-gl-on .cba-story .cba-chapter + .cba-chapter { border-block-start-color: transparent; }
html.cba-gl-on .cba-hero-bg,
html.cba-gl-on .cba-rack,
html.cba-gl-on .cba-desk,
html.cba-gl-on .cba-system-scene,
html.cba-gl-on .cba-name-preview { visibility: hidden; }
html.cba-gl-on .cba-homes-pin, html.cba-gl-on .cba-face, html.cba-gl-on .cba-system { min-block-size: 100svh; }
html.cba-gl-on .cba-show-track { position: relative; z-index: 1; }
html.cba-gl-on .cba-viewfinder-media { box-shadow: 0 0 0 1px var(--cba-line), 0 40px 80px -30px rgba(0, 0, 0, .9); }

/* Parçacık zemininde okunaklılık: metnin arkasında yumuşak koyu hale (sahne ayrıca metin bölgesinde soluklaşır). */
html.cba-gl-on .cba-story :is(h1, h2, h3, p, li, dt, dd, .cba-lead, .cba-eyebrow, .cba-svc-link span) {
    text-shadow: 0 0 22px rgba(9, 9, 8, .9), 0 0 6px rgba(9, 9, 8, .85), 0 1px 1px rgba(9, 9, 8, .6);
}
@media (max-width: 767.98px) {
    /* telefon: biçim bölümün üstünde belirir; metne nefes alanı */
    :is(html.cba-gl-on, html.cba-gl-pending) .cba-story .cba-chapter:not(.cba-chaos) { padding-block-start: calc(var(--cba-section) + 26svh); }
}
html.cba-gl-on .cba-story :is(.cba-shot-badge, .btn, .btn *) { text-shadow: none; }