:root {
  color-scheme: dark;
  --bg: #0b0c0b;
  --bg-2: #141614;
  --surface: #161917;
  --cream: #f5f1e8;
  --ink: #eceae3;
  --ink-2: #b4b8b1;
  --muted: #8b918b;
  --brand: #8fb39a;
  --brand-dark: #2a3d31;
  --sage: #9db59a;
  --honey: #c8a97e;
  --soft: #1e221f;
  --line: #eceae31f;
  --line-strong: #eceae338;
  --shadow: 0 14px 34px -14px #000000cc;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, sans-serif;
  --pad: clamp(16px, 5vw, 64px);
  --intro: 1300ms;
}
.no-intro { --intro: 0ms; }

/* ---------- Açılış perdesi ---------- */
.intro {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: var(--brand-dark); clip-path: inset(0 0 0 0);
  animation: intro-out 1s var(--ease) 1s forwards;
}
.intro span {
  font-family: var(--serif); font-size: clamp(4rem, 12vw, 9rem); line-height: 1; color: var(--cream); letter-spacing: -.03em;
  animation: intro-logo .9s var(--ease) .1s both;
}
.intro i { font-style: normal; color: var(--honey); }
@keyframes intro-logo { from { opacity: 0; transform: translateY(40px); filter: blur(10px); } }
@keyframes intro-out { to { clip-path: inset(0 0 100% 0); } }
.no-intro .intro { display: none; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(circle at 85% 0%, #c8a97e14, transparent 40%),
    radial-gradient(circle at 0% 60%, #435c4a26, transparent 40%),
    var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 8px; }

.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 100;
  transform: translateY(-80px); transition: transform .3s var(--ease);
  background: var(--brand-dark); color: var(--cream); padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600;
}
.skip-link:focus { transform: none; }

#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, .site-footer { position: relative; z-index: 1; }

.progress {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--brand), var(--sage), var(--honey));
  transform: scaleX(var(--p, 0)); transform-origin: left;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 18px var(--pad);
  transition: padding .35s var(--ease);
}
.site-header.scrolled { padding-top: 10px; padding-bottom: 10px; }
.logo { font-family: var(--serif); font-size: 30px; line-height: 1; letter-spacing: -.02em; justify-self: start; }
.logo span { color: var(--brand); }
.nav {
  display: flex; gap: 2px; padding: 5px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #161917b3; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 24px -14px #26302a40;
}
.nav a {
  padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--soft); }
.nav a.active { background: var(--brand-dark); color: var(--cream); }
.header-right { justify-self: end; display: flex; align-items: center; gap: 10px; }
.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: #161917cc; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span { width: 16px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px; background: #161917b3; backdrop-filter: blur(14px);
  font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--ink-2); cursor: pointer;
  transition: color .2s, border-color .2s;
}
.lang__btn:hover { color: var(--brand); border-color: var(--line-strong); }
.lang__btn .chev { transition: transform .3s var(--ease); }
.lang__btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.lang__menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 170px; padding: 6px;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: top right; pointer-events: none;
  transition: opacity .2s var(--ease), transform .3s var(--ease);
}
.lang__menu.open { opacity: 1; transform: none; pointer-events: auto; }
.lang__menu button {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 10px;
  background: none; cursor: pointer; text-align: left; font-size: 14px; font-weight: 500;
  transition: background .2s;
}
.lang__menu button b { width: 22px; font-size: 11px; letter-spacing: .1em; color: var(--muted); }
.lang__menu button:hover { background: var(--soft); }
.lang__menu button[aria-checked="true"] { background: var(--brand-dark); color: var(--cream); }
.lang__menu button[aria-checked="true"] b { color: inherit; opacity: .7; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: transparent;
  font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.btn--primary { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--cream); }
