/* Gelişmiş etkileşimler, showreel, proje filtreleri ve hizmetler sayfası */

/* Uzun editoryal sayfalarda kaydırmayı global sunum kilidinden ayırır. */
html.editorial-document,
html:has(body.editorial-page) {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #404650 var(--ink);
}

html.editorial-document::-webkit-scrollbar,
html:has(body.editorial-page)::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

html.editorial-document::-webkit-scrollbar-track,
html:has(body.editorial-page)::-webkit-scrollbar-track { background: var(--ink); }

html.editorial-document::-webkit-scrollbar-thumb,
html:has(body.editorial-page)::-webkit-scrollbar-thumb {
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: #4b5260;
}

html.editorial-document body.editorial-page,
html:has(body.editorial-page) body.editorial-page {
  height: auto;
  min-height: 100svh;
  overflow: visible;
  overscroll-behavior-y: auto;
}

html.editorial-document:has(body.viewer-open) { overflow: hidden; }

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 120;
  width: 100%;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.projects-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 0;
  padding: 4px 0 17px;
  border-bottom: 1px solid var(--line);
}

.projects-filter button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 0 0 7px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  color: #8e939c;
  background: transparent;
  font: 8px/1 var(--font-geist-mono), monospace;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.projects-filter button small { color: #5e6470; font-size: 7px; }
.projects-filter button:hover,
.projects-filter button:focus-visible { color: var(--paper); border-color: #606672; }
.projects-filter button.is-active {
  color: var(--lime);
  border-color: var(--lime);
  background: transparent;
}
.projects-filter button.is-active small { color: rgba(199, 237, 114, 0.65); }
.projects-index [hidden],
.snap-page[hidden] { display: none !important; }

.projects-intro-layout {
  grid-template-columns: minmax(330px, 0.7fr) minmax(560px, 1.3fr);
  gap: 26px clamp(42px, 6vw, 96px);
}

.projects-intro-copy h1 { font-size: clamp(62px, 7vw, 108px); }

.projects-index {
  position: relative;
  align-self: center;
  padding: 24px 28px 18px;
  border: 1px solid rgba(242, 240, 233, 0.12);
  background:
    linear-gradient(135deg, rgba(96, 126, 251, 0.055), transparent 45%),
    rgba(13, 15, 19, 0.78);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(16px);
}

.projects-index::after {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 74px;
  height: 1px;
  background: var(--blue);
  content: "";
}

.projects-index-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
  color: #747a84;
  font: 8px/1 var(--font-geist-mono), monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.projects-index-head small { color: var(--blue); font: inherit; }

.projects-index [data-project-index] { display: grid; }

.projects-index [data-project-index] > a {
  position: relative;
  display: grid;
  grid-template-columns: 30px 66px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 17px;
  min-height: 88px;
  padding: 10px 4px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
  transition: color 220ms ease, padding 220ms ease, background 220ms ease;
}

.projects-index [data-project-index] > a::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--project-accent) 12%, transparent), transparent 72%);
  content: "";
  opacity: 0;
  transform: translateX(-10%);
  transition: opacity 220ms ease, transform 320ms ease;
}

.projects-index [data-project-index] > a:hover,
.projects-index [data-project-index] > a:focus-visible {
  padding-right: 10px;
  padding-left: 10px;
  color: var(--paper);
}

.projects-index [data-project-index] > a:hover::before,
.projects-index [data-project-index] > a:focus-visible::before { opacity: 1; transform: none; }

.project-index-order {
  color: var(--project-accent) !important;
  font-size: 8px !important;
}

.project-index-visual {
  display: block;
  width: 62px;
  height: 62px;
  overflow: hidden;
  border: 1px solid rgba(242, 240, 233, 0.11);
  background: #111318;
}

.project-index-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.65) saturate(0.7);
  transform: scale(1.04);
  transition: filter 320ms ease, transform 520ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.projects-index a:hover .project-index-visual img,
.projects-index a:focus-visible .project-index-visual img { filter: none; transform: scale(1.12); }

.project-index-copy { display: grid; gap: 8px; min-width: 0; }

.projects-index .project-index-copy strong {
  color: var(--paper);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
}

