/* ==========================================================================
   yunusekim.com — orijinal tasarım, modern altyapı (v8)
   Bootstrap / jQuery / Modernizr yok. Native nesting, @property,
   scroll-driven animations, :has(), mask-composite, backdrop-filter.
   ========================================================================== */

@property --spin { syntax: '<angle>';      inherits: false; initial-value: 0deg; }
@property --p    { syntax: '<percentage>'; inherits: true;  initial-value: 0%; }

:root {
  --indigo-1: #271579;
  --indigo-2: #160b49;
  --indigo:   #211067;
  --link:     #351f8a;
  --lilac:    #56469d;
  --lavender: #b9a8ff;
  --slate:    #2f3c4f;
  --slate-2:  #55598d;
  --ink:      #000;
  --text:     #5b5b66;
  --muted:    #bfbfbf;
  --line:     #e6e6e6;
  --soft:     #f7f7f7;

  --mono:   'Space Mono', ui-monospace, Menlo, monospace;
  --script: 'Kaushan Script', cursive;

  --ease:   cubic-bezier(.22, 1, .36, 1);
  --spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.077, 1.121 24%, 1.149 26.3%, 1.159 28.4%, 1.163 30.7%, 1.154 33.3%, 1.129 36.6%, 1.051 43.8%, 1.017 47.5%, .991 51.1%, .977 55%, .975 59.8%, .997 73.3%, 1.003 81%, 1);
  --brandline: linear-gradient(90deg, var(--indigo), var(--lilac));
}

/* ---------- ikon fontu (orijinal icomoon) ---------- */
@font-face {
  font-family: 'icomoon';
  src: url(../fonts/icomoon/icomoon.woff?ny6j3x) format('woff'), url(../fonts/icomoon/icomoon.ttf?ny6j3x) format('truetype');
  font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon' !important; font-style: normal; font-weight: 400; line-height: 1;
  speak: never; -webkit-font-smoothing: antialiased; display: inline-block;
}
.icon-twitter2::before   { content: "\ea7d"; }
.icon-linkedin2::before  { content: "\ea74"; }
.icon-dribbble2::before  { content: "\ea66"; }
.icon-instagram1::before { content: "\e900"; }
.icon-network::before    { content: "\e9ea"; }
.icon-qrcode::before     { content: "\eaf6"; }
.icon-embed2::before     { content: "\ec3d"; }
.icon-css3::before       { content: "\eca3"; }
.icon-question::before   { content: "\ebc7"; }
.icon-play::before       { content: "\eab8"; }
.icon-facebook3::before  { content: "\ec4d"; }
.icon-github2::before    { content: "\ec6d"; }
.icon-codepen::before    { content: "\eca5"; }
.icon-behance::before    { content: "\ea42"; }
.icon-suitcase::before   { content: "\ea20"; }
.icon-heart2::before     { content: "\eaa4"; }
.icon-eye2::before       { content: "\eaa8"; }

/* ---------- temel ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font: 400 15px/1.8 var(--mono);
  color: var(--text); background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3 { font-family: var(--mono); font-weight: 400; color: var(--ink); line-height: 1.35; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--link); text-decoration: none; transition: color .3s; }
a:hover { color: var(--lilac); }
:focus-visible { outline: 2px solid var(--lilac); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--indigo); color: #fff; }

.container { width: min(100% - 30px, 1170px); margin-inline: auto; }
.section { padding-block: clamp(4em, 9vw, 7em); overflow-x: clip; }

/* scroll ilerleme çizgisi */
.progress {
  position: fixed; inset: 0 0 auto; height: 3px; z-index: 100; pointer-events: none;
  background: var(--brandline); transform-origin: 0 50%; scale: 0 1;
}

/* ==========================================================================
   BÖLÜM BAŞLIKLARI — arkada dev outline kelime, mürekkep dolumu, renkli çizgi
   ========================================================================== */
.heading { text-align: center; margin-bottom: clamp(2.5em, 6vw, 5em); }
h2.heading, .heading h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.5; }
.heading p { max-width: 640px; margin: 16px auto 0; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.5; color: #828282; }

h2[data-bg] {
  position: relative; isolation: isolate;
  &::before {
    content: attr(data-bg);
    position: absolute; left: 50%; top: 46%; translate: -50% -50%; z-index: -1;
    font-size: clamp(76px, 14vw, 200px); font-weight: 700; line-height: 1; letter-spacing: -.03em;
    white-space: nowrap; pointer-events: none; user-select: none;
    color: transparent; -webkit-text-stroke: 1px rgb(33 16 103 / .13);
  }
  &::after {
    content: ''; display: block; width: 92px; height: 14px; margin: 8px auto 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 14'%3E%3Cpath d='M3 10.6C18 4.4 35 3.3 51 5.4s25 3.5 38-1.9' fill='none' stroke='%23211067' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}

/* ==========================================================================
   SPOT — imleci takip eden ışık + kenar parlaması (JS: --mx / --my)
   ========================================================================== */
.spot {
  position: relative; isolation: isolate;
  --glow: rgb(86 70 157 / .85);
  --fill: rgb(86 70 157 / .07);
  > * { position: relative; z-index: 1; }
  &::before, &::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity .5s var(--ease);
  }
  /* kenar: yalnızca 1px halka boyanır (mask-composite) */
  &::before {
    z-index: 2; padding: 1px;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), var(--glow), transparent 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
  &::after {
    z-index: 0;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--fill), transparent 45%);
  }
  &:hover::before, &:hover::after { opacity: 1; }
}

