._foot_dba9w_1 {
  border-top: 2px solid var(--ink);
  background: var(--surface);
}

/* .wrap ile ayni class'i tasidigi icin (bkz. Footer.tsx) tek basina .inner,
   .wrap'in padding'iyle esit onem derecesinde kalir ve kim sonra yuklenirse o
   kazanir. .foot .inner iki class'lik bir secici oldugu icin bu belirsizligi
   ortadan kaldirip her zaman kazaniyor. */
._foot_dba9w_1 ._inner_dba9w_6 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 0;
  font-size: 13px;
  color: var(--faint);
}

._inner_dba9w_6 nav {
  display: flex;
  gap: 18px;
}
._inner_dba9w_6 a:hover {
  color: var(--ink);
}

/* telif metni + uc link tek satirda sigmiyordu, sayfa yatay taşıyordu
   (scrollWidth > innerWidth) — mobilde alt alta diziliyor */
@media (max-width: 768px) {
  ._foot_dba9w_1 ._inner_dba9w_6 {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
  }
}
/* hero'nun uzerinde seffaf duran ust bar, mockup'taki .top ile ayni mantik */
._top_1goah_1 {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
}

/* global.css'teki .wrap'i kullanmiyoruz cunku header tam genislik istiyor,
   .wrap'in max-width:1040px kisitini her seferinde ezmek yerine hic almiyoruz */
._inner_1goah_10 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  max-width: none;
  padding: 0 var(--gutter);
}

._brand_1goah_19 {
  height: 24px;
  width: auto;
}

._nav_1goah_24 {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 13.5px;
}

