/* Trilvy subpages — shared stylesheet.
   Mirrors the landing page (index.html) tokens, nav, footer and type so every
   page reads as one site. index.html keeps its own inline copy; when a token
   changes there, change it here too. */

/* ── Fonts: self-hosted (OFL, see /assets/fonts/OFL-*.txt). Variable woff2, latin + latin-ext
   subsets (latin-ext carries Turkish ğ ş İ). No third-party font requests. ── */
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/fonts/space-grotesk-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/fonts/space-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: dark;
  --bg: #07070B;
  --cyan: #4DD8FF; --magenta: #FF4D9C; --purple: #9D4DFF; --gold: #FFC97E; --red: #FF8A8A;
  --txt: #F2F3F8; --txt2: #9BA0B4; --txt3: #5A5F75; --hair: rgba(155,160,180,0.14);
  --display: "Space Grotesk", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-q: cubic-bezier(.3, .7, .2, 1);
  --navH: 64px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); }
html { scroll-padding-top: calc(var(--navH) + 24px); }
body { color: var(--txt); font-family: var(--display); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ── Language: content blocks carry data-only="tr|en"; html[lang] picks one. ── */
html[lang="en"] [data-only="tr"], html:not([lang="en"]) [data-only="en"] { display: none !important; }

/* ── Store switch (set in /assets/site.js, mirrors index.html's data-store) ── */
html:not([data-store="live"]) .when-live { display: none !important; }
html[data-store="live"] .when-soon { display: none !important; }

/* ── Page shell ── */
.site { container-type: inline-size; background: var(--bg); color: var(--txt); position: relative; overflow-x: clip; font-size: 16px; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.site a { color: inherit; text-decoration: none; }
.site main { flex: 1; }
main:focus { outline: none; }
.wr { max-width: 1240px; width: 100%; margin: 0 auto; padding-left: max(clamp(20px, 5cqw, 64px), env(safe-area-inset-left, 0px)); padding-right: max(clamp(20px, 5cqw, 64px), env(safe-area-inset-right, 0px)); }
.skip { position: absolute; left: 16px; top: -100px; z-index: 300; background: var(--txt); color: var(--bg) !important; padding: 10px 14px; border-radius: 8px; font-weight: 700; font-size: 14px; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 10px); }

.micro { font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--txt3); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.grad { background: linear-gradient(100deg, var(--ga, #4DD8FF), #F2F8FF 72%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btnP { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 40px; padding: 0 18px; border-radius: 20px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #7BE7FF, #4DD8FF 50%, #2FB8E0); color: #06121A !important; font-weight: 700; font-size: 14px; font-family: var(--display);
  transition: transform .45s var(--ease-q); }
.btnP:hover { transform: translateY(-1px); }
.btnP:active { transform: scale(.97); transition-duration: .12s; }
.btnP.lg { height: 52px; padding: 0 26px; border-radius: 26px; font-size: 16px; }
.lnk, .site .lnk { color: var(--txt2); font-weight: 600; font-size: 14px; cursor: pointer; background: none; border: 0; transition: color .3s var(--ease-q); }
.lnk:hover, .site .lnk:hover { color: var(--txt); }
.ul { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .55s var(--ease), color .3s var(--ease-q); padding-bottom: 2px; }
.ul:hover { background-size: 100% 1px; }

/* ── Nav (same family as index) ── */
.nav { position: sticky; top: 0; z-index: 50; height: var(--navH); display: flex; align-items: center; padding-top: env(safe-area-inset-top, 0px); box-sizing: content-box;
  background: rgba(7,7,11,.8); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.nav .in { display: flex; align-items: center; gap: 26px; width: 100%; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -.4px; }
.brand img { width: 30px; height: 30px; border-radius: 8px; display: block; }
.nav .links { display: flex; gap: 24px; font-size: 14px; font-weight: 600; color: var(--txt2); margin-left: 10px; }
.nav .links a:hover, .nav .links a[aria-current="page"] { color: var(--txt); }
.nav .sp { flex: 1; }
.nav .chip { font-size: 12px; font-weight: 700; color: var(--txt2); }
.lang { display: flex; gap: 2px; font-size: 12.5px; font-weight: 700; }
.lang button { background: none; border: 0; color: var(--txt3); cursor: pointer; padding: 6px; transition: color .3s var(--ease-q); }
.lang button.on { color: var(--txt); }
.nav .prog { position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: rgba(242,243,248,.3); transform-origin: 0 50%; transform: scaleX(0); }

/* ── Footer (same as index) ── */
.foot { padding-block: 56px 48px; margin-top: 60px; position: relative; }
.foot::before { content: ""; position: absolute; left: clamp(20px, 5cqw, 64px); right: clamp(20px, 5cqw, 64px); top: 0; height: 1px; background: var(--hair); }
.foot .row { display: flex; gap: 56px; flex-wrap: wrap; align-items: flex-start; }
.foot .col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--txt2); align-items: flex-start; }
.foot .col a:hover, .foot .col a[aria-current="page"] { color: var(--txt); }
.foot .col .micro { margin-bottom: 4px; }
.foot .bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 44px; font-size: 12.5px; color: var(--txt3); }

/* ── Store badges (copied from index) ── */
.stores { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.store { display: inline-flex; align-items: center; gap: 11px; height: 56px; padding: 0 22px 0 15px; border-radius: 12px; background: #000; color: #fff !important;
  box-shadow: inset 0 0 0 1px #A6A6A6; transition: transform .5s var(--ease-q), box-shadow .4s var(--ease-q); }
a.store:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px #E2E3EA; }
a.store:active { transform: scale(.98); transition-duration: .12s; }
.store svg { flex: none; display: block; }
.store small { display: block; font-size: 10.5px; letter-spacing: .2px; font-weight: 500; line-height: 1.15; color: #fff; }
.store b { display: block; font-size: 21px; font-weight: 600; letter-spacing: -.5px; line-height: 1.05; font-family: -apple-system, "SF Pro Display", "Helvetica Neue", var(--display); }
.soonS .store { background: rgba(0,0,0,.55); box-shadow: inset 0 0 0 1px rgba(166,166,166,.38); color: rgba(255,255,255,.62) !important; }
.soonS .store small { color: rgba(255,255,255,.55); letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700; font-size: 9.5px; }
.soonS .store .lg { opacity: .55; filter: saturate(.6); }

/* ── Reveal (only under html.js, so pages are complete without script) ── */
.js .rv { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .9s var(--ease) var(--d, 0ms), transform 1.1s var(--ease) var(--d, 0ms); }
.js .rv.in { opacity: 1; transform: none; }

/* ═══ Editorial reading layout (legal + help pages) ═══ */
.phead { padding-block: clamp(36px, 6cqw, 88px) clamp(28px, 4cqw, 48px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.crumbs a { color: var(--txt2); }
.crumbs a:hover { color: var(--txt); }
.ptitle { font-size: clamp(44px, 7.2cqw, 104px); line-height: .94; letter-spacing: -.05em; font-weight: 700; margin-top: 22px; max-width: 14ch; padding-bottom: .08em; overflow-wrap: break-word; hyphens: auto; }
.ptitle.wide { max-width: 18ch; }
.plede { font-size: 18px; line-height: 1.55; color: var(--txt2); max-width: 36em; margin-top: 22px; }
.plede b, .plede strong { color: var(--txt); font-weight: 600; }
.pmeta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; padding-top: 14px; position: relative; font-size: 13px; color: var(--txt2); }
.pmeta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hair); }
.pmeta .mono { color: var(--txt); font-size: 12.5px; }
.pmeta a { color: var(--txt); }

.doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 24px; }
.doc.has-toc { grid-template-columns: 220px minmax(0, 1fr); gap: clamp(40px, 6cqw, 96px); }
.toc { position: sticky; top: calc(var(--navH) + 32px); align-self: start; font-size: 13.5px; }
.toc summary { list-style: none; cursor: default; padding-bottom: 12px; }
.toc summary::-webkit-details-marker { display: none; }
.toc ol { list-style: none; display: flex; flex-direction: column; border-left: 1px solid var(--hair); }
.toc li a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 1px solid transparent; color: var(--txt3); line-height: 1.35; transition: color .3s var(--ease-q), border-color .3s var(--ease-q); }
.toc li a:hover { color: var(--txt2); }
.toc li a.on { color: var(--txt); border-left-color: var(--cyan); }
.toc .back { display: inline-block; margin-top: 22px; }

.prose { max-width: 68ch; counter-reset: sec; font-size: 16px; line-height: 1.7; color: var(--txt2); }
.prose > section { padding-top: 8px; }
.prose h2 { counter-increment: sec; position: relative; font-size: clamp(22px, 2.4cqw, 28px); line-height: 1.12; letter-spacing: -.03em; font-weight: 700; color: var(--txt); margin: 44px 0 14px; padding-top: 22px; }
.prose h2::before { content: counter(sec, decimal-leading-zero); display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0; font-weight: 500; color: var(--cyan); margin-bottom: 10px; }
.prose h2::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hair); }
.prose section:first-of-type > h2 { margin-top: 0; }
.prose .callout + section > h2, html[lang="en"] .prose .note + * section:first-of-type > h2 { margin-top: 36px; }
.prose h3 { font-size: 17px; letter-spacing: -.2px; color: var(--txt); margin: 26px 0 6px; }
.prose p { margin-top: 12px; }
.prose p:first-child { margin-top: 0; }
.prose strong, .prose b { color: var(--txt); font-weight: 600; }
.prose a { color: var(--txt); background: linear-gradient(var(--cyan), var(--cyan)) 0 100% / 100% 1px no-repeat; padding-bottom: 1px; transition: color .3s var(--ease-q); }
.prose a:hover { color: var(--cyan); }
.prose ul, .prose ol { margin-top: 12px; padding-left: 0; list-style: none; }
.prose li { position: relative; padding: 10px 0 10px 26px; border-bottom: 1px solid var(--hair); }
.prose li:first-child { border-top: 1px solid var(--hair); }
.prose ul > li::before { content: ""; position: absolute; left: 4px; top: 1.32em; width: 6px; height: 6px; border-radius: 50%; background: var(--txt3); }
.prose ol { counter-reset: step; }
.prose ol > li { counter-increment: step; padding-left: 36px; }
.prose ol > li::before { content: counter(step); position: absolute; left: 0; top: 10px; font-family: var(--mono); font-size: 12px; line-height: 1.7rem; color: var(--cyan); }
.prose em { font-style: normal; color: var(--txt3); }
.prose .note { margin-top: 18px; padding: 14px 0 14px 18px; border-left: 2px solid var(--cyan); color: var(--txt2); font-size: 15px; }
.prose .callout { font-size: clamp(22px, 2.6cqw, 30px); line-height: 1.2; letter-spacing: -.03em; font-weight: 700; color: var(--txt); }
.prose .split { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--hair); }
.prose .kvs { margin-top: 12px; }
.prose .kv { display: flex; gap: 16px; align-items: baseline; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.prose .kv:first-child { border-top: 1px solid var(--hair); }
.prose .kv b { color: var(--txt); font-weight: 600; }
.prose .kv span { text-align: right; font-size: 14px; }
.endnav { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: baseline; margin-top: 64px; padding-top: 18px; border-top: 1px solid var(--hair); font-size: 14px; }
.endnav a { color: var(--txt2); font-weight: 600; }
.endnav a:hover { color: var(--txt); }

/* License lists */
.pkgs { font-family: var(--mono); font-size: 12px; line-height: 2; color: var(--txt3); overflow-wrap: anywhere; }
.pkgs b { color: var(--txt2); font-weight: 500; }

/* ── FAQ accordion (same as index) ── */
.faqList { margin-top: 8px; }
.faqList details { position: relative; }
.faqList details::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hair); }
.faqList summary { list-style: none; cursor: pointer; padding: 20px 0; font-size: 18px; font-weight: 600; letter-spacing: -.3px; color: var(--txt); display: flex; justify-content: space-between; gap: 20px; transition: color .3s var(--ease-q); }
.faqList summary:hover { color: #fff; }
.faqList summary::-webkit-details-marker { display: none; }
.faqList summary::after { content: "+"; font-family: var(--mono); color: var(--txt3); font-weight: 500; transition: transform .5s var(--ease); }
.faqList details[open] summary::after { transform: rotate(45deg); }
.faqList .a { color: var(--txt2); font-size: 15.5px; line-height: 1.65; padding: 0 0 22px; max-width: 46em; }
.faqList .a p + p { margin-top: 10px; }
.faqList details[open] .a { animation: faqIn .6s var(--ease); }
.faqGroup { margin-top: 8px; }
.faqGroup + .faqGroup { margin-top: 48px; }
@keyframes faqIn { from { opacity: 0; transform: translate3d(0, -6px, 0); } to { opacity: 1; transform: none; } }

/* ═══ Focused pages (join / auth) ═══ */
.focus { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 6cqw, 96px); align-items: end; padding-block: clamp(40px, 8cqw, 120px) 24px; }
.focus h1 { font-size: clamp(44px, 5.8cqw, 84px); line-height: .94; letter-spacing: -.05em; font-weight: 700; margin-top: 20px; padding-bottom: .08em; }
.focus .lede { font-size: 18px; line-height: 1.55; color: var(--txt2); max-width: 30em; margin-top: 20px; }
.focus .lede b { color: var(--txt); font-weight: 600; }
.focus .acts { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 30px; }
.focus .hint { margin-top: 22px; font-size: 14.5px; line-height: 1.6; color: var(--txt2); max-width: 34em; }
.focus .hint b { color: var(--txt); font-weight: 600; }
.focus .stores { margin-top: 26px; }
.bigcode { font-family: var(--mono); font-size: clamp(56px, 9cqw, 120px); font-weight: 700; letter-spacing: .08em; line-height: 1; margin-top: 14px; overflow-wrap: anywhere; }
.codeBox { position: relative; padding-top: 14px; }
.codeBox::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hair); }
.codeBox .url { font-family: var(--mono); font-size: 13.5px; color: var(--txt2); margin-top: 14px; display: block; overflow-wrap: anywhere; }
.sig { width: 100%; max-width: 300px; justify-self: end; overflow: visible; }
.sig line { stroke: rgba(242,243,248,.55); stroke-width: 1.4; stroke-linecap: round; }
.sig .t { fill: rgba(77,216,255,.16); }
.sig circle { fill: #EAF6FF; }
.js .sig line { stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset .75s var(--ease-io) var(--d); }
.js .sig.in line { stroke-dashoffset: 0; }
.js .sig .t { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); opacity: 0; transition: transform 1.2s var(--ease) 1.2s, opacity .9s var(--ease) 1.2s; }
.js .sig.in .t { transform: none; opacity: 1; }

