/* ==========================================================================
   SanalAjans — temel katman
   Tasarım dili: yüksek kontrast, dar harf aralığı, geniş boşluk,
   hareket yalnızca kaydırma konumuna bağlı (scrubbed).
   ========================================================================== */

/* Marka jetonları tek doğruluk kaynağıdır; aşağıdaki kısa adlar onlara bağlanır. */
@import url('../brand/tokens.css');

/* Sayfalar arası geçiş — tarayıcı destekliyorsa yumuşak çapraz geçiş */
@view-transition { navigation: auto }

@property --p { syntax:'<number>'; inherits:true; initial-value:0 }

:root{
  /* renk — brand/tokens.css içindeki anlamsal rollere bağlı */
  --ink:        var(--sa-text);
  --ink-2:      var(--sa-text-muted);
  --ink-3:      var(--sa-text-subtle);
  --paper:      var(--sa-bg);
  --paper-2:    var(--sa-bg-sunken);
  --hair:       var(--sa-border);
  --accent:     var(--sa-brand);
  --accent-ink: var(--sa-brand-hover);

  /* koyu sahneler */
  --void:       var(--sa-ink-950);
  --void-2:     var(--sa-ink-900);
  --void-ink:   var(--sa-ink-50);
  --void-ink-2: var(--sa-ink-400);
  --void-hair:  var(--sa-border-inverse);

  /* ölçü */
  --wrap:       var(--sa-measure);
  --wrap-wide:  var(--sa-measure-wide);
  --nav-h:      52px;

  /* hareket */
  --ease:       var(--sa-ease);
  --ease-out:   var(--sa-ease-out);
  --fast:       var(--sa-dur-fast);
  --slow:       var(--sa-dur-slow);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 20px);
}

body{
  background:var(--paper);
  color:var(--ink);
  /* macOS'ta gerçek SF Pro'ya düşer */
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
              "Inter", "Helvetica Neue", system-ui, sans-serif;
  font-size:17px;
  line-height:1.5;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden }

img,svg,canvas{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }
button{ background:none; border:0; cursor:pointer }
ul,ol{ list-style:none }

