@import url('/fonts/montserrat.css');

/* =====================================================================
 * site.css — capturemomento.com'un ön kapısı.
 *
 * Claude Design canvas'ındaki artboard'un üretime taşınmış hâli. Canvas
 * formatı (<x-dc>, {{ }} bağlamaları, <sc-for>) tarayıcıda çalışmıyor —
 * denendi, boş sayfa. Tasarımın kendisi eksiksizdi; burada olan, onu
 * runtime'sız düz HTML/CSS'e taşımak.
 *
 * Artboard her şeyi inline style olarak taşıyordu, çünkü bir tasarım
 * aracının çıktısı öyle olur. Burada sınıflara çevrildi: aynı görüntü,
 * okunabilir işaretleme ve tekrar tekrar gönderilmeyen yüz satırlık stil.
 *
 * Token'lar ds-bundle/tokens ile birebir aynı — kopyalanmalarının sebebi,
 * bu sayfanın Vite paketine değil /public'e ait olması: @import zinciri
 * her ziyarette dört ek istek demek olurdu.
 * ===================================================================== */

:root {
  /* Renk — palettes.dark (theme/tokens.ts). Site her zaman koyu: uygulama,
     misafir web'i ve hukuki sayfaların hepsi koyu, ve ön kapının onlardan
     başka bir şey gibi görünmesi için bir sebep yok. */
  --bg: #111111;
  --surface: #1c1c1c;
  --ink: #f4f2ee;
  --ink-muted: #8a8a86;
  --line: #2e2e2c;
  /* Artboard burada #FF3B2F kullanıyordu. Uygulamanın gerçek accent'i
     #FF5A36 ve aynı turuncu misafir web'inde, hukuki sayfalarda ve kilit
     ekranı kartında da duruyor — ön kapının tek başına farklı bir kırmızı
     kullanması için sebep yok. */
  --accent: #ff5a36;
  --accent-ink: #111111;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-xxxl: 64px;

  --radius-r1: 12px;
  --radius-r2: 20px;
  --radius-full: 999px;

  --font-system: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui,
    sans-serif;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --text-caption: 12px;
  --text-label: 13px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 22px;
  --text-stat: 36px;

  --tracking-title: -0.3px;
  --tracking-tight: -0.5px;
  --tracking-label: 1.1px;

  --motion-fast: 180ms;
  --ease-signature: cubic-bezier(0.2, 0, 0, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-system);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--ink); text-decoration: none; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* Sayfanın her yerinde tekrarlanan tek tipografik jest: 13px, yarı kalın,
   büyük harf, açık harf aralığı. Uygulamadaki etiketlerle aynı. */
.label {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.muted { color: var(--ink-muted); }
.accent { color: var(--accent); }

/* Bölümler yatay çizgilerle ayrılıyor, gölgeyle değil — tasarım dilinin
   yapıyı ifade etme biçimi bu. */
section { border-bottom: 1px solid var(--line); }

/* ---- Başlık ---------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-base);
  padding: var(--space-md) var(--space-lg);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.site-header .wordmark { height: 26px; width: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: var(--space-xl); }
.site-nav a { white-space: nowrap; transition: color var(--motion-fast) var(--ease-signature); }
.site-nav a:hover { color: var(--accent); }
.header-right { justify-self: end; display: flex; align-items: center; gap: var(--space-md); }

/* Dil anahtarı */
.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  padding: 3px;
}
.lang button {
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-family: var(--font-system);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  padding: 6px 12px;
  background: transparent;
  color: var(--ink-muted);
  transition: background var(--motion-fast) var(--ease-signature);
}
.lang button[aria-pressed='true'] { background: var(--ink); color: var(--bg); }

/* Açılır menü — dokunmatikte de çalışsın diye :hover değil, JS ile açılıyor. */
.has-menu { position: relative; display: flex; align-items: center; }
.menu-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: var(--space-md);
  min-width: 260px;
}
.menu-panel > div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-r1);
  padding: var(--space-sm) var(--space-base);
  display: grid;
}
.menu-panel a {
  padding: var(--space-base) 0;
  border-top: 1px solid var(--line);
  white-space: nowrap;
}
.menu-panel a:first-child { border-top: 0; }