/* tilt (JS: --rx / --ry) */
[data-tilt] {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .7s var(--ease);
  will-change: transform;
  &:hover { transition-duration: .18s; }
}

/* ==========================================================================
   COVER
   ========================================================================== */
.cover {
  position: relative; isolation: isolate;
  min-height: 100svh; display: grid; place-items: center;
  padding: 80px 15px 140px; overflow: clip;
  color: #fff; text-align: center;
}
.cover__bg {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(25deg, var(--indigo-1), var(--indigo-2));
  &::before, &::after {
    content: ''; position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55;
    animation: drift 18s ease-in-out infinite alternate;
  }
  &::before { width: 46vmax; height: 46vmax; left: -12vmax; bottom: -18vmax; background: #3a22a3; }
  &::after  { width: 38vmax; height: 38vmax; right: -10vmax; top: -14vmax; background: #0d0630; animation-delay: -9s; }
}
@keyframes drift { to { translate: 8vmax -6vmax; scale: 1.15; } }

.avatar {
  position: relative; width: 200px; aspect-ratio: 1; margin: 0 auto 30px;
  border-radius: 50%;
  /* sade: ince sabit hale + derinlik gölgesi */
  box-shadow: 0 0 0 6px rgb(255 255 255 / .07), 0 0 0 7px rgb(255 255 255 / .12), 0 30px 60px -24px rgb(0 0 0 / .7);
  img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
}
@keyframes spin { to { --spin: 360deg; } }

.name {
  font: 400 clamp(34px, 5vw, 50px)/1.3 var(--script);
  color: #fff; margin-bottom: 30px; rotate: -5deg;
  span { position: relative; padding: 4px 15px; display: inline-block; }
  span::before, span::after {
    content: ''; position: absolute; top: 55%; width: clamp(20px, 2.4vw, 30px); height: clamp(3px, .3vw, 4px); background: #fff;
  }
  span::before { right: 100%; transform-origin: right; }
  span::after  { left: 100%;  transform-origin: left; }
}
.role { font-size: clamp(13px, 1.3vw, 16px); color: #fff; margin-bottom: 26px; }

.cover__icons {
  display: flex; justify-content: center; flex-wrap: wrap;
  a { display: block; color: #fff; padding: 4px 10px; font-size: 30px; transition: translate .4s var(--spring), opacity .3s; }
  a:hover { color: #fff; translate: 0 -4px; }
  &:has(a:hover) a:not(:hover) { opacity: .45; }
}
/* araçlar: sabit ölçülü cam bar. Hover yalnızca transform + renk → layout asla kaymaz */
.dock { display: grid; justify-items: center; gap: 14px; margin-top: 30px; }
.dock__title {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: rgb(255 255 255 / .55);
  &::before, &::after { content: ''; width: 22px; height: 1px; background: rgb(255 255 255 / .35); }
}
.dock ul {
  display: flex; gap: 8px; padding: 9px; border-radius: 22px;
  background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .14);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 24px 50px -24px rgb(0 0 0 / .7), inset 0 1px 0 rgb(255 255 255 / .12);
}
.dock li { position: relative; }
.dock a {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  color: #fff; border: 1px solid rgb(255 255 255 / .14);
  background: rgb(255 255 255 / .08);
  transition: transform .35s var(--ease), background-color .25s, color .25s, border-color .25s, box-shadow .35s var(--ease);
  svg { width: 23px; height: 23px; transition: transform .35s var(--ease); }
}
.dock a:hover, .dock a:focus-visible {
  transform: translateY(-3px);
  background: #fff; color: var(--indigo); border-color: #fff;
  box-shadow: 0 12px 22px -12px rgb(0 0 0 / .7);
  svg { transform: scale(1.06); }
}
.dock a:active { transform: translateY(-1px); }
/* etiket: karonun altında, akışın dışında */
.dock li::after {
  content: attr(data-label);
  position: absolute; left: 50%; top: calc(100% + 16px); z-index: 2;
  transform: translate(-50%, -4px);
  padding: 5px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none;
  background: #fff; color: var(--indigo); font-size: 11px; line-height: 1.3;
  box-shadow: 0 10px 24px -10px rgb(0 0 0 / .55);
  opacity: 0; transition: opacity .2s, transform .3s var(--ease);
}
.dock li:has(a:hover, a:focus-visible)::after { opacity: 1; transform: translate(-50%, 0); }
@media (width < 420px) { .dock a { width: 42px; height: 42px; } .dock ul { gap: 6px; padding: 7px; } }
@media (hover: none) { .dock li::after { display: none; } }

.mouse {
  position: absolute; left: 50%; bottom: 56px; translate: -50% 0;
  width: 30px; height: 50px; border: 2px solid rgb(255 255 255 / .75); border-radius: 20px;
  &::after {
    content: ''; position: absolute; left: 50%; top: 9px; width: 4px; height: 8px; margin-left: -2px;
    border-radius: 2px; background: #fff; animation: wheel 2s var(--ease) infinite;
  }
  span { position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; font-size: 12px; letter-spacing: 4px; color: #fff; opacity: .8; }
}
@keyframes wheel { 0% { opacity: 0; translate: 0 0; } 25% { opacity: 1; } 70% { opacity: 0; translate: 0 14px; } 100% { opacity: 0; } }

/* ==========================================================================
   HAKKIMDA
   ========================================================================== */
.about {
  display: grid; gap: 3em 40px;
  @media (width >= 992px) { grid-template-columns: 1fr 2fr; align-items: start; }
}
.info {
  display: grid; gap: 16px; margin-bottom: 2.5em;
  padding: 28px; border-radius: 18px;
  background: linear-gradient(160deg, #fbfaff, #fff 60%);
  border: 1px solid #eeebf8;
  box-shadow: 0 18px 40px -26px rgb(33 16 103 / .35);
  > div { display: grid; grid-template-columns: 40% 60%; }
  dt { color: var(--ink); font-weight: 700; }
  dd { color: rgb(0 0 0 / .5); }
  a { color: inherit; }
  a:hover { color: var(--link); }
}
.signature {
  display: block; width: 143px; aspect-ratio: 143 / 42; background: var(--ink); margin-left: 28px;
  -webkit-mask: url(../images/ekim.svg) 0 0 / 100% 100% no-repeat;
          mask: url(../images/ekim.svg) 0 0 / 100% 100% no-repeat;
  @media (width < 992px) { display: none; }
}
.about__text {
  h3 { font-size: 24px; display: flex; align-items: flex-end; gap: 6px; margin-bottom: 20px;
    img { width: 40px; } }
  p { margin-bottom: 1.2em; }
  p a { padding: 0 2px; background: linear-gradient(transparent 58%, rgb(86 70 157 / .22) 58%) 0 0 / 100% 100% no-repeat; }
}

/* sosyal: ince çizgili yuvarlak ikonlar; etiket akışın dışında, ikonun altında */
.socials {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2.2em;
  li { position: relative; }
  a {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
    color: var(--slate); font-size: 17px;
    border: 1px solid #dcdae6; background: #fff;
    transition: transform .35s var(--ease), background-color .25s, color .25s, border-color .25s, box-shadow .35s var(--ease);
  }
  a:is(:hover, :focus-visible) {
    transform: translateY(-3px);
    background: var(--indigo); border-color: var(--indigo); color: #fff;
    box-shadow: 0 12px 22px -12px rgb(33 16 103 / .6);
  }
  a:active { transform: translateY(-1px); }
  li::after {
    content: attr(data-label);
    position: absolute; left: 50%; top: calc(100% + 12px); z-index: 2;
    transform: translate(-50%, -4px);
    padding: 4px 9px; border-radius: 7px; white-space: nowrap; pointer-events: none;
    background: var(--indigo); color: #fff; font-size: 11px; line-height: 1.3;
    opacity: 0; transition: opacity .2s, transform .3s var(--ease);
  }
  li:has(a:hover, a:focus-visible)::after { opacity: 1; transform: translate(-50%, 0); }
  @media (hover: none) { li::after { display: none; } }
}

/* ==========================================================================
   HİZMETLER — eğik kesim, aurora, cam kartlar
   ========================================================================== */
#features {
  --cut: clamp(28px, 5vw, 80px);
  position: relative; isolation: isolate; overflow: clip;
  padding-block: calc(clamp(5em, 9vw, 7em) + var(--cut));
  clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 calc(100% - var(--cut)));
  color: #fff;
  &::before {
    content: ''; position: absolute; inset: -20% 0; z-index: -2;
    background: #4e546d url(../images/bg-gradient.avif) center / cover no-repeat;
  }
  &::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background:
      radial-gradient(38% 55% at 18% 30%, rgb(122 92 255 / .45), transparent 70%),
      radial-gradient(30% 45% at 85% 75%, rgb(185 168 255 / .22), transparent 70%),
      linear-gradient(180deg, rgb(22 11 73 / .35), rgb(22 11 73 / .55));
    background-size: 160% 160%, 160% 160%, 100% 100%;
    animation: aurora 16s ease-in-out infinite alternate;
  }
}
@keyframes aurora { to { background-position: 100% 60%, 0% 40%, 0 0; } }

.features {
  display: grid; gap: 30px; text-align: center;
  @media (width >= 768px) { grid-template-columns: repeat(3, 1fr); }
}
.feature {
  --glow: rgb(255 255 255 / .8);
  --fill: rgb(255 255 255 / .1);
  padding: 46px 28px 40px; border-radius: 22px;
  background: rgb(255 255 255 / .06);
  border: 1px solid rgb(255 255 255 / .12);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 30px 60px -30px rgb(10 4 40 / .6), inset 0 1px 0 rgb(255 255 255 / .12);
  h3 { font-size: 24px; color: #fff; margin-bottom: 12px; }
  p  { font-size: 15px; color: rgb(255 255 255 / .72); max-width: 32ch; margin-inline: auto; }
}
/* ikon: imleçle derinlik; hover'da hafif yükselir, hale genişler — biçim değişmez */
.feature__icon {
  position: relative; display: grid; place-items: center; width: 100px; height: 100px; margin: 0 auto 30px;
  border-radius: 50%;
  background: linear-gradient(160deg, #fff 30%, #e8e4f8);
  box-shadow: 0 0 0 8px rgb(255 255 255 / .06), 0 20px 40px -14px rgb(0 0 0 / .6), inset 0 -8px 16px rgb(33 16 103 / .07);
  translate: calc(var(--px, 0) * 24px) calc(var(--py, 0) * 24px);
  transition: translate .6s var(--ease), box-shadow .6s var(--ease);
  img { width: 54px; height: 54px; transition: transform .6s var(--ease); }
}
.feature h3 { translate: calc(var(--px, 0) * 10px) calc(var(--py, 0) * 10px); transition: translate .6s var(--ease); }
.feature:hover .feature__icon {
  box-shadow: 0 0 0 14px rgb(255 255 255 / .1), 0 30px 50px -18px rgb(0 0 0 / .7), inset 0 -8px 16px rgb(33 16 103 / .07);
  img { transform: translateY(-3px); }
}
@keyframes orbit { to { rotate: 1turn; } }

/* ==========================================================================
   DENEYİMLER — dolan ray, akan ışık noktası, kart paneller
   ========================================================================== */
.timeline__label {
  display: table; margin: 0 auto 3em;
  padding: 8px 18px; border-radius: 999px;
  background: linear-gradient(#f1f1f1, #e6e6e6);
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px -10px rgb(0 0 0 / .4);
  font-size: 16px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: var(--ink);
}
.timeline ol {
  position: relative; display: grid; gap: 3em;
  --rail: 22px;
  /* ray: gri zemin + üstte --p kadar dolan gradyan */
  &::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: var(--rail); width: 2px; margin-left: -1px;
    background: linear-gradient(var(--indigo), var(--lilac), var(--lavender)) top / 100% var(--p) no-repeat, var(--line);
  }
  /* ışık noktası, dolumun ucunda */
  &::after {
    content: ''; position: absolute; left: var(--rail); top: var(--p); width: 12px; height: 12px; margin: -6px 0 0 -6px;
    border-radius: 50%; background: #fff; border: 3px solid var(--lilac);
    box-shadow: 0 0 0 6px rgb(86 70 157 / .15), 0 0 24px 6px rgb(86 70 157 / .45);
    opacity: 0; transition: opacity .3s;
  }
  @media (width >= 768px) { --rail: 50%; }
}
.timeline li {
  position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 0 24px;
  .badge {
    position: relative; z-index: 1; grid-column: 1; grid-row: 1; align-self: start; margin-top: 18px;
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
    background: var(--indigo); color: #fff; font-size: 18px;
    box-shadow: 0 0 0 6px #fff, 0 10px 20px -6px rgb(33 16 103 / .6);
  }
  &.is-current .badge::before, &.is-current .badge::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--lilac);
    animation: ripple 2.6s var(--ease) infinite;
  }
  &.is-current .badge::after { animation-delay: 1.3s; }
  .panel {
    grid-column: 2; padding: 22px 26px; border-radius: 16px;
    background: #fff; border: 1px solid #efedf6;
    box-shadow: 0 16px 36px -26px rgb(33 16 103 / .4);
    transition: transform .5s var(--ease), box-shadow .5s var(--ease);
    &:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -26px rgb(33 16 103 / .5); }
  }
  h3 { font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 4px; }
  .company { display: block; margin-bottom: 12px; font-size: 14px; color: #a9a6b8; }
  @media (width >= 768px) {
    grid-template-columns: 1fr 44px 1fr; gap: 0 40px;
    .badge { grid-column: 2; }
    &:nth-child(odd)  .panel { grid-column: 1; grid-row: 1; text-align: right; }
    &:nth-child(even) .panel { grid-column: 3; grid-row: 1; }
  }
}
@keyframes ripple { from { scale: 1; opacity: .9; } to { scale: 2.3; opacity: 0; } }

/* ==========================================================================
   PROJELER — perde açılışı, 3D tilt, parıltı, cam etiket
   ========================================================================== */
.section--tint { background: var(--soft) url(../images/bg-gradient.avif) center / auto 100% no-repeat; }
.works {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
.work {
  position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 14px;
  background: #e9e6f3;
  box-shadow: 0 20px 40px -28px rgb(33 16 103 / .55);
  transition: transform .7s var(--ease), filter .5s, scale .5s var(--ease), box-shadow .5s;
  img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s var(--ease); }
  /* imleçte parıltı */
  &::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / .55), transparent 45%);
    mix-blend-mode: soft-light; opacity: 0; transition: opacity .4s;
  }
  figcaption {
    position: absolute; inset: auto 12px 12px; z-index: 1;
    display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px;
    padding: 14px 16px; border-radius: 12px;
    background: rgb(255 255 255 / .74);
    -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
    box-shadow: 0 10px 30px -12px rgb(33 16 103 / .4);
    translate: 0 calc(100% + 20px); transition: translate .6s var(--ease);
  }
  h3 { width: 100%; font-size: 17px; line-height: 1.3; margin-bottom: 2px; }
  span { color: #6d6a7c; font-size: 12px; }
  span + span::before { content: '·'; margin-right: 8px; }
  &:hover {
    box-shadow: 0 34px 60px -30px rgb(33 16 103 / .7);
    img { scale: 1.08; }
    &::after { opacity: 1; }
    figcaption { translate: 0 0; }
  }
}
.works:has(.work:hover) .work:not(:hover) { filter: saturate(.25) brightness(.98); scale: .97; }
@media (hover: none) {
  .work figcaption { translate: 0 0; }
}

/* ==========================================================================
   BLOG — kenarı parlayan kartlar, alttan açılan görsel
   ========================================================================== */
.posts {
  display: grid; gap: 30px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.post {
  display: flex; flex-direction: column; background: #fff; border-radius: 18px; overflow: hidden;
  border: 1px solid #f0eef7;
  box-shadow: 0 2px 5px rgb(0 0 0 / .04), 0 24px 40px -34px rgb(33 16 103 / .5);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
  &:hover { transform: translateY(-8px); box-shadow: 0 2px 5px rgb(0 0 0 / .04), 0 34px 60px -30px rgb(33 16 103 / .45); }
  &:hover .post__img img { scale: 1.07; rotate: -1deg; }
}
.post__img { display: block; height: 250px; overflow: hidden;
  img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s var(--ease), rotate 1.1s var(--ease); } }
.post__body {
  flex: 1; display: flex; flex-direction: column; padding: 28px 30px 26px;
  time { display: inline-flex; align-self: flex-start; font-size: 12px; letter-spacing: .06em; color: var(--lilac);
    padding: 3px 10px; border-radius: 999px; background: #f2f0fa; margin-bottom: 14px; }
  h3 { font-size: 21px; line-height: 1.45; margin-bottom: 14px;
    a { color: var(--ink); background: linear-gradient(var(--lilac) 0 0) 0 100% / 0 2px no-repeat; transition: background-size .5s var(--ease), color .3s; } }
  p { margin-bottom: 20px; font-size: 14px; }
}
.post:hover h3 a { background-size: 100% 2px; }
.stuff {
  display: flex; gap: 14px; align-items: center; margin-top: auto;
  padding-top: 18px; border-top: 1px solid rgb(0 0 0 / .06); font-size: 13px;
  i { font-size: 13px; margin-right: 6px; transition: color .3s, scale .4s var(--spring); }
  li:first-child:hover i { color: #e25555; scale: 1.3; }
  li:last-child { margin-left: auto; }
  a { color: var(--ink); display: inline-flex; gap: 8px; }
  b { font-weight: 400; transition: translate .4s var(--spring); }
  a:hover { color: var(--link); b { translate: 5px 0; } }
}

/* ==========================================================================
   BİRLİKTE ÇALIŞALIM — hero ile aynı lacivert; sayfa açıldığı tonda kapanır
   ========================================================================== */
#consult {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: clamp(5em, 10vw, 8.5em);
  background: linear-gradient(25deg, var(--indigo-1), var(--indigo-2));
  color: rgb(255 255 255 / .72);
}
.consult__bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* nokta ızgarası, merkezden kenara söner */
  background: radial-gradient(rgb(255 255 255 / .09) 1px, transparent 1.6px) 0 0 / 26px 26px;
  -webkit-mask: radial-gradient(ellipse 70% 80% at 65% 45%, #000 10%, transparent 70%);
          mask: radial-gradient(ellipse 70% 80% at 65% 45%, #000 10%, transparent 70%);
  &::before, &::after { content: ''; position: absolute; border-radius: 50%; filter: blur(90px); animation: drift 20s ease-in-out infinite alternate; }
  &::before { width: 40vmax; height: 40vmax; left: -10vmax; top: -10vmax; background: rgb(120 80 255 / .45); }
  &::after  { width: 30vmax; height: 30vmax; right: -8vmax; bottom: -12vmax; background: rgb(185 168 255 / .16); animation-delay: -10s; }
}
.consult {
  display: grid; gap: 56px; align-items: center;
  @media (width >= 992px) { grid-template-columns: 5fr 6fr; gap: clamp(60px, 7vw, 110px); }
}

/* görsel: dikey çerçeve, kırpılmadan; kenarda dönen ışık */
.consult__media { position: relative; width: min(100%, 440px); margin-inline: auto; }
.consult__media::before {
  content: ''; position: absolute; inset: 8% -6% -4%; z-index: -1; border-radius: 40px;
  background: radial-gradient(closest-side, rgb(160 100 255 / .55), transparent); filter: blur(30px);
}
.consult__frame {
  aspect-ratio: 2 / 3; border-radius: 30px; padding: 6px;
  background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .16);
  box-shadow: 0 50px 90px -40px rgb(0 0 0 / .75);
  rotate: -2deg; transition: rotate .8s var(--spring);
  picture { display: block; height: 100%; overflow: hidden; border-radius: 24px; }
  img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); }
}
.consult__media:hover .consult__frame { rotate: 0deg; img { scale: 1.04; } }
@media (width < 992px) { .consult__frame { aspect-ratio: 4 / 5; } .consult__frame img { object-position: 50% 62%; } }

