/* BiloCom v5 · ortak temel
 * Üç versiyonun bütün bölümleri bu değerleri kullanır; bölümler karıştırılınca
 * renk, yazı ve boşluk dili bozulmasın diye TEK KAYNAK burası. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,200..800&family=Geist:wght@300..700&family=Geist+Mono:wght@400;500&display=swap');

:root{
  /* zemin: grafit, çok az sıcak (titanyumla uyum için soğuk mavi değil) */
  --zemin:#0b0b0c;
  --zemin-2:#111112;
  --kart:#161617;
  --cizgi:#262524;
  --cizgi-2:#34322f;

  /* yazı */
  --metin:#efece6;
  --soluk:#a7a198;   /* grafit üstünde 7,7:1 (ölçüldü) */
  --sonuk:#8a857c;   /* ikincil yazı: grafitte 5,37:1, en açık kartta (#1a1a1b) 4,74:1 (ölçüldü; #7f7a72 kartta 4,39 kalıyordu) */

  /* titanyum: Apple doğal titanyumu, sıcak gri, mat */
  --ti-1:#e9e5dd;
  --ti-2:#b3ada2;
  --ti-3:#8a8578;
  --ti-4:#5f5b53;
  --titanyum:linear-gradient(160deg,#e9e5dd 0%,#b3ada2 38%,#7d786f 62%,#cfc9be 100%);
  --titanyum-yatay:linear-gradient(90deg,#8a8578,#e9e5dd 45%,#9c9891 70%,#cfc9be);

  /* yazı aileleri */
  --baslik:'Bricolage Grotesque',system-ui,sans-serif;
  --govde:'Geist',system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;

  /* ölçek */
  --dev:clamp(88px,23vw,380px);
  --h1:clamp(44px,7vw,112px);
  --h2:clamp(34px,4.6vw,72px);
  --h3:clamp(22px,2vw,30px);
  --govde-boy:clamp(16px,1.1vw,18px);

  --kose:10px; --kose-buyuk:18px;
  --kenar:clamp(16px,3vw,48px);
  --bolum-bosluk:clamp(88px,12vw,180px);
  --en:1320px;

  --egri-cikis:cubic-bezier(.16,1,.3,1);
  --egri-yay:cubic-bezier(.34,1.4,.64,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;background:var(--zemin);color:var(--metin)}
body{font:400 var(--govde-boy)/1.6 var(--govde);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video,canvas,svg{display:block;max-width:100%}
/* <img width height> niteliği CSS en-boy oranını ezmesin; yüksekliği sınıfla verilen görseller etkilenmez (tür seçicisi en zayıfı) */
img{height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--baslik);font-weight:650;letter-spacing:-.035em;line-height:1.02;margin:0;
  font-variation-settings:'opsz' 96}
p{margin:0}
::selection{background:#e9e5dd;color:#0b0b0c}
:focus-visible{outline:2px solid var(--ti-1);outline-offset:3px;border-radius:4px}

.kap{width:min(100% - var(--kenar)*2, var(--en));margin-inline:auto}
.ti-yazi{background:var(--titanyum);-webkit-background-clip:text;background-clip:text;color:transparent}
.gizli-okur{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* menüden bölüme gidince başlık yüzen üst bandın altında kalmasın; geçiş yumuşak olsun */
html{scroll-behavior:smooth}
[data-bolum]{scroll-margin-top:84px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* klavye odağı: yazı kutularında yalnız çerçeve rengi değişimi zor seçiliyor, ortak ince halka */
input:not([type=checkbox]):not([type=radio]):focus-visible,textarea:focus-visible,select:focus-visible{box-shadow:0 0 0 3px rgba(233,229,221,.14);outline:none}