/* PuzzleCam tanıtım sayfası
   Palet ve tipografi uygulamayla (oyna/css/styles.css) bilinçli olarak aynı:
   ziyaretçi "dene" düğmesine bastığında başka bir ürüne düşmüş hissetmesin.
   Dış font/CDN isteği YOK — sayfa kendi kendine yeter. */

:root{
  --ink:#0a0a08;
  --ink-soft:#15140f;
  --ink-line:#2a2822;
  --paper:#eae5d6;
  --paper-dim:#9a958a;
  --cyan:#74c7ec;
  --cyan-bright:#00d3f2;
  --gold:#f5c518;
  --ok:#5fae6e;

  --mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --wrap: 1080px;
  --gap: clamp(3.5rem, 8vw, 6.5rem);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-size:clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height:1.65;
  /* Sayfa koyu tasarlandı; tarayıcı zorla-koyu-mod uygulayıp bozmasın. */
  color-scheme:dark;
  -webkit-font-smoothing:antialiased;
}

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

a{ color:var(--cyan); }
a:hover{ color:var(--cyan-bright); }

/* Odak halkası: koyu zeminde altın, açık düğmede koyu çizgi — iki zemin de kapsanır. */
:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:2px;
  box-shadow:0 0 0 4px var(--gold);
  border-radius:2px;
}

.skip-link{
  position:absolute; left:-9999px;
  background:var(--gold); color:var(--ink);
  padding:.6rem 1rem; font-family:var(--mono); font-weight:700;
  z-index:10;
}
.skip-link:focus{ left:1rem; top:1rem; }

/* ── Üst çubuk ─────────────────────────────────────────────────── */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem 1.5rem; flex-wrap:wrap;
  max-width:var(--wrap); margin:0 auto;
  padding:1.25rem clamp(1rem, 4vw, 2rem);
}

.wordmark{
  font-family:var(--mono); font-weight:700;
  font-size:1.05rem; letter-spacing:.14em;
  text-decoration:none;
}
.wm-puzzle{ color:var(--cyan); }
.wm-sep{ color:var(--paper-dim); margin:0 .25em; }
.wm-cam{ color:var(--gold); }

.topnav{
  display:flex; align-items:center; gap:clamp(.75rem, 3vw, 1.75rem);
  font-family:var(--mono); font-size:.85rem; letter-spacing:.06em;
}
.topnav a{ color:var(--paper-dim); text-decoration:none; }
.topnav a:hover{ color:var(--paper); }

.lang-switch{ display:flex; border:1px solid var(--ink-line); border-radius:3px; overflow:hidden; }
.lang-btn{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.08em;
  background:transparent; color:var(--paper-dim);
  border:0; padding:.35rem .7rem; cursor:pointer;
}
.lang-btn + .lang-btn{ border-left:1px solid var(--ink-line); }
.lang-btn:hover{ color:var(--paper); }
.lang-btn[aria-pressed="true"]{ background:var(--gold); color:var(--ink); font-weight:700; }

/* ── Hero ──────────────────────────────────────────────────────── */
.hero{
  max-width:var(--wrap); margin:0 auto;
  padding:clamp(2.5rem, 7vw, 5rem) clamp(1rem, 4vw, 2rem) 0;
}

.eyebrow{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cyan);
  margin:0 0 1.25rem;
}

h1{
  font-size:clamp(2.6rem, 8vw, 5rem);
  line-height:1.02;
  letter-spacing:-.03em;
  font-weight:800;
  margin:0 0 1.25rem;
  max-width:14ch;
}
h1 em{
  font-style:normal;
  color:var(--gold);
}

.lede{
  max-width:56ch;
  color:var(--paper-dim);
  margin:0 0 2rem;
}

.cta-row{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:1.5rem; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--mono); font-size:.95rem; font-weight:700;
  letter-spacing:.06em;
  padding:.85rem 1.6rem;
  border-radius:3px;
  text-decoration:none;
  border:1px solid transparent;
  transition:transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn:active{ transform:translateY(1px); }

.btn-primary{ background:var(--gold); color:var(--ink); }
.btn-primary:hover{ background:#ffd63a; color:var(--ink); }

.btn-ghost{ border-color:var(--ink-line); color:var(--paper); }
.btn-ghost:hover{ border-color:var(--cyan); color:var(--cyan-bright); }

.privacy-note{
  display:flex; align-items:center; gap:.6rem;
  font-size:.9rem; color:var(--paper-dim);
  margin:0;
}
.dot-ok{
  width:.55rem; height:.55rem; border-radius:50%;
  background:var(--ok); flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(95,174,110,.18);
}

/* ── Ekran görüntüsü ───────────────────────────────────────────── */
.shot-wrap{
  max-width:var(--wrap); margin:0 auto;
  padding:clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem) 0;
}
.shot{ margin:0; }
.shot img{
  border:1px solid var(--ink-line);
  border-radius:6px;
  /* Cyan→gold çift gölge: markanın iki rengi de görsele değsin. */
  box-shadow:
    0 0 0 1px rgba(116,199,236,.12),
    0 24px 60px -20px rgba(0,0,0,.9),
    0 0 90px -50px var(--gold);
}
.shot figcaption{
  font-family:var(--mono); font-size:.78rem; color:var(--paper-dim);
  margin-top:.9rem; text-align:center;
}