/* Düğmeler ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  border-radius: var(--radius-r2);
  padding: var(--space-base) var(--space-lg);
  white-space: nowrap;
  transition: background var(--motion-fast) var(--ease-signature),
    color var(--motion-fast) var(--ease-signature),
    border-color var(--motion-fast) var(--ease-signature);
}
/* Koyu zeminde birincil eylem kâğıt beyazı, accent değil — accent tek bir
   an için saklanıyor. */
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--accent); color: var(--accent-ink); }
.btn-ghost { border: 1px solid var(--line); color: var(--ink-muted); }
.btn-ghost:hover { color: var(--ink); border-color: var(--ink); }
.btn-pill { border-radius: var(--radius-full); padding: 12px var(--space-lg); }

/* ---- Hero ------------------------------------------------------------ */

.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.hero-copy {
  padding: var(--space-xxxl) var(--space-lg) var(--space-xxl);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  justify-content: center;
}
/*
  Alt sınır 44px değil 32px.
  clamp'in tabanı 44px'ken 430px'lik bir telefonda "Fotoğraflar" tek başına
  satıra sığmıyordu; taşan başlık sayfayı viewport'tan geniş yapıyor ve
  ondan sonra HER ŞEY sağa kayıyordu — başlıktaki bir sayı, düzenin
  tamamını bozuyor. Türkçe kelimeler İngilizcedekilerden uzun, o yüzden
  taban da vw katsayısı da buna göre.
*/
.hero-copy h1 {
  margin: 0;
  font-weight: var(--weight-bold);
  font-size: clamp(32px, 7.2vw, 92px);
  line-height: 0.98;
  letter-spacing: -2px;
  max-width: 15ch;
  text-wrap: balance;
}
.hero-body { margin: 0; font-size: var(--text-md); line-height: 1.5; color: var(--ink-muted); max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-sm); }
.hero-notes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-base);
  font-size: var(--text-caption);
  color: var(--ink-muted);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hero-demo {
  padding: var(--space-xxl) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
}
.demo-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-r1);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-md);
}
.demo-wrap { width: 100%; max-width: 380px; display: grid; gap: var(--space-md); }
.demo-head { display: flex; align-items: center; justify-content: space-between; }
.demo-locked {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-caption);
  color: var(--accent);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
/* Kilit noktası. steps(1,end) bilerek: yumuşak bir nabız değil, bir gösterge
   ışığının açık/kapalı geçişi. */
.blink {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--accent);
  animation: blink 1.6s steps(1, end) infinite;
}
@keyframes blink { 0%, 55% { opacity: 1 } 56%, 100% { opacity: 0.15 } }
.demo-title { font-weight: var(--weight-bold); font-size: var(--text-lg); letter-spacing: var(--tracking-title); }
.demo-rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.demo-clock {
  font-weight: var(--weight-semibold);
  font-size: 44px;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}
.demo-stats { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--ink-muted); }
.demo-stats b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
.demo-note { margin: 0; font-size: var(--text-caption); line-height: 1.4; color: var(--ink-muted); }

/* ---- Ortak bölüm iskeleti -------------------------------------------- */

.sec { padding: var(--space-xxl) var(--space-lg); display: grid; gap: var(--space-xxl); }
.sec-head { display: grid; gap: var(--space-md); }
.sec-head h2,
.sec h2 {
  margin: 0;
  font-weight: var(--weight-bold);
  font-size: clamp(26px, 4.2vw, 60px);
  line-height: 1.04;
  letter-spacing: -1.5px;
}
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }

/* Üç sütunluk iddia bloğu.
   Artboard'da burada uydurma puanlar ("4,9 · 1.000+ değerlendirme"),
   uydurma sayılar ("50B+ etkinlik") ve uydurma üç müşteri yorumu vardı.
   Mockup'ta olağan, canlıda yanıltıcı reklam. Yerine ürünün gerçekten
   yaptığı üç şey kondu — hepsi doğrulanabilir. */
.claim { display: grid; gap: var(--space-md); align-content: start; }
.claim h3 { margin: 0; font-weight: var(--weight-bold); font-size: var(--text-md); letter-spacing: var(--tracking-title); }
.claim p { margin: 0; font-size: var(--text-base); line-height: 1.6; color: var(--ink-muted); }

/* ---- Kullanım alanları ----------------------------------------------- */

