/* Desktop values are taken from the Figma frame (1440px wide); comments
   with "baseline" give the Figma text baseline each spacing reproduces. */
:root {
  --ink: #0a2435;
  --brand: #256d9d;
  --footer-muted: #4b6074;
  --stroke-blue: linear-gradient(180deg, #2d8ecf, #256a98); /* Figma "stroke blue" */
  --header-line: rgba(146, 182, 207, .5);
  --rule: #e8ebef;
  --muted: #6b7682;
  --header-h: 106.54px;
  --pad: 112px;
  --display: "Montserrat", system-ui, sans-serif;
  --sans: "Inter", system-ui, sans-serif;
  --nav: "Noto Sans JP", "Inter", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 20px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }

.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--pad); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid var(--header-line);
}
.header-inner {
  position: relative;
  max-width: 1440px;
  height: calc(var(--header-h) - 1px);
  margin: 0 auto;
}
.brand {
  position: absolute;
  left: 111px;
  top: 32px;
  display: flex;
  align-items: flex-start;
  gap: 17px;
}
.brand-mark { width: 43px; height: 41.12px; }
.brand-name {
  margin-top: 5.5px; /* baseline 61.65 */
  font-size: 25.16px;
  font-weight: 300;
  line-height: 30px;
  color: var(--brand);
}
.site-nav {
  position: absolute;
  right: 117px;
  top: 40.8px; /* baseline 68.6 */
  display: flex;
}
.site-nav a {
  font-family: var(--nav);
  font-size: 24px;
  line-height: 30px;
  color: var(--ink);
  position: relative;
}
.site-nav a:nth-child(1) { width: 177px; }
.site-nav a:nth-child(2) { width: 158px; }
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: var(--u, 100%);
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.site-nav a:nth-child(1)::after { --u: 91px; }
.site-nav a:nth-child(2)::after { --u: 89px; }
.site-nav a:hover::after { transform: scaleX(1); }

section[id] { scroll-margin-top: var(--header-h); }

/* Figma-exported visuals (pill, outline and overflowing mockups baked in),
   flush to one screen edge; --w is the design width at 1440px */
.media {
  flex: none;
  width: min(calc(var(--w) / 1440 * 100vw), calc(var(--w) * 1px));
}
.media img { width: 100%; height: auto; }
.media--hero { --w: 718; }
.media--hetsis { --w: 652; }
.media--metu-app { --w: 597; }
.media--equo { --w: 601; }
.media--streo { --w: 669; }
.media--safak { --w: 601; }
.media--ziraat { --w: 598; }
.media--others { --w: 598; }
.media--right { margin-left: auto; }

/* Hero: header bottom 106.54 → tags top 740.14 */
.hero { position: relative; height: 633.6px; }
.hero-inner { padding: 216.75px 0 0 111px; } /* name baseline 371.75 */
.hero h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 50.52px;
  line-height: 1.2;
  letter-spacing: -.05em;
  margin-bottom: 25.25px;
}
.hero-hi {
  display: inline-block;
  width: 119.3px; /* name starts at x 242 */
  font-family: var(--sans);
  font-weight: 300;
  font-size: 40.93px;
  letter-spacing: 0;
  vertical-align: 3.9px; /* "Hi! I'm" baseline 367.86 */
}
.hero p { font-size: 20px; line-height: 30px; max-width: 570px; } /* baseline 431.43 */
.hero-media {
  position: absolute;
  right: 0;
  top: 84.87px;
}

/* Focus-area marquee: tags 44px tall at y 740.14, 34.5px apart */
.marquee { overflow: hidden; }
.marquee-track {
  display: flex;
  align-items: center;
  gap: 34.5px;
  width: max-content;
  margin-left: -126.5px; /* Figma frame starts mid-tag */
  animation: marquee 40s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - 17.25px)); } }
