@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:300 800;font-stretch:100%;font-display:swap;src:url(/assets/fonts/bricolage-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:300 800;font-stretch:100%;font-display:swap;src:url(/assets/fonts/bricolage-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --paper:#eeeee9;
  --ink:#121212;
  --muted:#5d5d58;
  --signal:#ff4b1f;
  --line:rgba(18,18,18,.16);
  --pad:clamp(20px,3.2vw,48px);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{
  min-height:100dvh;
  background:var(--paper);color:var(--ink);
  font-family:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;
  display:grid;grid-template-rows:auto 1fr;
  overflow-x:hidden;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}

.bar{display:flex;justify-content:space-between;align-items:center;padding:var(--pad) var(--pad) 0;position:relative;z-index:2}
.mark{font-weight:800;font-size:20px;letter-spacing:-.04em;text-decoration:none}
.langs{display:flex;gap:18px;font-size:14px;font-weight:500;letter-spacing:.06em}
.langs a{text-decoration:none;color:var(--muted);padding:6px 2px}
.langs a:hover{color:var(--ink)}
.langs a[aria-current]{color:var(--ink)}

.stage{
  position:relative;
  display:grid;align-content:end;
  padding:0 var(--pad) var(--pad);
  min-height:calc(100dvh - 60px);
}

.art{
  position:absolute;right:calc(var(--pad) * .5);top:2vh;
  width:min(54vw,680px);aspect-ratio:1;
  pointer-events:none;
}
.art .disc{transform-origin:50% 50%;animation:pop .9s cubic-bezier(.16,1,.3,1) both}
.art .quarter{transform-origin:100% 100%;animation:pop .9s .12s cubic-bezier(.16,1,.3,1) both}
.art .ring{transform-origin:50% 50%;animation:pop .9s .24s cubic-bezier(.16,1,.3,1) both}

h1{
  position:relative;z-index:1;
  font-weight:800;font-stretch:100%;
  font-size:clamp(72px,16.5vw,270px);
  line-height:.92;letter-spacing:-.045em;
  text-transform:lowercase;
  margin-left:-.04em;
}
h1 span{display:block;animation:rise .9s cubic-bezier(.16,1,.3,1) both}
h1>span:nth-child(2){animation-delay:.08s}

.info{
  position:relative;z-index:1;
  display:flex;justify-content:space-between;align-items:baseline;gap:20px 40px;flex-wrap:wrap;
  margin-top:clamp(22px,3.4vw,44px);padding-top:16px;
  border-top:1px solid var(--line);
  animation:rise .9s .2s cubic-bezier(.16,1,.3,1) both;
}
.role{font-size:clamp(17px,1.6vw,22px);font-weight:500;letter-spacing:-.01em;max-width:34ch;line-height:1.3}
.mail{
  font-size:clamp(17px,1.6vw,22px);font-weight:600;letter-spacing:-.01em;text-decoration:underline;
  text-decoration-color:var(--signal);text-decoration-thickness:3px;text-underline-offset:.22em;
  transition:text-decoration-thickness .2s;
}
.mail:hover{text-decoration-thickness:6px}

@keyframes rise{from{opacity:0;transform:translateY(.22em)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}

@media (max-width:700px){
  .art{width:86vw;top:6vh;right:-6vw}
  h1{font-size:clamp(66px,24vw,190px)}
  .stage{min-height:calc(100dvh - 56px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---- hareket (v2) ------------------------------------------------------- */
@view-transition{navigation:auto}

/* harfler tek tek yukselir; JS yoksa kelime animasyonu devreye girer */
.js h1 span:not(.ch){animation:none}
.ch{display:inline-block;animation:letter 1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i) * 48ms + 600ms)}
@keyframes letter{from{opacity:0;transform:translateY(.55em) rotate(5deg)}to{opacity:1;transform:none}}

/* sekiller: daire belirir, ceyrek daire koseden savrulur, halka cizilir */
.art .quarter{transform-box:fill-box;transform-origin:100% 100%;animation:swing 1.1s 1.5s cubic-bezier(.16,1,.3,1) both}
.art .ring{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.76s .2s steps(22,end) forwards}
@keyframes swing{from{opacity:0;transform:rotate(-80deg) scale(.7)}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}

/* imleci izleyen derinlik: ucu ayri hizda, degerler sayfa genisliginin onda biri kadar */
.art .disc,.art .quarter,.art .ring{
  translate:calc(var(--px,0) * var(--d) * 1px) calc(var(--py,0) * var(--d) * 1px);
  transition:translate .9s cubic-bezier(.16,1,.3,1);
}
.art .disc{--d:-1.6}
.art .quarter{--d:3}
.art .ring{--d:-4.5}

/* dokunmatik cihazda imlec yok: sekiller kendi kendine hafifce salinir */
@media (hover:none){
  .art{animation:drift 9s ease-in-out infinite alternate}
}
@keyframes drift{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(-1.2vw,1.4vh,0) rotate(2.5deg)}}

@media (prefers-reduced-motion:reduce){
  .art .ring{stroke-dashoffset:0}
  .art{animation:none!important}
}

/* acilis: daire 22 basamakta noktadan buyur, hesaplanmis sure 1.76s. Sayi hicbir yerde yazmaz */
.art .disc{transform-origin:50% 50%;animation:grow 1.76s steps(22,end) both}
@keyframes grow{from{transform:scale(.02)}to{transform:none}}
.info{animation-delay:.9s}

/* telefon: sekil, isimle yaris etmez. Isim ve bilgi alta sabit, kalan bosluga sekil sigar */
@media (max-width:700px){
  .stage{display:flex;flex-direction:column;justify-content:flex-end}
  .art{position:relative;right:auto;top:auto;width:100%;aspect-ratio:auto;flex:1 1 0;min-height:120px;margin:2vh 0 3.5vh}
}

/* ---- Humus ve Dali (canturk.ws cizimleri) --------------------------------- */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.pet{overflow:visible;display:block;width:54px;height:66px}
.pets{display:flex;gap:22px;align-items:flex-end}
.pet-item{display:flex;flex-direction:column;align-items:center;gap:7px}
.pet-item i{font-style:normal;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.p-ln{fill:none;stroke:var(--pl);stroke-width:3.1;stroke-linecap:round;stroke-linejoin:round}
.p-thin{fill:none;stroke:var(--pl);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.p-whisk{fill:none;stroke:var(--pl);stroke-width:1.5;stroke-linecap:round;opacity:.55}
.p-fill{fill:var(--pl)}
.p-patch{fill:var(--patch)}
.p-patch2{fill:var(--patch2)}
.p-eye{fill:var(--pe);stroke:var(--pl);stroke-width:2}
.p-white{fill:var(--pw)}
.p-tailcat{transform-box:fill-box;transform-origin:12% 88%;animation:sway 4.6s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-5deg)}to{transform:rotate(7deg)}}
.p-taildog{transform-box:fill-box;transform-origin:8% 92%;animation:wag 1.05s ease-in-out infinite alternate}
@keyframes wag{from{transform:rotate(-13deg)}to{transform:rotate(15deg)}}
.p-earl{transform-box:fill-box;transform-origin:50% 100%;animation:tw 7s ease-in-out infinite}
.p-earr{transform-box:fill-box;transform-origin:50% 100%;animation:tw 7s ease-in-out infinite .9s}
@keyframes tw{0%,86%{transform:rotate(0)}90%{transform:rotate(-7deg)}94%{transform:rotate(4deg)}100%{transform:rotate(0)}}
.p-flopl{transform-box:fill-box;transform-origin:60% 8%;animation:flop 3.4s ease-in-out infinite}
.p-flopr{transform-box:fill-box;transform-origin:40% 8%;animation:flop 3.4s ease-in-out infinite .4s}
@keyframes flop{0%,72%{transform:rotate(0)}80%{transform:rotate(5deg)}88%{transform:rotate(-4deg)}100%{transform:rotate(0)}}
.p-blink,.p-blinkd{transform-box:fill-box;transform-origin:50% 50%;animation:blink 6.2s infinite}
.p-blinkd{animation-duration:5.1s}
.p-b2{animation-delay:.06s}
@keyframes blink{0%,93%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}98%{transform:scaleY(1)}}
.p-breathe{transform-box:fill-box;transform-origin:50% 100%;animation:breathe 4.2s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.018,1.012)}}
.pets{animation:rise 1s 1.1s cubic-bezier(.16,1,.3,1) both}
@media (prefers-reduced-motion:reduce){
  .p-tailcat,.p-taildog,.p-earl,.p-earr,.p-flopl,.p-flopr,.p-blink,.p-blinkd,.p-breathe{animation:none!important}
}