/* ═══ Phone (container ≤ 760) ═══ */
@container (max-width: 760px) {
  .nav { --navH: 56px; height: 56px; }
  .nav .links, .nav .chip { display: none; }
  .nav .in { gap: 14px; }
  .store { height: 50px; padding: 0 16px 0 12px; }
  .store b { font-size: 15px; }
  .ptitle { font-size: 13.4cqw; max-width: none; }
  .plede { font-size: 16px; }
  .doc.has-toc { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .toc { position: static; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
  .toc summary { cursor: pointer; padding: 14px 0; display: flex; justify-content: space-between; }
  .toc summary::after { content: "+"; font-family: var(--mono); color: var(--txt3); font-size: 14px; letter-spacing: 0; transition: transform .5s var(--ease); }
  .toc[open] summary::after { transform: rotate(45deg); }
  .toc ol { padding-bottom: 14px; }
  .toc .back { display: none; }
  .prose { font-size: 15.5px; }
  .prose h2 { margin-top: 36px; }
  .prose .kv { flex-direction: column; gap: 2px; }
  .prose .kv span { text-align: left; }
  .faqList summary { font-size: 16px; }
  .focus { grid-template-columns: minmax(0, 1fr); padding-top: 32px; }
  .focus h1 { font-size: 13.2cqw; }
  .focus .lede { font-size: 16px; }
  .bigcode { font-size: 17cqw; }
  .focus .sig { display: none; }
  .foot .row { gap: 32px; }
}
@container (max-width: 380px) {
  .bigcode { letter-spacing: .04em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  html { scroll-behavior: auto; }
}