@font-face{font-family:"Geist";font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/geist-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:"Geist";font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/geist-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{
  --bg:#0e1311;
  --ink:#e8eee9;
  --muted:#8c9b93;
  --sage:#9fd8b4;
  --line:rgba(232,238,233,.14);
  --pad:clamp(22px,3.6vw,56px);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{
  min-height:100dvh;
  background:var(--bg);color:var(--ink);
  font-family:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  display:grid;grid-template-rows:auto 1fr auto;
  position:relative;overflow-x:hidden;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--sage);outline-offset:4px;border-radius:2px}

/* tek parlama: sag ustte, yavasca nefes alir */
.glow{
  position:fixed;pointer-events:none;
  width:min(78vw,980px);aspect-ratio:1;
  right:-18vw;top:-22vh;border-radius:50%;
  background:
    radial-gradient(circle at 42% 44%,rgba(159,216,180,.34),rgba(159,216,180,.10) 38%,transparent 66%);
  filter:blur(28px);
  animation:breathe 14s ease-in-out infinite alternate;
}
/* ince tane: sabit, tiklanmaz, kaydirilan alanda degil */
.grain{
  position:fixed;inset:0;pointer-events:none;opacity:.045;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

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

main{position:relative;z-index:1;display:grid;align-content:center;padding:0 var(--pad);min-height:62dvh}
h1{
  font-weight:500;
  font-size:clamp(54px,11.4vw,188px);
  line-height:.98;letter-spacing:-.05em;
  margin-left:-.05em;
}
h1 span{display:block;animation:rise 1s cubic-bezier(.16,1,.3,1) both}
h1>span:nth-child(2){animation-delay:.08s}
.role{
  margin-top:clamp(20px,3vw,40px);
  font-size:clamp(18px,1.9vw,26px);font-weight:400;line-height:1.35;letter-spacing:-.01em;
  color:var(--muted);max-width:28ch;
  animation:rise 1s .18s cubic-bezier(.16,1,.3,1) both;
}
.role b{display:block;font-weight:400;color:var(--ink)}

.foot{
  position:relative;z-index:1;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:0 var(--pad);padding:18px 0 var(--pad);border-top:1px solid var(--line);
  animation:rise 1s .3s cubic-bezier(.16,1,.3,1) both;
}
.mail{
  font-size:clamp(17px,1.5vw,20px);font-weight:500;color:var(--sage);text-decoration:none;
  border-bottom:1px solid rgba(159,216,180,.4);padding-bottom:2px;transition:border-color .2s;
}
.mail:hover{border-bottom-color:var(--sage)}

@keyframes rise{from{opacity:0;transform:translateY(.2em)}to{opacity:1;transform:none}}
@keyframes breathe{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-4vw,3vh,0) scale(1.08)}}

@media (max-width:700px){
  .glow{width:130vw;right:-50vw;top:-12vh}
  main{align-content:end;padding-bottom:6vh}
  h1{font-size:clamp(52px,17vw,120px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

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

/* harfler odaga gelir: bulaniktan keskine, sirayla */
.js h1 span:not(.ch){animation:none}
.ch{display:inline-block;animation:focus 1.3s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i) * 55ms + 150ms)}
@keyframes focus{from{opacity:0;filter:blur(14px);transform:translateY(.12em)}to{opacity:1;filter:blur(0);transform:none}}

/* parlama imleci cok yavas izler */
.glow{translate:calc(var(--gx,0) * 1vw) calc(var(--gy,0) * 1vh);transition:translate 1.8s cubic-bezier(.16,1,.3,1)}

/* ayirici cizgi soldan cizilir */
.foot{border-top:0;position:relative}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:0 50%;animation:line 1.4s .45s cubic-bezier(.65,0,.35,1) both}
@keyframes line{from{transform:scaleX(0)}to{transform:none}}

/* e-posta: alt cizgi soldan dolar */
.mail{border-bottom:0;padding-bottom:3px;background:linear-gradient(var(--sage),var(--sage)) 0 100%/0 1px no-repeat,linear-gradient(rgba(159,216,180,.4),rgba(159,216,180,.4)) 0 100%/100% 1px no-repeat;transition:background-size .5s cubic-bezier(.16,1,.3,1)}
.mail:hover,.mail:focus-visible{background-size:100% 1px,100% 1px}

/* halkalar: parlamanin merkezinde. Sayi sayfada yazmaz, sadece gorunur */
.rings{position:fixed;pointer-events:none;width:min(78vw,980px);aspect-ratio:1;right:-18vw;top:-22vh}
.rings circle{
  fill:none;stroke:var(--sage);stroke-width:.14;vector-effect:non-scaling-stroke;
  transform-box:fill-box;transform-origin:50% 50%;
  opacity:calc(.16 - var(--i) * .0042);
  animation:ring 1.5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i) * 70ms + 100ms);
}
@keyframes ring{0%{opacity:0;transform:scale(.15)}35%{opacity:.7}100%{transform:none}}
@media (max-width:700px){.rings{width:130vw;right:-50vw;top:-12vh}}

/* ---- 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:#e8eee9;--pe:#9fd8b4;--pw:#1b2320;--patch:rgba(232,238,233,.17);--patch2:rgba(232,238,233,.09)}
.foot{align-items:flex-end}
@media (max-width:700px){.pet{width:44px;height:54px}.pets{gap:14px}}

/* ---- yasam evreleri acilisi (v4) -----------------------------------------
   isik noktasi: dogum. parlama noktadan acilir: bebeklik. halkalar sirayla
   genisler: buyume. defter cizgileri ve kenar boslugu belirip silinir, isim
   odaga gelir: okul, universite. Hicbir sayi yazilmaz. */