.cases { padding: var(--space-xxl) var(--space-lg) 0; display: grid; gap: var(--space-xl); justify-items: center; text-align: center; }
.cases h2 { max-width: 24ch; }
.case-tabs { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }
.case-tabs button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-muted);
  border-radius: var(--radius-full);
  padding: 10px var(--space-base);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  font-family: var(--font-system);
  transition: all var(--motion-fast) var(--ease-signature);
}
.case-tabs button:hover { color: var(--ink); border-color: var(--ink); }
.case-tabs button[aria-selected='true'] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* ---- Telefon çerçeveleri --------------------------------------------- */
/*
   Ekran görüntüleri henüz yok. Çerçeveler yine de çiziliyor ve içleri, ne
   geleceğini söyleyen bir etiketle duruyor — boş bir kutu bozuk görünür,
   etiketli bir kutu bekliyor görünür. Görseller geldiğinde tek yapılacak
   .slot içine bir <img> koymak; ölçüler zaten doğru.
*/
.phone {
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 40px 40px 0 0;
  padding: 10px 10px 0;
  background: var(--surface);
}
.phone-screen { aspect-ratio: 9 / 15; border-radius: 32px 32px 0 0; overflow: hidden; background: var(--bg); }
.case-phone { width: 300px; max-width: 100%; }

.slot {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: var(--space-lg);
  text-align: center;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-muted);
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(244, 242, 238, 0.02) 10px,
    rgba(244, 242, 238, 0.02) 20px
  );
}
.slot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Nasıl çalışır --------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.step {
  border: 1px solid var(--line);
  border-radius: var(--radius-r1);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-lg);
  align-content: start;
  background: var(--surface);
}
.step-phone { border: 1px solid var(--line); border-bottom: 0; border-radius: 28px 28px 0 0; padding: 8px 8px 0; background: var(--bg); }
.step-phone > div { aspect-ratio: 9 / 13; border-radius: 22px 22px 0 0; overflow: hidden; background: var(--surface); }
.step h3 { margin: 0; font-weight: var(--weight-bold); font-size: var(--text-md); letter-spacing: var(--tracking-title); }
.step p { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: var(--ink-muted); }

/* ---- SSS ------------------------------------------------------------- */

.faq { display: grid; }
.faq-item { border-top: 1px solid var(--line); }
/* <details>/<summary>: akordeon JavaScript olmadan da çalışsın diye. Site'nin
   içeriği okunabilir kalmalı, script çalışmasa bile. */
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-lg) 0;
  display: flex;
  align-items: center;
  gap: var(--space-base);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-num {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-r2);
  display: grid;
  place-items: center;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}
.faq-q {
  flex: 1 1 auto;
  font-weight: var(--weight-medium);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-title);
  color: var(--ink-muted);
  transition: color var(--motion-fast) var(--ease-signature);
}
.faq-item[open] .faq-q { color: var(--ink); }
.faq-sign { flex: 0 0 auto; font-size: var(--text-md); line-height: 1; color: var(--ink-muted); }
.faq-item[open] .faq-sign::before { content: '−'; }
.faq-item:not([open]) .faq-sign::before { content: '＋'; }
.faq-a { margin: 0 0 var(--space-lg) 56px; font-size: var(--text-base); line-height: 1.6; color: var(--ink-muted); max-width: 68ch; }

/* ---- Albüm ----------------------------------------------------------- */