._links_1goah_31 {
  display: flex;
  gap: 24px;
}
._links_1goah_31 a {
  opacity: 0.7;
  transition: opacity 0.14s ease;
}
._links_1goah_31 a:hover {
  opacity: 1;
}
/* bulunulan disiplin tam opak ve alti cizili durur, landing'de hic kullanilmaz */
._links_1goah_31 a[aria-current='page'] {
  opacity: 1;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

._langButton_1goah_51 {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  opacity: 0.7;
}
._langButton_1goah_51:hover {
  opacity: 1;
}
._langActive_1goah_63 {
  font-weight: 700;
  opacity: 1;
}

/* masaustunde hic gorunmuyor, sadece 768px altinda devreye giriyor */
._burger_1goah_69 {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
._burger_1goah_69 span {
  display: block;
  height: 2px;
  background: var(--ink);
}

/* panel her zaman DOM'da durur, acik degilken 768px ustunde de altinda da
   gizli — boylece JS state'i acik/kapali arasinda gecerken gorunurluk
   sadece CSS'e bagli kalir, extra bir kosullu render'a gerek kalmaz */
._mobileNav_1goah_90 {
  display: none;
}

@media (max-width: 768px) {
  /* mobilde hero artik tam ekran degil, header'in seffaf uste binmesine
     gerek yok — normal akista durup Hero'yu asagi itiyor */
  ._top_1goah_1 {
    position: static;
  }

  ._nav_1goah_24 {
    display: none;
  }
  ._burger_1goah_69 {
    display: flex;
  }

  ._mobileNav_1goah_90._mobileNavOpen_1goah_108 {
    display: flex;
    flex-direction: column;
    padding: 4px var(--gutter) 20px;
    background: var(--paper);
    border-bottom: 2px solid var(--ink);
  }
  ._mobileNav_1goah_90 a {
    padding: 14px 0;
    border-top: 1px solid var(--line);
    font: 700 15px var(--font-display);
  }
  ._mobileLang_1goah_120 {
    padding-top: 14px;
  }
}
/*
file: global.css
importable: .wrap, .eyebrow, .mono, .sr, .cta, .cta.primary, .reveal, .rise

Site genelinde paylasilan taban stiller: reset, tipografi ve birden fazla
bolumde tekrar eden birkac yardimci sinif. Bolume ozel hicbir sey burada
durmaz, o bilgi kendi bilesenin css modulunde kalir.

description: Reset, temel tipografi ve tum sayfalarda tekrar eden birkac paylasilan yardimci sinifi tanimlayan global stil dosyasi.
*//*
file: tokens.css
importable: bu dosyadaki --degiskenlerin hepsi

PaktLabs'in butun sitelerinin ortak marka paleti, bosluk olcegi ve golge
degerleri. Landing ve disiplin subdomainleri bu dosyayi global.css uzerinden
alir, kendi stillerinde renk ya da font sabiti tekrar yazmaz. Burada bir
deger degisirse butun siteler birlikte degisir, o yuzden landing'in gorsel
testleri her degisiklikte calistirilmali.

description: PaktLabs sitelerinin paylastigi renk, bosluk ve golge degiskenlerini tanimlayan tek dosya.
*/

/* renk degerleri dogrudan landing_mockup.html'deki :root'tan tasindi, hue'lara
   dokunulmadi. yeni bir disiplin sayfasi acilirsa tone eslesmesi (--web/--auto/--data)
   burada guncellenir, baska hicbir dosyada renk sabiti tekrar tanimlanmaz. */
:root {
  /* her hex degeri tek bir adda durur, ayni renge giden diger adlar var() ile
     buna baglanir. Bir renk degisirse yalnizca burada degisir */
  --gold: #e5b32e;
  --gray: #7e909e;

  --paper: #e9e8e0;
  --surface: #f2f1ea;
  --panel: #dcdbd0;
  --ink: #2d3037;
  --muted: #565a62;
  /* soluk metin rengi. --gray ile ayni ton ama daha koyu, kucuk etiketler
     paper, panel ve surface zeminlerin hepsinde en az 4.5 kontrasti gecsin diye.
     dekoratif cizgiler bu degiskeni degil --gray'i kullanir */
  --faint: #52626e;
  /* altinin kagit zemine karismis acik tonu. Sekillerde vurgulu bolgenin
     zemini gibi altinin dolu haliyle bagirmamasi gereken yerlerde */
  --gold-wash: color-mix(in srgb, var(--gold) 26%, var(--paper));
  --line: #d3d2c6;
  --line-strong: #b7b6a8;
  --on-ink: var(--paper);
  /* murekkep zeminde ikinci planda kalan yazi, e-posta ve kisa aciklamalar
     gibi. data'daki yazar kutusu ve landing'deki profil bandi kullanir */
  --on-ink-muted: #c9cbd0;
  /* klavye odak cercevesinin rengi. Acik zeminde murekkep. Koyu zeminli bir
     alan, ornegin data'daki kod cercevesi, bunu kendi kutusunda altina cevirir,
     icindeki dugmelerin cercevesi koyu zeminde kaybolmasin diye */
  --focus-ring: var(--ink);

  --tone-web: var(--gray);
  --tone-auto: var(--gold);
  --tone-data: var(--ink);

  --maxw: 1040px;
  --measure: 780px;

  /* sayfanin sag ve sol kenar boslugu. Bolumlerin ic boslugu, header ve kenara
     hizalanan figurler hep bunu kullanir, bosluk degisirse hepsi birlikte kayar */
  --gutter: clamp(20px, 4vw, 56px);

  /* ust barin yuksekligi. Bar hero'larin ustunde seffaf durdugu icin hero'lar
     ve tam ekran bolumler bu kadar payi kendileri birakir, mobilde de akista
     bu kadar yer kaplar. Bar degisirse hepsi buradan birlikte kayar */
  --header-height: 84px;

  /* sitelerin hero cizimleri ayni his ve olcuyle durur. Cizimin en fazla
     yuksekligi ve sutunda bosta kalan alanin ne kadarinin cizimin saginda
     kalacagi burada tek yerde tutulur, her site yalnizca kendi cizim oranini
     verir. 0.5 tam ortalamadir, daha kucuk deger cizimi saga yaklastirir */
  --hero-art-height: min(70.4svh, 660px);
  --hero-art-right-share: 0.25;

  --gap: 112px;

  /* giris metni ve bolum basliginin boyutu. Landing ve data ayni olcuyu
     kullanir, degisirse hepsi birlikte kayar */
  --text-lead: clamp(15px, 1.3vw, 17px);
  --text-section: clamp(32px, 3.8vw, 52px);

  /* kart dili: iki piksellik cerceve, uzerine gelince uc piksel yukari kalkis
     ve altina dusen sert golge. Hangi kutunun kalkacagini bilesen secer,
     olculer buradan gelir. Altin golgeli kart --lift-drop'u kendi rengiyle
     kullanir */
  --card-border: 2px solid var(--ink);
  --lift: -3px;
  --lift-drop: 0 3px 0;
  --lift-shadow: var(--lift-drop) var(--ink);
  --lift-time: 0.16s;

  --font-display: 'Space Grotesk', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* sayfa ici bir baglantiya tiklaninca sayfa hedefe atlamak yerine kayarak
   gider, okur nereye geldigini gorur. Hedefin ustunde biraz pay kalir ki
   baslik ekranin tam kenarina yapismasin */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

/* img varsayilan olarak inline gelir, akisa girdigi her yerde metin satiri
   gibi altina birkac pikselik bosluk birakir. bunu reset katmaninda kapatiyoruz
   ki akisa giren hicbir gorsel bu sessiz bosluga bir daha yakalanmasin */
img {
  display: block;
}

h1,
h2,
h3 {
  font-weight: 700;
  font-family: var(--font-display);
  margin: 0;
}

/* klavyeyle gelinen her eleman ayni cerceveyi alir. Yalnizca baglanti ve dugme
   yetmiyor, acilir kutu basliklari ve tarayicinin Tab sirasina kendisi aldigi
   yana kayan kutular da var, onlar yoksa tarayicinin ince halkasinda kalir.
   Fareyle tiklamada :focus-visible devreye girmez, cerceve yalnizca klavyede
   gorunur */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ekran okuyucu icin gorunmez ama erisilebilir metin, gorsel olarak hicbir yer kaplamaz */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* icerigi maxw'e kilitleyen, sayfada tekrar eden tek sutun */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

/* viewport'un iki kenarina kadar kirilan bolumler icin ortak desen, dort
   bolumde (biz kimiz / disiplinler / isler / iletisim) ayni sekilde kullanilir */
.full-bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}

.eyebrow {
  display: block;
  font: 700 12px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

/* butonlarin ortak temeli, disiplinler bandindaki ve isler seritlerindeki
   varyantlar bu sinifi genisletir, renkleri kendi css modullerinde degistirir */
.cta {
  display: inline-block;
  padding: 12px 22px;
  font: 700 14px/1 var(--font-display);
  letter-spacing: -0.005em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 3px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.cta:hover {
  background: var(--ink);
  color: var(--on-ink);
}
.cta.primary {
  background: var(--ink);
  color: var(--on-ink);
}
.cta.primary:hover {
  background: transparent;
  color: var(--ink);
}

/* useReveal görünür olan elemana in sınıfını ekler. Buradaki transform
   yalnızca belirme hareketini taşır. Kalıcı konumu bileşenin kendi CSS
   modülü belirler, animasyon kaldırıldığında yerleşim değişmez.

   Hareketi bileşen değişkenle ayarlar, bu sınıfı ezmesi gerekmez:
   --reveal-from kaç piksel uzaktan geldiği (eksi değer yukarıdan),
   --reveal-time süre, --reveal-ease transform eğrisi, --i ile --reveal-step
   elemanlar arası sıra gecikmesi. Belirme dışında geçiş isteyen bileşen
   (kalkış, gölge, dönüş) onları --reveal-extra'ya virgülle yazar, çünkü
   reveal transition'ı tek yerden verir ve bileşenin kendi transition'ını
   zaten ezerdi. Ek geçişler gecikmesiz çalışır */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-from, 22px));
  transition:
    opacity var(--reveal-time, 0.6s) ease calc(var(--i, 0) * var(--reveal-step, 0ms)),
    transform var(--reveal-time, 0.6s) var(--reveal-ease, ease)
      calc(var(--i, 0) * var(--reveal-step, 0ms)),
    var(--reveal-extra, color 0s);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* hero metinleri sayfa acilirken sirayla asagidan yukselir. Siradaki yeri
   --rise-delay, ne kadar asagidan geldigi --rise-offset ile bilesenin kendi
   CSS modulunden verilir. Offset sifir verilirse eleman yalnizca belirir.
   reveal'dan farki ekrana girmeyi beklememesi, sayfa acilir acilmaz baslamasi.

   Elemanin kendi stili son halidir, animasyon yalnizca girisi oynatir. from
   karesi gecikme boyunca backwards ile tutulur, animasyon bitince geride hic
   etkisi kalmaz. Son hal animasyonla tutulsaydi eleman ayri bir cizim
   katmaninda kalir ve yazinin kenar yumusatmasi duragan sayfadan farkli
   olurdu. Hareket azaltma tercihinde animasyon hic calismadigi icin eleman
   zaten son halinde baslar, ayrica bir kurala gerek yok */
.rise {
  animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rise-delay, 0s) backwards;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(var(--rise-offset, 20px));
  }
}

