/* =========================================================
   Önder Bakır — Portfolio
   ========================================================= */

:root{
  --black:#000;
  --ink:#f4f2ef;
  --dim:rgba(244,242,239,.5);
  --dimmer:rgba(244,242,239,.28);
  --line:rgba(244,242,239,.14);

  --font-sans:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --pad:clamp(16px,3.2vw,44px);
  --gap:clamp(12px,1.6vw,24px);

  --smooth:cubic-bezier(.38,.005,.215,1);
  --expo:cubic-bezier(.19,1,.22,1);
  --power4:cubic-bezier(.23,1,.32,1);

  --nav-h:64px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--black);
}
html.is-loading{overflow:hidden}
html.menu-open{overflow:hidden}

body{
  margin:0;
  min-height:100vh;
  background:var(--black);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:500;
  font-size:16px;
  line-height:1.35;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:#b388ff;color:#000}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- typography helpers ---------- */
.label{
  font-family:var(--font-mono);
  font-size:10px;
  line-height:1.4;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dim);
  margin:0 0 10px;
}
.p-200{font-size:clamp(14px,1.05vw,16px);line-height:1.45;margin:0}
.p-400{font-size:clamp(18px,2.1vw,30px);line-height:1.28;margin:0 0 22px;letter-spacing:-.015em}
.dim{color:var(--dim)}

/* underline link */
.link{position:relative;display:inline-block}
.link::after{
  content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .5s var(--expo);
}
.link:hover::after{transform:scaleX(1);transform-origin:0 50%}

/* icons, icon buttons, link pills */
.icon{width:16px;height:16px;flex:0 0 auto}
.icon-btn{
  width:34px;height:34px;border:1px solid rgba(244,242,239,.45);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .35s var(--smooth),color .35s,border-color .35s;
}
.icon-btn .icon{width:15px;height:15px}
.icon-btn:hover{background:var(--ink);color:#000;border-color:var(--ink)}

.links{display:flex;flex-wrap:wrap;gap:8px}
.pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 16px;border:1px solid rgba(244,242,239,.3);border-radius:999px;
  color:var(--ink);font-size:14px;line-height:1;letter-spacing:-.005em;white-space:nowrap;
  transition:background .35s var(--smooth),color .35s,border-color .35s;
}
.pill:hover{background:var(--ink);color:#000;border-color:var(--ink)}

/* =========================================================
   PRELOADER
   ========================================================= */
.preloader{
  position:fixed;inset:0;z-index:1000;background:#000;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--pad);
  transition:opacity .6s var(--smooth),visibility .6s;
}
.preloader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.preloader__inner{
  display:flex;justify-content:space-between;align-items:flex-end;
  font-family:var(--font-mono);text-transform:uppercase;
  font-size:clamp(11px,1vw,13px);letter-spacing:.12em;margin-bottom:14px;
}
.preloader__count{font-size:clamp(48px,12vw,140px);line-height:.85;letter-spacing:-.04em;font-family:var(--font-sans);font-weight:600}
.preloader__bar{height:1px;width:100%;background:rgba(255,255,255,.16);overflow:hidden}
.preloader__bar i{display:block;height:100%;width:0%;background:var(--ink)}

/* =========================================================
   GRAIN + CURSOR
   ========================================================= */
.grain{
  position:fixed;inset:-150%;z-index:900;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation:grain 8s steps(6) infinite;
  will-change:transform;
}
@keyframes grain{
  0%{transform:translate(0,0)}10%{transform:translate(-5%,-10%)}20%{transform:translate(-15%,5%)}
  30%{transform:translate(7%,-25%)}40%{transform:translate(-5%,25%)}50%{transform:translate(-15%,10%)}
  60%{transform:translate(15%,0)}70%{transform:translate(0,15%)}80%{transform:translate(3%,35%)}
  90%{transform:translate(-10%,10%)}100%{transform:translate(0,0)}
}

.cursor{
  position:fixed;top:0;left:0;z-index:950;pointer-events:none;
  width:12px;height:12px;border-radius:50%;background:var(--ink);
  transform:translate(-50%,-50%);
  transition:width .4s var(--expo),height .4s var(--expo),background .3s;
  display:none;mix-blend-mode:difference;
}
.cursor.is-hover{width:44px;height:44px}
@media(hover:hover) and (pointer:fine){ .cursor{display:flex} }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:600;
  padding:var(--pad) var(--pad) calc(var(--pad) * 1.6);
  pointer-events:none;
}
.nav a,.nav button{pointer-events:auto}
/* kaydırınca açılan arka plan: başlıklar menü yazılarının altından okunaksız geçmesin */
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,#000 0%,#000 58%,rgba(0,0,0,0) 100%);
  opacity:0;transition:opacity .4s;
}
html.is-scrolled .nav::before{opacity:1}
html.menu-open .nav::before{opacity:0}
.nav__grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start;
}
.nav__logo{
  grid-column:span 3;
  font-size:clamp(13px,1.05vw,15px);font-weight:600;letter-spacing:-.01em;
}
.nav__menu{grid-column:5 / span 5}
.nav__menu ul{display:flex;gap:clamp(14px,2vw,30px)}
.nav__menu a{font-size:clamp(13px,1.05vw,15px)}
.nav__social{grid-column:11 / span 2;display:flex;gap:8px;justify-content:flex-end;align-items:center}
.nav__burger{display:none}