.consult__chip {
  position: absolute; left: -22px; bottom: 44px;
  display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 18px;
  background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .25);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 24px 40px -20px rgb(0 0 0 / .7);
  color: rgb(255 255 255 / .8); font-size: 12px; line-height: 1.4;
  animation: float 6s ease-in-out infinite;
  img { width: 40px; height: 40px; border-radius: 12px; background: #fff; padding: 4px; }
  b { display: block; color: #fff; font-size: 14px; }
  @media (width < 520px) { left: 10px; bottom: 18px; }
}
@keyframes float { 50% { translate: 0 -10px; } }

.eyebrow {
  display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
  font-size: 12px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: rgb(255 255 255 / .6);
  &::before { content: ''; width: 36px; height: 2px; border-radius: 2px; background: var(--brandline); }
}
.consult__title {
  color: #fff; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.15; margin-bottom: 26px;
  span { display: inline-block; }
  em {
    display: inline-block; font: 400 1.2em/1 var(--script); rotate: -5deg; padding: 0 .1em .12em;
    background: linear-gradient(100deg, #fff 30%, #c9b8ff 45%, var(--lavender) 52%, #c9b8ff 60%, #fff 72%) 100% 0 / 260% 100% no-repeat;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shimmer 6s var(--ease) infinite;
  }
}
@keyframes shimmer { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0% 0; } }
.consult__lead { max-width: 48ch; font-size: 16px; margin-bottom: 36px; }

.consult__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-bottom: 44px; }

