:root {
  --bg: #f5efee; --surface: #fff; --ink: #221820; --muted: #766069; --accent: #b15568; --accent2: #7a5a8a;
  --line: rgba(34,24,32,.12); --display: "Syne", system-ui, sans-serif; --body: "Hanken", system-ui, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1); --pad: clamp(1.25rem,5vw,5rem); --maxw: 1200px;
}
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; }
h1,h2,h3 { font-family: var(--display); margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* nav */
.nav { position: sticky; top: 46px; z-index: 150; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem var(--pad); background: color-mix(in srgb,var(--bg) 82%,transparent); transition: background-color .3s; }
.nav.is-stuck { background: color-mix(in srgb,var(--bg) 96%,transparent); }
.brand { font-family: var(--display); font-weight: 800; font-size: 1.1rem; letter-spacing: .05em; }
.nav-links { display: flex; gap: 1.8rem; font-size: .9rem; font-weight: 500; } .nav-links a { color: var(--muted); transition: color .2s; } .nav-links a:hover { color: var(--accent); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; } .nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s,opacity .2s; }
.nav-drawer { display: none; }
@media (max-width: 760px){ .nav-links { display: none; } .nav-toggle { display: flex; }
  .nav-drawer { position: fixed; inset: 92px 0 auto 0; z-index: 140; display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem var(--pad) 2rem; background: var(--surface); border-bottom: 1px solid var(--line); }
  .nav-drawer a { padding: .7rem 0; font-size: 1.2rem; font-weight: 600; }
  body.drawer-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);} body.drawer-open .nav-toggle span:nth-child(2){opacity:0;} body.drawer-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}

/* hero poster */
.hero { padding: clamp(2rem,5vw,4rem) var(--pad) clamp(2.5rem,5vw,4rem); }
.avail { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 600; color: var(--accent2); margin-bottom: 1.4rem; }
.avail-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent); }
.hero-title { font-weight: 800; line-height: .82; letter-spacing: -.02em; text-transform: uppercase; }
.hero-title .line { display: block; overflow: hidden; } .hero-title .line [data-line]{ display: block; font-size: clamp(4rem,19vw,15rem); }
.hero-title .line-2 { margin-left: clamp(1rem,8vw,8rem); } .hero-title .line-2 [data-line] { color: var(--accent); }
.hero-foot { display: grid; gap: 1rem; margin-top: clamp(1.5rem,3vw,2.5rem); grid-template-columns: 1fr; } @media (min-width: 760px){ .hero-foot { grid-template-columns: auto 1fr; gap: clamp(2rem,6vw,5rem); align-items: start; } }
.role { font-weight: 600; font-size: 1.05rem; } .hero-lede { margin: 0; color: var(--muted); font-size: 1.1rem; max-width: 46ch; }

/* marquee */
.marquee { overflow: hidden; padding: 1.25rem 0; border-block: 1px solid var(--line); background: var(--surface); -webkit-mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.marquee-track { display: inline-flex; align-items: center; gap: 1.5rem; white-space: nowrap; will-change: transform; animation: scroll 26s linear infinite; }
.marquee-track span { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem,3vw,2.2rem); } .marquee-track span:nth-child(2n){ color: var(--accent); }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* about */
.about { padding: clamp(3.5rem,8vw,7rem) var(--pad); max-width: 1000px; }
.kicker { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.4rem; }
.about-text { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem,3.4vw,2.6rem); line-height: 1.3; } .about-text em { color: var(--accent); font-style: normal; }

/* work */
.work { padding: clamp(2.5rem,6vw,5rem) var(--pad); }
.work-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; margin-bottom: clamp(2rem,4vw,3rem); }
.work-head .kicker { margin-bottom: 0; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line); font-size: .88rem; font-weight: 500; color: var(--muted); transition: all .2s; } .filter:hover { border-color: var(--accent); color: var(--ink); } .filter.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.work-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 640px){ .work-grid { grid-template-columns: repeat(2,1fr); } } @media (min-width: 980px){ .work-grid { grid-template-columns: repeat(3,1fr); } }
.proj { position: relative; aspect-ratio: 5/6; border-radius: 16px; overflow: hidden; cursor: pointer; color: #fff; transition: transform .4s var(--ease), opacity .3s; }
.proj:hover { transform: translateY(-6px); }
.proj.hide { display: none; }
.proj-year { position: absolute; top: 1rem; right: 1.1rem; z-index: 2; font-family: var(--display); font-weight: 800; font-size: 1.4rem; }
.proj-meta { position: absolute; z-index: 2; left: 1.1rem; bottom: 1.1rem; } .proj-meta h3 { font-weight: 700; font-size: 1.3rem; } .proj-meta span { font-size: .88rem; opacity: .85; }
.proj::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top,rgba(20,12,18,.6),transparent 60%); }
.p-a { background: url("/taslak/kisisel-marka/assets/img/p-a.jpg") center/cover; } .p-b { background: url("/taslak/kisisel-marka/assets/img/p-b.jpg") center/cover; } .p-c { background: url("/taslak/kisisel-marka/assets/img/p-c.jpg") center/cover; }
.p-d { background: url("/taslak/kisisel-marka/assets/img/p-d.jpg") center/cover; } .p-e { background: url("/taslak/kisisel-marka/assets/img/p-e.jpg") center/cover; } .p-f { background: url("/taslak/kisisel-marka/assets/img/p-f.jpg") center/cover; }

/* connect */
.connect { padding: clamp(4rem,9vw,8rem) var(--pad); background: var(--ink); color: var(--bg); }
.connect-title { font-weight: 800; font-size: clamp(3rem,10vw,7rem); line-height: .9; letter-spacing: -.02em; margin-bottom: 2rem; }
.connect-form { display: grid; gap: .75rem; max-width: 640px; grid-template-columns: 1fr; } @media (min-width: 640px){ .connect-form { grid-template-columns: 1fr 1fr; } .connect-form input:nth-child(3) { grid-column: 1 / -1; } }
.connect-form input { padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(245,239,238,.18); background: rgba(245,239,238,.05); color: var(--bg); } .connect-form input::placeholder { color: rgba(245,239,238,.5); } .connect-form input:focus-visible { border-color: var(--accent); outline: none; }
.connect-form button { grid-column: 1 / -1; padding: 14px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 600; transition: transform .2s, background-color .2s; } .connect-form button:hover { transform: translateY(-2px); background: color-mix(in srgb,var(--accent) 86%,#fff); }
.connect-ok { margin-top: 1rem; color: #e0b48f; }
.social { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.5rem; font-size: .95rem; } .social a { color: rgba(245,239,238,.7); } .social a:hover { color: var(--bg); }

/* footer */
.footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 2.5rem var(--pad); font-size: .85rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce){ .marquee-track { animation: none; } }