/* =========================================================
   Ahmet Boyar — kişisel marka sitesi
   Editoryal / dergi havası: siyah zemin, sinematik portre,
   film greni, tek vurgu rengi terracotta (--accent).
   Başlık: Manrope 800  ·  Gövde: DM Sans
   ========================================================= */

:root {
  /* zeminler */
  --bg: #101010;
  --bg-hero: #141414;
  --bg-story: #171716;
  --bg-dark: #121212;

  /* metin */
  --text: #E9E8E5;
  --text-title: #F3F1ED;
  --text-soft: #C6C0BB;
  --text-muted: #A9A5A0;
  --text-dim: #8F8A85;
  --text-faint: #706D6A;

  /* çizgiler */
  --rule: #373433;
  --rule-soft: #31302E;
  --rule-header: rgba(255, 255, 255, .13);

  /* tek vurgu: terracotta */
  --accent: #E27751;
  --accent-bg: #D77B59;
  --accent-line: #DC7653;
  --accent-soft: #FCE7D9;
  --on-accent: #231914;
  --accent-glow: 0 0 12px rgba(226, 119, 81, .65);

  /* yazı tipleri */
  --font-display: "Manrope", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;

  /* ritim */
  --pad-x: clamp(24px, 8.3vw, 145px);
  --header-pad: clamp(24px, 5.25vw, 90px);

  /* eski değişken adlarıyla uyumluluk (iç sayfalar) */
  --ink: var(--text);
  --ink-soft: var(--text-soft);
  --muted: var(--text-muted);
  --faint: var(--text-faint);
  --surface-1: #141414;
  --surface-2: #171716;
  --surface-3: #1f1e1d;
  --line: var(--rule-soft);
  --line-strong: var(--rule);
  --hairline: linear-gradient(var(--rule-header), var(--rule-header));
  --acid: var(--accent);
  --acid-ink: var(--on-accent);
  --acid-glow: none;
  --sans: var(--font-display);
  --mono: var(--font-body);
  --serif: var(--font-display);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
section[id] { scroll-margin-top: 74px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { font-family: var(--font-display); margin: 0; }
em { font-style: normal; color: var(--accent); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
::selection { background: #DA6845; color: #fff; }

.grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 20;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

/* ---------- etiketler ---------- */
.eyebrow {
  margin: 0;
  font: 700 11px/1.35 var(--font-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow span {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 10px;
  box-shadow: var(--accent-glow);
  vertical-align: 1px;
}

/* ---------- header ---------- */
.site-header {
  height: 96px;
  padding: 0 var(--header-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--rule-header);
  position: relative;
  z-index: 30;
}
.site-header--overlay { position: absolute; top: 0; left: 0; right: 0; }
.site-header--scrolled {
  position: fixed;
  height: 74px;
  background: rgba(14, 14, 14, .91);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.brand { display: flex; align-items: center; gap: 18px; color: var(--text-title); }
.wordmark {
  font: 800 29px/1 var(--font-display);
  letter-spacing: -.12em;
  color: var(--text-title);
}
.wordmark span { color: var(--accent); }
.brand-sep { width: 1px; height: 26px; background: var(--rule-header); }
.brand-name {
  font: 700 11px var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.header-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 47px;
}
.header-nav a {
  font: 600 13px var(--font-body);
  color: var(--text-soft);
  transition: color .2s;
}
.header-nav a:hover { color: var(--accent); }

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 700 13px var(--font-body);
  color: var(--text-title);
  transition: color .2s;
}
.header-cta i { color: var(--accent); font-size: 11px; }
.header-cta:hover { color: var(--accent); }
.cta-short { display: none; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: max(780px, 100svh);
  padding: 176px var(--pad-x) 100px;
  background: var(--bg-hero);
  overflow: hidden;
  isolation: isolate;
}
.hero-media {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 35%;
  right: 0;
  background: #020202;
  z-index: 0;
}
.hero-media img {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  object-position: center 23%;
  filter: contrast(1.05) saturate(.83);
  opacity: .91;
}
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, var(--bg-hero) 0, var(--bg-hero) 28%, rgba(20, 20, 20, .02) 70%),
    linear-gradient(0deg, rgba(20, 20, 20, .85) 0, rgba(20, 20, 20, 0) 20%);
}

.hero-topline {
  position: absolute;
  z-index: 3;
  top: 128px;
  left: var(--pad-x);
  right: var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  font: 700 11px var(--font-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 760px;
}
.hero-content .eyebrow { margin-bottom: 30px; }
.hero h1 {
  font-size: clamp(102px, min(12.4vw, 25svh), 210px);
  font-weight: 800;
  line-height: .82;
  letter-spacing: -.105em;
  color: var(--text-title);
  margin: 0 0 38px -.04em;
}
.hero h1 em { color: #DF7954; }
.hero-lead {
  font: 400 16px/1.65 var(--font-body);
  color: var(--text-soft);
  max-width: 340px;
  margin: 0 0 40px;
}
.hero-lead em { color: var(--text-title); font-weight: 500; }

.round-cta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font: 700 13px var(--font-body);
  letter-spacing: .02em;
  color: var(--text-title);
}
.round-cta i {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 13px;
  transition: background .25s, color .25s, transform .25s;
}
.round-cta:hover i { background: var(--accent); color: var(--on-accent); transform: translate(3px, -3px); }

.hero-photo-badge {
  position: absolute;
  z-index: 3;
  right: clamp(56px, 8.5vw, 150px);
  bottom: 110px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: #DF7954;
  color: var(--on-accent);
  display: grid;
  place-content: center;
  text-align: center;
  font: 800 11px/1.25 var(--font-display);
  letter-spacing: .06em;
  transform: rotate(10deg);
  box-shadow: 0 12px 38px rgba(0, 0, 0, .26);
}

.hero-bottombar {
  position: absolute;
  z-index: 3;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font: 700 10px var(--font-body);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.hero-bottombar a { transition: color .2s; }
.hero-bottombar a:hover { color: var(--accent); }
.hero-bottombar i { color: var(--accent); margin-left: 8px; }

.hero-vertical {
  position: absolute;
  z-index: 3;
  right: 26px;
  top: 50%;
  margin: 0;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  font: 700 10px var(--font-body);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- bölümler ---------- */
.section { padding: 100px var(--pad-x) 135px; }

.section-bar {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-bottom: 72px;
}
.section-bar .label {
  font: 700 11px var(--font-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.section-bar .rule { flex: 1; height: 1px; background: var(--rule); }
.section-bar .aside {
  font: 700 10px var(--font-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.section h2 {
  font-size: clamp(58px, 6.6vw, 106px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.085em;
  color: var(--text-title);
}

/* 01 / hakkımda */
.section-story { background: var(--bg-story); }
.story-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 10%;
  align-items: start;
}
.story-mark { display: block; width: 30px; height: 30px; color: var(--accent); margin-bottom: 26px; }
.large-copy {
  font: 500 22px/1.55 var(--font-body);
  letter-spacing: -.035em;
  color: var(--text);
  margin: 0 0 26px;
}
.body-copy {
  font: 400 15px/1.8 var(--font-body);
  color: var(--text-muted);
  margin: 0 0 36px;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 700 13px var(--font-body);
  color: var(--text-title);
  border-bottom: 1px solid var(--accent-line);
  padding-bottom: 6px;
  transition: color .2s;
}
.text-link span { display: inline-block; transition: transform .25s; }
.text-link:hover { color: var(--accent); }
.text-link:hover span { transform: translateX(5px); }

.connect {
  margin-top: 100px;
  padding-top: 42px;
  border-top: 1px solid var(--rule);
}
.connect-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.connect-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--rule);
  background: rgba(255, 255, 255, .015);
  color: var(--text);
  transition: border-color .25s, background .25s;
}
.connect-item:hover { border-color: var(--accent); background: rgba(226, 119, 81, .06); }
.connect-ico {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--accent);
  font-size: 17px;
  overflow: hidden;
}
.connect-ico img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); transition: filter .3s; }
.connect-item:hover .connect-ico img { filter: none; }
.connect-text strong { display: block; font: 700 13px var(--font-body); letter-spacing: .02em; color: var(--text-title); margin-bottom: 3px; }
.connect-text small { font: 400 12px var(--font-body); color: var(--text-dim); }
.connect-arrow { margin-left: auto; font-size: 11px; color: var(--text-dim); transition: color .25s, transform .25s; }
.connect-item:hover .connect-arrow { color: var(--accent); transform: translate(3px, -3px); }

/* 02 / portfolio */
.section-work { background: var(--bg-dark); }
.work-heading {
  display: grid;
  grid-template-columns: 1.4fr .8fr;
  gap: 5%;
  align-items: end;
  margin-bottom: 72px;
}
.work-heading p {
  font: 400 15px/1.75 var(--font-body);
  color: var(--text-muted);
  max-width: 330px;
  margin: 0 0 12px;
}

/* eğri kart karuseli (reel.js) */
.reel-bleed { width: 100vw; margin-left: calc(50% - 50vw); }
.reel {
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.reel.is-dragging { cursor: grabbing; }
.reel-card {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  overflow: hidden;
  background: #1a1a19;
  color: #fff;
  will-change: transform, clip-path;
}
.reel-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
  -webkit-user-drag: none;
  transition: transform .5s ease;
}
.reel-card:hover img { transform: scale(1.05); }
.reel-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 10, 10, .92) 0, rgba(10, 10, 10, .72) 22%, rgba(10, 10, 10, 0) 52%);
  pointer-events: none;
}
.reel-dim { position: absolute; inset: 0; background: #0a0a0a; opacity: .04; pointer-events: none; transition: opacity .3s; }
.reel-card:hover .reel-dim { opacity: 0 !important; }
.reel-cap {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: calc(var(--bl, 0px) + 54px);
  font: 700 14px/1.2 var(--font-display);
  letter-spacing: -.02em;
  color: #fff;
  pointer-events: none;
}
.reel-icon {
  position: absolute;
  left: 14px;
  bottom: calc(var(--bl, 0px) + 14px);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 11px;
  transition: background .25s, color .25s;
  pointer-events: none;
}
.reel-card:hover .reel-icon { background: var(--accent); color: var(--on-accent); }
.reel-card:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

/* JS çalışmazsa yatay kaydırmalı şerit */
.reel:not(.is-ready) {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 0 var(--pad-x) 10px;
  cursor: auto;
  scroll-snap-type: x mandatory;
}
.reel:not(.is-ready) .reel-card {
  position: relative;
  flex: 0 0 170px;
  height: 280px;
  border-radius: 15px;
  scroll-snap-align: start;
}

.reel-now {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 760px;
  margin: 34px auto 0;
  padding: 0 var(--pad-x);
  color: var(--text);
  text-align: left;
}
.reel-now-no { font: 700 11px var(--font-body); letter-spacing: .16em; color: var(--accent); }
.reel-now-text b { display: block; font: 700 clamp(17px, 1.6vw, 22px)/1.2 var(--font-display); letter-spacing: -.04em; color: var(--text-title); transition: color .2s; }
.reel-now-text small { display: block; margin-top: 6px; font: 400 13px/1.5 var(--font-body); color: var(--text-muted); }
.reel-now > i { font-size: 12px; color: var(--accent); transition: transform .25s; }
.reel-now:hover .reel-now-text b { color: var(--accent); }
.reel-now:hover > i { transform: translate(3px, -3px); }

/* 03 / yaklaşım — tek renkli blok */
.statement {
  position: relative;
  overflow: hidden;
  background: var(--accent-bg);
  color: var(--on-accent);
  padding: 100px var(--pad-x) 120px;
}
.statement .section-bar .label { color: var(--on-accent); }
.statement .section-bar .rule { background: rgba(35, 25, 20, .35); }
.statement .section-bar .aside { color: rgba(35, 25, 20, .62); }
.statement-mark {
  position: absolute;
  left: calc(var(--pad-x) - 8px);
  top: 168px;
  font: 400 170px/1 Georgia, "Times New Roman", serif;
  color: rgba(35, 25, 20, .17);
  pointer-events: none;
}
.statement h2 {
  position: relative;
  max-width: 1120px;
  font-size: clamp(32px, 4.6vw, 72px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.075em;
  color: var(--on-accent);
}
.statement h2 em { color: var(--accent-soft); }
.statement-sign {
  margin: 52px 0 0;
  font: 700 11px var(--font-body);
  letter-spacing: .2em;
  text-transform: uppercase;
}

/* ---------- footer ---------- */
footer {
  min-height: 110px;
  padding: 28px var(--header-pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  background: var(--bg-dark);
  border-top: 1px solid var(--rule-soft);
  font: 600 11px var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
footer p { margin: 0; }
.footer-logo { font-size: 28px; }
.footer-links { display: flex; gap: 30px; justify-self: end; }
footer a { color: var(--text-soft); transition: color .2s; }
footer a:hover { color: var(--accent); }
footer a i { color: var(--accent); margin-left: 7px; font-size: 10px; }

/* ---------- reveal animasyonu ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .15s; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero-media { left: 22%; }
  .hero-shade { background:
    linear-gradient(90deg, var(--bg-hero) 0, var(--bg-hero) 22%, rgba(20, 20, 20, .35) 62%, rgba(20, 20, 20, .05) 100%),
    linear-gradient(0deg, rgba(20, 20, 20, .85) 0, rgba(20, 20, 20, 0) 24%); }
  .hero h1 { font-size: clamp(90px, 15vw, 150px); }
  .hero-vertical { display: none; }
  .story-grid { grid-template-columns: 1fr; gap: 56px; }
  .work-heading { grid-template-columns: 1fr; gap: 24px; }
  .work-heading p { max-width: 460px; }
}

@media (max-width: 650px) {
  .site-header { height: 72px; }
  .header-nav { display: none; }
  .cta-full { display: none; }
  .cta-short { display: inline; }

  .hero { display: block; min-height: 780px; padding: 0; }
  .hero-media { inset: 72px 0 0 0; }
  .hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    opacity: .76;
  }
  .hero-shade { background: linear-gradient(0deg, var(--bg-hero) 0, var(--bg-hero) 16%, rgba(20, 20, 20, .62) 50%, rgba(20, 20, 20, .08) 100%); }
  .hero-topline { top: 96px; left: 25px; right: 25px; }
  .hero-topline .count { display: none; }
  .hero-content { position: absolute; left: 25px; right: 25px; bottom: 93px; max-width: none; }
  .hero-content .eyebrow { margin-bottom: 22px; }
  .hero h1 { font-size: clamp(83px, 20vw, 125px); margin-bottom: 26px; }
  .hero-lead { margin-bottom: 30px; }
  .hero-photo-badge { width: 85px; height: 85px; top: 150px; right: 22px; bottom: auto; font-size: 8px; }
  .hero-bottombar { left: 25px; right: 25px; bottom: 28px; }

  .section { padding: 72px 25px 90px; }
  .section-bar { margin-bottom: 48px; gap: 18px; }
  .section-bar .aside { display: none; }
  .section h2 { font-size: clamp(50px, 14.5vw, 76px); }
  .large-copy { font-size: 19px; }
  .connect { margin-top: 72px; }
  .connect-grid { grid-template-columns: 1fr; }
  .work-heading { margin-bottom: 44px; }


  .statement { padding: 72px 25px 90px; }
  .statement-mark { left: 17px; top: 126px; font-size: 130px; }

  footer { grid-template-columns: 1fr; justify-items: start; gap: 16px; padding: 30px 25px; }
  .footer-links { justify-self: start; flex-wrap: wrap; gap: 14px 24px; }
}

@media (max-width: 380px) {
  .brand-name { display: none; }
  .hero { min-height: 720px; }
  .hero h1 { font-size: 81px; }
  .hero-bottombar span { display: none; }
  .hero-bottombar { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; }
  .reveal { transform: none; }
}