.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 0; height: 56px; padding: 0 44px; border-radius: 30px;
  background: #fff; color: var(--indigo); font-size: 15px; text-transform: uppercase; letter-spacing: .04em;
  box-shadow: 0 18px 36px -16px rgb(0 0 0 / .6);
  transition: color .4s, padding .4s var(--ease), gap .4s var(--ease), box-shadow .4s;
  &::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: linear-gradient(90deg, var(--indigo), var(--lilac));
    clip-path: circle(0 at 50% 50%); transition: clip-path .6s var(--ease); }
  b { font-weight: 400; width: 0; opacity: 0; overflow: hidden; transition: width .4s var(--ease), opacity .3s; }
  &:hover { color: #fff; padding: 0 34px 0 44px; gap: 12px;
    &::before { clip-path: circle(75% at 50% 50%); }
    b { width: 1em; opacity: 1; } }
}

.copy {
  position: relative; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px;
  border-radius: 30px; border: 1px solid rgb(255 255 255 / .25); background: rgb(255 255 255 / .06);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; font: inherit; font-size: 14px; cursor: pointer;
  transition: background-color .3s, border-color .3s;
  svg { width: 16px; height: 16px; opacity: .7; transition: opacity .3s, translate .4s var(--spring); }
  &:hover { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .45); svg { opacity: 1; translate: 2px -2px; } }
  .copy__tip {
    position: absolute; left: 50%; bottom: calc(100% + 10px); translate: -50% 6px;
    padding: 5px 12px; border-radius: 8px; background: #fff; color: var(--indigo);
    font-style: normal; font-size: 12px; white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity .3s, translate .5s var(--spring);
    &:empty { display: none; }
  }
  &.is-done .copy__tip { opacity: 1; translate: -50% 0; }
}

