/* ==========================================================
   modern.css — style.css'in üstüne binen modern/animasyon katmanı
   ========================================================== */
:root{--ease:cubic-bezier(.2,.8,.2,1);--accent-ink:#c9431f;--surface:#efede5;--surface-2:#e8e6dc;--surface-line:#ded9ce;--soft:#6f706a}
html[data-theme=dark]{--paper:#12130f;--ink:#f1eee5;--muted:#9a998f;--line:#33352f;--accent-ink:#ff9d80;--surface:#1b1d17;--surface-2:#171913;--surface-line:#2e3029;--soft:#a9a89d;color-scheme:dark}
body{transition:background .5s,color .5s;overflow-x:hidden}
::selection{background:var(--accent);color:#20211f}

/* ---------- grain + glow ---------- */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.07;mix-blend-mode:multiply;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='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
html[data-theme=dark] body::after{mix-blend-mode:screen;opacity:.05}
.hero-glow{position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(520px circle at var(--gx,70%) var(--gy,40%),color-mix(in srgb,var(--accent) 55%,transparent),transparent 62%);opacity:.55;transition:opacity .4s}
.hero{isolation:isolate}
.hero-copy,.hero-playground{z-index:1}

/* ---------- preloader ---------- */
.preloader{position:fixed;inset:0;z-index:200;background:#20211f;color:#f5f1e8;display:grid;place-items:center;transition:transform 1s var(--ease);animation:pre-failsafe .01s 5s forwards}
.preloader.is-done{transform:translateY(-101%)}
.preloader.is-gone{display:none}
.pre-inner{display:flex;flex-direction:column;align-items:center;gap:14px;font-family:var(--serif)}
.pre-count{font-size:clamp(70px,16vw,170px);font-weight:600;letter-spacing:-.08em;line-height:1;font-variant-numeric:tabular-nums}
.pre-count small{font-size:.28em;color:#ff9d80;margin-left:.1em;letter-spacing:0}
.pre-name{font:11px var(--mono);letter-spacing:.2em;color:#aaa99e;text-transform:uppercase}
.pre-bar{width:min(240px,60vw);height:1px;background:#454740;position:relative;overflow:hidden}
.pre-bar i{position:absolute;inset:0;background:#ff9d80;transform-origin:left;transform:scaleX(var(--p,0))}
.preloader.is-done .pre-inner{opacity:0;transition:opacity .3s}
@keyframes pre-failsafe{to{visibility:hidden;pointer-events:none}}
.js body:not(.is-ready) .hero-copy>*:not(h1){animation-play-state:paused}
.js body:not(.is-ready) .hero-playground{opacity:0}
.hero-playground{transition:opacity 1s .2s}

/* ---------- progress / cursor ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--green),var(--yellow),var(--pink),var(--blue))}
.cursor-dot,.cursor-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:150;border-radius:50%;opacity:0;transition:opacity .3s,width .3s var(--ease),height .3s var(--ease),background .3s,border-color .3s}
.cursor-dot{width:7px;height:7px;background:var(--ink);margin:-3.5px 0 0 -3.5px}
.cursor-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid var(--ink);mix-blend-mode:difference;border-color:#fff}
body.has-cursor .cursor-dot,body.has-cursor .cursor-ring{opacity:1}
body.cursor-hover .cursor-ring{width:68px;height:68px;margin:-34px 0 0 -34px;background:rgba(255,255,255,.9)}
body.cursor-hover .cursor-dot{opacity:0}
body.cursor-drag .cursor-ring{width:54px;height:54px;margin:-27px 0 0 -27px;border-style:dashed}
body.cursor-down .cursor-ring{transform:scale(.8)}
@media(hover:hover) and (pointer:fine){body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:none}body.has-cursor .window,body.has-cursor .sticker{cursor:none}}

/* ---------- header ---------- */
.site-header{transition:transform .5s var(--ease),background .4s,border-color .4s}
.site-header.is-hidden{transform:translateY(-100%)}
html[data-theme=dark] .site-header{background:rgba(18,19,15,.85);border-bottom-color:rgba(241,238,229,.08)}
html[data-theme=dark] .main-nav,html[data-theme=dark] .language,html[data-theme=dark] .quiet-link{color:#bdbcb1}
.main-nav a{position:relative;padding:6px 0;font-family:var(--mono);letter-spacing:.02em}
.main-nav a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.main-nav a:hover:after,.main-nav a.is-current:after{transform:scaleX(1);transform-origin:left}
.main-nav a.is-current{color:var(--accent-ink)}
.theme-toggle{width:34px;height:34px;border-radius:50%;border:1px solid #aaa99d;background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;font-size:15px;line-height:1;transition:transform .5s var(--ease),background .3s,color .3s;padding:0}
.theme-toggle:hover{background:var(--ink);color:var(--paper);transform:rotate(180deg)}
.theme-toggle .sun{display:none}
html[data-theme=dark] .theme-toggle .sun{display:block}
html[data-theme=dark] .theme-toggle .moon{display:none}
html[data-theme=dark] .contact-pill{border-color:#65675f}
.brand-mark{transition:transform .6s var(--ease)}
.brand:hover .brand-mark{transform:rotate(360deg) scale(1.1)}

/* ---------- hero ---------- */
.hero-copy h1{animation:none}
.char{display:inline-block;opacity:0;transform:translateY(.7em) rotate(10deg);transform-origin:0 100%;transition:translate .35s var(--ease),rotate .35s var(--ease),color .3s}
body.is-ready .char{animation:char-in .9s var(--ease) forwards;animation-delay:calc(var(--i)*45ms + 150ms)}
.char:hover{translate:0 -.07em;rotate:-6deg;color:var(--accent-ink)}
@keyframes char-in{to{opacity:1;transform:none}}
h1 .scribble.char{animation-name:char-in,wave;animation-duration:.9s,2.6s;animation-delay:calc(var(--i)*45ms + 150ms),1.6s;animation-iteration-count:1,infinite;animation-fill-mode:forwards,none}
@keyframes wave{0%,100%{rotate:0deg}50%{rotate:14deg}}
.availability{border:1px solid var(--surface-line);border-radius:99px;padding:8px 14px;width:max-content;max-width:100%;backdrop-filter:blur(6px);background:color-mix(in srgb,var(--paper) 60%,transparent)}
.availability-dot{animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(255,122,89,.55)}80%,100%{box-shadow:0 0 0 9px rgba(255,122,89,0)}}
.hero-description{color:var(--soft)}
html[data-theme=dark] .hero-footnote,html[data-theme=dark] .little-note,html[data-theme=dark] .hero-counter,html[data-theme=dark] .scroll-cue{color:#8f8e84}
.button-dark{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);border-radius:99px;padding:15px 22px;isolation:isolate}
.button-dark:before{content:"";position:absolute;inset:0;background:var(--accent);transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1;border-radius:inherit}
.button-dark:hover:before{transform:none}
.button-dark:hover{background:var(--ink);color:#20211f}
.button-dark span{transition:transform .4s var(--ease)}
.button-dark:hover span{transform:translateY(3px)}
.quiet-link{position:relative}
.quiet-link span{display:inline-block;transition:transform .3s var(--ease)}
.quiet-link:hover span{transform:translate(3px,-3px)}
.local-time{font-variant-numeric:tabular-nums}
.local-time b{color:var(--accent-ink);font-weight:500}
.scroll-cue span{position:relative;overflow:hidden;height:1px;width:34px}
.scroll-cue span:after{content:"";position:absolute;inset:0;background:var(--ink);animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.profile-window{transition:box-shadow .3s,background .4s}
html[data-theme=dark] .profile-window{background:#1f211b;box-shadow:8px 13px 0 rgba(0,0,0,.35)}
html[data-theme=dark] .window-bar{background:#2a2c25}
html[data-theme=dark] .window-status{border-top-color:#3a3c35}
html[data-theme=dark] .profile-avatar{color:#20211f}
html[data-theme=dark] .small-label,html[data-theme=dark] .window-status{color:#9a998f}
html[data-theme=dark] .orbit{border-color:rgba(241,238,229,.16)}
.sunburst,.orbit,.little-note,.hero-counter{translate:var(--px,0) var(--py,0)}
.typing-caret:after{content:"";display:inline-block;width:2px;height:1em;background:currentColor;margin-left:3px;vertical-align:-.12em;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;background:var(--ink);color:var(--paper);padding:20px 0;border-block:1px solid var(--ink);transform:rotate(-1.4deg);margin:-14px -2% 18px;position:relative;z-index:3}
.marquee.alt{background:var(--accent);color:#20211f;transform:rotate(1deg);margin-top:-26px;border-color:#20211f}
.marquee-track{display:flex;width:max-content;white-space:nowrap;will-change:transform}
.marquee-item{font:600 clamp(26px,4.4vw,52px)/1 var(--serif);letter-spacing:-.05em;padding:0 .5em;display:flex;align-items:center;gap:1em}
.marquee-item i{font-style:normal;color:var(--accent);font-size:.7em;display:inline-block;animation:spark-turn 8s linear infinite}
.marquee.alt .marquee-item{-webkit-text-stroke:1px #20211f;color:transparent}
.marquee.alt .marquee-item i{color:#20211f}
.marquee-wrap{overflow:hidden;padding:30px 0 20px;background:var(--paper);transition:background .5s}

/* ---------- sections ---------- */
.intro-band,.skills-section{background:var(--surface-2);transition:background .5s}
html[data-theme=dark] .intro-copy h2 span,html[data-theme=dark] .section-heading h2 span,html[data-theme=dark] .skills-content h2 span{color:#ff9d80}
html[data-theme=dark] .section-index{color:#8f8e84}
html[data-theme=dark] .intro-bottom p,html[data-theme=dark] .section-heading p,html[data-theme=dark] .project-info>p,html[data-theme=dark] .mini-copy p,html[data-theme=dark] .timeline-content>p:last-child,html[data-theme=dark] .timeline-place,html[data-theme=dark] .degree-note{color:var(--soft)}
html[data-theme=dark] .stack,html[data-theme=dark] .project-kicker,html[data-theme=dark] .project-meta,html[data-theme=dark] .timeline-date,html[data-theme=dark] .skill-group>span{color:#8f8e84}
html[data-theme=dark] .round-link{border-color:#65675f}
html[data-theme=dark] .round-link:hover{background:#f1eee5;color:#20211f}
html[data-theme=dark] .tag,html[data-theme=dark] .timeline-type{border-color:#454740;color:#b2b1a6}
html[data-theme=dark] .project-link{border-color:#65675f}
.section-index{display:inline-flex;align-items:center;gap:10px}
.section-index:before{content:"";width:0;height:1px;background:currentColor;transition:width .9s var(--ease)}
.section-index.is-visible:before,.is-visible .section-index:before{width:28px}

/* word-split headings */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .14em 0;margin-bottom:-.14em}
.w>span{display:inline-block;transform:translateY(112%) rotate(4deg);transition:transform 1s var(--ease);transition-delay:calc(var(--i)*70ms)}
.split-in .w>span{transform:none}

/* projects */
.project-card,.mini-project{background:var(--surface);border-color:var(--surface-line);position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .35s,border-color .35s,background .5s}
.project-card:before,.mini-project:before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 38%,transparent),transparent 65%);mix-blend-mode:soft-light}
.project-card:hover:before,.mini-project:hover:before{opacity:1}
.project-card:hover,.mini-project:hover{border-color:var(--ink)}
html[data-theme=dark] .project-card:hover,html[data-theme=dark] .mini-project:hover{border-color:#ff9d80}
.project-visual,.mini-art{color:#20211f}
.project-info h3,.mini-copy h3{transition:letter-spacing .5s var(--ease),color .3s}
.project-card:hover h3,.mini-project:hover h3{color:var(--accent-ink)}
.project-link{display:inline-block;transition:transform .3s var(--ease),color .3s}
.project-link:hover{color:var(--accent-ink)}
.project-link span{display:inline-block;transition:transform .3s var(--ease)}
.project-link:hover span{transform:translate(3px,-3px)}
.house-scene{animation:house-bob 5s ease-in-out infinite}
.house-roof{transition:transform .6s var(--ease)}
.project-card:hover .house-roof{transform:translateY(-8px) rotate(-1.5deg)}
.house-window{animation:window-glow 3.4s ease-in-out infinite alternate}
@keyframes house-bob{50%{translate:0 -8px}}
@keyframes window-glow{to{background:#f6df9a}}
.scene-spark{animation:spark-turn 9s linear infinite}
.map-ship{animation:ship-sail 7s ease-in-out infinite alternate}
@keyframes ship-sail{from{translate:-62px 34px}to{translate:62px -34px}}
.map-pin{animation:pin-pulse 2.2s ease-in-out infinite}
.pin-two{animation-delay:-1.1s}
@keyframes pin-pulse{50%{transform:scale(1.5)}}
.talent-bars span{transform-origin:bottom;transform:scaleY(0)}
.is-visible .talent-bars span,.talent-art:hover .talent-bars span{animation:bar-grow 1.1s var(--ease) forwards}
.talent-bars span:nth-child(2){animation-delay:.1s!important}.talent-bars span:nth-child(3){animation-delay:.2s!important}.talent-bars span:nth-child(4){animation-delay:.3s!important}.talent-bars span:nth-child(5){animation-delay:.4s!important}
@keyframes bar-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.talent-window{transition:transform .6s var(--ease)}
.mini-project:hover .talent-window{transform:rotate(1deg) translateY(-6px)}

/* skills chips */
.skill-group p{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{display:inline-block;border:1px solid var(--surface-line);border-radius:99px;padding:7px 13px;font-size:11px;background:color-mix(in srgb,var(--paper) 55%,transparent);transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s;opacity:0;translate:0 14px}
.is-visible .chip,.chips-in .chip{opacity:1;translate:0 0;transition:opacity .6s var(--ease) calc(var(--i)*45ms),translate .7s var(--ease) calc(var(--i)*45ms),transform .3s var(--ease),background .3s,color .3s,border-color .3s}
.chip:hover{transform:translateY(-3px) rotate(-2deg);background:var(--accent);color:#20211f;border-color:var(--accent)}
html[data-theme=dark] .chip{border-color:#3a3c35}
.skill-group{border-top:1px solid var(--surface-line);padding-top:16px}

/* timeline */
.timeline{position:relative}
.timeline:before{content:"";position:absolute;left:-2px;top:0;width:3px;height:calc(var(--tl,0)*100%);background:linear-gradient(var(--green),var(--yellow));border-radius:3px;transition:height .15s linear}
html[data-theme=dark] .timeline{border-left-color:#3a3c35}
.timeline-dot{transition:transform .5s var(--ease),background .4s,box-shadow .4s}
.timeline-item.is-active .timeline-dot{background:var(--accent);transform:scale(1.35);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 35%,transparent)}
.timeline-content{transition:transform .5s var(--ease)}
.timeline-item:hover .timeline-content{transform:translateX(8px)}
.timeline-item:first-child .timeline-dot{animation:ping 2.4s infinite}

/* contact */
.contact-section{background:#1a1b17;transition:background .5s}
html[data-theme=dark] .contact-section{background:#0c0d0a}
.contact-section h2{position:relative;z-index:1}
.contact-big{position:relative;z-index:1}
.contact-big:hover{transform:none}
.contact-sticker{animation:sticker-spin 18s linear infinite;z-index:0}
@keyframes sticker-spin{to{rotate:360deg}}
.contact-section:before{content:"";position:absolute;width:520px;height:520px;right:-120px;bottom:-220px;border-radius:50%;background:radial-gradient(circle,rgba(255,138,101,.22),transparent 65%);animation:blob-breathe 9s ease-in-out infinite alternate;pointer-events:none}
.social-links a{position:relative;padding:6px 0;transition:color .3s}
.social-links a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.social-links a:hover:after{transform:scaleX(1);transform-origin:left}
.social-links a:hover{color:#ff9d80}
.back-top{transition:transform .3s var(--ease),color .3s}
.back-top:hover{transform:translateY(-4px);color:#ff9d80}

/* live sites */
.live-head{margin-top:56px;display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--surface-line);padding-top:22px}
.live-head .mono{font-size:9px;letter-spacing:.14em;color:#818078}
.live-head p{margin:0;font-size:11px;color:#818078}
.live-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px}
.live-card .mini-copy p{min-height:96px}
.live-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:20px;flex-wrap:wrap}
.live-bottom .stack{margin:0!important}
.site-art.tone-peach{background:#f6dccb}.site-art.tone-pink{background:#ebd9e5}.site-art.tone-sky{background:#d7e4e6}
.site-window{position:absolute;left:11%;right:11%;top:50px;bottom:-16px;background:#f9f6f0;border:1px solid #45403f;box-shadow:5px 6px 0 rgba(51,43,49,.12);transform:rotate(-1.5deg);transition:transform .6s var(--ease);overflow:hidden}
.live-card:hover .site-window{transform:rotate(0) translateY(-8px)}
.site-bar{height:22px;background:#e4e1d8;border-bottom:1px solid #45403f;display:flex;align-items:center;gap:4px;padding:0 7px}
.site-bar i{width:6px;height:6px;border:1px solid #45403f;border-radius:50%}
.site-bar b{font:7px var(--mono);margin-left:8px;color:#45403f;background:#f9f6f0;padding:2px 8px;border-radius:9px;font-weight:400}
.site-shot{display:block;width:100%;height:calc(100% - 22px);object-fit:cover;object-position:top left;transition:transform .8s var(--ease)}
.live-card:hover .site-shot{transform:scale(1.05)}
.site-hero{height:54px;margin:9px;position:relative;background:linear-gradient(110deg,var(--accent),var(--yellow));overflow:hidden}
.site-hero em{position:absolute;left:10px;height:5px;background:rgba(32,33,31,.55);border-radius:3px;top:14px;width:46%;animation:site-line 3.2s ease-in-out infinite alternate}
.site-hero em+em{top:26px;width:30%;background:rgba(32,33,31,.3);animation-delay:-1.4s}
.site-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:0 9px}
.site-tiles i{height:34px;background:#e1ddd5;transition:background .3s,transform .4s var(--ease)}
.site-tiles i:nth-child(2){background:#d9cfc2}.site-tiles i:nth-child(3){background:#cfd6d4}
.live-card:hover .site-tiles i{transform:translateY(-3px)}
.live-card:hover .site-tiles i:nth-child(2){transition-delay:.05s}.live-card:hover .site-tiles i:nth-child(3){transition-delay:.1s}.live-card:hover .site-tiles i:nth-child(4){transition-delay:.15s}
@keyframes site-line{to{width:62%}}
html[data-theme=dark] .live-head .mono,html[data-theme=dark] .live-head p,html[data-theme=dark] .stat span{color:#8f8e84}
@media(max-width:900px){.live-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.live-grid{grid-template-columns:1fr;gap:14px}.live-card .mini-copy p{min-height:0}.live-head{margin-top:36px}}
@media(prefers-reduced-motion:reduce){.site-hero em{animation:none}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:56px;border-top:1px solid var(--surface-line)}
.stat{padding:22px 16px 6px 0;opacity:0;translate:0 18px;transition:opacity .8s var(--ease),translate .8s var(--ease)}
.stat+.stat{padding-left:18px;border-left:1px solid var(--surface-line)}
.stats.in .stat{opacity:1;translate:0 0}
.stats.in .stat:nth-child(2){transition-delay:.1s}.stats.in .stat:nth-child(3){transition-delay:.2s}.stats.in .stat:nth-child(4){transition-delay:.3s}
.stat b{display:block;font:600 clamp(34px,5vw,56px)/1 var(--serif);letter-spacing:-.07em;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:8px;font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#818078}
.section-index{text-transform:uppercase;letter-spacing:.14em}
.hero-playground{cursor:grab}
@media(max-width:650px){.stats{grid-template-columns:1fr 1fr;row-gap:6px}.stat:nth-child(3){padding-left:0;border-left:0}}
@media(prefers-reduced-motion:reduce){.stat{opacity:1;translate:none;transition:none}}

/* click burst */
.burst{position:fixed;z-index:140;pointer-events:none;font-size:18px;left:0;top:0;will-change:transform,opacity}

/* tilt/magnetic helper */
.magnetic:not(:hover){transition:translate .6s var(--ease),transform .5s var(--ease),background .3s,color .3s}

@media(max-width:650px){
  .marquee{margin:-6px -4% 10px;padding:14px 0}
  .marquee.alt{margin-top:-18px}
  .theme-toggle{width:30px;height:30px;font-size:13px}
  .header-tools{gap:10px}
  .availability{font-size:8px}
  .timeline:before{left:-2px}
  .skill-group p{gap:6px}
  .chip{padding:6px 10px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .preloader{display:none}
  .char,.w>span,.chip,.talent-bars span{opacity:1!important;transform:none!important;translate:none!important;animation:none!important;transition:none!important}
  .house-scene,.map-ship,.map-pin,.house-window,.contact-sticker,.marquee-item i,.availability-dot,.scroll-cue span:after{animation:none!important}
  .hero-playground{opacity:1!important}
}