/* Privacy and Terms, laid out after turkgateway.com/privacy and /terms —
   measured there at 1440 and 375, light and dark, with the motion read out
   of its own bundle. Both pages link this one file; they were two copies
   of the same 77 lines before.

   The font list is theirs too. They name Google Sans first and never load
   it, so what their visitors actually see is the fallback — Arial on
   Windows, Helvetica on a Mac — and this list gives the same result.

   The colours are not theirs. Their paper was #faf8f4 and their dark a
   brown #100d0a, and next to home, /agent, /pricing and /projects these
   two pages read as another site. They take Souqi's warm white and warm
   dark, the same tokens those pages use, under the names the layout below
   was written against. */
*,*::before,*::after{box-sizing:border-box}
:root{
  --paper:#f6f5f4; --paper-2:#ebeced; --card:#fcfcfc;
  --ink:#1b252b; --ink-2:#5c6062; --mut:#8a8f91; --line:#cfc9c3;
  --bg:var(--paper); --text:var(--ink); --muted:var(--ink-2); --border:var(--line);
  --surface-1:var(--card); --surface-2:var(--paper-2);
  --font:"Google Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --accent:#1aa6df; --accent-2:#0f8ec4;
  --disp:'Jost','Century Gothic',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#18191b; --paper-2:#212225; --card:#26282b;
  --ink:#f5f9fc; --ink-2:#9ea3a6; --mut:#7a7f82; --line:#33363a;
  --accent-2:#118cc0;
  color-scheme:dark;
}

/* Each section has its own colour, as on turkgateway.com: Tailwind's
   palette, at the steps they use — 50 for a tint, 500 for a dot and a 20%
   border, 600 for text, and in the dark the 500 at 10% with 400 text. */
[data-c="emerald"]{--c-50:oklch(97.9% .021 166.113);--c-100:oklch(95% .052 163.051);--c-400:oklch(76.5% .177 163.223);--c-500:oklch(69.6% .17 162.48);--c-600:oklch(59.6% .145 163.225)}
[data-c="blue"]{--c-50:oklch(97% .014 254.604);--c-100:oklch(93.2% .032 255.585);--c-400:oklch(70.7% .165 254.624);--c-500:oklch(62.3% .214 259.815);--c-600:oklch(54.6% .245 262.881)}
[data-c="purple"]{--c-50:oklch(97.7% .014 308.299);--c-100:oklch(94.6% .033 307.174);--c-400:oklch(71.4% .203 305.504);--c-500:oklch(62.7% .265 303.9);--c-600:oklch(55.8% .288 302.321)}
[data-c="orange"]{--c-50:oklch(98% .016 73.684);--c-100:oklch(95.4% .038 75.164);--c-400:oklch(75% .183 55.934);--c-500:oklch(70.5% .213 47.604);--c-600:oklch(64.6% .222 41.116)}
[data-c="cyan"]{--c-50:oklch(98.4% .019 200.873);--c-100:oklch(95.6% .045 203.388);--c-400:oklch(78.9% .154 211.53);--c-500:oklch(71.5% .143 215.221);--c-600:oklch(60.9% .126 221.723)}
[data-c="rose"]{--c-50:oklch(96.9% .015 12.422);--c-100:oklch(94.1% .03 12.58);--c-400:oklch(71.2% .194 13.428);--c-500:oklch(64.5% .246 16.439);--c-600:oklch(58.6% .253 17.585)}
[data-c="amber"]{--c-50:oklch(98.7% .022 95.277);--c-100:oklch(96.2% .059 95.617);--c-400:oklch(82.8% .189 84.429);--c-500:oklch(76.9% .188 70.08);--c-600:oklch(66.6% .179 58.318)}
[data-c="indigo"]{--c-50:oklch(96.2% .018 272.314);--c-100:oklch(93% .034 272.788);--c-400:oklch(67.3% .182 276.935);--c-500:oklch(58.5% .233 277.117);--c-600:oklch(51.1% .262 276.966)}
[data-c="teal"]{--c-50:oklch(98.4% .014 180.72);--c-100:oklch(95.3% .051 180.801);--c-400:oklch(77.7% .152 181.912);--c-500:oklch(70.4% .14 182.503);--c-600:oklch(60% .118 184.704)}
[data-c="sky"]{--c-50:oklch(97.7% .013 236.62);--c-100:oklch(95.1% .026 236.824);--c-400:oklch(74.6% .16 232.661);--c-500:oklch(68.5% .169 237.323);--c-600:oklch(58.8% .158 241.966)}
[data-c="violet"]{--c-50:oklch(96.9% .016 293.756);--c-100:oklch(94.3% .029 294.588);--c-400:oklch(70.2% .183 293.541);--c-500:oklch(60.6% .25 292.717);--c-600:oklch(54.1% .281 293.009)}
[data-c="pink"]{--c-50:oklch(97.1% .014 343.198);--c-100:oklch(94.8% .028 342.258);--c-400:oklch(71.8% .202 349.761);--c-500:oklch(65.6% .241 354.308);--c-600:oklch(59.2% .249 .584)}
[data-c]{--tone-50:var(--c-50);--tone-100:var(--c-100);--tone-ink:var(--c-600);--tone-dot:var(--c-500);
  --tone-line:color-mix(in oklab,var(--c-500) 20%,transparent)}