.album { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.album-copy {
  padding: var(--space-xxl) var(--space-lg);
  border-right: 1px solid var(--line);
  display: grid;
  gap: var(--space-base);
  align-content: center;
}
.album-copy h2 { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -1px; }
.album-copy p { margin: 0; font-size: var(--text-base); line-height: 1.5; color: var(--ink-muted); max-width: 40ch; }
.album-link { justify-self: start; margin-top: var(--space-sm); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.album-link:hover { border-color: var(--accent); }
/* 1px'lik boşluk + zemin rengi: ızgarayı çizen şey çizgiler, kenarlıklar
   değil. Altı hücre, altı hairline. */
.album-grid { padding: var(--space-lg); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.album-cell { aspect-ratio: 1; background: var(--surface); }

/* ---- Kapanış --------------------------------------------------------- */

.end { padding: var(--space-xxxl) var(--space-lg) 0; display: grid; gap: var(--space-xl); justify-items: center; text-align: center; overflow: hidden; }
.end h2 { font-size: clamp(34px, 5.4vw, 78px); line-height: 1; letter-spacing: -2px; max-width: 22ch; }
.end-phones { display: flex; align-items: flex-end; justify-content: center; gap: var(--space-lg); width: 100%; max-width: 760px; margin-top: var(--space-lg); }
.end-phones .phone { flex: 1 1 0; }
.end-phones .phone-screen { aspect-ratio: 9 / 14; }
/* İkinci telefon aşağı kaçıyor: iki eşit dikdörtgen bir ürün fotoğrafı gibi
   değil, bir tablo gibi durur. */
.end-phones .phone:last-child { margin-bottom: -40px; }

.site-footer {
  padding: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-base);
  font-size: var(--text-caption);
  color: var(--ink-muted);
}
.site-footer img { height: 20px; width: auto; display: block; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.site-footer a { color: var(--ink-muted); }
.site-footer a:hover { color: var(--ink); }

/* ---- Dar ekran ------------------------------------------------------- */
/*
   Tasarım masaüstünde iki sütun. Telefonda sütunlar üst üste biniyor ve
   dikey çizgiler yataya dönüyor — ziyaretçilerin çoğu buradan bakacak.
*/
@media (max-width: 900px) {
  .hero, .album { grid-template-columns: 1fr; }
  .hero-copy, .album-copy { border-right: 0; border-bottom: 1px solid var(--line); }
  .hero-copy { padding: var(--space-xxl) var(--space-lg); }
  .cols-3, .steps { grid-template-columns: 1fr; gap: var(--space-lg); }
  .site-nav { display: none; }
  .site-header { grid-template-columns: auto 1fr; }
  .end-phones .phone:last-child { margin-bottom: 0; }
}

@media (max-width: 560px) {
  .site-header { padding: var(--space-md) var(--space-base); grid-template-columns: 1fr auto; }
  /* Başlıktaki eylem düğmesi gidiyor: hemen altında, hero'nun içinde aynı
     düğmenin tam genişlikte hâli var. İkisi birden sığmıyor ve sığdırmaya
     çalışmak ikisini de küçültüyordu. */
  .header-right .btn { display: none; }
  .sec, .cases, .end, .hero-copy, .album-copy, .hero-demo { padding-left: var(--space-base); padding-right: var(--space-base); }
  .hero-actions .btn { flex: 1 1 100%; justify-content: center; }
  .demo-clock { font-size: 36px; }
  .end h2 { font-size: clamp(28px, 8vw, 78px); letter-spacing: -1px; }
  .album-copy h2 { font-size: clamp(24px, 6.4vw, 48px); }
  .faq-a { margin-left: 0; }
  .faq-item summary { gap: var(--space-md); }
  .faq-q { font-size: var(--text-base); }
}

/* Son çare. Yukarıdaki ölçekler doğru olduğu sürece hiçbir şeyi
   kesmiyor, ama tek bir uzun Türkçe kelime — "değerlendirmelerinizi"
   gibi — yine de taşarsa, sayfayı yana kaydırmak yerine kelimeyi böler. */
h1, h2, h3, p { overflow-wrap: break-word; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blink { animation: none; }
  * { transition-duration: 1ms !important; }
}

/* ---- Kademeler (fiyatlar.html) --------------------------------------- */
/*
   On kademe. Otomatik doldurulan bir ızgara: 300px'lik bir kart sığdığı
   kadar sütun açılıyor, yani telefonda tek sütun, masaüstünde dört — kırılma
   noktası yazmadan.
*/
/*
   Izgara çizgileri kapta değil hücrelerde.
   Önce kabın zeminini --line yapıp 1px gap bırakmıştım; on kademe dörtlü
   ızgarada son satırı yarım bıraktığı için o iki boş hücre zeminin kendisi
   olarak, yani kocaman gri bir blok olarak görünüyordu. Kenarlık hücrenin
   üstündeyken olmayan hücre de çizilmiyor.
*/
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-r1);
  overflow: hidden;
}
.tier {
  position: relative;
  background: var(--bg);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-xs);
  align-content: start;
}
/* Tek vurgulu kademe. Accent'i doldurmuyoruz — bu sayfada accent zaten
   başlıkta kullanıldı, ve iki accent bir sayfada birbirini iptal eder. */
.tier.is-featured { background: var(--surface); }
.tier-badge {
  color: var(--accent);
  font-size: 11px;
  margin-bottom: var(--space-xs);
}
.tier-n {
  font-weight: var(--weight-bold);
  font-size: var(--text-stat);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}
.tier-unit { font-size: var(--text-caption); }
.tier-blurb {
  margin: var(--space-sm) 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--ink-muted);
  min-height: 3em;
}
.tier-price {
  margin-top: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
  font-size: var(--text-caption);
}