/* SMART TASARIM KITI v1 - jetonlar.css (uretildi 2026-10-16, scripts/kit-uret.mjs).
   Renk, tipografi, golge, yaricap jetonlari + metrigi esitlenmis yedek fontlar + taban kurallar.
   KOPYALANIR, DUZENLENMEZ. Urune ozgu degisiklik: urun.css. Cerceve: Smart360/docs/tasarim-cercevesi.md */
/* SMART360 YENI TASARIM (2026-10-13) - onizleme kabugu (/yeni-tasarim/*).
   Canli styles.css'ten BAGIMSIZ; onaydan sonra yer degistirir.
   Ilkeler (kullanici): yazi az, her bolumde baskin gorsel; yogun animasyon AMA
   - icerik ilk anda gorunur: giris animasyonlari yalniz transform (opacity'de
     bekleyen icerik yok);
   - yalniz transform/opacity animasyonu, ekran disinda duran donguler;
   - prefers-reduced-motion: donguler, paralaks ve girisler kapanir.
   Yalniz acik tema. Gorseller CDN'de (cdn.smart360.com.tr), burada kod. */

:root{
  --zemin:#f6f5f1; --kart:#fff; --kart2:#fbfaf8;
  --murekkep:#15111d; --metin:#3a3446; --soluk:#6c6579; --silik:#9a93a6;
  --cizgi:rgba(21,17,29,.09); --cizgi2:rgba(21,17,29,.16);
  --marka:#6b3fd4; --marka-koyu:#4a2a9c; --marka-acik:#efe9fd; --marka-ton:rgba(107,63,212,.08);
  --pembe:#c8529b; --yesil:#14935f; --yesil-acik:#e3f6ed; --amber:#b7791f; --kirmizi:#c23a3a;
  --grad:linear-gradient(135deg,#6b3fd4 0%,#8d4fc9 55%,#c8529b 100%);
  --golge-s:0 1px 2px rgba(21,17,29,.06),0 2px 8px -2px rgba(21,17,29,.06);
  --golge-m:0 2px 4px rgba(21,17,29,.04),0 12px 32px -10px rgba(40,20,90,.18);
  --golge-l:0 4px 10px rgba(21,17,29,.05),0 40px 80px -28px rgba(40,20,90,.35);
  --r-s:10px; --r-m:16px; --r-l:24px;
  --baslik:'Plus Jakarta Sans','PJS Yedek','PJS Yedek R',system-ui,sans-serif; /* logo fontu (kullanici secimi 2026-10-13) */
  --govde:'Geist','Geist Yedek','Geist Yedek R',system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;
  --kenar:clamp(16px,4vw,32px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
/* Metrigi esitlenmis yedek fontlar (CLS + satir kirilmasi): web fontu gelene dek yedek bu olculerle
   cizilir, font gelince satirlar yeniden kirilmaz. "... Yedek" = Arial (masaustu, iOS; Linux'ta
   Liberation Sans ayni metrik), "... Yedek R" = Roboto (Android'de Arial yok - v1.1, 2026-10-16).
   size-adjust = Turkce ornek satirda Google Fonts'un sundugu PJS 800 / Geist 400 / Geist 600
   genisligi / yedegin ham genisligi; Chrome'da 400px'te olculdu (kerning dahil, piksel yuvarlamasi
   ihmal edilir). ascent/descent = web fontunun hhea degerleri / size-adjust. */
@font-face{font-family:"PJS Yedek";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold");
  font-weight:500 900;size-adjust:101.98%;ascent-override:101.79%;descent-override:21.78%;line-gap-override:0%}
@font-face{font-family:"Geist Yedek";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans-Regular");
  font-weight:300 500;size-adjust:103.03%;ascent-override:97.55%;descent-override:28.63%;line-gap-override:0%}
@font-face{font-family:"Geist Yedek";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold");
  font-weight:600 800;size-adjust:100.10%;ascent-override:100.40%;descent-override:29.47%;line-gap-override:0%}
@font-face{font-family:"PJS Yedek R";src:local("Roboto Bold"),local("Roboto-Bold"),local("Roboto");
  font-weight:500 900;size-adjust:108.20%;ascent-override:95.93%;descent-override:20.53%;line-gap-override:0%}
@font-face{font-family:"Geist Yedek R";src:local("Roboto"),local("Roboto-Regular");
  font-weight:300 500;size-adjust:103.53%;ascent-override:97.08%;descent-override:28.49%;line-gap-override:0%}
@font-face{font-family:"Geist Yedek R";src:local("Roboto Bold"),local("Roboto-Bold"),local("Roboto");
  font-weight:600 800;size-adjust:106.21%;ascent-override:94.63%;descent-override:27.77%;line-gap-override:0%}
@view-transition{navigation:auto}
::view-transition-old(root){animation:.22s ease both vt-cik}
::view-transition-new(root){animation:.32s var(--ease) both vt-gir}
@keyframes vt-cik{to{opacity:0}}
@keyframes vt-gir{from{opacity:0;transform:translateY(10px)}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--zemin);color:var(--metin);font:400 16.5px/1.6 var(--govde);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--marka);text-decoration:none}
a:hover{color:var(--marka-koyu)}
:focus-visible{outline:2.5px solid var(--marka);outline-offset:3px;border-radius:6px}
::selection{background:#e4d8fb}
h1,h2,h3{font-family:var(--baslik);color:var(--murekkep);margin:0;letter-spacing:-.02em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.gizli-metin{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.atla{position:absolute;left:12px;top:-60px;z-index:100;background:var(--murekkep);color:#fff;padding:10px 16px;border-radius:10px}
.atla:focus{top:12px;color:#fff}

.k{width:min(1240px,100% - 2*var(--kenar));margin-inline:auto}
.b{padding-block:clamp(72px,10vw,136px);position:relative}
.b-beyaz{background:var(--kart)}
.b-dar{padding-block:clamp(48px,6vw,80px)}