/* ==========================================================
   ASVARIS · base.css
   Tasarım token'ları, reset, tipografi, butonlar, yardımcılar
   ========================================================== */

/* ── YENİ RENK PALETİ ──
   Lacivert / LinkedIn Mavisi / Gri / Beyaz / Teal
   
   Ana Renkler:
   --navy:    #0B2545  → Koyu lacivert (primary brand)
   --blue:      #004182  → LinkedIn mavisi — koyu & baskın ana mavi
   --blue-dark: #002F5C  → Daha da koyu ton (derinlik/gradyan)
   --teal:      #12B8E4  → Teal/yeşil-mavi aksanı
   --ink:     #0A1628  → En koyu metin rengi
   --ink-2:   #3D4F6F  → İkincil metin
   --muted:   #6B7B99  → Pasif metin
   --paper:   #F7F8FC  → Arka plan açık gri-mavi
   --paper-2: #FFFFFF  → Saf beyaz
   --soft:    #EDF0F7  → Hafif gri arka plan
   
   Platform Renkleri:
   --vixion:  #004182  → Mavi (strateji)
   --pixion:  #12B8E4  → Teal (süreç)
   --aixion:  #0B2545  → Lacivert (yapay zekâ)
   ========================================================== */

:root{
  --paper:#FAFAFE;
  --paper-2:#FFFFFF;
  --soft:#F1F0FB;
  --ink:#0A1628;
  --ink-2:#3D4F6F;
  --muted:#6B7B99;
  --hair:rgba(10,22,40,.09);
  --hair-2:rgba(10,22,40,.16);
  --navy:#0B2545;
  --blue:#004182;
  --blue-dark:#002F5C;
  --teal:#12B8E4;
  --vixion:#1F2BDD;
  --prixion:#12B8E4; 
  --aixion:#7A2FE0;
  --grad:linear-gradient(115deg,#7A2FE0,#1F2BDD 50%,#14D2F0);
  --maxw:1160px;
  --f-d:'Jost',system-ui,sans-serif;
  --f-b:'Inter',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:132px}
body{background:var(--paper);color:var(--ink);font-family:var(--f-b);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ── Sabit arka plan ışıltısı: sayfa bu katmanın üzerinde kayar ── */
body::before{content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(42% 34% at 14% 18%,rgba(20,210,240,.10),transparent 70%),
    radial-gradient(46% 38% at 86% 12%,rgba(122,47,224,.09),transparent 72%),
    radial-gradient(50% 42% at 78% 84%,rgba(31,43,221,.07),transparent 72%),
    radial-gradient(38% 32% at 22% 78%,rgba(20,210,240,.06),transparent 70%);
  filter:blur(2px);
  animation:bgShimmer 26s ease-in-out infinite alternate}
@keyframes bgShimmer{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.9}
  50%{transform:translate3d(1.5%,-1%,0) scale(1.03);opacity:1}
  100%{transform:translate3d(-1.5%,1%,0) scale(1.015);opacity:.85}}
@media(prefers-reduced-motion:reduce){body::before{animation:none}}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--f-d);font-weight:500;letter-spacing:-.01em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.kick{font-family:var(--f-d);font-size:12.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:#1F2BDD}
.kick.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Sticky header altında anchor hedefleri için boşluk */
[id]{scroll-margin-top:92px}

/* ==========================================================
   Logo fallback'leri (JS: js/main.js → initLogoFallbacks)
   ========================================================== */
.logo-slot{display:inline-flex;align-items:center}
.logo-slot img{height:var(--lh,30px);width:auto;max-width:180px;object-fit:contain}
.logo-slot .fb{display:none}
.logo-slot.nf img{display:none}
.logo-slot.nf .fb{display:inline-flex;align-items:baseline}
.fb{font-family:var(--f-d);font-weight:300;letter-spacing:.3em;color:var(--ink);line-height:1}
.fb x{font-style:normal;font-weight:400;-webkit-background-clip:text;background-clip:text;color:transparent}
.fb-vixion x{background-image:linear-gradient(180deg,#378FE9,#004182)}
.fb-pixion x{background-image:linear-gradient(180deg,#14D2F0,#12B8E4)}
.fb-aixion x{background-image:linear-gradient(180deg,#5B3FEA,#7A2FE0)}
.fb-ixi x{background-image:var(--grad)}
.fb-asvaris{display:inline-flex;align-items:center;letter-spacing:.32em}
.fb-asvaris svg{width:.8em;height:.8em;margin:0 .06em;transform:translateY(1px)}

/* ==========================================================
   Butonlar
   ========================================================== */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px;padding:13px 26px;border-radius:100px;cursor:pointer;border:0;transition:transform .22s,box-shadow .28s,background .2s,border-color .2s,color .2s;white-space:nowrap}
.btn .ar{transition:transform .22s}
.btn:hover .ar{transform:translateX(3px)}
.btn-ink{background:#1F2BDD;color:#fff;box-shadow:0 14px 30px rgba(31,43,221,.24)}
.btn-ink:hover{transform:translateY(-2px);background:#1D4ED8;box-shadow:0 18px 38px rgba(31,43,221,.32)}
.btn-line{background:transparent;color:var(--ink);border:1px solid var(--hair-2)}
.btn-line:hover{border-color:var(--ink)}
.btn-grad{background:linear-gradient(120deg,#7A2FE0,#1F2BDD,#14D2F0);color:#fff;box-shadow:0 14px 32px rgba(31,43,221,.32)}
.btn-grad:hover{transform:translateY(-2px);box-shadow:0 20px 42px rgba(31,43,221,.42)}
.btn-navy{background:var(--navy);color:#fff;box-shadow:0 14px 30px rgba(11,37,69,.25)}
.btn-navy:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(11,37,69,.32)}

/* ==========================================================
   Bölüm iskeleti
   ========================================================== */
.blk{padding:70px 0}
.sec-head{max-width:640px;margin-bottom:60px}
.sec-head.center{margin:0 auto 60px;text-align:center}
.sec-head h2{font-size:clamp(30px,3.9vw,46px);line-height:1.12;margin:16px 0 14px}
.sec-head h2 b{font-weight:600}
.sec-head p{font-size:16.5px;color:var(--ink-2)}

/* Scroll'da beliren öğeler */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
.rv.in{opacity:1;transform:none}

@media(max-width:560px){
  .wrap{padding:0 20px}
  .blk{padding:50px 0}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}

/* ==========================================================
   Dil + Tema tuslari (js/i18n.js enjekte eder)
   ========================================================== */
.tt-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;min-width:40px;padding:0 12px;border-radius:100px;border:1px solid var(--hair-2);background:rgba(255,255,255,.55);color:var(--ink-2);font-family:var(--f-d);font-size:12.5px;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.tt-btn:hover{color:#1F2BDD;border-color:#1F2BDD;background:rgba(0,65,130,.07)}
.tt-btn svg{width:17px;height:17px;display:block}
.tt-code{font-size:12.5px;font-weight:600;line-height:1}
.tt-sun{display:none}
@media(max-width:560px){
  .nav-cta .btn-ink{display:none}
  .tt-btn{height:36px;min-width:36px;padding:0 10px}
}