.consult__meta {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0;
  border-top: 1px solid rgb(255 255 255 / .14); padding-top: 26px;
  > div { padding-right: clamp(18px, 3vw, 40px); margin-right: clamp(18px, 3vw, 40px); border-right: 1px solid rgb(255 255 255 / .14); }
  > div:last-child { border: 0; margin: 0; padding: 0; }
  dt { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: rgb(255 255 255 / .45); margin-bottom: 4px; }
  dd { color: #fff; font-size: 14px; }
  dd a { color: #fff; background: linear-gradient(rgb(255 255 255 / .4) 0 0) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size .4s var(--ease); }
  dd a:hover { color: #fff; background-size: 0 1px; background-position: 100% 100%; }
  @media (width < 520px) { grid-template-columns: 1fr; gap: 14px; > div { border: 0; margin: 0; padding: 0; } }
}

/* ==========================================================================
   FOOTER — imza, link kolonları, dönen "başa dön", dev el yazısı
   ========================================================================== */
#site-footer {
  position: relative; isolation: isolate; overflow: clip;
  background: #0c0630; color: rgb(255 255 255 / .55); font-size: 14px;
  &::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / .25), var(--lavender), rgb(255 255 255 / .25), transparent); }
  a { color: rgb(255 255 255 / .75); }
  a:hover { color: #fff; }
}
.foot { padding-top: clamp(4em, 8vw, 6em); }
.foot__top {
  display: grid; gap: 48px 40px;
  grid-template-columns: 1fr 1fr;
  @media (width >= 900px) { grid-template-columns: 2.2fr 1fr 1.2fr auto; }
}
.foot__brand {
  grid-column: 1 / -1;
  @media (width >= 900px) { grid-column: auto; }
  p { max-width: 36ch; margin: 22px 0 18px; line-height: 1.7; }
}
.foot__sig {
  display: block; width: 150px; aspect-ratio: 143 / 42; background: #fff;
  -webkit-mask: url(../images/ekim.svg) 0 0 / 100% 100% no-repeat;
          mask: url(../images/ekim.svg) 0 0 / 100% 100% no-repeat;
}
.foot__mail {
  font-size: 16px; color: #fff !important;
  background: linear-gradient(90deg, var(--lilac), var(--lavender)) 0 100% / 100% 2px no-repeat;
  padding-bottom: 4px; transition: background-size .5s var(--ease);
  &:hover { background-size: 0 2px; background-position: 100% 100%; }
}
.foot__col {
  h3 { color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 18px; }
  ul { display: grid; gap: 8px; }
  a { position: relative; display: inline-flex; align-items: center; gap: 0; transition: color .3s, gap .4s var(--ease); }
  a::before { content: ''; width: 0; height: 1px; background: var(--lavender); transition: width .4s var(--ease); }
  a:hover { gap: 10px; &::before { width: 14px; } }
}
.foot__col ul:has(a:hover) a:not(:hover) { color: rgb(255 255 255 / .35); }