:root{--pl:#121212;--pe:#eeeee9;--pw:#eeeee9;--patch:rgba(18,18,18,.16);--patch2:rgba(18,18,18,.09)}
.info{align-items:flex-end}
@media (max-width:700px){
  .role{flex-basis:100%}
  .pet{width:46px;height:56px}
  .pets{gap:16px}
  .info{align-items:flex-end}
}

/* masaustu: sekil, bilgi satirinin (hayvanlar dahil) ustunde kalacak kadar buyur */
@media (min-width:701px){
  .stage{min-height:0}
  .art{width:min(54vw,680px,calc(100dvh - 330px))}
}

/* ---- yasam evreleri acilisi (v4) -----------------------------------------
   nokta: dogum. daire sisip sallanir, ceyrek daire besik gibi: bebeklik.
   halka once cocuk karalamasi, sonra kusursuz: buyume. secim kutusu ve
   kilavuzlar belirir, bilesim hizalanir: universite. Hicbir sayi yazilmaz. */
.art .seed{transform-box:fill-box;transform-origin:50% 50%;opacity:0;animation:beat 1s .05s ease both}
@keyframes beat{0%{opacity:0;transform:scale(.2)}12%{opacity:1;transform:scale(1)}28%{transform:scale(1.9)}40%{transform:scale(1)}56%{transform:scale(2.3)}72%{transform:scale(1.1)}88%{opacity:1;transform:scale(1.4)}100%{opacity:0;transform:scale(.6)}}

.art .disc{transform-box:fill-box;transform-origin:50% 50%;animation:bloom 1.25s .75s cubic-bezier(.3,0,.2,1) both}
@keyframes bloom{0%{transform:scale(.05)}45%{transform:scale(1.09)}62%{transform:scale(.965)}80%{transform:scale(1.015)}100%{transform:none}}

.art .quarter{transform-box:fill-box;transform-origin:100% 100%;animation:cradle 1.5s 1.25s cubic-bezier(.3,0,.2,1) both}
@keyframes cradle{0%{opacity:0;transform:rotate(-70deg) scale(.6)}20%{opacity:1}45%{transform:rotate(11deg)}65%{transform:rotate(-6deg)}82%{transform:rotate(3deg)}100%{transform:none}}

.art .scrib{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:scribble 1.7s 1.5s ease both}
@keyframes scribble{0%{opacity:0;stroke-dashoffset:1}1%{opacity:1;stroke-dashoffset:1}55%{opacity:1;stroke-dashoffset:0}78%{opacity:1;stroke-dashoffset:0}100%{opacity:0;stroke-dashoffset:0}}
.art .ring{stroke-dashoffset:1;animation:draw 1s 2.35s cubic-bezier(.65,0,.35,1) forwards}

.art .guides{opacity:1;animation:guides 1.5s 2.4s ease both}
@keyframes guides{0%{opacity:0}30%{opacity:1}100%{opacity:1}}

.ch{animation-delay:calc(var(--i) * 48ms + 1900ms)}
.info{animation-delay:2.7s}
.pets{animation-delay:3.1s}

/* ayni oturumda dil degisimi ve dokunus: acilis atlanir */
.no-intro .ch,.no-intro h1 span,.no-intro .info,.no-intro .pets,
.no-intro .art .seed,.no-intro .art .disc,.no-intro .art .quarter,.no-intro .art .scrib,.no-intro .art .ring,.no-intro .art .guides{
  animation-duration:.001s!important;animation-delay:0s!important;
}
@media (prefers-reduced-motion:reduce){
  .art .seed,.art .scrib{display:none}
}

/* halka ucu baslamadan nokta gibi gorunmesin; azaltilmis harekette halka tam gorunur */
@keyframes drawring{0%{stroke-dashoffset:1;opacity:0}1%{stroke-dashoffset:1;opacity:1}100%{stroke-dashoffset:0;opacity:1}}
.art .ring{animation:drawring 1s 2.35s cubic-bezier(.65,0,.35,1) both}
@media (prefers-reduced-motion:reduce){.art .ring{stroke-dashoffset:0;opacity:1}}