.projects-index .project-index-copy i {
  color: #717781;
  font-size: 7px;
  letter-spacing: 0.07em;
}

.project-index-arrow {
  color: var(--project-accent);
  font-size: 15px;
  font-weight: 400;
  transition: transform 220ms ease;
}

.projects-index a:hover .project-index-arrow,
.projects-index a:focus-visible .project-index-arrow { transform: translate(3px, -3px); }

/* Readability pass: preserve the editorial hierarchy without sub-legible type. */
.section-id,
.eyebrow,
.statement-kicker,
.hero-footer .scroll-cue,
.project-cover > p,
.project-category,
.project-copy li,
.project-contact-link,
.cv-intro-meta span,
.cv-intro-actions > a[href^="mailto:"],
.cv-download-link,
.timeline-item time,
.skill-list span,
.tool-note,
.slide-counter,
.slide-dots button span {
  font-size: 10px;
  line-height: 1.55;
}

.closing-stats span,
.closing-footer span,
.closing-copy > span,
.closing-bottom {
  color: #8f959f;
  font-size: 10px;
  line-height: 1.55;
}

.closing-footer {
  font-size: 11px;
  line-height: 1.65;
}

.mobile-menu summary b,
.mobile-menu nav .language-toggle::after {
  font-size: 10px;
}

.projects-filter button {
  font-size: 10px;
}

.projects-filter button small {
  color: #838995;
  font-size: 9px;
}

.project-index-order {
  font-size: 10px !important;
}

.projects-index .project-index-copy i {
  color: #9399a3;
  font-size: 10px;
  line-height: 1.45;
}

.case-kicker,
.case-section-label,
.contact-page-kicker,
.case-facts dt,
.case-visual-label,
.case-story-grid span,
.process-step span,
.case-gallery figcaption,
.case-next span,
.editorial-footer,
.error-visual > p,
.error-index small,
.error-footer {
  font-size: 10px;
  line-height: 1.55;
}

.case-facts dt,
.case-gallery figcaption,
.case-next span,
.editorial-footer,
.error-footer {
  color: #9096a0;
}

.case-facts dd {
  font-size: 13px;
}

.contact-form {
  gap: 25px;
}

.form-field {
  gap: 10px;
}

.form-field label {
  color: #a2a8b2;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.075em;
}

.form-field input,
.form-field select,
.form-field textarea {
  padding: 13px 0;
  font-size: 15px;
  line-height: 1.55;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #858b95;
  opacity: 1;
}

.form-consent {
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 11px;
  color: #a2a8b2;
  font-family: var(--font-geist-sans), Arial, sans-serif;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0;
}

.form-consent input {
  width: 15px;
  height: 15px;
  margin-top: 2px;
}

.form-submit {
  min-height: 50px;
  font-size: 13px;
}

.form-status {
  font-size: 12px;
}

.case-visual img,
.case-gallery img {
  cursor: zoom-in;
  outline-offset: 5px;
}

.case-visual img:focus-visible,
.case-gallery img:focus-visible { outline: 1px solid var(--blue); }

.viewer-open { overflow: hidden !important; }

.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 70px;
  place-items: center;
  padding: 42px 32px;
  color: var(--paper);
  background: rgba(5, 6, 8, 0.96);
  backdrop-filter: blur(20px);
}

.image-viewer[hidden] { display: none; }
.image-viewer figure {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}
.image-viewer img {
  display: block;
  max-width: 100%;
  max-height: calc(100svh - 120px);
  object-fit: contain;
}
.image-viewer figcaption {
  position: absolute;
  right: 34px;
  bottom: 18px;
  left: 34px;
  color: #858b95;
  font: 8px/1.5 var(--font-geist-mono), monospace;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}
.image-viewer button {
  width: 42px;
  height: 42px;
  border: 1px solid #343941;
  border-radius: 50%;
  color: var(--paper);
  background: rgba(9, 10, 12, 0.7);
  cursor: pointer;
}
.image-viewer button:hover,
.image-viewer button:focus-visible { color: var(--ink); border-color: var(--blue); background: var(--blue); }
.image-viewer-close { position: absolute; top: 22px; right: 24px; z-index: 2; font-size: 22px; }

