/* ═══════════════════════════════════════════════════════
   Taha Yerdekalmazer — doküman sayfaları (/hakkinda, /about)
   Ana sayfanın sinematik dilini koruyan, metin öncelikli
   ve tamamen crawl edilebilir düzen. Video/scroll yok.
   ═══════════════════════════════════════════════════════ */

:root{
  --bg:        #070708;
  --bg-soft:   #0d0d0f;
  --ink:       #f0ede6;
  --muted:     #97928a;
  --line:      rgba(240,237,230,.13);
  --gold:      #d8b36a;
  --font-d:    'Space Grotesk', 'Helvetica Neue', sans-serif;
  --font-b:    'Inter', 'Helvetica Neue', sans-serif;
  --pad:       clamp(20px, 4vw, 64px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html, body{ background:var(--bg); }
body{
  color:var(--ink);
  font-family:var(--font-b);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--gold); color:#141005; }
a{ color:inherit; }
strong{ font-weight:600; color:var(--ink); }

/* ── Film greni (ana sayfayla aynı doku) ──────────────── */
.grain{
  position:fixed; inset:-60px; z-index:80; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.05;
}

/* ── Üst bar ──────────────────────────────────────────── */
.doc-nav{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:18px var(--pad);
  background:rgba(7,7,8,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.doc-nav__logo{
  font-family:var(--font-d); font-weight:700; font-size:15px;
  letter-spacing:.06em; text-decoration:none;
}
.doc-nav__c{ color:var(--gold); font-size:.7em; vertical-align:super; }
.doc-nav__links{ display:flex; gap:clamp(14px, 3vw, 30px); }
.doc-nav__links a{
  font-size:13px; letter-spacing:.04em; color:var(--muted);
  text-decoration:none; transition:color .25s;
}
.doc-nav__links a:hover{ color:var(--gold); }

/* ── Gövde ────────────────────────────────────────────── */
.doc{
  max-width:760px;
  margin:0 auto;
  padding:clamp(48px, 9vw, 110px) var(--pad) clamp(60px, 10vw, 120px);
}

.doc__kicker{
  font-family:var(--font-d);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:18px;
}
.doc__h1{
  font-family:var(--font-d);
  font-size:clamp(38px, 8vw, 68px);
  font-weight:700; line-height:1.03; letter-spacing:-.02em;
}
.doc__role{
  font-family:var(--font-d);
  font-size:clamp(12px, 2.4vw, 14px);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
  margin-top:16px;
}
.doc__lead{
  font-size:clamp(18px, 2.6vw, 21px);
  line-height:1.62;
  color:#ddd8cf;
  margin-top:32px;
  padding-top:32px;
  border-top:1px solid var(--line);
}
.doc__lead a{ color:var(--gold); text-decoration-color:rgba(216,179,106,.4); text-underline-offset:3px; }

.doc h2, .doc h3{ font-family:var(--font-d); letter-spacing:-.01em; }
.doc__h2{
  font-size:clamp(24px, 4.2vw, 32px);
  font-weight:700; line-height:1.2;
  margin:clamp(52px, 8vw, 78px) 0 20px;
  padding-top:clamp(30px, 5vw, 44px);
  border-top:1px solid var(--line);
}
.doc__h2--sm{
  font-size:clamp(13px, 2.4vw, 15px);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:500;
  margin-bottom:14px;
}
.doc__h3{
  font-size:clamp(17px, 2.8vw, 21px);
  font-weight:500; line-height:1.3;
  margin:34px 0 12px;
  color:var(--ink);
}
.doc p + p{ margin-top:14px; }
.doc section > p{ color:#c9c4bb; }
.doc a{ color:var(--gold); text-decoration-color:rgba(216,179,106,.4); text-underline-offset:3px; }

/* ── Künye tablosu ────────────────────────────────────── */
.doc__facts{ margin-top:clamp(44px, 7vw, 64px); }
.facts{ border-top:1px solid var(--line); }
.facts__row{
  display:grid;
  grid-template-columns:minmax(120px, 200px) 1fr;
  gap:16px;
  padding:13px 0;
  border-bottom:1px solid var(--line);
  font-size:15px;
}
.facts dt{
  font-family:var(--font-d);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
  padding-top:3px;
}
.facts dd{ color:#ddd8cf; }
@media (max-width:560px){
  .facts__row{ grid-template-columns:1fr; gap:4px; }
}

/* ── Projeler ─────────────────────────────────────────── */
.proj{
  margin-top:36px;
  padding:26px clamp(18px, 3.5vw, 30px) 28px;
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:4px;
}
.proj .doc__h3{ margin-top:0; }
.proj__meta{
  font-family:var(--font-d);
  font-size:12px; letter-spacing:.05em;
  color:var(--muted);
  margin-bottom:16px;
}
.proj p{ color:#c9c4bb; font-size:16px; }

/* ── Teknoloji listesi ────────────────────────────────── */
.tech{ list-style:none; margin-top:20px; border-top:1px solid var(--line); }
.tech li{
  padding:11px 0;
  border-bottom:1px solid var(--line);
  font-size:15px; color:#c9c4bb;
}
.tech strong{
  display:inline-block; min-width:110px;
  font-family:var(--font-d); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); font-weight:500;
}

/* ── Alıntı ───────────────────────────────────────────── */
.quote{
  margin:26px 0;
  padding:24px clamp(20px, 4vw, 34px);
  border-left:2px solid var(--gold);
  background:var(--bg-soft);
}
.quote p{
  font-family:var(--font-d);
  font-size:clamp(17px, 2.6vw, 20px);
  line-height:1.55; color:var(--ink);
}
.quote footer{
  margin-top:14px;
  font-size:13px; letter-spacing:.06em; color:var(--muted);
}

/* ── SSS ──────────────────────────────────────────────── */
.faq{
  padding:22px 0;
  border-bottom:1px solid var(--line);
}
.faq .doc__h3{ margin:0 0 10px; }
.faq p{ color:#c9c4bb; font-size:16px; }

/* ── CTA ──────────────────────────────────────────────── */
.doc__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.btn{
  display:inline-block;
  padding:13px 22px;
  font-family:var(--font-d); font-size:14px; letter-spacing:.03em;
  color:#141005; background:var(--gold);
  border:1px solid var(--gold); border-radius:2px;
  text-decoration:none;
  transition:opacity .25s;
}
.btn:hover{ opacity:.85; }
.btn--ghost{
  color:var(--ink); background:transparent;
  border-color:var(--line);
}
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); opacity:1; }

.doc__updated{
  margin-top:clamp(52px, 8vw, 76px);
  padding-top:24px;
  border-top:1px solid var(--line);
  font-size:13px; letter-spacing:.05em; color:var(--muted);
}

/* ── Alt bar ──────────────────────────────────────────── */
.doc-footer{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:16px;
  padding:26px var(--pad);
  border-top:1px solid var(--line);
  font-size:13px; color:var(--muted);
}
.doc-footer__links{ display:flex; flex-wrap:wrap; gap:clamp(14px, 3vw, 26px); }
.doc-footer__links a{ color:var(--muted); text-decoration:none; transition:color .25s; }
.doc-footer__links a:hover{ color:var(--gold); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}