/* Sadece Yarat - shared stylesheet.
   Brand carried over from the previous site: black ground, orange accent,
   Syne for headings, Space Grotesk for body. No framework, no build step. */

:root {
  --bg: #000000;
  --surface: #0a0a0a;
  --surface-2: #141414;
  --fg: #fafafa;
  --fg-muted: #a6a6a6;
  --border: #262626;
  --accent: #d27523;
  /* Button/skip-link ground: darker orange so white text passes WCAG AA (5.0:1);
     the brighter --accent stays for text and lines on black (6.3:1). */
  --accent-btn: #ab5a13;
  --accent-soft: rgba(210, 117, 35, 0.12);
  --maxw: 1200px;
  --radius: 12px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: Syne, "Space Grotesk", sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0 0 0.5em;
}

/* Weight 700, not 800: Syne's heaviest weight widens the letterforms noticeably
   at display sizes, which reads as stretched next to the logo. 700 keeps the
   headline in the same proportions as the wordmark. */
h1 { font-size: clamp(2.1rem, 6vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.6rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; }

p { margin: 0 0 1.1em; }
a { color: var(--accent); }

img, video { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }

/* ---------- skip link ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent-btn); color: #fff; padding: 12px 18px; font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- mobile nav toggle ---------- */
.nav-toggle { display: none; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--accent);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 72px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--fg); }
.brand img { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--accent); }
.brand span { font-family: Syne, sans-serif; font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; }

.site-nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.site-nav a { color: var(--fg-muted); text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.site-nav a:hover, .site-nav a:focus { color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--fg); }
.lang { display: flex; gap: 6px; align-items: center; font-size: 0.9rem; color: var(--fg-muted); }
.lang a { text-decoration: none; }
.lang .sep { opacity: 0.4; }

/* Anchor targets stop below the sticky header instead of underneath it. */
section[id] { scroll-margin-top: 96px; }

/* ---------- sections ---------- */
section { padding: 88px 0; border-top: 1px solid var(--border); }
section:first-of-type { border-top: 0; }
.section-lede { color: var(--fg-muted); font-size: 1.1rem; max-width: 62ch; }
.kicker {
  display: inline-block; font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 14px;
}

/* ---------- hero ---------- */
/* Laid out as a flex column so the two glowing rules sit ABOVE and BELOW the
   content rather than crossing it. They are flex items, not absolutely
   positioned, which is what keeps them clear of the headline and the button
   at every screen size and every length of text. */
.hero {
  padding: 0; border-top: 0; position: relative;
  display: flex; flex-direction: column; justify-content: center;
}
/* width:100% because auto margins on a flex item defeat align-items:stretch,
   shrinking the wrap to its content and misaligning the hero with the sections. */
.hero > .wrap { width: 100%; padding-top: 72px; padding-bottom: 72px; }
.hero p.lede { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--fg-muted); max-width: 60ch; }
.hero-media { margin-top: 44px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }

/* The glowing rules, carried over from the previous site: full-bleed, pulsing slowly. */
.accent-line {
  flex: 0 0 1px; width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Full-height centred hero, used on the two homepages. The film sales pages keep
   a shorter left-aligned hero so their contact button stays above the fold. */
.hero-center { min-height: calc(100vh - 74px); text-align: center; }
.hero-center h1 { margin-bottom: 28px; }
.hero-center p.lede { margin-left: auto; margin-right: auto; }
.hero-center .cta-row { justify-content: center; }

/* Second line of the headline, in the accent colour. */
h1 .accent { display: block; color: var(--accent); }

/* ---------- buttons ---------- */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 28px 0 12px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent-btn); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 1.02rem; padding: 15px 28px; border-radius: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover, .btn:focus { transform: translateY(-2px); box-shadow: 0 0 24px rgba(210, 117, 35, 0.35); }
.btn-note { color: var(--fg-muted); font-size: 0.92rem; }
.btn-note a { color: var(--fg); }
.reply-promise { color: var(--fg-muted); font-size: 0.95rem; margin-top: 4px; }
.mailto-hint { color: #7a7a7a; font-size: 0.85rem; margin-top: 10px; }

/* ---------- trust strip ---------- */
.trust { padding: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
.trust ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.trust li {
  padding: 26px 24px; font-size: 0.95rem; color: var(--fg);
  border-left: 1px solid var(--border);
}
.trust li:first-child { border-left: 0; }
.trust strong { display: block; font-family: Syne, sans-serif; color: var(--accent); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; }

/* ---------- comparison ---------- */
.pair { margin: 40px 0 0; }
.pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pair figure { margin: 0; }
/* Same 16:9 frame as the videos; object-position keeps the top of the
   photo and crops from the bottom, so pairs always line up. */
.pair figure img { border-radius: var(--radius); border: 1px solid var(--border); width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.pair figure video { border-radius: var(--radius); border: 1px solid var(--border); width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.pair-grid.triple { grid-template-columns: 1fr 1fr 1fr; }
.pair .label {
  display: inline-block; margin: 10px 0 6px; font-size: 0.75rem; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600; color: var(--fg-muted);
}
.pair .label.after { color: var(--accent); }
.pair figcaption { color: var(--fg-muted); font-size: 0.92rem; margin: 0; }

.placeholder {
  border: 1px dashed #3d3d3d; border-radius: var(--radius);
  background: repeating-linear-gradient(45deg, #101010, #101010 12px, #151515 12px, #151515 24px);
  aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 24px; color: #6f6f6f; font-size: 0.9rem;
}

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 36px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.card h3 { margin-bottom: 10px; }
.card p:last-child { margin-bottom: 0; }
.card p { color: var(--fg-muted); }
.card video { width: 100%; display: block; margin-top: 16px; border-radius: var(--radius); border: 1px solid var(--border); aspect-ratio: 16 / 10; object-fit: cover; }
.card video.phone { object-fit: contain; background: #101010; }
.card .card-link { margin-top: 12px; font-size: 0.9rem; }

/* ---------- deliverables list ---------- */
.plain-list { list-style: none; padding: 0; margin: 28px 0 0; }
.plain-list li {
  padding: 18px 0 18px 34px; border-top: 1px solid var(--border); position: relative; color: var(--fg-muted);
}
.plain-list li::before {
  content: ""; position: absolute; left: 6px; top: 27px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.plain-list li strong { color: var(--fg); font-weight: 600; }

/* ---------- video embed (click to play) ---------- */
.video-embed {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--border); background: #000;
}
.video-embed iframe, .video-embed img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.video-embed button.play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.35); border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.video-embed button.play:hover { background: rgba(0, 0, 0, 0.2); }
.video-embed .play-icon {
  width: 78px; height: 78px; border-radius: 50%; background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.6);
}
.video-embed .play-icon svg { width: 30px; height: 30px; fill: #fff; margin-left: 4px; }
.video-caption { color: var(--fg-muted); font-size: 0.9rem; margin-top: 12px; }

/* ---------- faq ---------- */
.faq { margin-top: 36px; }
.faq details {
  border-top: 1px solid var(--border); padding: 20px 0;
}
.faq details[open] summary { color: var(--accent); }
.faq summary {
  cursor: pointer; font-family: Syne, sans-serif; font-weight: 600;
  font-size: 1.08rem; list-style: none; display: flex; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--fg-muted); margin: 14px 0 0; max-width: 70ch; }

/* ---------- founder ---------- */
.founder { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 36px; }
.founder p { color: var(--fg-muted); }
.founder .role { color: var(--accent); font-weight: 600; font-family: Syne, sans-serif; }

/* ---------- final cta ---------- */
.final-cta { background: var(--accent-soft); border-top: 1px solid var(--border); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 48px 0; color: var(--fg-muted); font-size: 0.92rem; }
.site-footer .cols { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; }
.site-footer a { color: var(--fg-muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.site-footer .legal { font-size: 0.85rem; color: #8a8a8a; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .trust ul { grid-template-columns: repeat(2, 1fr); }
  .trust li:nth-child(3) { border-left: 0; }
  .trust li:nth-child(n+3) { border-top: 1px solid var(--border); }
  section { padding: 64px 0; }
  .hero { padding: 64px 0 56px; }
}

@media (max-width: 860px) {
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 11px; background: none;
    border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; width: 100%; background: var(--fg); }
  .site-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 20px;
    background: rgba(0, 0, 0, 0.97); border-bottom: 2px solid var(--accent);
    padding: 22px 24px 26px;
  }
  .site-nav.open { display: flex; }
  .site-nav a { font-size: 1.05rem; }
  section[id] { scroll-margin-top: 84px; }
  .pair-grid.triple { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .pair-grid { grid-template-columns: 1fr; }
  .trust ul { grid-template-columns: 1fr; }
  .trust li { border-left: 0; border-top: 1px solid var(--border); }
  .trust li:first-child { border-top: 0; }
  .site-header .wrap { min-height: 64px; }
  .site-nav { gap: 16px; font-size: 0.9rem; }
  .founder { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .accent-line { animation: none; opacity: 0.6; }
}

/* Contact form */
.contact-form { margin: 28px 0 0; max-width: 560px; text-align: left; display: grid; gap: 16px; }
.contact-form .form-row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .contact-form .form-row { grid-template-columns: 1fr; } }
.contact-form label { display: grid; gap: 6px; font-size: 0.92rem; color: var(--fg-muted); }
.contact-form input, .contact-form textarea {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--fg);
  border-radius: 8px; padding: 12px 14px; font: inherit; width: 100%;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent); }
.contact-form .hp { position: absolute; left: -9999px; height: 0; width: 0; opacity: 0; }
.contact-form button { justify-self: start; border: 0; cursor: pointer; }
.contact-form .cf-turnstile:empty { display: none; }
.form-status { min-height: 1.4em; margin: 0; font-size: 0.95rem; }
.form-status.ok { color: #7ddc8f; }
.form-status.err { color: #e07777; }
.form-kvkk { font-size: 0.8rem; color: var(--fg-muted); margin: 0; }