.reel-slide {
  background:
    radial-gradient(circle at 68% 42%, rgba(244, 127, 107, 0.1), transparent 28%),
    rgba(9, 10, 12, 0.96);
}

.reel-layout {
  display: grid;
  grid-template-columns: 120px minmax(300px, 0.65fr) minmax(420px, 1fr);
  grid-template-rows: auto 1fr;
  gap: 28px clamp(34px, 5vw, 82px);
  align-items: center;
}
.reel-layout > .section-id { grid-column: 1 / -1; align-self: start; }
.reel-copy { grid-column: 2; }
.reel-copy h2 {
  margin: 18px 0 26px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(50px, 6.5vw, 92px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.06em;
}
.reel-copy h2 em { display: block; color: var(--coral); font-weight: 400; }
.reel-copy > p:last-of-type { max-width: 480px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.reel-copy .line-link { margin-top: 28px; }
.reel-frame {
  position: relative;
  grid-column: 3;
  width: min(100%, 640px);
  aspect-ratio: 4 / 5;
  justify-self: end;
  overflow: hidden;
  border: 1px solid rgba(242, 240, 233, 0.16);
  background: #111317;
}
.reel-frame figure { position: absolute; inset: 0; margin: 0; opacity: 0; animation: reel-cycle 12s infinite; }
.reel-frame figure:nth-child(2) { animation-delay: 4s; }
.reel-frame figure:nth-child(3) { animation-delay: 8s; }
.reel-frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); animation: reel-pan 12s ease-in-out infinite; }
.reel-frame figure:nth-child(2) img { object-fit: contain; background: #b9d3d5; }
.reel-frame figure:nth-child(3) img { object-position: center 53%; }
.reel-frame figcaption {
  position: absolute;
  right: 18px;
  bottom: 16px;
  left: 18px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  color: var(--paper);
  font: 8px/1 var(--font-geist-mono), monospace;
  letter-spacing: 0.08em;
}
.reel-frame::after { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 60%, rgba(5, 6, 8, 0.78)); content: ""; pointer-events: none; }