.btn--primary:hover { background: #3b5545; border-color: #3b5545; }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 13px; }
.icon-btn {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line); color: var(--ink-2);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.icon-btn:hover { background: var(--brand-dark); color: var(--cream); transform: rotate(-8deg) scale(1.06); }
.link {
  position: relative; font-weight: 600; font-size: 14px; color: var(--ink);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 2px; transition: background-size .4s var(--ease), color .2s;
}
.link:hover { color: var(--brand); background-size: 0 1px; background-position: 100% 100%; }

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh; display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: clamp(32px, 6vw, 96px);
  padding: 130px var(--pad) 80px;
}
.status {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 10px; margin-bottom: 28px;
  border-radius: 999px; border: 1px solid var(--line); background: #161917d9;
  font-size: 12px; font-weight: 600; color: var(--brand);
}
.status__dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #7fc495; }
.status__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 1.8s var(--ease) infinite; }
@keyframes ping { to { transform: scale(2.6); opacity: 0; } }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
/* Türkçede "Junior" kelimesi "JUNİOR" olmasın diye metin elle büyük harf yazıldı */
html[lang="tr"] .eyebrow { text-transform: none; }
.hero__name {
  transform: translateY(calc(var(--sy, 0) * .12px)); will-change: transform;
  margin-top: 14px; font-family: var(--serif); font-weight: 400;
  font-size: clamp(3.6rem, 10.5vw, 9.5rem); line-height: .88; letter-spacing: -.035em;
}
.split { display: block; overflow: hidden; padding: .14em .06em .08em; margin-top: -.14em; }
.split--accent { font-style: italic; }
.split .ch {
  display: inline-block; white-space: pre; transform: translateY(105%) rotate(6deg); transform-origin: left bottom;
  /* her harfe satır genişliğinde tek bir degrade düşer; --x harfin satırdaki konumu */
  background: var(--grad) calc(var(--shift, 0px) - var(--x, 0px)) 0 / var(--w, 100%) 100% repeat-x;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.split:not(.split--accent) { --grad: linear-gradient(180deg, #f8f5ee 35%, #c9c6bb); }
.split .ch { background-size: var(--w, 100%) 100%; padding-top: .22em; margin-top: -.22em; }
.split--accent { --grad: linear-gradient(90deg, #8fb39a, #c8d9c2 30%, #c8a97e 55%, #8fb39a 80%, #c8d9c2); animation: name-flow 9s linear infinite; }
@property --shift { syntax: "<length>"; inherits: true; initial-value: 0px; }
@keyframes name-flow { to { --shift: var(--w, 600px); } }
.split .ch.on { transform: none; transition: transform 1s var(--ease); }
.hero__text { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__name { filter: drop-shadow(0 18px 40px #8fb39a1f); }
.hero__lead { margin-top: 28px; max-width: 34rem; min-height: 3.4em; font-size: 1.15rem; color: var(--ink-2); }
.typed { font-family: var(--serif); font-style: italic; font-size: 1.35em; color: var(--brand); }
.typed__caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; vertical-align: -.15em; background: var(--brand); animation: blink 1s steps(1) infinite; }
.hero__actions { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.socials { display: inline-flex; gap: 8px; margin-left: 4px; }

.hero-in { opacity: 0; transform: translateY(24px); filter: blur(6px); animation: rise 1.1s var(--ease) calc(var(--d, 0ms) + var(--intro)) forwards; }
@keyframes rise { to { opacity: 1; transform: none; filter: none; } }

.hero__visual { position: relative; justify-self: center; width: min(100%, 380px); }
.arch {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 999px 999px 28px 28px; border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, #e6dcc6, #d9e2d3);
  clip-path: inset(100% 0 0 0);
  animation: arch-in 1.4s var(--ease) calc(var(--intro) + 300ms) forwards;
  translate: 0 calc(var(--sy, 0) * -.08px);
}
@keyframes arch-in { to { clip-path: inset(0 0 0 0); } }
.arch img, .arch__placeholder { animation: arch-zoom 1.8s var(--ease) calc(var(--intro) + 300ms) both; }
@keyframes arch-zoom { from { transform: scale(1.3); } }
.arch::after {
  content: ""; position: absolute; inset: 10px; border-radius: inherit; border: 1px solid #fdfbf699; pointer-events: none;
}
.arch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform 1.2s var(--ease); }
.arch:hover img { transform: scale(1.05); }
.arch__placeholder {
  height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: clamp(5rem, 12vw, 8rem); color: #28392e; letter-spacing: -.04em;
}
.arch__placeholder em { color: var(--brand); }
.stamp {
  translate: 0 calc(var(--sy, 0) * -.2px);
  position: absolute; left: -48px; bottom: 56px; width: 124px; height: 124px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--brand-dark); color: var(--cream); box-shadow: var(--shadow);
}
.stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.stamp text { font-size: 8.5px; font-weight: 700; letter-spacing: .06em; fill: currentColor; }
.stamp > span { font-size: 48px; line-height: 1; color: var(--honey); animation: spin 9s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.float-tag {
  position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
  border-radius: 14px; border: 1px solid var(--line); background: #161917e6; backdrop-filter: blur(8px);
  font-size: 12px; font-weight: 600; color: var(--ink-2); box-shadow: var(--shadow); white-space: nowrap;
  animation: bob 6s ease-in-out infinite;
}
.float-tag--a { top: 14%; right: -36px; }
.float-tag--b { bottom: -18px; right: 4%; max-width: 104%; white-space: normal; text-align: center; animation-delay: -3s; }
.pin { width: 7px; height: 7px; border-radius: 50%; background: var(--honey); }
@keyframes bob { 50% { transform: translateY(-8px); } }

/* ---------- Marquee ---------- */
.marquee {
  position: relative; z-index: 1; overflow: hidden; padding: 20px 0;
  color: var(--cream); transform: rotate(-1.2deg) scale(1.02);
  background: linear-gradient(90deg, #0b0c0b, #16211b 20%, #2a3d31 40%, #16211b 60%, #0b0c0b 80%, #16211b 90%, #0b0c0b) 0 0 / 200% 100%;
  border-block: 1px solid #8fb39a26;
  animation: band-flow 14s linear infinite;
}
@keyframes band-flow { to { background-position: -200% 0; } }
.marquee__track { display: flex; align-items: center; gap: clamp(28px, 4vw, 48px); width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.mq { display: inline-flex; align-items: center; }
.mq__logo {
  flex: none; width: clamp(54px, 6vw, 72px); height: clamp(54px, 6vw, 72px); display: grid; place-items: center;
  border-radius: 18px; background: linear-gradient(145deg, #222a24, #121613); box-shadow: inset 0 0 0 1px #8fb39a2e, 0 10px 24px -12px #000000cc;
  transition: transform .5s var(--ease);
}
.mq__logo img { width: 58%; height: 58%; object-fit: contain; }
.mq:hover .mq__logo { transform: rotate(-8deg) scale(1.1); }
.marquee i { font-style: normal; color: var(--honey); font-size: 16px; }
@keyframes marquee { to { transform: translateX(calc(-50% - clamp(14px, 2vw, 24px))); } }

/* ---------- Sections ---------- */
.section { position: relative; scroll-margin-top: 70px; padding: clamp(80px, 12vw, 150px) var(--pad); max-width: 1320px; margin: 0 auto; }
.shead { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 32px; margin-bottom: clamp(40px, 6vw, 72px); }
.shead__num { font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--brand); margin-bottom: 10px; }
.title { font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 7vw, 5.6rem); line-height: .95; letter-spacing: -.03em; }
.title .word:last-child > span, .contact__title .word:last-child > span { font-style: italic; color: var(--brand); }
.shead__intro { color: var(--ink-2); font-size: 1.05rem; max-width: 30rem; justify-self: end; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(48px); filter: blur(8px); transition: opacity 1.1s var(--ease) var(--d, 0ms), transform 1.2s var(--ease) var(--d, 0ms), filter 1.1s var(--ease) var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; filter: none; }

/* dil değişiminde yumuşak geçiş */
main, .site-footer { transition: opacity .22s ease, filter .22s ease; }
.lang-out main, .lang-out .site-footer { opacity: 0; filter: blur(4px); }
.word { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .16em 0 .1em; margin: -.16em 0 -.1em; }
.word > span { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 70ms + 100ms); }
.in .word > span, .word.in > span { transform: none; }

/* ---------- Projects (accordion rows) ---------- */
.projects { border-top: 1px solid var(--line-strong); }
.proj { position: relative; }
.proj::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-strong);
  transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) calc(var(--d, 0ms) + 200ms);
}
.proj.in::after { transform: scaleX(1); }
.proj__head {
  width: 100%; display: grid; grid-template-columns: 56px 1fr auto 44px; align-items: center; gap: 20px;
  padding: 28px 4px; border: 0; background: none; cursor: pointer; text-align: left;
  position: relative; isolation: isolate;
}
.proj__head::before {
  content: ""; position: absolute; inset: 0 -16px; z-index: -1; border-radius: 18px; background: var(--soft);
  transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease);
}
.proj__head:hover::before { transform: scaleY(1); transform-origin: top; }
.proj.open .proj__head::before { transform: scaleY(0); }
.proj__num { font-size: 13px; font-weight: 700; color: var(--muted); }
.proj__title {
  font-family: var(--serif); font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1; letter-spacing: -.02em;
  transition: transform .5s var(--ease), color .3s;
}
.proj__cat { font-size: 13px; font-weight: 600; color: var(--ink-2); padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; }
.proj__year { font-size: 13px; font-weight: 600; color: var(--muted); text-align: right; }
.proj__icon { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); transition: background .3s, transform .5s var(--ease); }
.proj__icon::before, .proj__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px; background: currentColor; transition: transform .5s var(--ease); }
.proj__icon::after { transform: rotate(90deg); }
.proj__head:hover .proj__title { transform: translateX(14px); color: var(--brand); }
.proj__head:hover .proj__icon { background: var(--brand-dark); color: var(--cream); }
.proj__head[aria-expanded="true"] .proj__icon { background: var(--brand-dark); color: var(--cream); transform: rotate(180deg); }
.proj__head[aria-expanded="true"] .proj__icon::after { transform: rotate(0deg); }
.proj__head[aria-expanded="true"] .proj__title { color: var(--brand); font-style: italic; }

.proj__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
.proj.open .proj__panel { grid-template-rows: 1fr; }
.proj__inner { overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); padding: 0 4px 0 80px; }
.proj.open .proj__inner { padding-bottom: 40px; }
.proj__inner > * { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .7s var(--ease); }
.proj.open .proj__inner > * { opacity: 1; transform: none; transition-delay: .15s; }
.proj.open .proj__inner > *:nth-child(2) { transition-delay: .25s; }
.proj__thumb { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); align-self: start; }
.proj__thumb svg, .proj__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.proj__desc { font-family: var(--serif); font-size: 1.6rem; line-height: 1.25; }
.facts { margin: 24px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.facts dt { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin-bottom: 6px; }
.facts dd { margin: 0; font-size: 14px; color: var(--ink-2); }
.proj__links { margin-top: 24px; display: flex; align-items: center; gap: 20px; }
.more { margin-top: 32px; text-align: right; }

.tags { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { padding: 5px 12px; border-radius: 999px; background: var(--soft); font-size: 12px; font-weight: 600; color: var(--ink-2); }

.float { animation: bob 6s ease-in-out infinite; }
.caret { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.preview {
  position: fixed; left: 0; top: 0; z-index: 30; width: 300px; aspect-ratio: 16 / 9;
  border-radius: 16px; overflow: hidden; pointer-events: none; box-shadow: 0 24px 50px -20px #26302a66;
  opacity: 0; transform: translate(var(--x, 0), var(--y, 0)) scale(.6) rotate(-6deg);
  transition: opacity .3s var(--ease), transform .5s var(--ease);
}
.preview.show { opacity: 1; transform: translate(var(--x, 0), var(--y, 0)) scale(1) rotate(-3deg); }
.preview svg, .preview img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---------- Timeline ---------- */
.timeline { position: relative; }
.timeline__line { position: absolute; left: 220px; top: 8px; bottom: 0; width: 1px; background: var(--line-strong); }
.timeline__fill { position: absolute; inset: 0 0 auto 0; height: calc(var(--fill, 0) * 100%); width: 3px; margin-left: -1px; border-radius: 3px; background: linear-gradient(var(--sage), var(--brand)); }
.tl { position: relative; display: grid; grid-template-columns: 196px 48px 1fr; padding-bottom: 72px; }
.tl:last-child { padding-bottom: 0; }
.tl__date { font-size: 14px; font-weight: 600; color: var(--ink-2); display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.tl__date small { font-size: 12px; color: var(--muted); font-weight: 500; }
.tl__dot { justify-self: center; margin-left: 1px; margin-top: 10px; width: 15px; height: 15px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--line-strong); transition: background .6s var(--ease) .3s, border-color .6s .3s, box-shadow .6s .3s; z-index: 1; }
.tl.in .tl__dot { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 6px #8fb39a26; }
.tl__body h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1.05; }
.tl__org { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--brand); }
.tl__lead { margin-top: 16px; font-size: 1.1rem; max-width: 40rem; }
.bullets { margin-top: 12px; display: grid; gap: 6px; max-width: 40rem; }
.bullets li { position: relative; padding-left: 22px; font-size: 15px; color: var(--ink-2); }
.bullets li::before { content: "→"; position: absolute; left: 0; color: var(--brand); }

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; grid-template-areas: "intro intro gpa learn" "edu edu edu edu"; }
.tile { border-radius: 26px; padding: 28px; background: #161917cc; border: 1px solid var(--line); backdrop-filter: blur(6px); transition: transform .5s var(--ease), box-shadow .5s var(--ease), opacity 1s var(--ease) var(--d, 0ms); }
.tile.in:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tile--intro { grid-area: intro; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 40px; }
.tile__quote { font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.25; }
.tile__sign { font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: var(--brand); }
.tile--stat { display: flex; flex-direction: column; justify-content: space-between; min-height: 170px; }
.tile--gpa { grid-area: gpa; }
.stat { font-family: var(--serif); font-size: clamp(3.4rem, 6vw, 5rem); line-height: 1; color: var(--brand); }
.stat__label { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tile--learn { grid-area: learn; background: var(--brand-dark); color: var(--cream); border-color: transparent; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.tile--learn .tile__label { color: #f5f1e8b3; }
.tile__label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.tile__learn { font-family: var(--serif); font-size: 1.6rem; line-height: 1.15; }
.spin { display: inline-block; color: var(--honey); animation: spin 8s linear infinite; }
.tile--edu { grid-area: edu; }
.edu { margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.edu li { padding-top: 18px; border-top: 1px solid var(--line-strong); }
.edu__num { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--brand); }
.edu__title { margin-top: 8px; font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; }
.edu__tag { margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.edu__text { margin-top: 10px; font-size: 14px; color: var(--ink-2); }

/* ---------- Skills ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filters button {
  min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-strong); background: none;
  font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s;
}
.filters button:hover { border-color: var(--ink); color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--cream); }
.chips { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 22px); padding-bottom: 36px; }
/* sadece logolar: süzülen cam kutucuklar, ad üzerine gelince görünür */
.chips li {
  position: relative; width: clamp(84px, 9vw, 112px); aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 24px; border: 1px solid #8fb39a24;
  background: linear-gradient(145deg, #1f2621, #111412); box-shadow: 0 14px 30px -18px #000;
  transition: transform .45s var(--ease), opacity .35s var(--ease), border-color .3s, box-shadow .3s;
}
.chip__icons { display: inline-flex; gap: 6px; animation: chip-float 5s ease-in-out infinite; animation-delay: calc(var(--n, 0) * -.7s); }
@keyframes chip-float { 0%, 100% { transform: translateY(-4px) rotate(-2deg); } 50% { transform: translateY(5px) rotate(2deg); } }
.chip__icons img { display: block; width: clamp(34px, 3.6vw, 46px); height: clamp(34px, 3.6vw, 46px); object-fit: contain; transition: transform .5s var(--ease); }
.chip__icons img + img { width: clamp(28px, 3vw, 38px); height: clamp(28px, 3vw, 38px); }
.chip__icons:has(img + img) img:first-child { width: clamp(28px, 3vw, 38px); height: clamp(28px, 3vw, 38px); }
.chip__name {
  position: absolute; left: 50%; top: calc(100% + 10px); translate: -50% 4px; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px; background: var(--brand-dark); color: var(--cream);
  font-size: 12px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .25s, translate .3s var(--ease);
}
.chips li:hover, .chips li:focus-within { border-color: #8fb39a66; box-shadow: 0 18px 36px -16px #000, 0 0 0 4px #8fb39a14; transform: translateY(-6px); }
.chips li:hover .chip__name { opacity: 1; translate: -50% 0; }
.chips li:hover .chip__icons img { transform: scale(1.12); }
.chips li.out { opacity: 0; transform: scale(.85); }
.chips.reveal { transform: none; filter: none; opacity: 1; }
.chips.reveal li { opacity: 0; transform: translateY(24px) scale(.94); }
.chips.reveal.in li { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 45ms); }
.chips.reveal.in li:hover { transform: translateY(-6px); }
.chips.reveal.in li.out { opacity: 0; transform: scale(.85); }
.tile.reveal { transform: translateY(40px) scale(.96); }
.tile.reveal.in { transform: none; }
.tl.reveal { transform: translateX(40px); }
.tl.reveal.in { transform: none; }
.chips li.gone { display: none; }

/* ---------- Contact ---------- */
.contact { text-align: left; }
.contact__title { font-family: var(--serif); font-weight: 400; font-size: clamp(3.2rem, 9vw, 8rem); line-height: .92; letter-spacing: -.035em; max-width: 12ch; }
.contact__text { margin-top: 12px; max-width: 40rem; font-size: 1.35rem; color: var(--ink); }
.mail { margin-top: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 28px 0; border-block: 1px solid var(--line-strong); }
.mail__link {
  font-family: var(--serif); font-size: clamp(1.8rem, 5vw, 3.8rem); line-height: 1.1; word-break: break-all;
  background: linear-gradient(var(--brand), var(--brand)) 0 100% / 0 2px no-repeat;
  transition: background-size .6s var(--ease), color .3s;
}
.mail__link:hover { color: var(--brand); background-size: 100% 2px; }
.copy.copied { background: var(--brand); border-color: var(--brand); color: var(--bg); }
.contact__links { margin-top: 28px; display: flex; gap: 28px; font-size: 16px; }
.contact__meta { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.meta__label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.meta__links { display: flex; gap: 20px; }
.meta__value { font-size: 15px; font-weight: 600; }
.meta__value--status { display: flex; align-items: center; gap: 10px; }

.site-footer {
  max-width: 1320px; margin: 0 auto; padding: 28px var(--pad) 40px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted);
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.to-top {
  position: relative; width: 76px; height: 76px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--brand-dark); color: var(--cream);
  transition: transform .5s var(--ease), background .3s var(--ease);
}
.to-top:hover { transform: translateY(-6px); background: var(--brand); }
.to-top__ring { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); animation: spin 14s linear infinite; }
.to-top__ring circle { fill: none; stroke: var(--brand); stroke-width: 1; stroke-dasharray: 3 5; opacity: .6; }
.to-top__face { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; }
.to-top__logo, .to-top__arrow {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); line-height: 1; transition: transform .55s var(--ease);
}
.to-top__logo { font-size: 30px; }
.to-top__logo i { font-style: normal; color: var(--honey); display: inline-block; animation: spin 10s linear infinite; }
.to-top__arrow { font-size: 28px; transform: translateY(100%); }
.to-top:hover .to-top__logo { transform: translateY(-100%); }
.to-top:hover .to-top__arrow { transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .site-header { grid-template-columns: auto 1fr; }
  .nav-toggle { display: flex; }
  .nav {
    position: absolute; top: calc(100% + 4px); right: var(--pad); flex-direction: column; gap: 2px; padding: 8px;
    border-radius: 20px; background: var(--surface); min-width: 220px;
    opacity: 0; transform: translateY(-8px) scale(.97); transform-origin: top right; pointer-events: none;
    transition: opacity .25s var(--ease), transform .35s var(--ease);
  }
  .nav.open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding: 12px 16px; font-size: 15px; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-areas: "intro intro" "gpa learn" "edu edu"; }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: 110px; min-height: auto; }
  .hero__visual { width: min(78%, 320px); margin-top: 24px; }
  .shead { grid-template-columns: 1fr; }
  .shead__intro { justify-self: start; }
  .proj__head { grid-template-columns: 36px 1fr 44px; gap: 14px; }
  .proj__cat { display: none; }
  .proj__inner { grid-template-columns: 1fr; padding-left: 4px; }
  .timeline__line { left: 7px; }
  .tl { grid-template-columns: 1fr; padding-left: 40px; padding-bottom: 56px; }
  .tl__dot { position: absolute; left: 0; top: 0; margin: 4px 0 0; }
  .tl__date { flex-direction: row; gap: 8px; align-items: baseline; padding: 0 0 8px; }
  .edu { grid-template-columns: 1fr; }
  .contact__meta { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .stamp { left: -20px; width: 100px; height: 100px; }
  .stamp > span { font-size: 38px; }
  .float-tag--a { right: -12px; }
  .bento { grid-template-columns: 1fr 1fr; }
  .tile { padding: 22px; }
  .tile--intro { padding: 26px; }
  .facts { grid-template-columns: 1fr; }
  .socials { margin-left: 0; }
}
@media (hover: none) { .preview { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .reveal, .hero-in { opacity: 1; transform: none; }
  .split .ch, .word > span { transform: none; }
  .intro { display: none; }
  .arch { clip-path: none; }
  .reveal, .hero-in { filter: none; }
  .chips.reveal li { opacity: 1; transform: none; }
}

/* siyah logolar koyu zeminde görünsün */
img[src$="linux.svg"], img[src$="flask.svg"] { filter: invert(1) brightness(.92); }
img[src$="mysql.svg"] { filter: brightness(1.8) saturate(1.15); }

/* ---------- Teknolojiler: gezinen kutucuklar ---------- */
.chips--sim {
  display: block; position: relative; height: clamp(360px, 44vw, 500px); padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 30px;
  background:
    radial-gradient(circle at 50% 45%, #8fb39a12, transparent 65%),
    linear-gradient(#eceae308 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, #eceae308 1px, transparent 1px) 0 0 / 40px 40px,
    #0e100f;
}
.chips--sim li { position: absolute; left: 0; top: 0; will-change: transform; transition: opacity .35s var(--ease), border-color .3s, box-shadow .3s; }
.chips.chips--sim.reveal li, .chips.chips--sim.reveal.in li, .chips.chips--sim.reveal.in li:hover, .chips.chips--sim li.out { transform: none; }
.chips--sim li.out { opacity: 0; }
.chips--sim .chip__icons { animation: none; transition: translate .35s var(--ease); }
.chips--sim li:hover .chip__icons { translate: 0 -8px; }
.chips--sim .chip__name { top: auto; bottom: 9px; translate: -50% 6px; padding: 0; background: none; color: var(--ink-2); font-size: 10.5px; }
.chips--sim li:hover .chip__name { translate: -50% 0; }

/* ---------- Hakkımda: zarif kartlar ---------- */
.about-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.about__intro { position: relative; padding-left: 28px; }
.about__intro::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: linear-gradient(var(--brand), var(--honey) 70%, transparent); }
.about__quote { font-family: var(--serif); font-size: clamp(1.7rem, 2.8vw, 2.5rem); line-height: 1.22; }
.about__sign { margin-top: 18px; font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--brand); }
.about__cards { display: grid; gap: 14px; }
.acard, .about__edu .edu li, .contact-card {
  position: relative; border-radius: 20px; border: 1px solid #8fb39a1f;
  background: linear-gradient(160deg, #181c19, #0f1210);
  box-shadow: inset 0 1px 0 #ffffff0a, 0 18px 40px -28px #000;
  transition: border-color .35s var(--ease), transform .45s var(--ease), box-shadow .35s var(--ease), opacity 1.1s var(--ease) var(--d, 0ms);
}
.acard:hover, .about__edu .edu li:hover { border-color: #8fb39a55; transform: translateY(-3px); box-shadow: inset 0 1px 0 #ffffff0f, 0 22px 44px -26px #000, 0 0 0 4px #8fb39a0f; }
.acard { padding: 22px 24px; }
.acard__label { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.acard__value { font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--ink); }
.acard--gpa { display: flex; align-items: center; gap: 20px; }
.acard--gpa .acard__label { margin-top: 6px; }
.ring { width: 68px; height: 68px; flex: none; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.ring__bg { stroke: #eceae314; }
.ring__fg { stroke: var(--brand); stroke-dasharray: 213.6; stroke-dashoffset: 213.6; transition: stroke-dashoffset 1.6s var(--ease) .3s; }
.acard--gpa.in .ring__fg { stroke-dashoffset: 26.7; }
.levels { margin-top: 14px; display: grid; gap: 14px; }
.levels li { display: grid; grid-template-columns: 1fr auto; row-gap: 8px; align-items: baseline; }
.levels span { font-size: 15px; font-weight: 600; }
.levels b { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; color: var(--brand); }
.levels__bar {
  grid-column: 1 / -1; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--brand), var(--honey)) 0 0 / calc(var(--lv) / 6 * 100%) 100% no-repeat, #eceae314;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(16.666% - 4px), transparent calc(16.666% - 4px) 16.666%);
          mask: repeating-linear-gradient(90deg, #000 0 calc(16.666% - 4px), transparent calc(16.666% - 4px) 16.666%);
  transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease) .4s;
}
.acard--lang.in .levels__bar { transform: none; }
.about__edu { grid-column: 1 / -1; margin-top: 12px; }
#egitim .about__edu { margin-top: 0; }
.about__edu .edu { margin-top: 16px; gap: 14px; }
.about__edu .edu li { padding: 22px 22px 24px; border-top: 1px solid #8fb39a1f; overflow: hidden; }
.about__edu .edu li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--brand), var(--honey), transparent); opacity: .7; }

/* ---------- İletişim kartları ---------- */
.contact-card { display: grid; grid-template-columns: 1fr; width: 100%; max-width: 560px; margin: 0 auto; border-radius: 26px; overflow: hidden; }
.cc-item {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "icon label action" "icon value action";
  align-items: center; column-gap: 20px; row-gap: 2px; padding: 24px 28px; color: var(--ink); transition: background .35s var(--ease);
}
.cc-item + .cc-item { border-top: 1px solid #8fb39a1f; }
.cc-item .ccard__icon { grid-area: icon; margin: 0; }
.cc-item .ccard__label { grid-area: label; margin: 0; align-self: end; }
.cc-item .ccard__value { grid-area: value; align-self: start; }
.cc-item .copy, .cc-item .ccard__arrow { grid-area: action; position: static; }
a.cc-item:hover { background: #8fb39a0d; }
.ccard__icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: auto; border-radius: 12px; background: #8fb39a14; color: var(--brand); border: 1px solid #8fb39a2e; }
.ccard__label { margin-top: 18px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ccard__value { font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.1; word-break: break-all; transition: color .25s; }
.ccard__value--sm { font-size: clamp(1.3rem, 1.8vw, 1.6rem); word-break: normal; }
.cc-item--mail .ccard__value:hover { color: var(--brand); }

.ccard__arrow { position: absolute; top: 22px; right: 24px; font-size: 20px; color: var(--muted); transition: transform .4s var(--ease), color .25s; }
.cc-item:hover .ccard__arrow { transform: translate(3px, -3px); color: var(--brand); }
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .cc-item { padding: 20px; column-gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .acard--gpa .ring__fg { stroke-dashoffset: 26.7; }
  .levels__bar { transform: none; }
}

/* İletişim: ortalı, dar kart */
.contact .shead { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.cc-item { padding: 22px 26px; column-gap: 18px; }
.cc-item .ccard__value { font-size: clamp(1.25rem, 2vw, 1.55rem); word-break: break-word; }
.cc-item .ccard__icon { width: 44px; height: 44px; }
.contact__sub { margin-top: 14px; font-size: 1.15rem; color: var(--ink-2); }

/* ---------- Mesaj formu (iletişim kartının içinde açılır) ---------- */
.msg { display: grid; grid-template-rows: 0fr; border-top: 1px solid transparent; transition: grid-template-rows .55s var(--ease), border-color .3s; }
.msg.open { grid-template-rows: 1fr; border-top-color: #8fb39a1f; }
.msg__form { overflow: hidden; display: grid; gap: 14px; padding: 0 26px; transition: padding .55s var(--ease); }
.msg.open .msg__form { padding: 24px 26px 26px; }
.msg__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field input, .field textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid #8fb39a24; background: #0b0d0c;
  font: 500 15px var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); resize: vertical;
  transition: border-color .25s, box-shadow .25s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px #8fb39a1a; }
.field .invalid { border-color: #d97757; }
.msg__actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.msg__note { font-size: 12.5px; color: var(--muted); }
.write-btn[aria-expanded="true"] { background: var(--brand); border-color: var(--brand); color: var(--bg); }
@media (max-width: 560px) { .msg__row { grid-template-columns: 1fr; } .msg__actions { flex-direction: column; align-items: stretch; } }
.cc-item .write-btn { align-self: center; }

/* devam eden stajlar için "Şu an" rozeti */
.tl__date small.tl__now { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-top: 4px; padding: 3px 9px; border-radius: 999px; background: #8fb39a1a; color: var(--brand); font-weight: 600; }
.tl__date small.tl__now::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7fc495; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* ---------- Kaydırmayla gelen kedi ---------- */
.cat {
  position: fixed; left: 0; top: 0; z-index: 35; width: 96px; height: 80px;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  will-change: transform; opacity: 0; transition: opacity .6s var(--ease);
}
.cat.is-ready { opacity: 1; }
.cat__flip { transition: transform .35s var(--ease); transform-origin: 50% 50%; }
.cat.is-left .cat__flip { transform: scaleX(-1); }
.cat__svg { display: block; overflow: visible; filter: drop-shadow(0 6px 10px #0006); }
.cat__shadow {
  position: absolute; left: 22px; bottom: 0; width: 56px; height: 8px; border-radius: 50%;
  background: #000; opacity: .35; filter: blur(3px); transition: transform .2s;
}
.cat__tail { transform-origin: 30px 44px; animation: cat-tail 1.6s ease-in-out infinite; }
.cat__head { transform-origin: 90px 40px; animation: cat-head 3.2s ease-in-out infinite; }
.cat__eyes { transform-origin: 94px 33px; animation: cat-blink 4.5s infinite; }
.cat__legs { transform-box: fill-box; }
.cat__legs rect { transform-box: fill-box; transform-origin: 50% 0; }
.cat.is-walking .cat__legs--a rect { animation: cat-step .36s ease-in-out infinite alternate; }
.cat.is-walking .cat__legs--b rect { animation: cat-step .36s ease-in-out infinite alternate-reverse; }
.cat.is-walking .cat__tail { animation-duration: .7s; }
.cat__bubble {
  position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 6px) scale(.6);
  padding: 4px 10px; border-radius: 12px; background: var(--cream); color: var(--brand-dark);
  font: 600 .78rem/1.2 var(--sans); white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .35s var(--ease);
}
.cat__bubble::after {
  content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--cream);
}
.cat.is-meow .cat__bubble { opacity: 1; transform: translate(-50%, -2px) scale(1); }
.cat.is-meow .cat__svg { animation: cat-hop .45s var(--ease); }

@keyframes cat-tail { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(14deg); } }
@keyframes cat-head { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-5deg); } }
@keyframes cat-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes cat-step { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@keyframes cat-hop { 40% { transform: translateY(-14px); } }

@media (max-width: 640px) {
  .cat { width: 72px; height: 60px; }
  .cat__svg { width: 72px; height: 54px; }
  .cat__shadow { left: 16px; width: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .cat__tail, .cat__head, .cat__eyes, .cat__legs rect { animation: none !important; }
}

/* ---------- Kediyi takip eden köpek ---------- */
.dog {
  position: fixed; left: 0; top: 0; z-index: 34; width: 100px; height: 82px;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  will-change: transform; opacity: 0; transition: opacity .6s var(--ease);
}
.dog.is-ready { opacity: 1; }
.dog__flip { transition: transform .35s var(--ease); }
.dog.is-left .dog__flip { transform: scaleX(-1); }
.dog__svg { display: block; overflow: visible; filter: drop-shadow(0 6px 10px #0006); }
.dog__shadow {
  position: absolute; left: 22px; bottom: 2px; width: 60px; height: 8px; border-radius: 50%;
  background: #000; opacity: .35; filter: blur(3px);
}
.dog__tail { transform-origin: 27px 44px; animation: dog-wag .5s ease-in-out infinite alternate; }
.dog__head { transform-origin: 88px 42px; animation: dog-head 2.8s ease-in-out infinite; }
.dog__ear { transform-origin: 86px 22px; animation: dog-ear 2.8s ease-in-out infinite; }
.dog__eyes { transform-origin: 96px 29px; animation: cat-blink 5.2s infinite; }
.dog__tongue { opacity: 0; transition: opacity .2s; }
.dog.is-walking .dog__tongue, .dog.is-excited .dog__tongue { opacity: 1; }
.dog__legs rect { transform-box: fill-box; transform-origin: 50% 0; }
.dog.is-walking .dog__legs--a rect { animation: cat-step .3s ease-in-out infinite alternate; }
.dog.is-walking .dog__legs--b rect { animation: cat-step .3s ease-in-out infinite alternate-reverse; }
.dog.is-walking .dog__tail, .dog.is-excited .dog__tail { animation-duration: .18s; }
.dog.is-walking .dog__ear { animation: dog-ear .3s ease-in-out infinite alternate; }
.dog.is-excited .dog__svg { animation: dog-hop .4s var(--ease) 3; }
.dog__bubble {
  position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 6px) scale(.6);
  padding: 4px 10px; border-radius: 12px; background: var(--cream); color: var(--brand-dark);
  font: 600 .78rem/1.2 var(--sans); white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .35s var(--ease);
}
.dog__bubble::after {
  content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--cream);
}
.dog.is-bark .dog__bubble { opacity: 1; transform: translate(-50%, -2px) scale(1); }

@keyframes dog-wag { from { transform: rotate(-18deg); } to { transform: rotate(16deg); } }
@keyframes dog-head { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(6deg); } }
@keyframes dog-ear { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(8deg); } }
@keyframes dog-hop { 50% { transform: translateY(-16px); } }

@media (max-width: 640px) {
  .dog { width: 76px; height: 62px; }
  .dog__svg { width: 76px; height: 57px; }
  .dog__shadow { left: 16px; width: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .dog__tail, .dog__head, .dog__ear, .dog__eyes, .dog__legs rect, .dog__svg { animation: none !important; }
}

/* ---------- Kedi ile köpeğin topu ---------- */
.pet-ball {
  position: fixed; left: 0; top: 0; z-index: 36; width: 22px; height: 22px; padding: 0;
  border: 0; background: none; cursor: pointer; will-change: transform;
  opacity: 0; transition: opacity .6s var(--ease); filter: drop-shadow(0 4px 5px #0007);
  -webkit-tap-highlight-color: transparent;
}
.pet-ball.is-ready { opacity: 1; }
.pet-ball:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 50%; }
.pet-ball__spin, .pet-ball__spin svg { display: block; width: 100%; height: 100%; }

/* Fırlatma ve yakalama hareketleri */
.cat.is-throwing .cat__legs--a rect:last-child { animation: cat-swat .6s ease-in-out; }
.cat.is-throwing .cat__head { animation: cat-look .6s ease-in-out; }
.cat.is-catch .cat__svg { animation: cat-hop .45s var(--ease); }
.dog.is-throwing .dog__head { animation: dog-toss .55s var(--ease); }

@keyframes cat-swat {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(14deg) translateY(-3px); }
  45% { transform: rotate(-60deg); }
  75% { transform: rotate(0); }
}
@keyframes cat-look { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-8deg); } }
@keyframes dog-toss { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(14deg); } 55% { transform: rotate(-20deg); } }

@media (max-width: 640px) {
  .pet-ball { width: 17px; height: 17px; }
}

/* ---------- Ziyaretçi sayacı ---------- */
.visits {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-2); animation: visits-in .6s var(--ease);
}
.visits[hidden] { display: none; }
.visits svg { color: var(--brand); }
.visits b { color: var(--cream); font-weight: 600; font-variant-numeric: tabular-nums; }
@keyframes visits-in { from { opacity: 0; transform: translateY(6px); } }