/* ── Genel bölüm ───────────────────────────────────────────────── */
.section{
  max-width:var(--wrap); margin:0 auto;
  padding:var(--gap) clamp(1rem, 4vw, 2rem) 0;
}

h2{
  font-size:clamp(1.7rem, 4vw, 2.5rem);
  letter-spacing:-.02em; line-height:1.15;
  margin:0 0 2rem;
}
h2::after{
  content:""; display:block;
  width:3rem; height:3px; margin-top:.9rem;
  background:linear-gradient(90deg, var(--cyan), var(--gold));
}

h3{
  font-size:1.05rem; margin:0 0 .5rem;
  letter-spacing:-.01em;
}

.section-lede{ max-width:56ch; color:var(--paper-dim); margin:0 0 2rem; }

/* ── Adımlar ───────────────────────────────────────────────────── */
.steps{
  list-style:none; padding:0; margin:0;
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
}
.step{
  background:var(--ink-soft);
  border:1px solid var(--ink-line);
  border-radius:5px;
  padding:1.5rem 1.4rem;
  position:relative;
}
.step-num{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.14em;
  color:var(--gold); display:block; margin-bottom:.9rem;
}
.step p{ margin:0; color:var(--paper-dim); font-size:.95rem; }

.callout{
  margin-top:1.5rem;
  border-left:3px solid var(--cyan);
  background:rgba(116,199,236,.06);
  padding:1.25rem 1.4rem;
  border-radius:0 5px 5px 0;
}
.callout h3{ color:var(--cyan); }
.callout p{ margin:0; color:var(--paper-dim); font-size:.95rem; }

kbd{
  font-family:var(--mono); font-size:.82em;
  background:var(--ink); border:1px solid var(--ink-line);
  border-bottom-width:2px;
  border-radius:3px; padding:.1em .45em;
  color:var(--paper);
}
code{
  font-family:var(--mono); font-size:.88em;
  color:var(--gold);
  overflow-wrap:anywhere;
}

/* ── Özellikler ────────────────────────────────────────────────── */
.features{
  list-style:none; padding:0; margin:0;
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  background:var(--ink-line);
  border:1px solid var(--ink-line);
  border-radius:5px;
  overflow:hidden;
}
.features li{
  background:var(--ink);
  padding:1.5rem 1.4rem;
}
.features p{ margin:0; color:var(--paper-dim); font-size:.92rem; }

/* ── İndir ─────────────────────────────────────────────────────── */
.btn-download{
  flex-direction:column; gap:.15rem;
  padding:1rem 2rem;
  align-self:flex-start;
}
.dl-meta{
  font-weight:400; font-size:.72rem; letter-spacing:.1em;
  opacity:.75;
}

.dl-steps{
  margin:2rem 0 0; padding:0 0 0 1.25rem;
  max-width:60ch; color:var(--paper-dim);
  font-size:.95rem;
}
.dl-steps li{ margin-bottom:.6rem; }
.dl-steps::marker{ color:var(--gold); }

.why{
  margin-top:2rem;
  border:1px solid var(--ink-line);
  border-radius:5px;
  background:var(--ink-soft);
  padding:.25rem 1.25rem;
  max-width:70ch;
}
.why summary{
  font-family:var(--mono); font-size:.9rem;
  padding:.9rem 0; cursor:pointer;
  color:var(--cyan);
}
.why[open] summary{ color:var(--paper); }
.why p{ margin:0 0 1.1rem; color:var(--paper-dim); font-size:.92rem; }

.req{
  margin-top:2rem;
  font-size:.85rem; color:var(--paper-dim);
  max-width:70ch;
  padding-top:1.25rem;
  border-top:1px solid var(--ink-line);
}

/* ── Kim yaptı ─────────────────────────────────────────────────
   Ürünün değil geliştiricinin tanıtımı: aynı palet, ama zemini
   ayrılmış bir bant — ziyaretçi bunun ayrı bir konu olduğunu görsün. */
.maker{
  /* .section'ın padding-bottom'ı 0 — bant olduğu için alt boşluk burada verilir,
     yoksa alt kenarlık metne yapışır. */
  padding-bottom:clamp(2.5rem, 5vw, 4rem);
  margin-top:var(--gap);
  background:var(--ink-soft);
  border-top:1px solid var(--ink-line);
  border-bottom:1px solid var(--ink-line);
  border-radius:5px;
}
.maker .eyebrow{ color:var(--gold); }
.maker h2{ margin-bottom:.75rem; }
.maker .cta-row{ margin-top:1.75rem; }
.maker-note{
  margin-top:1.5rem;
  font-size:.9rem; color:var(--paper-dim);
  max-width:60ch;
}

/* ── Alt bilgi ─────────────────────────────────────────────────── */
.footer{
  max-width:var(--wrap); margin:var(--gap) auto 0;
  padding:2rem clamp(1rem, 4vw, 2rem) 3rem;
  border-top:1px solid var(--ink-line);
  font-size:.85rem; color:var(--paper-dim);
}
.footer p{ margin:0; }
.footer p + p{ margin-top:.5rem; }
.footer span + span{ margin-left:.4rem; }
.foot-link{ margin-left:.4rem; font-family:var(--mono); }