:root[data-theme="dark"] [data-c]{--tone-50:color-mix(in oklab,var(--c-500) 10%,transparent);
  --tone-100:color-mix(in oklab,var(--c-500) 10%,transparent);--tone-ink:var(--c-400)}

html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;
  padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left)}
::selection{background:color-mix(in oklab,oklch(62.3% .214 259.815) 30%,transparent)}
html::-webkit-scrollbar{width:6px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}
a{color:inherit}
h1,h2,p{margin:0}
/* Lucide's icons, as theirs are, drawn from a <symbol> sprite in each page.
   The stroke is set here because a <use> copy inherits it from its <svg>. */
svg.ic{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Souqi's own bar, as these pages had it before — the rest of the page is
   turkgateway.com's, the bar is not. Inter, as it was, through --body. */
.nav{display:flex;align-items:center;gap:20px;padding:14px clamp(18px,4vw,40px);background:var(--paper);border-bottom:1px solid var(--line);
  font-family:var(--body)}
/* The wordmark is home's: Inter at regular weight, not Jost 800. */
.brand{display:flex;align-items:center;gap:10px;font-weight:400;font-size:1.1rem;color:var(--ink);text-decoration:none}
.brand img{width:26px;height:26px;object-fit:contain;border-radius:6px}
.nav .lnk{margin-inline-start:auto;display:flex;gap:2px;align-items:center}
.btn-g{padding:9px 15px;border:1px solid var(--line);border-radius:10px;color:var(--ink);font-size:.86rem;font-weight:600;transition:.16s;text-decoration:none}
.btn-g:hover{border-color:var(--mut);background:rgba(240,234,220,.06)}
.btn-d{padding:9px 17px;border-radius:10px;background:var(--accent);color:#fff;font-size:.86rem;font-weight:700;transition:.16s;text-decoration:none}
.btn-d:hover{background:var(--accent-2);transform:translateY(-1px)}

/* Two faint blooms behind the page, in the dark only. */
.lg-glow{display:none;position:fixed;inset:0;pointer-events:none;z-index:0}
:root[data-theme="dark"] .lg-glow{display:block}
.lg-glow i{position:absolute;border-radius:50%}
.lg-glow i:first-child{top:0;left:25%;width:600px;height:600px;filter:blur(120px);
  background:color-mix(in oklab,var(--glow-a,oklch(59.6% .145 163.225)) 5%,transparent)}
.lg-glow i:last-child{bottom:33.333%;right:25%;width:400px;height:400px;filter:blur(100px);
  background:color-mix(in oklab,var(--glow-b,oklch(54.6% .245 262.881)) 5%,transparent)}
.lg-terms .lg-glow{--glow-a:oklch(54.6% .245 262.881);--glow-b:oklch(51.1% .262 276.966)}
.lg-terms .lg-glow i:first-child{left:auto;right:25%}
.lg-terms .lg-glow i:last-child{right:auto;left:25%}

.lg-in{max-width:72rem;margin:0 auto;padding-inline:24px}

.lg-hero{position:relative;z-index:10;border-bottom:1px solid var(--border)}
.lg-hero .lg-in{padding-block:96px}
/* 5.5em is where theirs breaks with a <br>: past "Privacy" and "Terms of",
   short of "Privacy Policy". A <br> would split the title into two text
   nodes, and the Arabic and Turkish dictionaries key the whole of it. */
.lg-hero h1{font-size:48px;font-weight:900;letter-spacing:-.025em;line-height:1;margin-bottom:24px;max-width:5.5em}
.lg-lede{font-size:18px;line-height:1.625;color:var(--muted);max-width:42rem;margin-bottom:40px}
.lg-badges{display:flex;flex-wrap:wrap;align-items:center;gap:24px}
.lg-badge{display:flex;align-items:center;gap:8px;font-size:14px;line-height:20px;color:var(--muted)}
.lg-badge i{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--tone-50);color:var(--tone-ink)}
.lg-badge svg{width:11px;height:11px}
.lg-updated{margin-top:32px;display:flex;align-items:center;gap:12px;font-size:12px;line-height:16px;color:var(--muted);opacity:.6}
.lg-updated svg{width:12px;height:12px;flex:none}
@media (min-width:768px){
  .lg-hero .lg-in{padding-block:112px}
  .lg-hero h1{font-size:72px}
}

.lg-body{position:relative;z-index:10;padding-block:64px;display:flex;flex-direction:column;gap:32px}
.lg-toc{width:100%}
.lg-toc-in{display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--border);padding-bottom:24px;margin-bottom:8px}
.lg-toc-label{font-size:10px;line-height:15px;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
/* A transparent border on every row, not only the active one: theirs adds
   the border on activation, and each row grows 2px as you scroll past it. */
.lg-toc a{display:flex;align-items:center;gap:10px;width:100%;padding:7px 11px;border:1px solid transparent;border-radius:8px;
  font-size:12px;line-height:16px;font-weight:500;color:var(--muted);text-decoration:none;
  transition:opacity .4s ease-out var(--d,0s),transform .4s ease-out var(--d,0s),color .2s,background-color .2s,border-color .2s}
.lg-toc a .dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--muted);opacity:.4}
.lg-toc a:hover{background:var(--surface-2)}
.lg-toc a.active{background:var(--tone-50);color:var(--tone-ink);border-color:var(--tone-line)}
.lg-toc a.active .dot{background:var(--tone-dot);opacity:1}
@media (min-width:1024px){
  .lg-body{flex-direction:row;gap:48px}
  .lg-toc{width:224px;flex:none}
  .lg-toc-in{position:sticky;top:112px;border:0;padding-bottom:0;margin-bottom:0}
}

