/* BRK Products — şemsiye stil tabanı (brief §3–§9) */
:root {
  --bg: #07070b;
  --surface: #ffffff09;
  --line: #ffffff14;
  --text: #e8eaf0;
  --muted: #8b93a7;
  --umb-a: #818cf8;
  --umb-b: #34d399;
  --radius-card: 20px;
  --radius-btn: 12px;
  --container: 1120px;
  /* ürün accent'i sayfa bazında override edilir */
  --accent: var(--umb-a);
  --accent-light: var(--umb-b);
  --accent-ink: #07070b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Avenir Next", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

a { color: inherit; text-decoration: none; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: #07070bcc;
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; gap: 32px;
  height: 64px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; }
.nav-logo img { width: 28px; height: 28px; border-radius: 7px; display: block; }
.nav-logo .grad {
  background: linear-gradient(90deg, var(--umb-a), var(--umb-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; font-size: 0.95rem; color: var(--muted); }
.nav-links a { transition: color 150ms ease; }
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); }
.nav-cta {
  background: var(--text); color: #0b0c10; font-weight: 600; font-size: 0.92rem;
  padding: 8px 18px; border-radius: 10px; transition: transform 150ms ease, filter 150ms ease;
}
.nav-cta:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* ---------- tipografi ölçeği ---------- */
.hero-title {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  font-weight: 850; letter-spacing: -0.035em; line-height: 1.06;
  text-wrap: balance;
}
.section-title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; }
.kicker {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-light);
}
.lead { font-size: 1.15rem; color: var(--muted); text-wrap: pretty; }

/* ---------- bileşenler ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-btn); font-weight: 700; font-size: 1rem;
  padding: 13px 26px; border: none; cursor: pointer;
  transition: transform 150ms ease, filter 150ms ease, border-color 150ms ease;
}
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.btn-primary {
  background: linear-gradient(90deg, var(--umb-a), var(--umb-b));
  color: #07070b;
}
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.btn:hover { transform: translateY(-2px); filter: brightness(1.1); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 26px;
  position: relative; overflow: hidden;
  transition: transform 150ms ease, border-color 150ms ease;
}
.card:hover { transform: translateY(-2px); border-color: #ffffff24; }
.card.striped::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent-light);
}
.chip-neutral { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }

.app-icon { border-radius: 22.9%; display: block; }

/* ---------- grid & boşluk ---------- */
.section { padding: 80px 0; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }

/* ---------- glow ---------- */
.glow {
  position: absolute; border-radius: 50%; filter: blur(120px);
  pointer-events: none; opacity: 0.55;
}

/* ---------- indirme satırı (mevcut /indir deseni) ---------- */
.dl-row {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-card); padding: 22px 26px;
}
.dl-buttons { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.dl-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--radius-btn); font-weight: 700; font-size: 0.95rem;
  padding: 11px 20px;
  transition: transform 150ms ease, filter 150ms ease;
}
.dl-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.dl-btn .ext { font-weight: 500; opacity: 0.65; font-size: 0.85rem; }

/* ince çizgi ikonlar */
.ico { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; flex: none; }