/* Gradient border: white fill clipped to the padding box over the gradient */
.tag, .chip {
  border: 1px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--stroke-blue) border-box;
}
.tag {
  border-radius: 999px;
  padding: 0 15.5px;
  font-size: 24px;
  line-height: 42px; /* baseline 770.87 */
  white-space: nowrap;
}
.dot {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--stroke-blue);
}
.dot--lg { --d: 31.28px; width: var(--d); height: var(--d); }
/* Keep the title dot on the first line when a heading wraps */
.project h3, .detail-hero h1 { align-items: flex-start !important; }
.project h3 .dot--lg, .detail-hero h1 .dot--lg { margin-top: calc((1.2em - var(--d)) / 2); }

/* Section titles: Inter Medium 48 */
.section-title {
  text-align: center;
  font-weight: 500;
  font-size: 48px;
  line-height: 58px;
  letter-spacing: -.021em;
}
#projects { padding-top: 174px; }           /* "Projects" baseline 1004.59 */
#projects .section-title { margin-bottom: 75.85px; }
#resume { padding-top: 122.8px; }           /* "Resume" baseline 4298.23 */
#resume .section-title { margin-bottom: 91.04px; position: relative; left: -2.2px; }
#contact { padding-top: 181.9px; }          /* "Contact" baseline 5169.45 */
#contact .section-title { margin-bottom: 96px; }

/* Projects: each row starts at its image top; --tt drops the text to the
   Figma title position and --gap is the space to the next image */
.project {
  --edge: max(var(--pad), calc((100vw - 1440px) / 2 + var(--pad)));
  display: grid;
  grid-template-columns: calc(704.5 / 1440 * 100%) minmax(0, 1fr);
  align-items: start;
  margin-bottom: var(--gap, 120px);
}
.project-text { margin-top: var(--tt, 0px); }
.project--media-left .project-text { padding-right: var(--edge); }
.project--media-right { grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; }
.project--media-right .project-text { padding-left: 115px; order: -1; }
.project h3 {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -.05em;
  margin-bottom: 11.4px;
}
.project p {
  max-width: 600px;
  font-size: 20px;
  line-height: 38px;
  letter-spacing: -.021em;
  margin-bottom: 24.7px;
}
.p--hetsis { --tt: 43.4px; --gap: 91.5px; }
.p--metu-app { --tt: 42.6px; --gap: 91px; }
.p--equo { --tt: 76.6px; --gap: 119.5px; }
.p--streo { --tt: 23.5px; --gap: 98px; }
.p--safak { --tt: 43.4px; --gap: 91.5px; }
.p--ziraat { --tt: 51.2px; --gap: 141.5px; }
.p--others { --tt: 104.3px; --gap: 0px; }
.p--others h3 { margin-bottom: 28px; }
.p--ziraat p { margin-bottom: 16.7px; }
/* Plain inline so the hover underline runs unbroken under text, space and arrow */
.details {
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -.011em;
}
.details:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.project .media img { transition: filter .35s ease; }
.project--media-left:hover .media img { filter: drop-shadow(10px 12px 18px rgba(74, 120, 166, .45)); }
.project--media-right:hover .media img { filter: drop-shadow(-10px 12px 18px rgba(74, 120, 166, .45)); }

/* Resume: columns at x 58 / 521 / 968 */
.resume {
  display: grid;
  grid-template-columns: 463px 447px minmax(0, 1fr);
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 58px;
  padding-right: 40px;
}
.resume-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 19.36px;
  line-height: 1.2;
  margin-bottom: 21.9px;
}
.resume-heading::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--stroke-blue);
}
.resume dl > div {
  display: grid;
  grid-template-columns: 104.7px 1fr;
  margin-bottom: 18.08px;
  font-size: 14.08px;
  line-height: 17.6px;
}
.resume dl > div:last-child { margin-bottom: 0; }
.resume dt { white-space: nowrap; }
.resume small { display: block; font-size: 10.56px; line-height: 17.6px; margin-top: 1.28px; }
.resume small + small { margin-top: 0; }
.skills { display: grid; grid-template-columns: 176.9px 1fr; font-size: 14.08px; line-height: 22px; }
.plain { font-size: 14.08px; line-height: 22px; }
/* Per-block spacing from the Figma positions */
.rb--awards { margin-top: 59.63px; }
.rb--awards .resume-heading { margin-bottom: 20.15px; }
.rb--awards dt { position: relative; top: 2.1px; }
.rb--exp dl > div:nth-child(4) { margin-top: .9px; }
.rb--exp dl > div:nth-child(4) dt { position: relative; top: 2.1px; }
.rb--activity { margin-top: 48.58px; }
.rb--activity .resume-heading { margin-bottom: 23.05px; }
.rb--activity dl > div { grid-template-columns: 128px 1fr; }
.rb--certs .resume-heading { margin-bottom: 21.64px; }
.rb--certs dl > div { grid-template-columns: 128px 1fr; margin-bottom: 22.4px; }
.rb--certs dl > div:last-child { margin-bottom: 0; }
.rb--skills { margin-top: 66.97px; }
.rb--skills .resume-heading { margin-bottom: 20.5px; }
.rb--langs { margin-top: 65.39px; }
.rb--langs .resume-heading { margin-bottom: 20.94px; }