@media(max-width:900px){
  .nav__grid{grid-template-columns:1fr auto}
  .nav__logo{grid-column:auto}
  .nav__menu,.nav__social{display:none}
  .nav__burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;align-items:flex-end;
    width:44px;height:44px;padding:0 9px;margin:-12px -9px 0 0;
  }
  .nav__burger span{display:block;height:1px;width:100%;background:currentColor;transition:transform .4s var(--expo),opacity .3s}
  .nav__burger span:last-child{width:60%}
  html.menu-open .nav__burger span:first-child{transform:translateY(3px) rotate(45deg)}
  html.menu-open .nav__burger span:last-child{width:100%;transform:translateY(-3px) rotate(-45deg)}
}

/* mobile menu */
.menu{
  position:fixed;inset:0;z-index:550;background:#0a0a0a;
  padding:calc(var(--pad) * 3) var(--pad) var(--pad);
  display:flex;flex-direction:column;justify-content:space-between;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--expo),visibility 0s .8s;
  pointer-events:none;visibility:hidden;
}
html.menu-open .menu{clip-path:inset(0 0 0 0);pointer-events:auto;visibility:visible;transition:clip-path .8s var(--expo)}
.menu__list li{overflow:hidden;border-bottom:1px solid var(--line)}
.menu__list a{
  display:block;padding:18px 0;
  font-size:clamp(38px,11vw,72px);line-height:1;letter-spacing:-.04em;font-weight:600;
}
.menu__list a span{display:block;transform:translateY(110%);transition:transform .7s var(--expo)}
html.menu-open .menu__list a span{transform:translateY(0)}
html.menu-open .menu__list li:nth-child(2) a span{transition-delay:.06s}
html.menu-open .menu__list li:nth-child(3) a span{transition-delay:.12s}
html.menu-open .menu__list li:nth-child(4) a span{transition-delay:.18s}
.menu__foot{gap:8px}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;min-height:100svh;
  padding:calc(var(--nav-h) + var(--pad)) var(--pad) var(--pad);
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;filter:blur(90px);opacity:.5}
.hero__bg i{position:absolute;display:block;border-radius:50%}
.hero__bg i:first-child{
  width:46vw;height:46vw;left:-8vw;top:8vh;
  background:radial-gradient(circle,rgba(157,78,221,.55),transparent 65%);
  animation:float1 22s ease-in-out infinite alternate;
}
.hero__bg i:last-child{
  width:38vw;height:38vw;right:-6vw;bottom:0;
  background:radial-gradient(circle,rgba(59,29,110,.7),transparent 65%);
  animation:float2 26s ease-in-out infinite alternate;
}
@keyframes float1{to{transform:translate(14vw,-8vh) scale(1.2)}}
@keyframes float2{to{transform:translate(-12vw,6vh) scale(1.15)}}

.hero__grid{position:relative;z-index:1}

.hero__title{
  margin:0 0 clamp(30px,6vh,64px);
  font-size:clamp(56px,13.5vw,220px);
  line-height:.86;
  letter-spacing:-.05em;
  font-weight:600;
}
.hero__title .line{display:block}
.hero__title .line--indent{padding-left:.14em;color:var(--dim)}

.hero__meta{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);
  padding-top:clamp(18px,3vh,30px);border-top:1px solid var(--line);
}
.hero__col:nth-child(1){grid-column:span 3}
.hero__col:nth-child(2){grid-column:5 / span 3}
.hero__col:nth-child(3){grid-column:9 / span 4}
.hero__col b{font-weight:600}
.hero__col .links{margin-top:16px}

@media(max-width:900px){
  .hero__meta{grid-template-columns:1fr;gap:18px}
  .hero__col:nth-child(1),.hero__col:nth-child(2),.hero__col:nth-child(3){grid-column:auto}
}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:14px 0;white-space:nowrap;
}
.marquee__track{display:inline-flex;align-items:center;gap:26px;animation:marquee 34s linear infinite;padding-right:26px}
.marquee__track span{font-size:clamp(14px,1.6vw,20px);letter-spacing:-.01em}
.marquee__track em{font-style:normal;color:var(--dimmer);font-size:9px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* =========================================================
   SECTION SHELL
   ========================================================= */
.section{padding:clamp(70px,12vh,150px) var(--pad)}
.section__head{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);
  align-items:end;margin-bottom:clamp(34px,6vh,66px);
}
.section__head > .label{grid-column:span 12;margin-bottom:clamp(18px,3vh,34px)}
.section__title{
  grid-column:span 6;margin:0;
  font-size:clamp(38px,7vw,110px);line-height:.9;letter-spacing:-.045em;font-weight:600;
}
.section__aside{grid-column:8 / span 5;display:flex;flex-direction:column;gap:16px}
.section__aside .p-200{color:var(--dim);max-width:46ch}

