/* =========================================================================
   LOYEXO — Brand Design Tokens  (single source of truth for ALL alternatives)
   Import FIRST, before any alternative-specific CSS:
     <link rel="stylesheet" href="/shared/css/brand-tokens.css">
   Fonts: Plus Jakarta Sans (headings) + Outfit (body) via Google Fonts.
   ========================================================================= */

:root {
  /* ---- Brand core ------------------------------------------------------- */
  --navy:        #1C315F;   /* ana lacivert  */
  --navy-2:      #223A6C;   /* ikincil lacivert */
  --orange:      #ED9B25;   /* turuncu aksan */
  --teal:        #2A8F8A;   /* 3. ayirt edici renk (logo teal) */

  /* ---- Brand tints / shades (derived, accessible) ----------------------- */
  --navy-900:    #0E1A33;
  --navy-800:    #142546;
  --navy-700:    #16284D;
  --navy-600:    #1C315F;
  --navy-500:    #2A477F;
  --navy-400:    #3F5C92;
  --navy-200:    #B9C4DA;
  --navy-100:    #E7ECF4;
  --navy-050:    #EEF1F6;

  --teal-700:    #20706C;
  --teal-600:    #2A8F8A;
  --teal-500:    #34A39D;
  --teal-400:    #4FB3AE;
  --teal-200:    #A7DAD7;
  --teal-100:    #CFEBE9;
  --teal-050:    #ECF7F6;

  --orange-700:  #C97E12;
  --orange-600:  #ED9B25;
  --orange-400:  #F4B860;
  --orange-200:  #F8D49A;
  --orange-100:  #FBE9CC;
  --orange-050:  #FDF4E6;

  /* ---- Neutrals --------------------------------------------------------- */
  --ink:         #1A1A1A;   /* koyu metal / ink */
  --gray:        #5B6472;   /* gri metin */
  --gray-400:    #8A93A3;
  --gray-200:    #C7CDD8;
  --tint:        #EEF1F6;   /* acik lacivert tint (zemin) */
  --hairline:    #D9DEE8;   /* ince cizgi */
  --white:       #FFFFFF;
  --bg:          #FFFFFF;
  --bg-soft:     #F7F9FC;

  /* ---- Semantic --------------------------------------------------------- */
  --color-text:        var(--ink);
  --color-text-muted:  var(--gray);
  --color-heading:     var(--navy);
  --color-accent:      var(--orange);
  --color-accent-2:    var(--teal);
  --color-link:        var(--navy);
  --color-link-hover:  var(--teal);
  --color-border:      var(--hairline);
  --color-surface:     var(--white);
  --color-surface-2:   var(--tint);
  --focus-ring:        0 0 0 3px rgba(42,143,138,.45);

  /* ---- Typography ------------------------------------------------------- */
  --font-head: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Type scale (fluid, oturmus — abartisiz) */
  --fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);     /* 40 -> 64 */
  --fs-h1:      clamp(2rem,   1.45rem + 2.2vw, 3rem);     /* 32 -> 48 */
  --fs-h2:      clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem);  /* 24 -> 34 */
  --fs-h3:      clamp(1.25rem,1.1rem + 0.6vw, 1.5rem);    /* 20 -> 24 */
  --fs-lead:    clamp(1.075rem,1rem + 0.35vw,1.25rem);    /* 17 -> 20 */
  --fs-body:    1rem;        /* 16 */
  --fs-small:   0.875rem;    /* 14 */
  --fs-label:   0.75rem;     /* 12 */

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.6;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extra:   800;
  --tracking-tight: -0.02em;
  --tracking-label:  0.08em;

  /* ---- Spacing scale (8pt) --------------------------------------------- */
  --sp-1: .25rem;  --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* ---- Radii ------------------------------------------------------------ */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* ---- Elevation (premium, soft — asiri glow YOK) --------------------- */
  --shadow-xs: 0 1px 2px rgba(28,49,95,.06);
  --shadow-sm: 0 2px 8px rgba(28,49,95,.07);
  --shadow-md: 0 10px 30px rgba(28,49,95,.10);
  --shadow-lg: 0 24px 60px rgba(28,49,95,.14);

  /* ---- Layout ----------------------------------------------------------- */
  --container:    1200px;
  --container-md: 960px;
  --container-sm: 760px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --header-h: 76px;

  /* ---- Motion ----------------------------------------------------------- */
  --t-fast: .18s ease;
  --t-base: .28s cubic-bezier(.4,0,.2,1);
  --t-slow: .5s  cubic-bezier(.4,0,.2,1);

  --z-header: 1000;
  --z-dropdown: 1010;
  --z-overlay: 1100;
}

/* =========================================================================
   Minimal base reset (alternatives layer their own design on top)
   ========================================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-base);
  color:var(--color-text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ font-family:var(--font-head); color:var(--color-heading);
  line-height:var(--lh-snug); font-weight:var(--fw-bold); letter-spacing:var(--tracking-tight); margin:0 0 .5em; }
h1{ font-size:var(--fs-h1); } h2{ font-size:var(--fs-h2); } h3{ font-size:var(--fs-h3); }
p{ margin:0 0 1rem; }
a{ color:var(--color-link); text-decoration:none; transition:color var(--t-fast); }
a:hover{ color:var(--color-link-hover); }
img,svg{ max-width:100%; height:auto; display:block; }
ul,ol{ margin:0; padding:0; }
:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:4px; }

.skip-link{ position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff;
  padding:.6rem 1rem; border-radius:0 0 var(--r-sm) 0; z-index:var(--z-overlay); }
.skip-link:focus{ left:0; color:#fff; }

.lx-container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.lx-section{ padding-block:var(--section-y); }
.lx-eyebrow{ font-family:var(--font-head); font-size:var(--fs-label); font-weight:var(--fw-semibold);
  letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--teal); }
.visually-hidden{ position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }

/* Grayscale, uniform customer logo wall (placeholder logos) */
.logo-wall{ display:grid; gap:clamp(1rem,3vw,2.5rem); align-items:center; grid-template-columns:repeat(2,1fr); }
@media(min-width:640px){ .logo-wall{ grid-template-columns:repeat(3,1fr);} }
@media(min-width:960px){ .logo-wall{ grid-template-columns:repeat(6,1fr);} }
.logo-wall .logo-chip{ filter:grayscale(1); opacity:.6; transition:filter var(--t-base),opacity var(--t-base);
  height:44px; display:flex; align-items:center; justify-content:center; font-family:var(--font-head);
  font-weight:700; color:var(--gray); border:1px solid var(--hairline); border-radius:var(--r-sm); }
.logo-wall .logo-chip:hover{ filter:grayscale(0); opacity:1; color:var(--navy); }

/* Reveal-on-scroll (driven by loyexo-ui.js; safe default = visible) */
[data-reveal]{ opacity:1; }
.js [data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.js [data-reveal].in-view{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{ opacity:1!important; transform:none!important; }
}