@keyframes reel-cycle {
  0%, 28% { opacity: 1; }
  33%, 95% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes reel-pan { 0% { transform: scale(1.04); } 28% { transform: scale(1.1) translate3d(1.5%, -1%, 0); } 33%, 100% { transform: scale(1.04); } }

.services-main { padding-top: 80px; }
.services-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: clamp(56px, 9vw, 140px);
  align-items: end;
  min-height: 680px;
  padding: clamp(100px, 14vh, 160px) 0 80px;
}
.services-hero h1 {
  max-width: 820px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(62px, 8.5vw, 126px);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.07em;
}
.services-hero h1 em { color: var(--blue); font-weight: 400; }
.services-intro { max-width: 480px; margin: 0; color: #a3a8b1; font-size: 15px; line-height: 1.75; }
.services-proof { display: grid; margin-top: 38px; border-top: 1px solid var(--line); }
.services-proof div { display: flex; justify-content: space-between; gap: 24px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.services-proof span { color: #6f747d; font: 8px/1 var(--font-geist-mono), monospace; text-transform: uppercase; }
.services-proof strong { color: var(--paper); font-size: 11px; font-weight: 500; text-align: right; }
.services-section { padding: clamp(84px, 11vw, 140px) 0; border-top: 1px solid var(--line); }
.services-section-heading { display: grid; grid-template-columns: 0.5fr 1.5fr; gap: 40px; align-items: end; margin-bottom: 58px; }
.services-section-heading h2 { max-width: 800px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(42px, 6vw, 78px); font-weight: 400; line-height: 0.95; letter-spacing: -0.05em; }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.service-card { position: relative; min-height: 330px; padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background 240ms ease; }
.service-card:hover { background: rgba(96, 126, 251, 0.055); }
.service-card > span { color: var(--blue); font: 8px/1 var(--font-geist-mono), monospace; letter-spacing: 0.08em; }
.service-card h3 { margin: 54px 0 18px; color: var(--paper); font: 400 clamp(26px, 2.7vw, 38px)/0.98 Georgia, "Times New Roman", serif; letter-spacing: -0.04em; }
.service-card p { margin: 0; color: #91969f; font-size: 12px; line-height: 1.7; }
.service-card ul { margin: 25px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; }
.service-card li { margin-top: 7px; color: #747a84; font: 8px/1.45 var(--font-geist-mono), monospace; }
.services-process { display: grid; grid-template-columns: 0.62fr 1.38fr; gap: clamp(50px, 9vw, 140px); }
.services-process h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(46px, 6vw, 78px); font-weight: 400; line-height: 0.94; letter-spacing: -0.05em; }
.services-process-list { counter-reset: service-step; border-top: 1px solid var(--line); }
.services-process-list article { display: grid; grid-template-columns: 54px 0.52fr 1fr; gap: 24px; padding: 25px 0; border-bottom: 1px solid var(--line); counter-increment: service-step; }
.services-process-list article::before { color: var(--blue); content: "0" counter(service-step); font: 8px/1 var(--font-geist-mono), monospace; }
.services-process-list h3 { margin: 0; color: var(--paper); font-size: 13px; }
.services-process-list p { margin: 0; color: #8e939c; font-size: 11px; line-height: 1.65; }
.services-cta { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; padding: clamp(80px, 10vw, 130px) 0 92px; border-top: 1px solid var(--line); }
.services-cta h2 { max-width: 800px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(52px, 7vw, 96px); font-weight: 400; line-height: 0.9; letter-spacing: -0.06em; }
.services-cta h2 em { color: var(--lime); font-weight: 400; }

.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }

@media (max-width: 1080px) {
  .projects-intro-layout {
    grid-template-columns: minmax(300px, 0.65fr) minmax(500px, 1.35fr);
    gap: 30px;
  }

  .projects-index { padding: 20px 22px 15px; }

  .projects-index [data-project-index] > a {
    grid-template-columns: 24px 56px minmax(0, 1fr) 22px;
    gap: 13px;
    min-height: 76px;
  }

  .project-index-visual {
    width: 54px;
    height: 54px;
  }

  .reel-layout { grid-template-columns: 88px minmax(280px, 0.8fr) minmax(350px, 1fr); gap: 30px; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .projects-intro-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 18px;
  }

  .projects-index {
    width: 100%;
    padding: 18px 18px 12px;
    align-self: start;
  }

  .projects-index-head { margin-bottom: 12px; }
  .projects-filter { gap: 14px; margin-top: 4px; padding-bottom: 12px; }
  .projects-filter button { min-height: 28px; }

  .projects-index [data-project-index] > a {
    grid-template-columns: 22px 50px minmax(0, 1fr) 20px;
    gap: 11px;
    min-height: 68px;
    padding: 8px 0;
  }

  .project-index-visual {
    width: 48px;
    height: 48px;
  }

  .projects-index .project-index-copy strong { font-size: 20px; }

  .reel-layout { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(340px, 58svh); gap: 20px; }
  .reel-layout > .section-id, .reel-copy, .reel-frame { grid-column: 1; }
  .reel-copy h2 { margin: 12px 0 16px; font-size: clamp(44px, 13vw, 66px); }
  .reel-copy > p:last-of-type { font-size: 11px; line-height: 1.55; }
  .reel-copy .line-link { margin-top: 16px; }
  .reel-frame { width: 100%; height: 100%; aspect-ratio: auto; justify-self: stretch; }
  .services-main { padding-top: 68px; }
  .services-hero { grid-template-columns: 1fr; gap: 50px; min-height: auto; padding: 92px 0 64px; }
  .services-section-heading, .services-process { grid-template-columns: 1fr; }
  .services-process { gap: 44px; }
  .services-cta { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .projects-index { padding-inline: 14px; }

  .projects-index .project-index-copy i {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .image-viewer { grid-template-columns: 48px minmax(0, 1fr) 48px; padding: 54px 8px 48px; }
  .image-viewer button { width: 36px; height: 36px; }
  .image-viewer-close { top: 12px; right: 12px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 0; }
  .services-process-list article { grid-template-columns: 36px 1fr; gap: 14px; }
  .services-process-list p { grid-column: 2; }
  .form-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .reel-frame figure { animation: none; opacity: 0; }
  .reel-frame figure:first-child { opacity: 1; }
  .reel-frame img { animation: none; transform: none; }
}