._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;
  }
}
._fieldset_1h8sy_1 {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

._options_1h8sy_8 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
._options_1h8sy_8[data-count='3'] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

._option_1h8sy_8 {
  position: relative;
  display: block;
  height: 100%;
  cursor: pointer;
}
/* gercek radio gorunmez ama yerinde durur, odak ve secim onun uzerinden
   gelir, gorunen kutu hemen yanindaki .face'tir */
._input_1h8sy_28 {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

._face_1h8sy_27 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  height: 100%;
  min-height: 128px;
  padding: 18px 20px;
  background: var(--paper);
  border: var(--card-border);
  transition:
    transform var(--lift-time) ease,
    box-shadow var(--lift-time) ease,
    background 0.15s ease,
    color 0.15s ease;
  animation: drop 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  animation-delay: calc(var(--i) * 45ms);
}
/* ekran her degistiginde kutular data'nin suzgec panelindeki gibi sirayla duser */
._option_1h8sy_8:hover ._face_1h8sy_27 {
  transform: translateY(var(--lift));
  box-shadow: var(--lift-shadow);
}
._input_1h8sy_28:checked + ._face_1h8sy_27 {
  background: var(--ink);
  color: var(--on-ink);
}
._input_1h8sy_28:focus-visible + ._face_1h8sy_27 {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

._label_1h8sy_68 {
  font: 700 clamp(22px, 2vw, 28px) / 1.1 var(--font-display);
  letter-spacing: -0.02em;
}
._hint_1h8sy_72 {
  font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.45;
  color: var(--muted);
}
/* secili kutuda iki yazi da altina doner, koyu zeminde vurgu rengi */
._input_1h8sy_28:checked + ._face_1h8sy_27 ._label_1h8sy_68,
._input_1h8sy_28:checked + ._face_1h8sy_27 ._hint_1h8sy_72 {
  color: var(--gold);
}

@media (max-width: 768px) {
  ._options_1h8sy_8,
  ._options_1h8sy_8[data-count='3'] {
    grid-template-columns: 1fr;
  }
  ._face_1h8sy_27 {
    min-height: 0;
  }
}

/* kisa masaustu ekranlarda, ornegin 1440x900 ve 1366x768, baslik ve form ekrana sigsin
   diye bosluklar ve kutular sikisir. Genis ekranda ve mobilde gecmez */
@media (min-width: 901px) and (max-height: 920px) {
  ._face_1h8sy_27 {
    min-height: 92px;
    padding: 14px 18px;
  }
}
._nav_1cjw0_1 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 2px solid var(--ink);
}
/* Geri yokken de ilerleme dugmesi saga yaslanir */
._next_1cjw0_10 {
  margin-left: auto;
}
._next_1cjw0_10:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
._next_1cjw0_10:disabled:hover {
  background: var(--ink);
  color: var(--on-ink);
}

/* kisa masaustu ekranlarda, ornegin 1440x900 ve 1366x768, baslik ve form ekrana sigsin
   diye bosluklar ve kutular sikisir. Genis ekranda ve mobilde gecmez */
@media (min-width: 901px) and (max-height: 920px) {
  ._nav_1cjw0_1 {
    margin-top: 16px;
    padding-top: 14px;
  }
}
/* ustte baslik, altinda cizim ve form yan yana. Blok ekranin ortasinda
   durur, hero'lardaki gibi ust bar saydam olarak ustunde kalir ve bolum
   onun payini birakir, blok ust barin altinda kalan alanin dikey
   ortasindadir. Cizimle formun alt kenarlari ayni cizgide, baslik cizimin
   sol kenarindan baslar */
._contact_1mmyj_6 {
  display: grid;
  grid-template-columns: auto minmax(0, 880px);
  justify-content: center;
  align-content: center;
  align-items: end;
  column-gap: clamp(40px, 4vw, 72px);
  min-height: 100svh;
  padding: var(--header-height) var(--gutter) clamp(24px, 4vh, 48px);
  border-bottom: 2px solid var(--ink);
}

._intro_1mmyj_18 {
  grid-column: 1 / -1;
  margin-bottom: clamp(24px, 5vh, 56px);
}
._intro_1mmyj_18 .eyebrow {
  --rise-delay: 0.05s;
}
/* baslik kisa ekranlarda ekranin boyuna gore de kuculur, son adimin uzun
   formu baslikla birlikte ekrana sigsin diye */
._title_1mmyj_27 {
  margin-top: 18px;
  font-size: min(5.6vw, 9svh, 84px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  --rise-delay: 0.12s;
}
._lead_1mmyj_34 {
  max-width: 44ch;
  margin: 18px 0 0;
  font-size: var(--text-lead);
  line-height: 1.62;
  color: var(--muted);
  --rise-delay: 0.24s;
}

/* adimin cizimi. Dort cizim de dikey ve ayni yukseklikte, genislikleri
   farkli. Alanin olcusu sabittir: yukseklik ortak, genislik en genis cizimin,
   posta kutulu contact-details.svg'nin orani. Cizim inmeden ya da adim
   degisince alan daralmaz, form yerinden oynamaz. Cizimler alanin sol alt
   kosesine yaslanir, Ada her adimda ayni yerde durur. Daha genis bir cizim
   gelirse yalnizca --art-widest degisir. Cizimin altindaki golge elipsi,
   cizim yuksekliginin yaklasik yuzde yedisi, translate ile yarisi kadar
   asagi kayar ve ortasi formun alt kenarina oturur */
._art_1mmyj_51 {
  --art-height: min(50svh, 500px);
  --art-widest: 262.66759 / 409.37089;
  height: var(--art-height);
  width: calc(var(--art-height) * (var(--art-widest)));
  translate: 0 3.5%;
}
._art_1mmyj_51 img {
  height: 100%;
  width: auto;
  animation: _appear_1mmyj_1 0.35s ease backwards;
}
@keyframes _appear_1mmyj_1 {
  from {
    opacity: 0;
  }
}

/* form kutusu data'daki kartlarin dili: ustte baslik kutusu, alti piksel
   bosluk, altta icerik kutusu. Kutular sayfadan bir ton acik surface
   zeminde durur, icindeki secenekler ve alanlar sayfanin paper zemininde
   kalir, boylece ikisi de kutudan ayrilir */
._card_1mmyj_73 {
  display: grid;
  gap: 6px;
}
._box_1mmyj_77 {
  background: var(--surface);
  border: var(--card-border);
}

._head_1mmyj_82 {
  padding: 20px 24px 24px;
}
._meta_1mmyj_85 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
._progress_1mmyj_91 {
  display: flex;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
._progress_1mmyj_91 li {
  width: 30px;
  height: 8px;
  border: 1.5px solid var(--ink);
  transition: background 0.2s ease;
}
._progress_1mmyj_91 ._done_1mmyj_104 {
  background: var(--ink);
}
._progress_1mmyj_91 ._current_1mmyj_107 {
  background: var(--gold);
}
._question_1mmyj_110 {
  margin-top: 20px;
  font-size: clamp(26px, 2.7vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
/* baslik yalnizca ekran degisince programla odaklanir, Tab sirasinda yok */
._question_1mmyj_110:focus {
  outline: none;
}

._body_1mmyj_121 {
  padding: 24px;
}
._sentText_1mmyj_124 {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
}

/* dar ekranda baslik ustte, form altta. Cizim gosterilmez, form ilk ekranda
   gorunsun diye */
@media (max-width: 900px) {
  ._contact_1mmyj_6 {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    min-height: 0;
    padding-bottom: clamp(48px, 8vw, 80px);
  }
  ._title_1mmyj_27 {
    font-size: clamp(40px, 9vw, 64px);
  }
  ._art_1mmyj_51 {
    display: none;
  }
}
@media (max-width: 768px) {
  /* dar ekranda ust bar akista yer kapliyor, payi ayrica birakilmaz */
  ._contact_1mmyj_6 {
    padding-top: 32px;
  }
  ._head_1mmyj_82,
  ._body_1mmyj_121 {
    padding: 18px 16px;
  }
}

/* kisa masaustu ekranlarda, ornegin 1440x900 ve 1366x768, baslik ve form ekrana sigsin
   diye bosluklar ve kutular sikisir. Genis ekranda ve mobilde gecmez */
@media (min-width: 901px) and (max-height: 920px) {
  ._intro_1mmyj_18 {
    margin-bottom: clamp(16px, 3vh, 28px);
  }
  ._head_1mmyj_82 {
    padding: 14px 20px 18px;
  }
  ._question_1mmyj_110 {
    margin-top: 14px;
    font-size: clamp(24px, 4.4svh, 34px);
  }
  ._body_1mmyj_121 {
    padding: 18px 20px;
  }
}
/* 1280x720 gibi daha da kisa ekranlarda baslik ve aciklama biraz daha
   sikisir */
@media (min-width: 901px) and (max-height: 760px) {
  ._title_1mmyj_27 {
    margin-top: 12px;
    font-size: min(5.6vw, 8svh, 84px);
  }
  ._lead_1mmyj_34 {
    margin-top: 10px;
  }
}
._grid_14ejq_1 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 20px;
}
._wide_14ejq_6 {
  grid-column: 1 / -1;
}

._field_14ejq_10 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: drop 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
._field_14ejq_10:nth-child(2) {
  animation-delay: 45ms;
}
._field_14ejq_10:nth-child(3) {
  animation-delay: 90ms;
}
._field_14ejq_10:nth-child(4) {
  animation-delay: 135ms;
}

._field_14ejq_10 label {
  font: 700 11px/1.2 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
._optional_14ejq_32 {
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* butun alanlar ayni cerceveli kutu, tek satirlik alanlar da aciklama
   alani gibi */
._field_14ejq_10 input,
._field_14ejq_10 textarea {
  width: 100%;
  padding: 12px 14px;
  font: 400 16px/1.55 var(--font-body);
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 0;
}
._field_14ejq_10 textarea {
  resize: vertical;
}
._field_14ejq_10 textarea::placeholder {
  color: var(--faint);
}
._field_14ejq_10 [aria-invalid='true'] {
  border-color: var(--gold);
  border-style: dashed;
}

/* uyarinin basindaki kucuk altin kare, sitede kirmizi bir hata rengi yok */
._problem_14ejq_62 {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 12px/1.3 var(--font-mono);
  color: var(--ink);
}
._problem_14ejq_62::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--gold);
}

/* tuzak alan ekranin disina itilir, yerinde yer kaplamaz */
._trap_14ejq_78 {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

._privacy_14ejq_86 {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--faint);
}

._alert_14ejq_92 p {
  margin: 16px 0 0;
  padding: 12px 14px;
  font-size: 14px;
  background: var(--gold-wash);
  border-left: 4px solid var(--gold);
}
._alert_14ejq_92 a {
  font-family: var(--font-mono);
  text-decoration: underline;
}

@media (max-width: 768px) {
  ._grid_14ejq_1 {
    grid-template-columns: 1fr;
  }
}

/* kisa masaustu ekranlarda, ornegin 1440x900 ve 1366x768, baslik ve form ekrana sigsin
   diye bosluklar ve kutular sikisir. Genis ekranda ve mobilde gecmez */
@media (min-width: 901px) and (max-height: 920px) {
  ._grid_14ejq_1 {
    row-gap: 14px;
  }
  ._field_14ejq_10 textarea {
    height: 96px;
  }
  ._privacy_14ejq_86 {
    margin-top: 10px;
  }
}
/*
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%;
}
/* Ust cizgiyi bolum kendisi cizer, ustteki bolum alt cizgi cizmez, yoksa iki
   kat kalin bir cizgi cikar. Figur alanin altina yaslanir, ayaklari alt
   bilginin ust cizgisine oturur. */
._contact_13dag_4 {
  margin-top: 0;
  padding: clamp(48px, 6vw, 88px) var(--gutter) 0;
  background: var(--panel);
  border-top: 2px solid var(--ink);
}

._inner_13dag_11 {
  display: grid;
  grid-template-columns: minmax(0, 660px) clamp(200px, 22vw, 340px);
  gap: clamp(24px, 3vw, 56px);
  justify-content: center;
  align-items: start;
}

._main_13dag_19 {
  max-width: 720px;
}
._main_13dag_19 .eyebrow {
  margin-bottom: 16px;
}
._main_13dag_19 h2 {
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
._lead_13dag_30 {
  margin: 20px 0 0;
  font-size: var(--text-lead);
  line-height: 1.62;
  color: var(--muted);
  max-width: 46ch;
}

._action_13dag_38 {
  display: inline-block;
  margin-top: 36px;
  padding: 12px 22px;
  font: 700 12px/1 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--on-ink);
  background: var(--ink);
  border: 2px solid var(--ink);
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
._action_13dag_38:hover {
  background: var(--panel);
  color: var(--ink);
}

._direct_13dag_56 {
  margin-top: 40px;
  margin-bottom: 40px;
  padding-top: 24px;
  border-top: 2px solid var(--ink);
  max-width: 620px;
}
._mail_13dag_63 {
  display: inline-block;
  font: 500 clamp(16px, 1.6vw, 20px) / 1 var(--font-mono);
  color: var(--ink);
}
._mail_13dag_63:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* +1px ince ayar ayaklari alt cizgiye oturtur.
   Cerceve yerlesimi, icindeki img belirme hareketini tasir. */
._art_13dag_75 {
  display: block;
  align-self: end;
  justify-self: start;
  position: relative;
  top: 1px;
  height: clamp(300px, 32vw, 440px);
  width: auto;
}

._art_13dag_75 img {
  display: block;
  height: 100%;
  width: auto;
}

/* Mobilde telefon gorseli ve ona ayrilan ikinci sutun kalkar. */
@media (max-width: 768px) {
  ._inner_13dag_11 {
    grid-template-columns: 1fr;
  }
  ._art_13dag_75 {
    display: none;
  }
}
/* hero'nun hemen altinda, aralarinda kagit renginde bir bosluk kalmasin diye
   ust bosluk yok, panel dogrudan hero'nun alt cizgisine yaslaniyor */
._about_h142z_3 {
  margin-top: 0;
  padding: clamp(56px, 8vw, 104px) var(--gutter);
  background: var(--panel);
}

._grid_h142z_9 {
  display: flex;
  justify-content: center;
  text-align: center;
}

._copy_h142z_15 {
  max-width: var(--measure);
}
._copy_h142z_15 h2 {
  margin: 18px 0 0;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
._soft_h142z_24 {
  color: var(--muted);
}
._card_i5c4x_1 {
  position: relative;
  display: block;
}

/* belirme iletisim sayfasindaki secenek kutulari gibi: kart on iki piksel
   yukaridan kisa surede duser, kartlar kirk bes milisaniye arayla sirayla
   gelir. Brand'deki reveal varsayilan olarak asagidan ve daha yavas
   yukseliyor, burada yalnizca onun degiskenleri verilir. Hareket azaltma
   tercihinde gecis hic olmaz, kart baslangicta acik gelir */
._card_i5c4x_1 {
  --reveal-from: -12px;
  --reveal-time: 0.28s;
  --reveal-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --reveal-step: 45ms;
}

/* iki kutu da her zaman acik duruyor, aralarinda ince bir mentese boslugu var.
   hover'da ikisi birden yukari kalkiyor, tek parca bir tabela gibi */
._head_i5c4x_20,
._panel_i5c4x_21 {
  padding: clamp(20px, 2.6vw, 32px) 24px;
  background: var(--paper);
  border: var(--card-border);
  transition:
    transform var(--lift-time) ease,
    box-shadow var(--lift-time) ease,
    background 0.15s ease;
}
._card_i5c4x_1:hover ._head_i5c4x_20,
._card_i5c4x_1:hover ._panel_i5c4x_21,
._card_i5c4x_1:focus-visible ._head_i5c4x_20,
._card_i5c4x_1:focus-visible ._panel_i5c4x_21 {
  transform: translateY(var(--lift));
  box-shadow: var(--lift-shadow);
  background: var(--ink);
}
/* koyu zeminde butun yazilar altina doner, iletisim sayfasinda secilen
   kutudaki gibi */
._card_i5c4x_1:hover :is(h3, p, ._go_i5c4x_40),
._card_i5c4x_1:focus-visible :is(h3, p, ._go_i5c4x_40) {
  color: var(--gold);
}
._head_i5c4x_20 h3,
._panel_i5c4x_21 p,
._go_i5c4x_40 {
  transition: color 0.15s ease;
}

._head_i5c4x_20 {
  text-align: center;
}
._head_i5c4x_20 h3 {
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

._panel_i5c4x_21 {
  margin-top: 6px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}
/* aciklama kartin panelini dolduracak boyda, masaustunde panelin en az
   yuksekligi 260 piksel ve metin onun buyuk kismini kaplar */
._panel_i5c4x_21 p {
  margin: 0;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.45;
  color: var(--muted);
}
._go_i5c4x_40 {
  font: 700 12px/1 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* 260px'lik min-height uc-sutunlu masaustu grid'i icin ayarlanmisti, tek
   sutuna inince aciklama ile "Incele" arasinda gereksiz bosluk birakiyordu */
@media (max-width: 768px) {
  ._panel_i5c4x_21 {
    min-height: 0;
  }
}
/* biz kimiz ile bu bant da renkli oldugu icin aradaki standart bosluk
   iptal, panel dogrudan bandin ust cizgisine yasliyor */
._disciplines_1dwze_3 {
  margin-top: 0;
  background: var(--gold);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: clamp(56px, 8vw, 104px) var(--gutter);
}

._wrap_1dwze_11 {
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
}

._grid_1dwze_17 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}

/* figur bandin sol boslugu icine mutlak konumlanir, kart listesini kaydirmaz */
._art_1dwze_24 {
  display: block;
  position: absolute;
  right: calc(100% + clamp(16px, 2vw, 40px));
  bottom: calc(-2px - clamp(56px, 8vw, 104px));
  width: clamp(170px, 14vw, 230px);
  height: auto;
  pointer-events: none;
}

._art_1dwze_24 img {
  display: block;
  width: 100%;
  height: auto;
}

/* Ortalanmis 1040px kart alani, figur ve kenar bosluklari bu esigin altinda
   yan yana sigmaz. Mobil figur tabletlerde de kartlarin ustune alinir.
   Esik Disciplines icindeki source secimiyle birlikte degistirilmeli. */
@media (max-width: 1680px) {
  ._disciplines_1dwze_3 {
    padding-top: clamp(24px, 6vw, 40px);
  }
  ._art_1dwze_24 {
    position: static;
    width: 140px;
    margin: 0 auto 28px;
  }
}

@media (max-width: 768px) {
  ._grid_1dwze_17 {
    grid-template-columns: 1fr;
  }
}
/* masaustu yerlesimi, yani izgara, header payi, metnin ve cizimin dikey
   ortalanmasi ve cizimin olcusu, brand'deki HeroLayout.module.css'ten gelir.
   Burada yalnizca landing'e ozel olanlar durur */
._hero_363uw_4 {
  background: var(--paper);
}

/* --art-ratio hero.svg'nin viewBox oranidir, cizim degisirse yalnizca bu
   deger guncellenir. Cerceve bir picture oldugu icin varsayilan olarak inline
   gelir, block yapilir. Cizim dekoratif, tiklamalar onu delip gecer */
._artFrame_363uw_11 {
  --art-ratio: 2658.6299 / 1117.7186;
  display: block;
  position: relative;
  pointer-events: none;
}

._inner_363uw_18 {
  width: max-content;
}

._slogan_363uw_22 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(54px, 11vw, 150px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink);
}
/* slogan satirlari ve dugme global.css'teki rise sinifiyla sirayla belirir,
   burada yalnizca siralari verilir. Dugme yukselmez, yalnizca belirir */
._slogan_363uw_22 span {
  display: block;
}
._slogan_363uw_22 span:nth-child(1) {
  --rise-delay: 0.12s;
}
._slogan_363uw_22 span:nth-child(2) {
  --rise-delay: 0.24s;
}
._slogan_363uw_22 span:nth-child(3) {
  --rise-delay: 0.36s;
}

._cta_363uw_46 {
  align-self: flex-start;
  margin-top: 34px;
  --rise-delay: 0.5s;
  --rise-offset: 0px;
}

/* mobilde hero-mobile.svg masaustundeki gibi arkada duruyor: roket gorselin
   ust kismi, tam da basligin yaninda/arkasinda kalsin diye .artFrame ust
   kenara (header'in hemen altina) sabitlenip yatayda ortalaniyor, .inner
   (z-index:2, her zaman gecerli) onun onunde kaliyor. Gorsel cok uzun
   oldugu icin (koltuktaki kisiye kadar) .hero'nun min-height'i gorselin
   kendi oranindan hesaplanip tasmasini/kirpilmasini onluyor. */
@media (max-width: 768px) {
  ._hero_363uw_4 {
    display: block;
    padding: 0;
    position: relative;
    overflow: visible;
    /* header payi + gorselin kendi orani (1536.6208/921.20239 ~ 1.668)
       ile genislige (92vw) gore hesaplanan yukseklik + gorselle alt cizgi
       arasinda hafif bir bosluk kalsin diye +20px. Bu pay yalnizca mobilde
       gerekir, masaustunde cizim dikeyde ortada havada durdugu icin alt
       cizgiye zaten yaklasmaz */
    min-height: calc(var(--header-height) + 153.7vw + 20px);
  }

  ._artFrame_363uw_11 {
    position: absolute;
    /* masaustundeki ortalama mutlak konumda da etkili olur. Mobil
       kompozisyon ust kenardan basladigi icin burada sifirlanir */
    align-self: auto;
    justify-self: auto;
    top: var(--header-height);
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    max-width: none;
    /* .inner'in z-index:2'sinin arkasinda kalsin diye */
    z-index: 0;
    /* hero-mobile.svg'nin kendi viewBox orani, masaustundeki hero.svg'den
       farkli bir kompozisyon, oran da farkli */
    aspect-ratio: 921.20239 / 1536.6208;
  }

  ._inner_363uw_18 {
    width: 100%;
    min-height: auto;
    align-items: flex-start;
    padding: 56px var(--gutter) 8px;
  }

  ._slogan_363uw_22 {
    align-self: stretch;
  }
}
._work_1wnkf_1 {
  margin-top: var(--gap);
}

/* --gap (112px) sabit, vw'ye bagli degil — masaustunde cevredeki
   bosluklarla orantili ama mobilde aynen kaliyor, oransiz bir bosluk
   birakiyordu */
@media (max-width: 768px) {
  ._work_1wnkf_1 {
    margin-top: clamp(40px, 10vw, 64px);
  }
}

._head_1wnkf_14 {
  padding: 0 var(--gutter) clamp(28px, 3.5vw, 44px);
  border-bottom: 2px solid var(--ink);
}
._head_1wnkf_14 .eyebrow {
  margin-bottom: 14px;
}
._head_1wnkf_14 h2 {
  font-size: var(--text-section);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 24ch;
}
/* uc seridin ortak sekli. ton yalnizca aksan: zeminde ancak fark edilen bir
   yikama, --tone her band'e kendi rengini (props uzerinden inline style ile) verir */
._band_18x8n_3 {
  position: relative;
  padding: clamp(60px, 7vw, 104px) var(--gutter);
  background: color-mix(in srgb, var(--tone) 6%, var(--paper));
}
._band_18x8n_3 + ._band_18x8n_3 {
  border-top: 2px solid var(--ink);
}
/* basliktan hemen sonra gelen ilk serit, diger seritlerden daha az ust bosluk alir */
._tightTop_18x8n_12 {
  padding-top: clamp(44px, 5vw, 80px);
}

._inner_18x8n_16 {
  display: grid;
  grid-template-columns: minmax(300px, 1.05fr) 1fr;
  gap: clamp(48px, 7vw, 130px);
  align-items: start;
}
/* zig-zag: cift siradaki serit sozcuk sutununu saga gecirir */
._flip_18x8n_23 ._word_18x8n_23 {
  order: 2;
}

/* .eyebrow global.css'te tanimli, scope disina cikmak icin :global gerekiyor */
._word_18x8n_23 .eyebrow {
  margin-bottom: 18px;
}
._word_18x8n_23 h3 {
  font-size: clamp(52px, 8.5vw, 116px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--tone);
}
._desc_18x8n_37 {
  margin: 22px 0 0;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.62;
  color: var(--muted);
  max-width: 42ch;
}
._go_18x8n_44 {
  display: inline-block;
  margin-top: 32px;
  padding: 9px 14px;
  font: 700 12px/1 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
._go_18x8n_44:hover {
  background: var(--ink);
  color: var(--on-ink);
}

._list_18x8n_62 {
  /* satir dolgusu baglantili satirda li yerine a'ya gecer, deger tek yerde */
  --row-pad: clamp(16px, 2vw, 26px) 0 clamp(16px, 2vw, 26px) 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
._list_18x8n_62 li {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: var(--row-pad);
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 500;
  letter-spacing: -0.01em;
  border-top: 2px solid var(--ink);
  transition: transform 0.16s ease;
}
._list_18x8n_62 li:last-child {
  border-bottom: 2px solid var(--ink);
}
._list_18x8n_62 li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--tone);
  transition: width 0.16s ease;
}
._list_18x8n_62 li:hover {
  transform: translateX(10px);
}
._list_18x8n_62 li:hover::before {
  width: 6px;
}
._list_18x8n_62 li._linked_18x8n_101 {
  padding: 0;
}
._row_18x8n_104 {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: 20px;
  padding: var(--row-pad);
  color: inherit;
  text-decoration: none;
}
/* ok satirin sag ucuna yaslanir, satirin baglanti oldugunu gosterir */
._arrow_18x8n_114 {
  margin-left: auto;
  padding-right: 4px;
  font: 500 0.75em/1 var(--font-mono);
  color: var(--muted);
}
._ix_18x8n_120 {
  flex: none;
  align-self: center;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--gray);
}

/* translate zemin çizgisini banda oturtur. Yüzde görselin kendi yüksekliğine
   bağlıdır. Belirme animasyonu ayrı transform özelliğini kullandığı için
   animasyon kaldırıldığında veya değiştiğinde zemin konumu korunur. */
._art_18x8n_131 {
  position: absolute;
  bottom: 0;
  width: var(--art-width);
  height: auto;
  translate: 0 var(--ground-offset);
  pointer-events: none;
  z-index: 1;
}
._artLeft_18x8n_140 {
  left: var(--gutter);
}
._artRight_18x8n_143 {
  right: var(--gutter);
}

/* Web figuru digerlerinden daha uzun. Dar masaustu ve tablette metnin
   yanindaki bosluga sigmadigi icin kendi satirinda yer kaplamali.
   1900px uzerinde aciklama ile figur arasinda en az 24px bosluk kalir.
   Alt boslugu iptal etmek, mevcut translate ile zemin hizasini korur.
   Range sozdizimi Safari 16.4 oncesinde kuralin tamamini yok saydirdigi icin
   klasik min/max yaziliyor. min-width 769px, mobil kuralin 768px sinirina bitisik. */
@media (min-width: 769px) and (max-width: 1900px) {
  ._web_18x8n_154 ._art_18x8n_131 {
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: 8px;
    margin-left: auto;
    margin-bottom: calc(-1 * clamp(60px, 7vw, 104px));
  }
}

/* Mobilde başlık ve açıklama önce, liste sonra gelir. Görsel listenin
   altında normal akışa katılır. translate yüzdesi burada da görselin
   kendi yüksekliğini kullandığı için aynı zemin hesabı geçerlidir. */
@media (max-width: 768px) {
  ._inner_18x8n_16 {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  ._flip_18x8n_23 ._word_18x8n_23 {
    order: 0;
  }

  ._art_18x8n_131 {
    /* static degil relative — layout ayni ama z-index static'te tamamen
       yok sayiliyor, sonraki bandin opak arka plani tasan kismi ortuyordu */
    position: relative;
    bottom: auto;
    width: 50%;
    /* translate bütün görseli aşağı kaydırır. Listeyle çizim arasındaki
       görünür boşluk bu yüzden margin değerinden daha büyük olabilir. */
    margin-top: 8px;
    /* Bandın alt padding değerini iptal eder. Görsel kutusu bölüm sınırına
       gelir, translate ise çizimin kendi zeminini bu sınıra taşır. */
    margin-bottom: calc(-1 * clamp(60px, 7vw, 104px));
  }
  /* relative, static'in aksine left/right'a da uyuyor — masaustundeki
     kenar bosluk degerleri burada da uygulanip gorseli yana kaydirmasin
     diye sifirlanip yerine artSide'a gore kenara yaslama geliyor */
  ._artLeft_18x8n_140 {
    left: auto;
    margin-right: auto;
  }
  ._artRight_18x8n_143 {
    right: auto;
    margin-left: auto;
  }
}
/* 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;
  }
}
/* bolum tam genislikte durur ve alt cizgisi sayfanin iki kenarina uzanir,
   icerik inner'da maxw'e kilitlenir. Metin solda, kart sagda. Ust bar
   saydam olarak bolumun ustunde durur, bolum onun payini kendisi birakir.
   Kartin askisi bolumun en ustunden basladigi icin sag sutun yukari kadar
   uzanir, metin ise kendi sutununda dikey ortalanir */
._intro_17ndi_6 {
  border-bottom: 2px solid var(--ink);
}
._inner_17ndi_9 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(40px, 6vw, 112px);
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

._text_17ndi_18 {
  align-self: center;
  padding: calc(var(--header-height) + clamp(40px, 8vh, 96px)) 0 clamp(56px, 9vh, 112px);
}
._text_17ndi_18 .eyebrow {
  --rise-delay: 0.05s;
}
._name_17ndi_25 {
  margin-top: 18px;
  font-size: clamp(52px, 7.4vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  --rise-delay: 0.12s;
}
/* unvan adin hemen altinda, altin bir cizgiyle adla baglanir. Cizgi adin
   altini cizer gibi kisa durur, bolum cizgileriyle karismasin diye */
._role_17ndi_34 {
  display: inline-block;
  margin: 22px 0 0;
  padding-top: 12px;
  font: 600 clamp(18px, 1.8vw, 22px) / 1.2 var(--font-display);
  border-top: 4px solid var(--gold);
  --rise-delay: 0.2s;
}
._lead_17ndi_42 {
  max-width: 46ch;
  margin-top: 28px;
  font-size: var(--text-lead);
  line-height: 1.62;
  color: var(--muted);
  --rise-delay: 0.28s;
}
._lead_17ndi_42 p {
  margin: 0;
}
._lead_17ndi_42 p + p {
  margin-top: 12px;
}

/* tanitimin altindaki uc kare dugme. Logo normalde murekkep rengindedir,
   uzerine gelince ya da klavyeyle odaklaninca altina doner. Cerceve kart
   dilindeki iki piksellik murekkep cizgidir ve degismez */
._links_17ndi_60 {
  display: flex;
  gap: 12px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  --rise-delay: 0.36s;
}
._links_17ndi_60 a {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: var(--ink);
  border: var(--card-border);
  transition: color 0.15s ease;
}
._links_17ndi_60 a:hover,
._links_17ndi_60 a:focus-visible {
  color: var(--gold);
}

/* askinin ipi ust barin hemen altindan kartin deligine iner, ust bardaki
   menu yazilarinin ustunden gecmesin diye bardan baslamaz. Kart ipin
   ucundan asilir, transform-origin oradadir. Acilista bir kez sallanip
   hafif egik durur, uzerine gelince duzelir */
._hanger_17ndi_86 {
  --strap-top: var(--header-height);
  --strap: calc(var(--strap-top) + clamp(40px, 7vh, 80px));
  position: relative;
  padding: var(--strap) 0 clamp(56px, 9vh, 112px);
}
._hanger_17ndi_86::before {
  content: '';
  position: absolute;
  top: var(--strap-top);
  left: 50%;
  width: 2px;
  height: calc(var(--strap) - var(--strap-top) + 22px);
  margin-left: -1px;
  background: var(--ink);
}

._badge_17ndi_103 {
  --tilt: -2.5deg;
  position: relative;
  width: clamp(260px, 25vw, 320px);
  background: var(--surface);
  border: var(--card-border);
  box-shadow: 8px 8px 0 var(--gold);
  transform: rotate(var(--tilt));
  transform-origin: 50% 0;
  transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
  animation: _swing_17ndi_1 1.6s cubic-bezier(0.3, 0.9, 0.3, 1) 0.2s backwards;
}
._badge_17ndi_103:hover {
  --tilt: 0deg;
}
@keyframes _swing_17ndi_1 {
  0% {
    transform: rotate(9deg);
  }
  35% {
    transform: rotate(-7deg);
  }
  65% {
    transform: rotate(1deg);
  }
  100% {
    transform: rotate(var(--tilt));
  }
}

/* kartin ustundeki murekkep serit. Ortadaki delik ipin gectigi yer, kagit
   renginde oyuk gibi durur */
._strip_17ndi_135 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 10px;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--ink);
}
._slot_17ndi_147 {
  width: 44px;
  height: 9px;
  background: var(--paper);
  border-radius: 5px;
}

/* fotograf kare, kartin icinde ince bir murekkep cerceveyle durur. Genislik
   karttan gelir, width ve height yalnizca yuklenmeden once yer ayirir */
._photo_17ndi_156 {
  width: calc(100% - 36px);
  height: auto;
  aspect-ratio: 1;
  margin: 18px 18px 0;
  object-fit: cover;
  background: var(--panel);
  border: 2px solid var(--ink);
}

._body_17ndi_166 {
  padding: 16px 18px 18px;
}
._badgeName_17ndi_169 {
  margin: 0;
  font: 700 24px/1.05 var(--font-display);
  letter-spacing: -0.03em;
}
._badgeRole_17ndi_174 {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--muted);
}
._rows_17ndi_179 {
  margin: 16px 0 0;
}
._rows_17ndi_179 > div {
  padding: 9px 0;
  border-top: 1px solid var(--line-strong);
}
._rows_17ndi_179 dt {
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
._rows_17ndi_179 dd {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 6px 0 0;
  font: 600 15px/1.3 var(--font-display);
}
._rows_17ndi_179 a {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
._rows_17ndi_179 a:hover {
  text-decoration-color: var(--ink);
}

._foot_17ndi_209 {
  padding: 10px 18px;
  font: 500 11px/1 var(--font-mono);
  color: var(--faint);
  border-top: 2px dashed var(--line-strong);
}

/* dar ekranda kart metnin altina iner. Ip ust bardan baslayamaz, kartin
   ustunde kisa bir parca olarak kalir */
@media (max-width: 768px) {
  ._inner_17ndi_9 {
    grid-template-columns: minmax(0, 1fr);
  }
  ._text_17ndi_18 {
    padding-bottom: 28px;
  }
  ._hanger_17ndi_86 {
    --strap-top: 0px;
    --strap: 48px;
    justify-self: center;
  }
  ._badge_17ndi_103 {
    width: min(300px, 82vw);
  }
}
/* murekkep zeminli kapanis bandi. Solda kisinin kendi adresi buyuk yazilir,
   sagda studyonun adresi kesikli cerceveli ayri bir notta durur. Iki adres
   yan yana ama ayni kutuda degil, hangisinin kime gittigi karismasin diye */
._reach_1t2kj_4 {
  color: var(--on-ink);
  background: var(--ink);
}
._inner_1t2kj_8 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  align-items: end;
  gap: clamp(40px, 6vw, 96px);
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(72px, 11vh, 120px) var(--gutter);
}
._reach_1t2kj_4 .eyebrow {
  color: var(--gold);
}

/* adres uzun oldugu icin boyutu ekran genisligine baglidir ve en buyuk
   halinde bile sutuna tek satir sigar. Yalnizca cok dar ekranda kelime
   ortasindan bolunebilir */
._mail_1t2kj_24 {
  display: inline-block;
  margin-top: 20px;
  font: 700 clamp(24px, 3.4vw, 46px) / 1.05 var(--font-display);
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}
._mail_1t2kj_24:hover {
  color: var(--gold);
}
._lead_1t2kj_38 {
  margin: 20px 0 0;
  font-size: var(--text-lead);
  color: var(--on-ink-muted);
}
._github_1t2kj_43 {
  display: inline-block;
  margin-top: 28px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid currentColor;
  border-radius: 3px;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
._github_1t2kj_43:hover {
  color: var(--ink);
  background: var(--on-ink);
}

._studio_1t2kj_60 {
  padding: 22px 22px 24px;
  border: 2px dashed var(--gray);
}
._studio_1t2kj_60 p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--on-ink-muted);
}
._studioMail_1t2kj_70 {
  display: block;
  margin-top: 16px;
  font: 600 18px/1.2 var(--font-display);
}
._studioMail_1t2kj_70:hover,
._studioLink_1t2kj_76:hover {
  color: var(--gold);
}
._studioLink_1t2kj_76 {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 768px) {
  ._inner_1t2kj_8 {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* calisma listesi bir kayit defteri gibi: basligin altinda kalin bir cizgi,
   satirlar ince cizgilerle ayrilir. Sagda kac calisma yayinda oldugu buyuk
   bir sayi olarak durur */
._works_1db3a_4 {
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(72px, 10vh, 112px) var(--gutter) clamp(80px, 12vh, 128px);
}

._head_1db3a_10 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--ink);
}
._title_1db3a_18 {
  margin-top: 14px;
  font-size: var(--text-section);
  line-height: 1;
  letter-spacing: -0.035em;
}
._lead_1db3a_24 {
  max-width: 52ch;
  margin: 16px 0 0;
  font-size: var(--text-lead);
  line-height: 1.62;
  color: var(--muted);
}
._count_1db3a_31 {
  flex: none;
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: right;
}
._count_1db3a_31 span {
  display: block;
  font: 700 clamp(56px, 6vw, 80px) / 0.9 var(--font-display);
  letter-spacing: -0.04em;
  color: var(--ink);
}

._list_1db3a_47 {
  margin: 0;
  padding: 0;
  list-style: none;
}
._row_1db3a_52 {
  --reveal-from: 14px;
  --reveal-step: 60ms;
  border-bottom: 1px solid var(--line-strong);
}

/* satirin solundaki kare disiplinin rengidir, ust bardaki disiplin
   tonlariyla ayni. Uzerine gelince satir altin zemine doner ve ok saga kayar */
._row_1db3a_52 a {
  --tone: var(--ink);
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 22px 12px;
  transition: background 0.15s ease;
}
._row_1db3a_52 a[data-tone='data'] {
  --tone: var(--tone-data);
}
._row_1db3a_52 a[data-tone='automation'] {
  --tone: var(--tone-auto);
}
._row_1db3a_52 a[data-tone='web'] {
  --tone: var(--tone-web);
}
._row_1db3a_52 a:hover {
  background: var(--gold-wash);
}

._discipline_1db3a_82 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
._discipline_1db3a_82::before {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--tone);
  border: 2px solid var(--ink);
}
._workTitle_1db3a_98 {
  font: 600 clamp(19px, 1.8vw, 24px) / 1.25 var(--font-display);
  letter-spacing: -0.015em;
}
._arrow_1db3a_102 {
  font: 700 22px/1 var(--font-display);
  transition: translate 0.15s ease;
}
._row_1db3a_52 a:hover ._arrow_1db3a_102 {
  translate: 6px 0;
}

@media (max-width: 768px) {
  ._head_1db3a_10 {
    flex-direction: column;
    align-items: flex-start;
  }
  ._count_1db3a_31 {
    text-align: left;
  }
  ._row_1db3a_52 a {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
    padding: 18px 4px;
  }
  ._discipline_1db3a_82 {
    grid-column: 1 / -1;
  }
}
/*$vite$:1*/