/* Below 1024px, once the Contents list has scrolled away, theirs is a pill
   pinned to the top: the section you are in, and a chevron that opens all
   of them in two columns. legal.js builds it from the list above. Theirs
   sits 64px from the left to clear their app-sidebar button; Souqi has none,
   so it takes the 12px they use from 768px up on both sides. */
.lg-float{position:fixed;top:8px;left:12px;right:12px;z-index:60;border-radius:16px;border:1px solid var(--border);
  background:color-mix(in oklab,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  box-shadow:0 12px 40px rgba(0,0,0,.28);overflow:hidden;
  opacity:0;transform:translateY(-12px);visibility:hidden;
  transition:opacity .25s ease-out,transform .25s ease-out,visibility 0s linear .25s}
.lg-float.on{opacity:1;transform:none;visibility:visible;transition:opacity .25s ease-out,transform .25s ease-out}
.lg-float-bar{width:100%;display:flex;align-items:center;gap:8px;padding:8px 12px;border:0;background:none;
  font:inherit;color:inherit;text-align:start;cursor:pointer}
.lg-float-label{flex:none;font-size:8px;line-height:12px;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);opacity:.5}
.lg-float-dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--tone-dot,var(--muted))}
.lg-float-now{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:16px;font-weight:600;color:var(--tone-ink,var(--text))}
.lg-float-bar svg{width:14px;height:14px;flex:none;margin-inline-start:auto;color:var(--muted);transition:transform .2s}
.lg-float.open .lg-float-bar svg{transform:rotate(180deg)}
/* height:auto cannot be transitioned; a grid row from 0fr to 1fr can. */
.lg-float-panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .2s ease-out,opacity .2s ease-out}
.lg-float.open .lg-float-panel{grid-template-rows:1fr;opacity:1}
.lg-float-clip{min-height:0;overflow:hidden}
.lg-float-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:2px 10px 10px;border-top:1px solid var(--border)}
.lg-float-grid a{display:flex;align-items:center;gap:6px;min-width:0;padding:5px 7px;border:1px solid transparent;border-radius:8px;
  font-size:10px;line-height:15px;font-weight:500;color:var(--muted);text-decoration:none;transition:color .2s,background-color .2s,border-color .2s}
.lg-float-grid a .dot{width:4px;height:4px;border-radius:50%;flex:none;background:var(--muted);opacity:.4}
.lg-float-grid a span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-float-grid a:hover{background:var(--surface-2)}
.lg-float-grid a.active{background:var(--tone-50);color:var(--tone-ink);border-color:var(--tone-line)}
.lg-float-grid a.active .dot{background:var(--tone-dot);opacity:1}
@media (min-width:1024px){.lg-float{display:none}}