@media(max-width:900px){
  .section__title{grid-column:span 12}
  .section__aside{grid-column:span 12;margin-top:24px}
}

/* =========================================================
   PROJECTS
   ========================================================= */
.projects{border-top:1px solid var(--line)}
.project{
  display:grid;grid-template-columns:repeat(12,1fr);gap:14px var(--gap);align-items:baseline;
  padding:clamp(24px,3.6vw,42px) 0;border-bottom:1px solid var(--line);
  transition:padding .6s var(--expo);
}
.project:hover{padding-left:clamp(10px,1.4vw,22px)}
.project__name{
  grid-column:1 / span 7;margin:0;
  font-size:clamp(28px,4.4vw,64px);line-height:.95;letter-spacing:-.045em;font-weight:600;
}
.project__desc{grid-column:8 / span 5;margin:0;color:var(--dim)}
.project__stack{grid-column:1 / span 12;display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0}
.project__stack li{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 10px;border:1px solid var(--line);border-radius:99px;color:var(--dim);
  transition:color .3s,border-color .3s;
}
.project:hover .project__stack li{color:var(--ink);border-color:rgba(179,136,255,.5)}
.projects__note{margin:18px 0 0;color:var(--dim)}

@media(max-width:900px){
  .project__name,.project__desc,.project__stack{grid-column:span 12}
}

/* =========================================================
   EXPERIENCE
   ========================================================= */
.timeline{border-top:1px solid var(--line)}
.entry{
  display:grid;grid-template-columns:repeat(12,1fr);gap:8px var(--gap);align-items:baseline;
  padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--line);
}
.entry__when{grid-column:span 3;margin:0}
.entry__what{grid-column:4 / span 5;margin:0;font-size:clamp(20px,2.4vw,34px);line-height:1.1;letter-spacing:-.03em;font-weight:600}
.entry__where{grid-column:9 / span 4;margin:0;color:var(--dim)}

@media(max-width:900px){
  .entry__when,.entry__what,.entry__where{grid-column:span 12}
}

/* =========================================================
   ABOUT
   ========================================================= */
.about__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.about__text{grid-column:span 6}
.about__lists{grid-column:7 / span 6;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.about__list ul{display:flex;flex-direction:column;gap:8px}
.about__list li{
  font-size:clamp(14px,1.05vw,16px);color:var(--dim);
  padding-bottom:8px;border-bottom:1px solid var(--line);
  transition:color .3s,padding-left .4s var(--expo);
}
.about__list li:hover{color:var(--ink);padding-left:6px}

@media(max-width:900px){
  .about__text,.about__lists{grid-column:span 12}
  .about__lists{margin-top:34px}
}

/* =========================================================
   CONTACT + FOOTER
   ========================================================= */
.contact{padding-bottom:clamp(40px,6vh,70px)}

.contact__grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:28px var(--gap);
  padding-top:clamp(20px,3vh,34px);border-top:1px solid var(--line);
}
.contact__grid > div:nth-child(1){grid-column:span 3}
.contact__grid > div:nth-child(2){grid-column:5 / span 4}
.contact__grid > div:nth-child(3){grid-column:10 / span 3}
.contact__grid a{color:var(--dim);transition:color .3s}
.contact__grid a:hover{color:var(--ink)}
.contact__grid .pill{color:var(--ink)}
.contact__grid .pill:hover{color:#000}

@media(max-width:900px){
  .contact__grid{grid-template-columns:1fr 1fr}
  .contact__grid > div:nth-child(1),
  .contact__grid > div:nth-child(2),
  .contact__grid > div:nth-child(3){grid-column:span 1}
}

.footer{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:22px var(--pad);border-top:1px solid var(--line);
}
.footer .label{margin:0}

/* =========================================================
   ANIMATION PRIMITIVES
   ========================================================= */
/* reveals hide only when JS runs — without JS everything stays visible */
[data-split-lines]{display:block}
.sl-line{display:block;overflow:hidden;padding:.08em 0 .22em;margin:-.08em 0 -.22em}
.sl-inner{display:block;transition:transform 1s var(--expo)}
.js .sl-inner{transform:translateY(130%)}
.js .is-in .sl-inner{transform:translateY(0)}

[data-reveal]{transition:opacity .9s var(--smooth),transform .9s var(--expo)}
.js [data-reveal]{opacity:0;transform:translateY(24px)}
.js [data-reveal].is-in{opacity:1;transform:none}


/* without JS the preloader must not cover the page */
html:not(.js) .preloader{display:none}
html.pl-skip .preloader{display:none}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .preloader{display:none}
  .js [data-reveal]{opacity:1;transform:none}
  .js .sl-inner{transform:none}
}