/* kutular ve paneller acilirken yukaridan duser. Bilesenin css modulu bu
   animasyonu global(drop) adiyla cagirir, modul kendi adina cevirmesin diye.
   Mesafe --drop-from ile ayarlanir, sira gecikmesi bilesende --i ile verilir */
@keyframes drop {
  from {
    opacity: 0;
    transform: translateY(var(--drop-from, -12px));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}
/* sahne ekrani kaplar ve alta yaslanir, tabelanin direkleri hemen altindaki
   alt bilginin ust cizgisine basar. Ust bar masaustunde bolumun ustunde
   seffaf durur, ust bosluk onun yuksekligi kadardir.

   --scene sahnenin genisligidir, metnin boyutlari da ondan hesaplanir ki
   yazi her ekranda tabelayla ayni oranda buyuyup kuculsun. Genislik ekranin
   genisligiyle ve yuksekligiyle sinirli, kisa bir ekranda sahne ust bara
   carpmasin diye. 1.836 cizimin en boy orani */
._underConstruction_i6pz5_9 {
  --scene: min(1440px, 100vw - 2 * var(--gutter), (100svh - var(--header-height) - 40px) * 1.836);
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: calc(var(--header-height) + 40px) var(--gutter) 0;
}

._scene_i6pz5_18 {
  position: relative;
  width: var(--scene);
}

/* oran construction.svg'nin viewBox orani, cizim inmeden de kutu dogru boyda
   durur ve metin yerinden kaymaz */
._art_i6pz5_25 {
  display: block;
  width: 100%;
  aspect-ratio: 1632.7582 / 889.39801;
}

/* tabelanin bos krem alani. Yuzdeler cizimde olculdu: soldan 4.2, ustten 18,
   genislik 67.4, yukseklik 48 yuzde. Ic bosluk kenardaki vidalardan uzak
   dursun diye. Metin dikeyde ortalanir */
._sign_i6pz5_34 {
  position: absolute;
  z-index: 1;
  left: 4.2%;
  top: 18%;
  width: 67.4%;
  height: 48%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 calc(var(--scene) * 0.045);
}

._title_i6pz5_47 {
  --rise-delay: 0s;
  font-size: calc(var(--scene) * 0.04);
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

._lead_i6pz5_55 {
  --rise-delay: 0.12s;
  max-width: 54ch;
  margin: calc(var(--scene) * 0.014) 0 0;
  font-size: max(14px, calc(var(--scene) * 0.0135));
  line-height: 1.55;
  color: var(--muted);
}

._actions_i6pz5_64 {
  --rise-delay: 0.24s;
  --rise-offset: 0px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: calc(var(--scene) * 0.022);
}

/* dar ekranda tabela yaziyi alamayacak kadar kuculuyor. Metin tabeladan
   cikar ve sahnenin ustunde durur, cizim altta bos tabelasiyla kalir */
@media (max-width: 900px) {
  ._underConstruction_i6pz5_9 {
    --scene: calc(100vw - 2 * var(--gutter));
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
  }
  ._scene_i6pz5_18 {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  ._sign_i6pz5_34 {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
  }
  ._title_i6pz5_47 {
    font-size: clamp(36px, 8vw, 56px);
  }
  ._lead_i6pz5_55 {
    font-size: var(--text-lead);
    margin-top: 18px;
  }
  ._actions_i6pz5_64 {
    margin-top: 26px;
  }
}

/* mobilde ust bar akista durur, ust bosluk onun payini tasimaz */
@media (max-width: 768px) {
  ._underConstruction_i6pz5_9 {
    min-height: 0;
    padding-top: 40px;
  }
}
/*
file: HeroLayout.module.css
importable: .hero, .copy, .art

Butun PaktLabs sitelerinin hero'larinda ortak olan masaustu yerlesimi. Bugun
landing ve data'nin hero'lari ile ortak bulunamadi sayfasi kullaniyor, web ve
automation siteleri kuruldugunda onlarin hero'lari da buradan baslar. Bilesen
bu dosyayi kendi stil dosyasindan once import eder ve iki sinifi birlikte
verir:

  import layout from '@paktlabs/brand/styles/HeroLayout.module.css'
  import styles from './Hero.module.css'

  <section className={cx(layout.hero, styles.hero)}>

Cizimin orani her sitede farkli oldugu icin site kendi .art sinifinda
--art-ratio verir, bu deger olmadan cizim kutusu cozulmez. Yazi stilleri,
rise siralari, dugme, zemin rengi ve mobil duzen sitede kalir, buraya siteye
ozel hicbir sey girmez.

description: Sitelerin hero bolumlerinde metni ve cizimi header'in altinda kalan alanin dikey ortasina yerlestiren ortak masaustu yerlesimi.
*/

/* NOTE: site bu kurallari esit onemdeki bir kuralla ezer, mobil duzenler de
   boyle kurulur. Bu yalnizca buradaki kurallar derlenen CSS'te sitenin
   kurallarindan once gelirse calisir. Bilesende import sirasi bu yuzden
   once bu dosya, sonra kendi stil dosyasi.

   XXX: composes kullanilmaz. composes bu dosyanin kurallarini kullanan her
   stil dosyasinin icine ayrica kopyaliyor, 2026-10-09'da Vite 8 ile
   goruldu. Ikinci bir kullanici geldiginde, ornegin bulunamadi sayfasi,
   onun kopyasi data hero'sunun mobil kurallarindan sonra geldi ve mobil
   hero masaustu duzenine dondu. import ile dosya derlemeye bir kez girer */

/* hero ekrani kaplar ve alt cizgiyle bir sonraki bolumden ayrilir. Header
   seffaf olarak hero'nun ustunde durur ve kendi yuksekligi kadar yer kaplar,
   ust bosluk bu pay kadardir. Boylece metin de cizim de header'in altinda
   kalan alanin ortasina gore hizalanir */
._hero_murxq_3 {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 32px;
  padding: var(--header-height) var(--gutter) 0;
  border-bottom: 2px solid var(--ink);
  overflow: hidden;
}

/* metin ilk sutunda kendi genisligini alir ve header'in altindaki alanin
   dikey ortasinda durur. Satir ve sutun acikca verilir, cunku bazi sitelerde
   cizim DOM'da metinden once gelir */
._copy_murxq_3 {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 2;
  min-height: calc(100svh - var(--header-height));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* cizim kalan sutuna sigar, dikeyde ortalanir ve zemine oturmadan havada
   durur. En fazla yuksekligi ve saga ne kadar yaklasacagi tokens.css'te
   --hero-art-height ve --hero-art-right-share olarak butun siteler icin ortak.
   Genislik siniri bu yukseklikten oranla hesaplanir, baslik alani daraldiginda
   cizim oranini bozmadan bundan da kuculur.
   Sutunda bosta kalan alan, sutun genisligi eksi cizimin en fazla
   genisligidir, bu alanin --hero-art-right-share kadari cizimin sagina kalir.
   Cizim sutunu tamamen doldurdugunda bosta alan sifirdir, sag bosluk da sifir
   kalir ve cizim hicbir ekranda tasmaz */
._art_murxq_3 {
  --art-width: calc(var(--hero-art-height) * var(--art-ratio));
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  /* grid ogesinde yuzdelik margin grid alaninin genisligine gore cozulur */
  margin-right: calc(max(0px, 100% - var(--art-width)) * var(--hero-art-right-share));
  width: 100%;
  max-width: var(--art-width);
  aspect-ratio: var(--art-ratio);
  z-index: 1;
}
._art_murxq_3 img {
  width: 100%;
  height: 100%;
}
/* masaustu yerlesimi hero'larinki, bilesen HeroLayout'un siniflarini bu
   dosyanin siniflariyla birlikte verir. Hero'dan farki alt cizginin olmamasi,
   cunku hemen altinda alt bilgi geliyor ve onun kendi ust cizgisi var, ikisi
   ust uste binince iki kat kalin bir cizgi cikiyordu */
._notFound_x3lst_5 {
  border-bottom: 0;
}

._code_x3lst_9 {
  --rise-delay: 0s;
}

/* metin sutunu max-content oldugu icin baslik kendiliginden hic kirilmaz ve
   cizimin yerini yer. Genislik siniri onu iki satira indirir, balance da iki
   satiri dengeler. balance desteklemeyen tarayici bunu yok sayar */
._title_x3lst_16 {
  --rise-delay: 0.12s;
  max-width: 11ch;
  margin-top: 18px;
  text-wrap: balance;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

._lead_x3lst_26 {
  --rise-delay: 0.24s;
  margin: 26px 0 0;
  max-width: 40ch;
  font-size: var(--text-lead);
  line-height: 1.62;
  color: var(--muted);
}

/* dugme hero'lardaki gibi yukselmez, yalnizca belirir. Dikey flex icinde
   sutun boyunca uzamasin diye sola yaslanir */
._back_x3lst_37 {
  --rise-delay: 0.36s;
  --rise-offset: 0px;
  align-self: flex-start;
  margin-top: 34px;
}

/* --art-ratio barrier.svg'nin viewBox oranidir, cizim degisirse yalnizca bu
   deger guncellenir */
._art_x3lst_46 {
  --art-ratio: 1134.8297 / 1198.7447;
}

/* mobilde header akista durur, metin ustte, cizim altta. Cizim neredeyse kare
   oldugu icin icerik genisligini tamamen kaplarsa telefonda ekrandan uzun
   olur, bu yuzden bir genislik siniri var ve sola yaslanir, metinle ayni
   kenardan baslasin diye */
@media (max-width: 768px) {
  ._notFound_x3lst_5 {
    display: block;
    min-height: calc(100svh - var(--header-height));
    padding: 0 var(--gutter);
  }
  ._copy_x3lst_60 {
    min-height: 0;
    padding: 56px 0 36px;
  }
  ._art_x3lst_46 {
    max-width: 360px;
    margin: 0 0 48px;
  }
}
/*$vite$:1*/