/* 384px under the last section is theirs: room for it to scroll up into
   the band the Contents menu watches. */
.lg-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:80px;padding-bottom:384px}
.lg-sec{scroll-margin-top:112px}
.lg-sec-head{display:flex;align-items:center;gap:16px;margin-bottom:32px}
.lg-tile{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--tone-50);border:1px solid var(--tone-line);color:var(--tone-ink)}
.lg-tile svg{width:20px;height:20px}
.lg-sec h2{font-size:24px;line-height:32px;font-weight:700;color:var(--text)}
/* Numbered in CSS, so the heading's text is still the dictionary key. */
.lg-terms .lg-main{counter-reset:sec}
.lg-terms .lg-sec h2::before{counter-increment:sec;content:counter(sec) ". "}
.lg-sec > p{color:var(--muted);line-height:1.625;margin-bottom:24px}
.lg-sec > p:has(+ p){margin-bottom:16px}
.lg-sec > :last-child{margin-bottom:0}
.lg-sec b{color:var(--text);font-weight:700}
.lg-sec a{color:var(--tone-ink);font-weight:600;text-decoration:none}
.lg-sec a:hover{text-decoration:underline}
.lg-sec .dont{color:var(--c-600)}
:root[data-theme="dark"] .lg-sec .dont{color:var(--c-400)}

.lg-stack{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}
.lg-stack.tight{gap:12px}
.lg-num{display:flex;gap:16px;padding:20px;border-radius:16px;background:var(--surface-1);border:1px solid var(--border);transition:border-color .15s}
.lg-num:hover{border-color:var(--tone-line)}
.lg-num .n{flex:none;width:32px;font-size:24px;line-height:32px;font-weight:900;color:var(--tone-ink);opacity:.3}
.lg-num .t{color:var(--text);font-weight:600;line-height:24px;margin-bottom:6px}
.lg-num .d{color:var(--muted);font-size:14px;line-height:1.625}

.lg-list{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:12px}
.lg-list li{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:20px;color:var(--muted)}
.lg-list svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--tone-ink)}

.lg-check{display:flex;align-items:flex-start;gap:16px;padding:16px;border-radius:12px;background:var(--surface-1);border:1px solid var(--border)}
.lg-check i{width:24px;height:24px;border-radius:50%;flex:none;margin-top:2px;display:grid;place-items:center;background:var(--tone-100);color:var(--tone-ink)}
.lg-check i svg{width:14px;height:14px}
.lg-check .t{font-size:14px;line-height:20px;font-weight:600;color:var(--text);margin-bottom:2px}
.lg-check .d{font-size:12px;line-height:16px;color:var(--muted)}

.lg-callout{padding:20px;border-radius:16px;background:var(--tone-50);border:1px solid var(--tone-line);margin-bottom:24px}
.lg-callout.sm{padding:16px;border-radius:12px}
.lg-callout .k{display:flex;align-items:center;gap:8px;font-size:14px;line-height:20px;font-weight:700;color:var(--tone-ink);margin-bottom:12px}
.lg-callout .k svg{width:16px;height:16px;flex:none}
.lg-callout p{font-size:14px;line-height:1.625;color:var(--muted)}
.lg-callout a{color:var(--tone-ink);font-weight:600;text-decoration:none}

/* Their entrances: the head rises 24px over .6s on load, each section 20px
   over .5s once it is 80px into view, and the Contents label and rows come
   in 50ms apart. Only with motion allowed and the script running — the
   page's <head> sets lg-anim, and takes it back if legal.js never arrives. */
.lg-anim .lg-rise,.lg-anim .lg-sec{opacity:0;transform:translateY(24px)}
.lg-anim .lg-sec{transform:translateY(20px)}
.lg-anim .lg-rise.in{opacity:1;transform:none;transition:opacity .6s ease-out,transform .6s ease-out}
.lg-anim .lg-sec.in{opacity:1;transform:none;transition:opacity .5s ease-out,transform .5s ease-out}
.lg-anim .lg-toc-label{opacity:0;transform:translateY(8px);transition:opacity .4s ease-out .05s,transform .4s ease-out .05s}
.lg-anim .lg-toc a{opacity:0;transform:translateX(-16px)}
.lg-anim .lg-toc.in .lg-toc-label,.lg-anim .lg-toc.in a{opacity:1;transform:none}