@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&family=Manrope:wght@800&display=swap');

:root {
  --bg: #fafaf8;
  --paper: #ffffff;
  --text: #111214;
  --muted: #6a6c72;
  --faint: #a2a4a9;
  --line: #e2e2de;
  --accent: #2557e8;
  --sans: 'Schibsted Grotesk', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --pad: clamp(20px, 4vw, 56px);
  --max: 1280px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #fff; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.label { font: 400 12px/1.4 var(--mono); color: var(--muted); letter-spacing: .01em; }
.rule { border-top: 1px solid var(--line); }

.wordmark { font: 800 24px/1 'Manrope', sans-serif; letter-spacing: -.09em; color: var(--text); }
.wordmark span { color: var(--accent); }

/* header */
.header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.header .wrap { height: 64px; display: flex; align-items: center; justify-content: space-between; }
.nav { display: flex; align-items: center; gap: 32px; font-size: 14px; }
.nav a { color: var(--muted); transition: color .15s; }
.nav a:hover { color: var(--text); }
.nav .cv-link { color: var(--text); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; padding: 7px 14px; border: 1px solid var(--text); border-radius: 4px; transition: background .15s, color .15s; }
.nav .cv-link:hover { background: var(--text); color: var(--bg); }

/* links + buttons */
.arrow-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: gap .2s, color .15s; }
.arrow-link:hover { gap: 12px; color: var(--accent); }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border: 0; border-radius: 4px; background: var(--text); color: var(--bg); font: 500 15px var(--sans); cursor: pointer; transition: background .15s; }
.btn:hover { background: var(--accent); }

/* section scaffold: label column + content */
.section { padding: 96px 0; }
.section > .wrap > .grid { row-gap: 32px; }
.sec-label { grid-column: 1 / span 3; padding-top: 6px; }
.sec-label .num { color: var(--accent); margin-right: 10px; }
.sec-body { grid-column: 4 / -1; }
.sec-title { font: 700 clamp(28px, 3.2vw, 40px)/1.1 var(--sans); letter-spacing: -.03em; margin-bottom: 40px; max-width: 22ch; }

@media (max-width: 860px) {
  .nav a:not(.cv-link) { display: none; }
  .sec-label, .sec-body { grid-column: 1 / -1; }
}

/* open to work */
.otw { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; background: #e7f6ee; color: #11764b; font: 500 12.5px var(--sans); white-space: nowrap; }
.otw i { width: 7px; height: 7px; border-radius: 50%; background: #1fa971; box-shadow: 0 0 0 3px rgba(31,169,113,.2); }

/* CV download gate */
.modal { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: 20px; background: rgba(17,18,20,.45); backdrop-filter: blur(3px); }
.modal.open { display: grid; }
.modal-card { width: min(480px, 100%); background: var(--paper); border-radius: 8px; padding: 32px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.35); animation: pop .25s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(10px); } }
.modal-card h3 { font: 700 24px/1.2 var(--sans); letter-spacing: -.02em; }
.modal-card > p { color: var(--muted); font-size: 14.5px; margin: 8px 0 22px; }
.modal-card form { display: grid; gap: 14px; }
.m-field { display: grid; gap: 6px; }
.m-field input, .m-field select { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); font: 400 15px var(--sans); color: var(--text); outline: none; }
.m-field input:focus, .m-field select:focus { border-color: var(--accent); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); }
.consent input { margin-top: 3px; accent-color: var(--accent); }
.consent a { text-decoration: underline; }
.m-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.m-close { border: 0; background: none; color: var(--muted); font: 500 14px var(--sans); cursor: pointer; }
.m-error { font: 12.5px var(--mono); color: #c2412d; min-height: 1em; }
.m-done { display: none; text-align: center; padding: 10px 0; }
.m-done b { display: block; font: 700 22px var(--sans); margin-bottom: 8px; }
.m-done p { color: var(--muted); font-size: 14.5px; }
.hp { position: absolute; left: -9999px; }

/* "Son yazılar" şeridi (ana sayfa) */
.posts-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.posts-band .wrap { display: grid; grid-template-columns: 200px 1fr auto; align-items: center; gap: 24px; padding-top: 22px; padding-bottom: 22px; }
.posts-band .band-title b { display: block; font: 700 20px/1.2 var(--sans); letter-spacing: -.02em; margin-top: 6px; }
.posts-band .band-title a { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); }
.posts-band .band-title a:hover { color: var(--text); border-color: var(--text); }
.track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; mask-image: linear-gradient(to right, #000 92%, transparent); }
.track::-webkit-scrollbar { display: none; }
.pc { flex: 0 0 300px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); transition: border-color .15s; }
.pc:hover { border-color: var(--text); }
.pc h3 { font: 600 16.5px/1.3 var(--sans); letter-spacing: -.01em; flex: 1; }
.pc:hover h3 { color: var(--accent); }
.pc-all { flex-basis: 180px; justify-content: center; background: var(--text); color: var(--bg); border-color: var(--text); }
.pc-all .label { color: #a2a4a9; }
.pc-all:hover h3 { color: #fff; }
.band-nav { display: flex; gap: 8px; }
.band-nav button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); font-size: 16px; cursor: pointer; color: var(--text); transition: border-color .15s, opacity .15s; }
.band-nav button:hover:not(:disabled) { border-color: var(--text); }
.band-nav button:disabled { opacity: .35; cursor: default; }
@media (max-width: 860px) {
  .posts-band .wrap { grid-template-columns: 1fr; }
  .band-nav { display: none; }
  .pc { flex-basis: 78%; }
}
.clients + .posts-band { border-top: 0; }