/* Contact: left edge x 53 */
.contact { max-width: 1440px; margin: 0 auto; padding-left: 53px; }
.contact-lead {
  font-weight: 300;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: -.05em;
  margin-bottom: 25px;
}
.contact-mail {
  display: inline-block;
  font-size: 25px;
  line-height: 30px;
  letter-spacing: -.01em;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  margin-bottom: 30px;
}
.contact-links { display: flex; gap: 12px; flex-wrap: wrap; }
.chip {
  border-width: 1.19px;
  border-radius: 999px;
  padding: 0 21.36px;
  font-size: 17.8px;
  line-height: 38.62px;
  transition: color .2s ease;
}
.chip { display: inline-block; }
.chip:nth-child(1) { width: 138.1px; }
.chip:nth-child(2) { width: 141.1px; }
.chip:hover { background: var(--stroke-blue) border-box; color: #fff; }

/* Footer */
.site-footer {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 178px 54px 50px 59px; /* baseline 5641.73, page ends 5695 */
  font-size: 13px;
  line-height: 16px;
}
.site-footer p:first-child { color: var(--footer-muted); }

/* 404 */
.not-found { padding-top: 160px; padding-bottom: 200px; }
.not-found h1 { font-family: var(--display); font-weight: 500; font-size: 48px; letter-spacing: -.05em; margin-bottom: 16px; }
.not-found p { margin-bottom: 32px; }

/* Project detail pages */
.back-link { display: inline-block; margin: 48px 0 56px; font-size: 18px; }
.back-link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.detail-hero { margin-bottom: 96px; align-items: center; }
.detail-hero .project-text { margin-top: 0; }
.detail-hero .media img { filter: none !important; }
.detail-hero h1 {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: -.05em;
  margin-bottom: 24px;
}
.detail-hero p { margin-bottom: 0; }

/* Content Berrak adds per project: text sections and full-width images */
.detail-body > * { max-width: 1040px; }
.detail-section { margin-bottom: 96px; }
.detail-section h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -.05em;
  margin-bottom: 20px;
}
.detail-section p { font-size: 20px; line-height: 38px; letter-spacing: -.021em; max-width: 760px; margin-bottom: 16px; }
.detail-section figure { margin: 40px 0 0; }
.detail-section figure img { width: 100%; height: auto; border-radius: 24px; }
.detail-section figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }

.next-project {
  border-top: 1px solid var(--rule);
  padding-top: 48px;
  padding-bottom: 96px;
}
.next-project span.label { display: block; font-size: 16px; color: var(--muted); margin-bottom: 12px; }
.next-project a {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 40px;
  letter-spacing: -.05em;
}
.next-project a .arrow { transition: transform .25s ease; }
.next-project a:hover .arrow { transform: translateX(6px); }