.totop {
  position: relative; display: grid; place-items: center; width: 120px; height: 120px; align-self: start;
  grid-column: 1 / -1; justify-self: start;
  @media (width >= 900px) { grid-column: auto; justify-self: end; }
  svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: orbit 16s linear infinite; }
  text { fill: rgb(255 255 255 / .6); font: 700 10.5px var(--mono); }
  span {
    display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%;
    background: #fff; color: var(--indigo); font-size: 22px; line-height: 1;
    transition: scale .5s var(--spring), background-color .3s, color .3s;
  }
  &:hover { span { scale: 1.12; background: var(--lilac); color: #fff; } svg { animation-duration: 4s; } }
}

.foot__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  margin-top: clamp(3em, 6vw, 5em); padding-block: 22px;
  border-top: 1px solid rgb(255 255 255 / .1); font-size: 13px;
  a { color: #fff; }
}
.heart { display: inline-block; color: #e25555; animation: beat 1.6s ease-in-out infinite; }
@keyframes beat { 0%, 40%, 100% { scale: 1; } 20% { scale: 1.25; } 30% { scale: .95; } }

.foot__mark {
  font: 400 clamp(72px, 16.5vw, 280px)/.82 var(--script);
  text-align: center; white-space: nowrap; user-select: none; pointer-events: none;
  margin-top: -.05em; margin-bottom: -.22em; rotate: -3deg;
  background: linear-gradient(180deg, rgb(255 255 255 / .16), rgb(255 255 255 / 0) 78%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ==========================================================================
   HAREKET
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* --- açılış --- */
  /* sıra: portre → isim → çizgiler + rol (yazılır) → sosyal ikonlar + araçlar (tek parça) → mouse */
  .avatar { animation: pop .9s var(--spring) .05s both; }
  @keyframes pop { from { scale: .6; opacity: 0; } }

  .name { animation: name-in 1s var(--ease) .3s both; }
  @keyframes name-in { from { opacity: 0; translate: 0 18px; rotate: -12deg; filter: blur(6px); } }
  .name span::before, .name span::after { animation: dash .6s var(--ease) .9s both; }
  @keyframes dash { from { scale: 0 1; } }

  @media (width >= 600px) {
    .role .type {
      display: inline-block; vertical-align: bottom; white-space: nowrap; overflow: hidden;
      width: 49ch; border-right: 2px solid transparent;
      animation: type 1.2s steps(49) 1s both, caret .7s step-end 1s 4;
    }
    @keyframes type  { from { width: 0; } }
    @keyframes caret { 50% { border-right-color: #fff; } }
  }
  @media (width < 600px) { .role { animation: fade-up .8s var(--ease) 1s both; } }

  .cover__icons li { animation: fade-up .6s var(--ease) both; animation-delay: calc(1.15s + var(--i, 0) * 60ms); }
  .cover__icons li:nth-child(1) { --i: 0; } .cover__icons li:nth-child(2) { --i: 1; }
  .cover__icons li:nth-child(3) { --i: 2; } .cover__icons li:nth-child(4) { --i: 3; }

  /* dock: başlık, cam bar ve ikonlar tek parça gelir — hiçbir an boş bar görünmez */
  .dock { animation: fade-up .7s var(--ease) 1.2s both; }
  .mouse { animation: fade-up .9s var(--ease) 1.9s both; }

  @keyframes fade-up { from { opacity: 0; translate: 0 14px; } }

  /* --- scroll-driven (Chrome, Edge, Safari 26+) --- */
  @supports (animation-timeline: view()) {

    .progress { animation: grow linear both; animation-timeline: scroll(root); }
    @keyframes grow { to { scale: 1 1; } }

    .cover__inner { animation: cover-out linear both; animation-timeline: scroll(root); animation-range: 0 90svh; }
    @keyframes cover-out { to { translate: 0 -12svh; opacity: 0; scale: .96; } }

    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes reveal { from { opacity: 0; translate: 0 50px; } }

    /* başlıklar: outline kelime yatay kayar, metin mürekkeple dolar, çizgi uzar */
    h2[data-bg]::before { animation: word-drift linear both; animation-timeline: view(); animation-range: cover; }
    @keyframes word-drift { from { translate: -38% -50%; } to { translate: -62% -50%; } }
    h2[data-bg] > span {
      background: linear-gradient(90deg, #000 0 50%, #cdc7e6 50% 100%) 100% 0 / 200% 100% no-repeat;
      -webkit-background-clip: text; background-clip: text; color: transparent;
      animation: ink linear both; animation-timeline: view(); animation-range: entry 30% cover 40%;
    }
    @keyframes ink { to { background-position: 0 0; } }
    h2[data-bg]::after { animation: swash linear both; animation-timeline: view(); animation-range: entry 60% cover 45%; }
    @keyframes swash { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

    /* hakkımda: imza yazılır, link fosforlu kalemle çizilir */
    .signature {
      -webkit-mask-image: url(../images/ekim.svg), linear-gradient(90deg, #000 42%, transparent 58%);
              mask-image: url(../images/ekim.svg), linear-gradient(90deg, #000 42%, transparent 58%);
      -webkit-mask-size: 100% 100%, 300% 100%; mask-size: 100% 100%, 300% 100%;
      -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
      -webkit-mask-composite: source-in; mask-composite: intersect;
      animation: write linear both; animation-timeline: view(); animation-range: entry 40% cover 45%;
    }
    @keyframes write {
      from { -webkit-mask-position: 0 0, 100% 0; mask-position: 0 0, 100% 0; }
      to   { -webkit-mask-position: 0 0, 0 0;    mask-position: 0 0, 0 0; }
    }
    .about__text p a { animation: mark linear both; animation-timeline: view(); animation-range: entry 70% cover 45%; }
    @keyframes mark { from { background-size: 0% 100%; } }
    .socials li { animation: soc-in linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    .socials li:nth-child(2n) { animation-range: entry 8% entry 88%; }
    @keyframes soc-in { from { opacity: 0; translate: 0 10px; } }

    /* hizmetler: arka plan paralaksı, kartlar kademeli ve hafif 3D gelir */
    #features::before { animation: parallax linear both; animation-timeline: view(); }
    @keyframes parallax { from { translate: 0 -12%; } to { translate: 0 12%; } }
    .feature { animation-name: card-in; animation-range: entry 5% entry 75%; }
    .feature:nth-child(2) { animation-range: entry 15% entry 85%; }
    .feature:nth-child(3) { animation-range: entry 25% entry 95%; }
    @keyframes card-in { from { opacity: 0; translate: 0 80px; scale: .92; } }

    /* deneyimler: ray dolar, ışık noktası iner, rozet oturur, panel kendi tarafından gelir */
    .timeline ol { animation: rail linear both; animation-timeline: view(); animation-range: entry 35% exit 55%; }
    .timeline ol::after { opacity: 1; }
    @keyframes rail { from { --p: 0%; } to { --p: 100%; } }
    .timeline li { animation: none; }
    .timeline li .badge { animation: badge linear both; animation-timeline: view(); animation-range: entry 30% entry 80%; }
    @keyframes badge { from { scale: .2; opacity: 0; rotate: -90deg; } }
    .timeline li .panel { animation: from-right linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
    @media (width >= 768px) { .timeline li:nth-child(odd) .panel { animation-name: from-left; } }
    @keyframes from-left  { from { opacity: 0; translate: -70px 0; rotate: 2deg; } }
    @keyframes from-right { from { opacity: 0; translate: 70px 0; rotate: -2deg; } }

    /* projeler: perde gibi açılır, sütuna göre kademeli */
    .works li { animation: unveil linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .works li:nth-child(4n + 2) { animation-range: entry 6% entry 76%; }
    .works li:nth-child(4n + 3) { animation-range: entry 12% entry 82%; }
    .works li:nth-child(4n + 4) { animation-range: entry 18% entry 88%; }
    @keyframes unveil { from { opacity: 0; clip-path: inset(22% 22% 22% 22% round 40px); translate: 0 40px; } to { clip-path: inset(-40px -40px -60px -40px round 14px); } }

    /* blog: görsel alttan açılır */
    .post__img { animation: wipe linear both; animation-timeline: view(); animation-range: entry 20% cover 35%; }
    @keyframes wipe { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

    /* iletişim: görsel çerçevesi eğik ve küçük gelir, içerik sırayla */
    .consult__media { animation: media-in linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    @keyframes media-in { from { opacity: 0; translate: -60px 40px; rotate: -6deg; scale: .9; } }
    .consult__content .reveal:nth-child(2) { animation-range: entry 5% entry 60%; }
    .consult__content .reveal:nth-child(3) { animation-range: entry 10% entry 65%; }
    .consult__content .reveal:nth-child(4) { animation-range: entry 15% entry 70%; }
    .consult__content .reveal:nth-child(5) { animation-range: entry 20% entry 75%; }

    /* footer: dev el yazısı aşağıdan yükselir, imza kendini yazar */
    .foot__mark { animation: mark-up linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    @keyframes mark-up { from { translate: 0 45%; opacity: 0; } }
    .foot__sig {
      -webkit-mask-image: url(../images/ekim.svg), linear-gradient(90deg, #000 42%, transparent 58%);
              mask-image: url(../images/ekim.svg), linear-gradient(90deg, #000 42%, transparent 58%);
      -webkit-mask-size: 100% 100%, 300% 100%; mask-size: 100% 100%, 300% 100%;
      -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
      -webkit-mask-composite: source-in; mask-composite: intersect;
      animation: write linear both; animation-timeline: view(); animation-range: entry 0% entry 100%;
    }
  }

  @supports not (animation-timeline: view()) {
    .js .reveal { opacity: 0; translate: 0 40px; transition: opacity .9s var(--ease), translate 1s var(--ease); }
    .js .reveal.in { opacity: 1; translate: 0 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  [data-tilt] { transform: none !important; }
}