/* WebJoiner site v2 — base: tokens, font, reset, typography, primitives */
@font-face{font-family:"Geist";src:url(/assets/fonts/geist-latin.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;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:"Geist";src:url(/assets/fonts/geist-latin-ext.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;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}

:root{
  /* colour */
  --ink:#0C2233;          /* headings, strong text   16.3:1 on white */
  --text:#33475A;         /* body                     9.6:1 */
  --muted:#56657A;        /* secondary text           5.9:1 */
  --faint:#94A3B4;        /* decorative only, never text */
  --line:#E3E9EF;
  --line-strong:#CFD8E2;
  --bg:#FFFFFF;
  --bg-soft:#F6F9FB;
  --tint:#E8F7F1;         /* security panel, selected states */
  /* brand teal, sampled from the logo wordmark (#00E49F) — see DESIGN.md contrast table */
  --accent-fill:#00E49F;  /* logo teal: primary button, badges, active fills — always with --ink text (9.7:1) */
  --accent-fill-hover:#00C98C; /* fill hover, --ink text 7.5:1 */
  --accent:#007A55;       /* dark teal: links, text/icons on white, focus ring  5.4:1 */
  --accent-strong:#005C40;/* link hover, text on --accent-soft  8.1:1 (7.4:1 on soft) */
  --accent-soft:#E3FAF1;  /* icon tiles, info pills */
  --accent-line:#B3EDD7;  /* borders on soft teal surfaces */
  --accent-bright:#00E49F;/* decorative only (mesh, rails, bars) */
  --amber:#8A5200;        /* "Yakında", beta — text 6.4:1 */
  --amber-soft:#FDF1DC;
  --amber-bright:#F5A524; /* decorative only */
  --ok:#16794A; --ok-soft:#E3F4EA;
  --err:#B42318; --err-soft:#FDECEA;
  --wa:#1F8F4E;

  /* type */
  --font:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular","Cascadia Mono",Menlo,Consolas,monospace;
  --fs-12:.75rem; --fs-13:.8125rem; --fs-14:.875rem; --fs-16:1rem; --fs-18:1.125rem;
  --fs-20:1.25rem; --fs-24:1.5rem; --fs-32:clamp(1.625rem,1.2rem + 1.6vw,2rem);
  --fs-40:clamp(1.875rem,1.3rem + 2.2vw,2.5rem);
  --fs-56:clamp(2.25rem,1.4rem + 3.4vw,3.5rem);

  /* space (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px; --s30:120px;

  /* radius */
  --r-sm:6px; --r:8px; --r-md:10px; --r-lg:12px; --r-pill:999px;

  /* shadow: layered, blue-grey, never pure black */
  --sh-1:0 1px 2px rgba(12,34,51,.06),0 1px 1px rgba(12,34,51,.04);
  --sh-2:0 2px 4px rgba(12,34,51,.04),0 6px 16px -4px rgba(12,34,51,.10);
  --sh-3:0 3px 6px rgba(12,34,51,.04),0 18px 36px -12px rgba(12,34,51,.16),0 30px 60px -30px rgba(12,34,51,.22);
  --sh-focus:0 0 0 3px #fff,0 0 0 5px var(--accent);

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:150ms; --t:240ms; --t-slow:600ms;

  --container:1200px;
  --gutter:clamp(16px,4vw,32px);
  --header-h:64px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--fs-16)/1.6 var(--font);font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4{color:var(--ink);margin:0;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:var(--fs-56);line-height:1.06;letter-spacing:-.035em}
h2{font-size:var(--fs-40);line-height:1.12;letter-spacing:-.03em}
h3{font-size:var(--fs-20);line-height:1.3;letter-spacing:-.015em}
h4{font-size:var(--fs-16);line-height:1.4;letter-spacing:-.01em}
p{margin:0}
p+p{margin-top:var(--s3)}
ul,ol{margin:0;padding:0}
a{color:var(--accent);text-decoration:none;text-underline-offset:3px}
a:hover{color:var(--accent-strong);text-decoration:underline}
strong{color:var(--ink);font-weight:600}
code,.mono{font-family:var(--mono);font-size:.875em}
abbr[title]{text-decoration:underline dotted;text-underline-offset:3px;cursor:help}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:#B3EDD7;color:var(--ink)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:var(--r)}
.skip:focus{top:12px;color:#fff}

.container{width:100%;max-width:calc(var(--container) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.lede{font-size:var(--fs-18);line-height:1.6;color:var(--muted);max-width:62ch}
.small{font-size:var(--fs-14)}
.muted{color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}

/* buttons */
.btn{--bg:var(--accent-fill);--fg:var(--ink);--bd:transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:var(--r-pill);border:1px solid var(--bd);background:var(--bg);color:var(--fg);font:600 var(--fs-16)/1.2 var(--font);letter-spacing:-.005em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),border-color var(--t-fast)}
.btn:hover{--bg:var(--accent-fill-hover);color:var(--fg);text-decoration:none;box-shadow:var(--sh-2)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:var(--sh-focus)}
.btn--secondary{--bg:#fff;--fg:var(--ink);--bd:var(--line-strong);box-shadow:var(--sh-1)}
.btn--secondary:hover{--bg:#fff;--bd:var(--faint)}
.btn--sm{min-height:36px;padding:7px 14px;font-size:var(--fs-14)}
.btn svg{width:18px;height:18px;flex:none}

/* text link with chevron */
.more{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--accent)}
.more::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:1.75px 1.75px 0 0;transform:rotate(45deg);transition:transform var(--t-fast) var(--ease)}
.more:hover{text-decoration:none}
.more:hover::after{transform:translateX(3px) rotate(45deg)}

/* pills / badges */
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:var(--r-pill);font:500 var(--fs-12)/1.6 var(--font);white-space:nowrap;background:var(--bg-soft);color:var(--muted);border:1px solid var(--line)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.pill--ok{background:var(--ok-soft);color:var(--ok);border-color:#C5E6D2}
.pill--warn,.pill--soon{background:var(--amber-soft);color:var(--amber);border-color:#F4DDB3}
.pill--err{background:var(--err-soft);color:var(--err);border-color:#F6CFCB}
.pill--info{background:var(--accent-soft);color:var(--accent-strong);border-color:var(--accent-line)}
.pill--plain::before,.pill--soon::before{display:none}
.tag-soon{display:inline-block;margin-left:6px;padding:0 6px;border-radius:4px;font:500 11px/18px var(--font);color:var(--amber);background:var(--amber-soft);vertical-align:1px;white-space:nowrap}

/* placeholders (contact / legal data not yet known) */
.ph{background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(138,82,0,.07) 4px 8px);border:1px dashed #D9B274;border-radius:4px;padding:0 4px;color:var(--amber);font-weight:500}

/* reveal (JS adds .js to html; reduced motion disables) */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
}