/* Tablet: keep the design, let positions flow */
@media (max-width: 1240px) {
  :root { --pad: 48px; }
  .brand { left: var(--pad); }
  .site-nav { right: var(--pad); }
  .site-nav a:nth-child(1), .site-nav a:nth-child(2) { width: auto; margin-right: 48px; }
  .hero { height: auto; padding-bottom: 80px; }
  .hero-inner { padding: 120px 0 0 var(--pad); }
  .hero-text { max-width: 46%; }
  .hero h1 { font-size: 42px; }
  .hero-hi { font-size: 34px; width: auto; margin-right: 12px; }
  .hero-media { top: 50%; transform: translateY(-50%); }
  .project { align-items: center; }
  .project-text { margin-top: 0; }
  .project--media-right .project-text { padding-left: var(--pad); }
  .project h3 { font-size: 34px; }
  .project p { font-size: 18px; line-height: 32px; }
  .resume { grid-template-columns: 1fr 1fr; gap: 0 48px; padding-left: var(--pad); }
  .rb--skills, .rb--langs { margin-top: 48px; }
}

/* Phone */
@media (max-width: 760px) {
  :root { --header-h: 68px; --pad: 20px; }
  body { font-size: 17px; }
  .brand { top: 50%; transform: translateY(-50%); gap: 10px; align-items: center; }
  .brand-mark { width: 32px; height: 30.6px; }
  .brand-name { font-size: 20px; margin-top: 0; }
  .site-nav { top: 50%; transform: translateY(-50%); gap: 20px; }
  .site-nav a { font-size: 16px; }
  .site-nav a:nth-child(1), .site-nav a:nth-child(2) { margin-right: 0; }

  .hero { display: flex; flex-direction: column; padding: 40px 0 24px; }
  .hero-inner { padding: 0 var(--pad); }
  .hero-text { max-width: none; }
  .hero h1 { font-size: 34px; margin-bottom: 20px; }
  .hero-hi { font-size: 26px; display: block; margin: 0 0 4px; vertical-align: 0; }
  .hero-media {
    position: relative;
    top: auto;
    transform: none;
    margin-top: 32px;
  }
  .media { width: 94vw; }

  .marquee { margin-top: 16px; }
  .marquee-track { gap: 20px; }
  .tag { font-size: 17px; line-height: 32px; padding: 0 14px; }
  .dot { width: 12px; height: 12px; }

  #projects, #resume, #contact { padding-top: 72px; }
  .section-title { font-size: 34px; line-height: 42px; }
  #projects .section-title, #resume .section-title, #contact .section-title { margin-bottom: 48px; }

  .project { grid-template-columns: 1fr; row-gap: 24px; margin-bottom: 72px; }
  .project--media-left .project-text,
  .project--media-right .project-text { padding: 0 var(--pad); max-width: none; order: 0; }
  .project h3 { font-size: 28px; line-height: 1.2; gap: 12px; margin-bottom: 12px; }
  .dot--lg { --d: 22px; width: var(--d); height: var(--d); }
  .project p { font-size: 17px; line-height: 1.7; margin-bottom: 18px; }
  .p--others h3 { margin-bottom: 12px; }

  .back-link { margin: 24px 0 28px; font-size: 16px; }
  .detail-hero { margin-bottom: 56px; }
  .detail-hero h1 { font-size: 32px; gap: 12px; margin-bottom: 14px; }
  .detail-section { margin-bottom: 56px; }
  .detail-section h2 { font-size: 24px; }
  .detail-section p { font-size: 17px; line-height: 1.7; }
  .detail-section figure img { border-radius: 14px; }
  .next-project { padding-top: 32px; padding-bottom: 64px; }
  .next-project a { font-size: 26px; gap: 12px; }

  .resume { grid-template-columns: 1fr; padding: 0 var(--pad); }
  .resume-col + .resume-col, .rb--awards, .rb--activity, .rb--skills, .rb--langs { margin-top: 40px; }

  .contact { padding-left: var(--pad); }
  .contact-lead { font-size: 30px; line-height: 1.2; }
  .contact-mail { font-size: 20px; }
  .site-footer { flex-direction: column; gap: 4px; font-size: 12px; padding: 80px var(--pad) 32px; }
}

@media (max-width: 400px) {
  .brand-name { display: none; }
}

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