footer.site-footer {
  border-top: 1px solid var(--line);
  padding: 36px 0; text-align: center;
  color: var(--muted); font-size: 0.92rem;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* — kozmetik cila (2026-06-12): erişilebilirlik + mikro etkileşim — */
::selection { background: #34d39955; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent-light, #34d399); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.app-icon { transition: transform .25s ease; }
.p-hero:hover .app-icon { transform: scale(1.05) rotate(-3deg); }

/* — hareket sistemi (ürün sayfaları) — */
@keyframes brkHeroIn { from { opacity: 0; transform: translateY(18px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes brkPop { from { opacity: 0; transform: scale(.9) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes brkGlowPulse { 0%, 100% { box-shadow: 0 12px 40px #f59e0b44; } 50% { box-shadow: 0 14px 58px #f59e0b88; } }
.p-hero .app-icon { animation: brkPop .65s cubic-bezier(.16,1,.3,1) backwards; }
.p-hero .p-name { animation: brkHeroIn .8s cubic-bezier(.16,1,.3,1) .08s backwards; }
.p-hero .p-chips { animation: brkHeroIn .8s cubic-bezier(.16,1,.3,1) .18s backwards; }
.p-hero .p-tagline { animation: brkHeroIn .8s cubic-bezier(.16,1,.3,1) .28s backwards; }
.p-hero .p-desc { animation: brkHeroIn .8s cubic-bezier(.16,1,.3,1) .38s backwards; }
.p-hero .web-cta { animation: brkHeroIn .8s cubic-bezier(.16,1,.3,1) .48s both, brkGlowPulse 3.2s ease-in-out 1.4s infinite; }
.dl-btn { transition: transform .15s ease, filter .15s ease; }
.dl-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.card.striped { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card.striped:hover { transform: translateY(-4px); box-shadow: 0 20px 50px -22px var(--accent); }
html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .75s cubic-bezier(.16,1,.3,1); }
html.js .reveal.in { opacity: 1; transform: none; }

/* — bileşen seti (roadmap 2026-06-12): mockup, sohbet, akış, SSS, satın-al — */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accent, #818cf8), var(--accent-light, #34d399)); transform-origin: 0 50%; transform: scaleX(0); z-index: 99; }
.mock-window { border: 1px solid var(--line); border-radius: 16px; background: #0c0c13; overflow: hidden; box-shadow: 0 30px 80px #00000080; }
.mock-bar { display: flex; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #ffffff06; }
.mock-bar span { width: 11px; height: 11px; border-radius: 50%; background: #ffffff22; }
.mock-bar span:nth-child(1) { background: #ff5f57; } .mock-bar span:nth-child(2) { background: #febc2e; } .mock-bar span:nth-child(3) { background: #28c840; }
.mock-body { padding: 26px; }
/* sohbet (Mizan) */
.chat { display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin: 0 auto; }
.bubble { padding: 13px 17px; border-radius: 15px; font-size: .95rem; line-height: 1.55; max-width: 85%; }
.bubble.q { align-self: flex-end; background: #1d2230; border: 1px solid #ffffff14; }
.bubble.a { align-self: flex-start; background: #0e2a20; border: 1px solid #10b98133; }
.bubble.a .caret { display: inline-block; width: 2px; height: 1em; background: #34d399; margin-left: 2px; vertical-align: text-bottom; animation: brkCaret 1s steps(1) infinite; }
@keyframes brkCaret { 50% { opacity: 0; } }
.cites { display: flex; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.cites span { font-size: .76rem; padding: 4px 10px; border-radius: 999px; background: #C49A4526; color: #E5C275; border: 1px solid #C49A4540; }
/* görev listesi (Coz.ai) */
.tasklist { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 11px; }
.task { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: #ffffff05; font-size: .94rem; }
.task .tick { width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; background: #10b98126; color: #34d399; flex: none; }
.task.doing .tick { background: #6366f126; color: #818cf8; animation: brkSpinTick 1.1s linear infinite; }
@keyframes brkSpinTick { to { transform: rotate(360deg); } }
.task .tbar { height: 5px; border-radius: 3px; background: #ffffff12; flex: 1; overflow: hidden; }
.task .tbar i { display: block; height: 100%; width: 60%; border-radius: 3px; background: linear-gradient(90deg, #6366f1, #818cf8); animation: brkFill 2.6s ease-in-out infinite alternate; }
@keyframes brkFill { from { width: 28%; } to { width: 86%; } }
/* akış diyagramı (Paraşüt) */
.flow { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; padding: 10px 0; }
.flow .node { text-align: center; padding: 18px 22px; border: 1px solid var(--line); border-radius: 16px; background: #ffffff06; min-width: 150px; }
.flow .node .ic { font-size: 1.7rem; display: block; margin-bottom: 8px; }
.flow .node b { font-size: .95rem; display: block; }
.flow .node small { color: var(--muted); font-size: .78rem; }
.flow .link { width: 86px; height: 4px; position: relative; background: linear-gradient(90deg, #f59e0b55, #fbbf2455); border-radius: 2px; margin: 0 6px; }
.flow .link::after { content: ''; position: absolute; top: 50%; left: 0; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 12px #fbbf24; animation: brkDot 1.6s ease-in-out infinite; }
@keyframes brkDot { from { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: calc(100% - 9px); opacity: 0; } }
@media (max-width: 700px) { .flow { flex-direction: column; gap: 10px; } .flow .link { width: 4px; height: 48px; background: linear-gradient(180deg, #f59e0b55, #fbbf2455); } .flow .link::after { animation: brkDotV 1.6s ease-in-out infinite; left: 50%; margin-left: -4.5px; } @keyframes brkDotV { from { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { top: calc(100% - 9px); opacity: 0; } } }
/* SSS */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: #ffffff06; margin-bottom: 12px; overflow: hidden; }
.faq summary { cursor: pointer; padding: 17px 20px; font-weight: 650; font-size: .98rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.3rem; color: var(--accent-light, #34d399); transition: transform .25s; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-a { padding: 0 20px 17px; color: var(--muted); font-size: .94rem; line-height: 1.6; }
/* satın al */
.buy { border: 1px solid var(--line); border-radius: 20px; padding: 34px; text-align: center; background: linear-gradient(135deg, #ffffff08, #ffffff03); position: relative; overflow: hidden; }
.buy::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-light)); }
.buy h3 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.buy p { color: var(--muted); margin: 10px auto 22px; max-width: 480px; font-size: .97rem; }
.buy .buy-btn { display: inline-block; padding: 14px 30px; border-radius: 13px; background: linear-gradient(90deg, var(--accent), var(--accent-light)); color: var(--accent-ink, #07070b); font-weight: 800; text-decoration: none; font-size: 1.02rem; transition: transform .15s, filter .15s; }
.buy .buy-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.buy .buy-note { display: block; margin-top: 13px; color: var(--muted); font-size: .84rem; }
/* sürüm rozeti */
.vbadge { font-size: .76rem; font-weight: 650; padding: 4px 11px; border-radius: 999px; background: #ffffff0d; color: var(--muted); border: 1px solid var(--line); }
/* hero ikon yumuşak süzülme */
@keyframes brkFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.p-hero .app-icon { animation: brkPop .65s cubic-bezier(.16,1,.3,1) backwards, brkFloat 5.5s ease-in-out 1.2s infinite; }

/* a11y: skip-link + klavye focus halkası (#22) */
.skip-link { position: absolute; left: 12px; top: -64px; z-index: 200; background: #34d399; color: #07070b; font-weight: 700; padding: 10px 16px; border-radius: 10px; text-decoration: none; transition: top .15s; }
.skip-link:focus { top: 12px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #34d399; outline-offset: 3px; }
.dl-btn.dl-soon { background: none; border: 1px dashed var(--line, #ffffff22); color: var(--muted, #8b93a7); cursor: default; }
.dl-btn.dl-soon:hover { transform: none; filter: none; }