:root{
  --bg:#0b0b0d;
  --surface:#141417;
  --line:rgba(255,255,255,.14);
  --text:#f3f3f6;
  --muted:#9a9aa4;
  --faint:#63636e;
  --light-bg:#f1efea;
  --light-text:#111;
  --grad:linear-gradient(90deg,#7b5cff,#e05fd0 50%,#ff8a3d);
  --max:1280px;
  --ease:cubic-bezier(.19,1,.22,1);
  --anton:"Anton",Impact,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:"Space Grotesk",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;cursor:none;
}
@media (pointer:coarse){body{cursor:auto}}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.wrap-wide{max-width:1400px;margin:0 auto;padding:0 40px}
@media(max-width:640px){.wrap{padding:0 20px}.wrap-wide{padding:0 20px}}

/* ---------- Cursor + glow ---------- */
#glow{
  position:fixed;top:0;left:0;width:560px;height:560px;z-index:1;pointer-events:none;
  border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(123,92,255,.14), rgba(224,95,208,.05) 40%, transparent 68%);
  mix-blend-mode:screen;opacity:.9;will-change:transform;
}
#cursor-dot,#cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;transform:translate(-50%,-50%);mix-blend-mode:difference}
#cursor-dot{width:7px;height:7px;background:#fff}
#cursor-ring{width:34px;height:34px;border:1px solid rgba(255,255,255,.6);transition:width .3s var(--ease),height .3s var(--ease),background .3s}
.cursor-hover #cursor-ring{width:60px;height:60px;background:rgba(255,255,255,.08);border-color:transparent}
canvas#trail{position:fixed;inset:0;z-index:1;pointer-events:none}
@media (pointer:coarse){#cursor-dot,#cursor-ring,#glow{display:none}}

/* ---------- Header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;backdrop-filter:blur(14px);background:rgba(11,11,13,.5);transition:background .4s}
header.on-light{background:rgba(241,239,234,.6)}
header.on-light .nav a{color:#111}
.nav{display:flex;justify-content:space-between;align-items:center;height:64px;font-size:13px;letter-spacing:.14em;font-weight:600}
.nav a{position:relative;transition:opacity .3s;opacity:.85}
.nav a:hover{opacity:1}
.nav a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:2px;background:var(--grad);transition:width .3s var(--ease)}
.nav a:hover::after{width:100%}
@media(max-width:640px){.nav{font-size:11px;gap:10px}}

/* ---------- Hero ---------- */
/* Kompozisyonun tamamı başlık boyuna (--ts) bağlıdır: kafa, başlığın alt çizgisine göre
   konumlanır. Böylece saç–yazı kesişimi her ekran boyutunda ve zoom seviyesinde aynı kalır.
   İnce ayar için tek sayı: --overlap (saç tepesi harflerin içine ne kadar girsin). */
.hero{
  --vh:1vh;
  --ts:clamp(52px,10.5vw,168px);   /* başlık font boyu */
  --title-top:calc(var(--vh)*18);                /* başlık kutusunun üst kenarı */
  --overlap:.12;                    /* saç tepesi harflere ne kadar girer (× --ts) */
  --k:5.12;                         /* karakter genişliği = --ts × --k */
  --base-y:calc(var(--title-top) + var(--ts)*.898);         /* harflerin oturduğu çizgi (Anton, line-height .95) */
  --hair-y:calc(var(--base-y) - var(--ts)*var(--overlap));  /* saç tepesinin duracağı yer */
  /* genişlik: başlığa oranlı; kısa ekranlarda çene görünür kalsın diye yükseklikle sınırlı */
  --cw:max(200px,min(calc(var(--ts)*var(--k)),calc((calc(var(--vh)*88) - var(--hair-y))/.55)));
  --wrap-top:calc(var(--hair-y) - var(--cw)*.4822);         /* PNG'de saç tepesi üstten 0.4822 × genişlik aşağıda */
  --hero-h:min(calc(var(--vh)*100),calc(var(--wrap-top) + var(--cw)*1.4444 + calc(var(--vh)*4)));
  /* karakter, hero'nun alt kenarına gelmeden erir (sert kesik olmaz) */
  --fade-a:min(72%,calc(var(--hero-h) - var(--wrap-top) - calc(var(--vh)*11)));
  --fade-b:min(98%,calc(var(--hero-h) - var(--wrap-top) - calc(var(--vh)*1)));
  position:relative;z-index:2;height:var(--hero-h);overflow:hidden;
}
.hero-title{
  position:absolute;top:var(--title-top);left:0;right:0;z-index:2;margin:0;
  text-align:center;font-family:var(--anton);font-weight:400;letter-spacing:.01em;
  font-size:var(--ts);line-height:.95;white-space:nowrap;
  color:var(--text);
}
.hero-title .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.hero-title .w span{display:inline-block;transform:translateY(110%);animation:rise .9s var(--ease) forwards}
@keyframes rise{to{transform:translateY(0)}}
@keyframes fade{to{opacity:1}}

.character-wrap{
  position:absolute;top:var(--wrap-top);left:50%;transform:translateX(-50%);
  z-index:3;width:var(--cw);aspect-ratio:9/13;
  pointer-events:none;perspective:900px;perspective-origin:50% 33.38%;
  opacity:0;animation:fade 1s ease .3s forwards;
}
.character-tilt{position:relative;width:100%;height:100%;transform-origin:50% 33.38%;transform-style:preserve-3d;transition:transform .18s ease-out;will-change:transform}
.character-tilt img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.65));
  user-select:none;-webkit-user-drag:none;
}
/* erime maskesi dönmeyen kapta: kafa dönerken alt kenarda sert kesik oluşmaz */
.character-wrap{
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 98%);
  mask-image:linear-gradient(to bottom,#000 72%,transparent 98%);
}
@supports (background:linear-gradient(#000 min(72%,10px),#fff)){
  .character-wrap{
    -webkit-mask-image:linear-gradient(to bottom,#000 var(--fade-a),transparent var(--fade-b));
    mask-image:linear-gradient(to bottom,#000 var(--fade-a),transparent var(--fade-b));
  }
}
@supports (height:1svh){.hero{--vh:1svh}}
/* yan öğeler de kafaya göre konumlanır (göz–burun hizası) */
.hero-side{position:absolute;z-index:4;top:calc(var(--hair-y) + var(--cw)*.30);max-width:250px}
.hero-left{left:5vw;font-size:13px;letter-spacing:.12em;line-height:1.8;color:var(--muted);font-weight:600}
.hero-right{right:5vw;text-align:right}
.pill-gradient{
  display:inline-block;padding:16px 34px;border-radius:100px;background:var(--grad);
  color:#fff;font-size:13px;font-weight:700;letter-spacing:.14em;
  box-shadow:0 8px 34px rgba(224,95,208,.35);transition:transform .3s var(--ease),box-shadow .3s;
}
.pill-gradient:hover{transform:scale(1.06);box-shadow:0 10px 44px rgba(224,95,208,.55)}
/* Dar ekran (telefon, tablet, dar pencere): aynı kompozisyon — başlık ve kafa aynı şekilde
   kesişir; yalnızca yan yazı ile buton kafanın altına, ortaya iner. */
@media(max-width:900px){
  .hero{
    --ts:min(calc(20px + 8.27vw),13.6vw);
    --title-top:clamp(92px,calc(var(--vh)*15),160px);
    --cw:min(calc(221px + 29.2vw),86vw);
    --fade-a:72%;--fade-b:98%;
    height:auto;display:flex;flex-direction:column;align-items:center;gap:20px;
    padding:calc(var(--wrap-top) + var(--cw)*1.30) 24px 56px;
  }
  .hero-side{position:static;max-width:420px;text-align:center}
}

/* ---------- Markalar marquee ---------- */
.customers{position:relative;z-index:2;padding:40px 0 90px;overflow:hidden}
.logo-marquee,.media-marquee{overflow:hidden;position:relative}
.logo-track{display:flex;gap:70px;width:max-content;animation:marq 30s linear infinite;padding:26px 0}
.logo-track span{font-family:var(--anton);font-size:22px;letter-spacing:.06em;color:var(--faint);white-space:nowrap;text-transform:uppercase}
.logo-track span i{font-style:normal;color:var(--muted);margin-right:70px}
.media-track{display:flex;gap:18px;width:max-content;animation:marq 46s linear infinite;padding:9px 0}
.media-marquee.reverse .media-track{animation-direction:reverse;animation-duration:52s}
.media-track .m{
  width:280px;height:180px;border-radius:18px;background-size:cover;background-position:center;
  flex:none;border:1px solid var(--line);
}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Açık bölümler ---------- */
.light{background:var(--light-bg);color:var(--light-text)}
.giant-title{
  font-family:var(--anton);font-weight:400;text-align:center;
  font-size:clamp(60px,12vw,190px);line-height:1;letter-spacing:.01em;text-transform:uppercase;
}
.dark-text{color:#111}

/* ---------- Hizmetler ---------- */
.services{position:relative;z-index:2;padding:110px 0 120px}
.service-list{max-width:1000px;margin:70px auto 0;padding:0 32px}
.service-item{
  display:grid;grid-template-columns:150px 1fr;gap:40px;align-items:start;
  padding:44px 0;border-bottom:2px solid rgba(0,0,0,.85);
}
.service-item:first-child{border-top:2px solid rgba(0,0,0,.85)}
.service-num{
  font-family:var(--anton);font-size:clamp(44px,6vw,76px);line-height:1;color:#111;
  text-shadow:3px 3px 0 var(--light-bg),5px 5px 0 #111;
}
.service-item h3{font-size:clamp(18px,2.4vw,26px);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.service-item p{color:#444;max-width:60ch;font-size:15.5px}
@media(max-width:680px){.service-item{grid-template-columns:1fr;gap:12px}}

/* ---------- Projeler (yığılan kartlar) ---------- */
.projects{position:relative;z-index:2;padding:120px 0 80px}
.stack-title{
  color:var(--text);margin-bottom:60px;
  text-shadow:0 0 0 var(--text);
}
.project-stack{max-width:1150px;margin:0 auto;padding:0 24px}
.p-card{
  position:sticky;background:#101013;border:1px solid var(--line);border-radius:24px;
  padding:26px 30px 30px;margin-bottom:34px;box-shadow:0 -18px 50px rgba(0,0,0,.5);
}
.p-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.p-left{display:flex;align-items:baseline;gap:20px;min-width:0}
.p-left > div:last-child{min-width:0}
.p-num{font-family:var(--anton);font-size:clamp(30px,4vw,52px);line-height:1;color:var(--text)}
.p-name{font-size:clamp(15px,2vw,20px);font-weight:700;letter-spacing:.08em;text-transform:uppercase;overflow-wrap:anywhere}
.p-tag{color:var(--faint);font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:block;margin-top:4px}
.pill-live{
  flex:none;border:1.5px solid var(--text);border-radius:100px;padding:11px 24px;
  font-size:12px;font-weight:700;letter-spacing:.14em;background:none;color:var(--text);
  font-family:inherit;cursor:none;transition:.3s;
}
.pill-live:hover{background:var(--text);color:#0b0b0d}
.p-media{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px}
.p-media .pm{min-width:0;border-radius:16px;background-size:cover;background-position:center;aspect-ratio:16/8.4;border:1px solid var(--line)}
@media(max-width:680px){.p-media{grid-template-columns:1fr}.p-media .pm:nth-child(2){display:none}}
@media(max-width:560px){
  .p-card{padding:20px 18px 22px}
  .p-head{flex-wrap:wrap}
  .pill-live{padding:9px 18px}
}

/* ---------- Öğrenci işleri ---------- */
.students{position:relative;z-index:2;padding:100px 0 90px}
.students-sub{text-align:center;color:var(--muted);font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin:18px 0 60px}
.student-grid{max-width:1150px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
@media(max-width:760px){.student-grid{grid-template-columns:1fr}}
.s-card{
  position:relative;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:var(--surface);aspect-ratio:16/10;cursor:none;
  transition:border-color .4s,transform .4s var(--ease);
}
.s-card:hover{border-color:rgba(255,255,255,.4);transform:translateY(-4px)}
.s-card .thumb{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(.25) brightness(.8);transition:transform .8s var(--ease),filter .5s}
.s-card:hover .thumb{transform:scale(1.05);filter:none}
.s-card .veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,6,8,.85),rgba(6,6,8,.05) 60%)}
.s-card .meta{position:absolute;left:22px;right:22px;bottom:18px;z-index:2}
.s-card .meta .t{font-size:clamp(17px,2.2vw,24px);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.s-card .meta .g{color:var(--muted);font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-top:4px}

/* ---------- Deneyim ---------- */
.experience{position:relative;z-index:2;padding:60px 0 130px}
.mid-title{font-family:var(--anton);font-weight:400;font-size:clamp(34px,6vw,72px);text-align:center;text-transform:uppercase;margin-bottom:60px}
.exp-grid{max-width:1150px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:760px){.exp-grid{grid-template-columns:1fr}}
.exp-card{
  border:1px solid var(--line);border-radius:22px;padding:30px 32px;background:rgba(255,255,255,.02);
  transition:border-color .4s,transform .4s var(--ease);
}
.exp-card:hover{border-color:rgba(255,255,255,.4);transform:translateY(-4px)}
.exp-card .per{font-size:12px;letter-spacing:.2em;color:#c9a4ff;margin-bottom:12px;display:block}
.exp-card h3{font-size:22px;font-weight:700;letter-spacing:.02em}
.exp-card .rl{color:var(--muted);font-size:14px;margin:4px 0 14px}
.exp-card p{color:var(--muted);font-size:14.5px}
.exp-card.skills-card .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.exp-card.skills-card .tags span{font-size:12.5px;border:1px solid var(--line);border-radius:100px;padding:6px 13px;color:var(--text)}

/* ---------- İletişim ---------- */
.contact{position:relative;z-index:2;padding:120px 0 130px}
.contact-row{
  max-width:1000px;margin:50px auto 0;padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
}
.contact-mail{
  font-size:clamp(20px,3.4vw,38px);font-weight:700;color:#111;
  border-bottom:3px solid #111;padding-bottom:6px;transition:.3s;
}
.contact-mail:hover{color:#7b5cff;border-color:#7b5cff}
.pill-outline{
  border:2px solid #111;border-radius:100px;padding:16px 36px;font-size:13px;font-weight:700;
  letter-spacing:.14em;color:#111;transition:.3s;
}
.pill-outline:hover{background:#111;color:#f1efea}

/* ---------- Footer ---------- */
footer{position:relative;z-index:2;background:var(--bg);padding-top:90px;overflow:hidden}
.footer-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:70px}
.footer-name{
  font-family:var(--anton);font-size:clamp(44px,7vw,100px);line-height:.95;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.85);
}
.footer-cols{display:flex;gap:80px;flex-wrap:wrap}
.footer-cols h4{font-size:12px;letter-spacing:.24em;color:var(--faint);margin-bottom:16px}
.footer-cols a,.footer-cols span{display:block;color:var(--muted);font-size:14.5px;margin-bottom:9px;transition:color .3s}
.footer-cols a:hover{color:var(--text)}
.footer-shapes{display:flex;gap:0;height:clamp(70px,11vw,150px);align-items:stretch}
.footer-shapes .sh{flex:1}
.sh-1{background:#9d7bff;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.sh-2{background:#a8e05f;clip-path:circle(26% at 30% 30%)}
.sh-3{background:#f1efea;border-radius:0 0 50% 50%/0 0 100% 100%}
.sh-4{background:#7b5cff;border-radius:50%}
.sh-5{background:#f1efea;clip-path:polygon(0 0,100% 0,0 100%)}
.sh-6{background:#ff8a3d;clip-path:polygon(0 50% ,50% 0,100% 50%,50% 100%)}
.sh-7{background:#f1efea;clip-path:polygon(50% 0,100% 100%,0 100%)}
.sh-8{background:#e05fd0;border-radius:50%;clip-path:circle(38%)}
.footer-bottom{display:flex;justify-content:space-between;color:var(--faint);font-size:13px;padding-top:26px;padding-bottom:26px}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(38px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- Proje detay overlay ---------- */
.detail{position:fixed;inset:0;z-index:500;background:var(--bg);overflow-y:auto;transform:translateY(100%);transition:transform .7s var(--ease);visibility:hidden}
.detail.open{transform:translateY(0);visibility:visible}
.detail-top{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:20px 32px;background:rgba(11,11,13,.7);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.detail-top .brand{font-family:var(--anton);font-size:15px;letter-spacing:.1em}
.detail-close{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;font-weight:700;color:var(--muted);cursor:none;background:none;border:none;font-family:inherit}
.detail-close:hover{color:var(--text)}
.detail-hero{padding:80px 32px 30px;max-width:var(--max);margin:0 auto}
.detail-hero .g{color:#c9a4ff;font-size:13px;letter-spacing:.24em;text-transform:uppercase}
.detail-hero h1{font-family:var(--anton);font-weight:400;font-size:clamp(40px,8vw,110px);line-height:.95;margin-top:16px;text-transform:uppercase}
.detail-gallery{max-width:var(--max);margin:0 auto;padding:20px 32px 100px;display:flex;flex-direction:column;gap:26px}
.detail-gallery figure{border-radius:18px;overflow:hidden;background:var(--surface);border:1px solid var(--line)}
.detail-gallery img,.detail-gallery video{width:100%;display:block}
.detail-nav{max-width:var(--max);margin:0 auto;padding:0 32px 90px;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:40px}
.detail-nav button{background:none;border:none;color:var(--muted);font-family:var(--anton);font-size:clamp(18px,3vw,32px);cursor:none;letter-spacing:.02em;transition:color .3s;text-align:left;text-transform:uppercase}
.detail-nav button:hover{color:#c9a4ff}
.detail-nav .lbl{display:block;font-family:"Space Grotesk";font-size:11px;letter-spacing:.2em;color:var(--faint);margin-bottom:8px}
@media(max-width:640px){.detail-hero,.detail-gallery,.detail-nav{padding-left:20px;padding-right:20px}.detail-top{padding:16px 20px}}