.rings .seed{fill:var(--sage);stroke:none;opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:seedbeat 1.3s .05s ease both}
@keyframes seedbeat{0%{opacity:0;transform:scale(.2)}10%{opacity:1;transform:scale(1)}26%{transform:scale(2.4)}40%{transform:scale(1)}58%{transform:scale(2.9)}76%{transform:scale(1.2)}100%{opacity:.55;transform:scale(1)}}

.glow{animation:bloom 2s .7s cubic-bezier(.16,1,.3,1) both,breathe 14s ease-in-out 2.7s infinite alternate}
@keyframes bloom{from{scale:.03;opacity:0}to{scale:1;opacity:1}}

.rings circle:not(.seed){animation-duration:1.25s;animation-delay:calc(var(--i) * 42ms + 1300ms)}

.ruled{position:fixed;inset:0;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(to bottom,transparent 0 47px,rgba(159,216,180,.10) 47px 48px);
  animation:ruled 2.3s 2s ease both}
.ruled::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--pad) * .55);width:1px;background:rgba(159,216,180,.24)}
@keyframes ruled{0%{opacity:0;clip-path:inset(0 100% 0 0)}30%{opacity:1;clip-path:inset(0 0 0 0)}68%{opacity:1;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 0)}}

.ch{animation-delay:calc(var(--i) * 55ms + 2300ms)}
.role{animation-delay:3.1s}
.foot{animation-delay:3.2s}
.foot::before{animation-delay:3.2s}
.pets{animation-delay:3.4s}

/* ayni oturumda dil degisimi ve dokunus: acilis atlanir */
.no-intro .ch,.no-intro .role,.no-intro .foot,.no-intro .foot::before,.no-intro .pets,
.no-intro .rings circle,.no-intro .ruled{animation-duration:.001s!important;animation-delay:0s!important}
.no-intro .glow{animation:breathe 14s ease-in-out infinite alternate!important}

/* ---- elektronik ticaret ve medya iletisimi (v5) ---------------------------
   cubuklar: alt kenardan satis grafigi gibi yukselir, ayirici cizgiye coker
   (Alin'in canturk.ws'teki isareti ticaret cubuklaridir). dalgalar: isik
   noktasindan yayin sinyali gibi uc halka yayilir. Yazi eklenmez. */
.bars{position:fixed;left:var(--pad);right:var(--pad);bottom:var(--bars-b,96px);height:100px;display:flex;align-items:flex-end;gap:clamp(3px,.6vw,9px);pointer-events:none}
.bars span{flex:1 1 0;min-width:1px;height:var(--h);background:linear-gradient(to top,rgba(159,216,180,.34),rgba(159,216,180,.08));transform-origin:50% 100%;opacity:0;
  animation:barup 1.7s calc(2.5s + var(--n) * 16ms) cubic-bezier(.3,0,.2,1) both}
@keyframes barup{0%{opacity:0;transform:scaleY(0)}35%{opacity:1;transform:scaleY(1)}68%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(.01)}}

.rings circle.wave{fill:none;stroke:var(--sage);stroke-width:.2;opacity:0;transform-box:fill-box;transform-origin:50% 50%;
  animation:wave 2.4s calc(3.1s + var(--k) * .6s) cubic-bezier(.2,.6,.3,1) both}
@keyframes wave{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(15)}}

/* yeni sira: isim ve alt bilgiler dalgalarin ardindan */
.ch{animation-delay:calc(var(--i) * 55ms + 3200ms)}
.role{animation-delay:4.2s}
.foot,.foot::before{animation-delay:4.3s}
.pets{animation-delay:4.8s}

.no-intro .bars span,.no-intro .rings circle.wave{animation-duration:.001s!important;animation-delay:0s!important}

/* ---- son: nokta (v6) ------------------------------------------------------ */
.dot{position:absolute;left:0;top:0;width:8px;height:8px;border-radius:50%;pointer-events:none;z-index:2;opacity:0;transform-origin:0 0}
.dot.on{opacity:1}
.dot i{position:absolute;inset:0;border-radius:50%;background:var(--sage);box-shadow:0 0 14px rgba(159,216,180,.55)}
.dot.on i{animation:onair 3.2s ease-in-out infinite}
.dot.on::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--sage);opacity:0;animation:ripple 3.2s ease-out infinite}
@keyframes onair{0%,100%{transform:scale(1)}8%{transform:scale(1.28)}16%{transform:scale(1)}26%{transform:scale(1.45)}40%{transform:scale(1)}}
@keyframes ripple{0%,20%{opacity:0;transform:scale(1)}26%{opacity:.6}70%{opacity:0;transform:scale(4.2)}100%{opacity:0;transform:scale(4.2)}}
@media (prefers-reduced-motion:reduce){.dot.on i,.dot.on::after{animation:none}.dot.on::after{display:none}}

/* ---- elektronik ticaret ve medya iletisimi isaretleri (v7) ---------------
   Phosphor Icons "light" agirligi (MIT). Animasyonun sonunda kalirlar; yumusak, keskin degil. */
.marks{display:flex;gap:18px;margin-top:clamp(18px,2.2vw,28px)}
.sym{display:block;animation:markin 1.4s cubic-bezier(.16,1,.3,1) both}
.sym:nth-child(1){animation-delay:4.5s}
.sym:nth-child(2){animation-delay:4.95s}
.sym svg{display:block;width:26px;height:26px;fill:var(--sage);opacity:.62;filter:blur(.3px) drop-shadow(0 0 8px rgba(159,216,180,.38));transition:opacity .4s}
.sym:hover svg{opacity:.9}
@keyframes markin{from{opacity:0;transform:translateY(.5em);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.no-intro .sym{animation-duration:.001s!important;animation-delay:0s!important}