::selection{ background:var(--accent); color:#fff }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px }

/* ==========================================================================
   Yerleşim
   ========================================================================== */
.wrap{ width:min(var(--wrap), 87.5%); margin-inline:auto }
.wrap--wide{ width:min(var(--wrap-wide), 90%) }

.band{ padding:clamp(80px,11vw,160px) 0; position:relative }
.band--tight{ padding:clamp(56px,7vw,96px) 0 }
.band--grey{ background:var(--paper-2) }
.band--dark{ background:var(--void); color:var(--void-ink) }
.band--dark .lead,.band--dark .eyebrow{ color:var(--void-ink-2) }

/* ==========================================================================
   Tipografi
   ========================================================================== */
.eyebrow{
  font-size:clamp(19px,2.2vw,24px); font-weight:600; letter-spacing:-.015em;
  color:var(--accent); margin-bottom:6px;
}
.display{
  font-size:clamp(44px,8.4vw,92px); font-weight:700; line-height:1.03;
  letter-spacing:-.035em;
}
.h1{ font-size:clamp(38px,6vw,68px); font-weight:700; line-height:1.06; letter-spacing:-.03em }
.h2{ font-size:clamp(30px,4.4vw,52px); font-weight:700; line-height:1.09; letter-spacing:-.026em }
.h3{ font-size:clamp(23px,2.6vw,32px); font-weight:600; line-height:1.15; letter-spacing:-.02em }
.h4{ font-size:19px; font-weight:600; letter-spacing:-.014em }
.lead{
  font-size:clamp(19px,2.1vw,25px); font-weight:400; line-height:1.42;
  letter-spacing:-.015em; color:var(--ink-2);
}
.body{ font-size:17px; line-height:1.53; color:var(--ink-2) }
.small{ font-size:14px; line-height:1.45; color:var(--ink-3) }
.tiny{ font-size:12px; line-height:1.4; color:var(--ink-3) }
.mono{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.92em; letter-spacing:0 }

.center{ text-align:center }
.measure{ max-width:640px }
.center .measure{ margin-inline:auto }

.grad-ink{
  background:linear-gradient(96deg,#5e5ce6,#3ec7e0 46%,#b15ce6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ==========================================================================
   Bağlantı ve düğmeler
   ========================================================================== */
.link{
  color:var(--accent); font-size:17px; display:inline-flex; align-items:center; gap:5px;
  transition:opacity var(--fast) var(--ease);
}
.link:hover{ opacity:.72 }
.link::after{ content:'›'; font-size:1.25em; line-height:1; transform:translateY(-1px); transition:transform var(--fast) var(--ease) }
.link:hover::after{ transform:translate(3px,-1px) }
.band--dark .link{ color:#6ea8fe }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 23px; border-radius:980px; font-size:17px; font-weight:400;
  background:var(--accent); color:#fff; border:1px solid transparent;
  transition:background var(--fast) var(--ease), transform var(--fast) var(--ease),
             opacity var(--fast) var(--ease), color var(--fast) var(--ease),
             border-color var(--fast) var(--ease);
}
.btn:hover{ background:var(--accent-ink) }
.btn:active{ transform:scale(.975) }
.btn--ghost{ background:transparent; color:var(--accent); border-color:currentColor }
.btn--ghost:hover{ background:rgba(94,92,230,.08); color:var(--accent) }
.btn--plain{ background:var(--ink); color:var(--paper) }
.btn--plain:hover{ background:#000 }
.btn--sm{ padding:8px 16px; font-size:14px }
.btn--lg{ padding:15px 30px; font-size:19px }
.band--dark .btn--ghost{ color:#6ea8fe }
.btn[disabled]{ opacity:.4; pointer-events:none }

.btn-row{ display:flex; gap:14px; flex-wrap:wrap }
.center .btn-row{ justify-content:center }

/* ==========================================================================
   Gezinme
   ========================================================================== */
.nav{
  position:sticky; top:0; z-index:600; height:var(--nav-h);
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--hair);
  transition:background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.nav__in{
  width:min(1024px,90%); margin-inline:auto; height:100%;
  display:flex; align-items:center; gap:clamp(14px,3.2vw,38px);
}
.nav__logo{ display:flex; align-items:center; gap:8px; font-size:16px; font-weight:600; letter-spacing:-.02em }
.nav__logo svg{ width:22px; height:22px; flex:none }
.nav__logo .seg{ fill:none; stroke:currentColor; stroke-width:6.5; stroke-linecap:round }
.nav__logo .core{ fill:var(--sa-accent) }
.nav__logo b{ font-weight:600 }
.nav__logo span{ font-weight:400; opacity:.62 }

.nav__menu{ display:flex; gap:clamp(10px,2.4vw,30px); margin-left:auto }
.nav__menu a{
  font-size:12px; letter-spacing:-.005em; color:var(--ink); opacity:.86; padding:4px 0;
  position:relative; transition:opacity var(--fast) var(--ease);
}
.nav__menu a:hover{ opacity:1 }
.nav__menu a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1.5px;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform var(--fast) var(--ease);
}
.nav__menu a[aria-current="page"]{ opacity:1; font-weight:600 }
.nav__menu a[aria-current="page"]::after{ transform:scaleX(1) }

.nav__cta{
  font-size:12px; font-weight:500; padding:5px 12px; border-radius:980px;
  background:var(--accent); color:#fff; margin-left:6px;
  transition:background var(--fast) var(--ease);
}
.nav__cta:hover{ background:var(--accent-ink) }

.nav__toggle{ display:none; width:26px; height:18px; margin-left:auto; position:relative }
.nav__toggle i{
  position:absolute; left:0; width:100%; height:1.5px; background:var(--ink); border-radius:2px;
  transition:transform var(--slow) var(--ease), opacity var(--fast) var(--ease);
}
.nav__toggle i:nth-child(1){ top:2px } .nav__toggle i:nth-child(2){ bottom:2px }
body.menu-open .nav__toggle i:nth-child(1){ transform:translateY(6px) rotate(45deg) }
body.menu-open .nav__toggle i:nth-child(2){ transform:translateY(-6px) rotate(-45deg) }

.nav__sheet{
  position:fixed; inset:var(--nav-h) 0 0; z-index:590; background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(24px); backdrop-filter:saturate(180%) blur(24px);
  padding:26px 0; opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity var(--fast) var(--ease), transform var(--slow) var(--ease), visibility var(--fast);
}
body.menu-open .nav__sheet{ opacity:1; visibility:visible; transform:none }
.nav__sheet a{
  display:block; font-size:26px; font-weight:600; letter-spacing:-.024em;
  padding:13px 0; border-bottom:1px solid var(--hair);
  opacity:0; transform:translateY(14px);
  transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
body.menu-open .nav__sheet a{ opacity:1; transform:none }
body.menu-open .nav__sheet a:nth-child(1){ transition-delay:.04s }
body.menu-open .nav__sheet a:nth-child(2){ transition-delay:.08s }
body.menu-open .nav__sheet a:nth-child(3){ transition-delay:.12s }
body.menu-open .nav__sheet a:nth-child(4){ transition-delay:.16s }
body.menu-open .nav__sheet a:nth-child(5){ transition-delay:.20s }
body.menu-open .nav__sheet a:nth-child(6){ transition-delay:.24s }

/* İnce duyuru şeridi */
.ribbon{
  background:var(--paper-2); text-align:center; padding:11px 0;
  font-size:14px; color:var(--ink-2); border-bottom:1px solid var(--hair);
}
.ribbon b{ color:var(--ink); font-weight:600 }

/* ==========================================================================
   Sayfa başlığı (alt sayfalar)
   ========================================================================== */
.phead{ padding:clamp(60px,9vw,120px) 0 clamp(40px,6vw,70px); text-align:center }
.phead .lead{ margin:18px auto 0; max-width:620px }
.phead__crumb{ font-size:13px; color:var(--ink-3); margin-bottom:14px }
.phead__crumb a:hover{ color:var(--ink) }

/* ==========================================================================
   Kaydırmaya bağlı yardımcılar
   JS her karede --p (0..1) yazar; hareket tamamen kaydırma konumuna bağlıdır.
   ========================================================================== */
.scene{ position:relative }
.scene__pin{
  position:sticky; top:0; height:100svh;
  display:grid; place-items:center; overflow:hidden;
}

/* kaydırdıkça kelime kelime koyulaşan metin */
.wordflow{ font-size:clamp(26px,4.4vw,52px); font-weight:700; line-height:1.22; letter-spacing:-.026em }
.wordflow w{ display:inline-block; transition:color .18s linear }
.wordflow .off{ color:rgba(0,0,0,.16) }
.band--dark .wordflow .off,.scene--dark .wordflow .off{ color:rgba(255,255,255,.2) }

/* girişte bir kez beliren öğeler (kaydırmaya bağlı olmayan yerlerde) */
.rise{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .9s var(--ease-out) }
.rise.in{ opacity:1; transform:none }

/* ==========================================================================
   Ortak bileşenler
   ========================================================================== */
.tile{
  background:var(--paper); border:1px solid var(--hair); border-radius:20px;
  padding:28px; transition:border-color var(--fast) var(--ease), transform var(--slow) var(--ease),
                           box-shadow var(--slow) var(--ease);
}
.tile:hover{ border-color:rgba(0,0,0,.2); transform:translateY(-3px); box-shadow:0 18px 40px -24px rgba(0,0,0,.3) }
.band--grey .tile{ background:var(--paper) }
.band--dark .tile{ background:#141416; border-color:var(--void-hair) }
.band--dark .tile:hover{ border-color:rgba(255,255,255,.3) }

/* Izgaralar
   Sabit sayıda öğe için `auto-fit` kullanılmaz: kap genişliğine göre
   öğeden fazla kolon üretip son satırı tırtıklı bırakır. Sayı belliyse
   kolon sayısı da açıkça yazılır. Sayı değişkense (katalog, göstergeler)
   esneyerek satırı dolduran flex tercih edilir. */
.grid{ display:grid; gap:20px }
.grid--2{ grid-template-columns:repeat(2,1fr) }
.grid--3{ grid-template-columns:repeat(3,1fr) }
.grid--4{ grid-template-columns:repeat(4,1fr) }

@media (max-width:900px){
  .grid--3,.grid--4{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:560px){
  .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr }
}

/* Değişken sayıda öğe: sarılan satır daima tam genişliği doldurur */
.flexgrid{ display:flex; flex-wrap:wrap; gap:12px }
.flexgrid > *{ flex:1 1 180px }

.chip{
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:980px;
  border:1px solid var(--hair); font-size:13px; color:var(--ink-2); background:var(--paper);
}
.chip--on{ background:var(--ink); color:var(--paper); border-color:transparent }
.band--dark .chip{ border-color:var(--void-hair); color:var(--void-ink-2); background:transparent }

.rule{ height:1px; background:var(--hair); border:0 }
.band--dark .rule{ background:var(--void-hair) }

/* Açılır liste (SSS vb.) */
.disclose{ border-bottom:1px solid var(--hair) }
.disclose__btn{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:22px 2px; text-align:left; font-size:19px; font-weight:500; letter-spacing:-.015em;
  transition:color var(--fast) var(--ease);
}
.disclose__btn:hover{ color:var(--accent) }
.disclose__btn i{ position:relative; width:14px; height:14px; flex:none }
.disclose__btn i::before,.disclose__btn i::after{
  content:''; position:absolute; left:50%; top:50%; background:currentColor; border-radius:2px;
  transition:transform .45s var(--ease);
}
.disclose__btn i::before{ width:14px; height:1.5px; transform:translate(-50%,-50%) }
.disclose__btn i::after{ width:1.5px; height:14px; transform:translate(-50%,-50%) }
.disclose.open .disclose__btn{ color:var(--accent) }
.disclose.open .disclose__btn i::after{ transform:translate(-50%,-50%) rotate(90deg) scaleY(0) }
.disclose__body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease) }
.disclose.open .disclose__body{ grid-template-rows:1fr }
.disclose__body > div{ overflow:hidden }
.disclose__body p{ padding-bottom:22px; color:var(--ink-2); max-width:70ch }

/* ==========================================================================
   Altbilgi
   ========================================================================== */
.foot{ background:var(--paper-2); font-size:12px; color:var(--ink-3); padding:40px 0 22px }
.foot__note{ max-width:var(--wrap); margin:0 auto 20px; padding-bottom:18px; border-bottom:1px solid var(--hair); line-height:1.5 }
.foot__cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:26px; padding-bottom:22px }
.foot__cols h5{ font-size:12px; font-weight:600; color:var(--ink); margin-bottom:9px }
.foot__cols a{ display:block; padding:4px 0; transition:color var(--fast) var(--ease) }
.foot__cols a:hover{ color:var(--ink); text-decoration:underline }
.foot__end{
  border-top:1px solid var(--hair); padding-top:16px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.foot__end nav{ display:flex; gap:16px; flex-wrap:wrap }

/* ==========================================================================
   Duyarlılık
   ========================================================================== */
@media (max-width:840px){
  .nav__menu,.nav__cta{ display:none }
  .nav__toggle{ display:block }
  .foot__cols{ grid-template-columns:repeat(2,1fr) }
}

/* Ekran okuyucu */
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.skip{
  position:absolute; left:12px; top:-60px; z-index:700; background:var(--ink); color:#fff;
  padding:10px 16px; border-radius:10px; transition:top var(--fast) var(--ease);
}
.skip:focus{ top:10px }

/* ==========================================================================
   Hareket azaltma — sahneler son karede sabitlenir, sayfa okunur kalır
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  .rise{ opacity:1; transform:none }
  .wordflow .off{ color:inherit }
  .scene__pin{ position:relative; height:auto; min-height:0; padding:60px 0 }
  @view-transition{ navigation:none }
}