/* PratikPazaryeri tanıtım sitesi. Panelin "Kâr Defteri" dünyası: sıcak kâğıt zemin, beyaz kartlar, ince sıcak kenarlık.
   Ember yalnız birincil eylemde, Gold yalnız kâr rakamında. Başlık Bricolage Grotesque, gövde Inter, rakam eşit genişlikli.
   Renk değerleri DESIGN.md ile aynıdır (panel tokens.css). Satır içi stil yok: canlıdaki CSP buna izin vermez. */

/* Yazı tipleri (OFL 1.1, lisanslar fonts/ klasöründe). Bricolage değişken dosyası ağırlık ve optik boyut eksenlerini taşır.
   Türkçenin Latin-1 dışındaki beş harfi (Ğ ğ İ Ş ş) ve ₺ ayrı küçük dosyadadır (*-tr-*.woff2, yaklaşık 3 KB): yoksa her sayfa yalnız bu
   karakterler için 85 KB'lık latin-ext dosyasını indirirdi. Dosyalar latin-ext dosyasından alt küme olarak üretilir:
   pyftsubset <latin-ext>.woff2 --unicodes="U+011E-011F,U+0130,U+015E-015F,U+20BA" --layout-features='*' --flavor=woff2
   latin-ext yüzü bu harfleri kapsamaz, yalnız sitede geçmeyen harflerde (ör. formda yazılan bir ad) iner.
   Ağırlık ekseni sitede kullanılan aralığa daraltılmıştır (Bricolage 700-800, Inter 400-700; yaklaşık 27 KB daha az):
   fonttools varLib.instancer <dosya>.woff2 wght=700:800 (Inter için wght=400:700). Yeni bir ağırlık gerekirse dosya kaynağından
   (frontend/node_modules/@fontsource-variable) yeniden üretilir; aralık dışındaki ağırlık en yakın uca yuvarlanır.
   Bricolage yalnız başlıkta kullanıldığı için latin dosyası Türkçenin Latin-1 harflerine (â ç î ö û ü ve büyükleri) indirilmiştir;
   başlıkta başka aksanlı harf geçerse o harf Inter ile çizilir. İki latin dosyasında yalnız sitenin kullandığı OpenType özellikleri
   kalır (pyftsubset --layout-features='kern,liga,calt,tnum,ccmp,locl,mark,mkmk,case'); kesir ve orantılı rakam atılmıştır. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 700 800;
  src: url('fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2') format('woff2');
  unicode-range: U+0100-011D, U+0120-012F, U+0132-015D, U+0160-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B9, U+20BB-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 700 800;
  src: url('fonts/bricolage-grotesque-tr-opsz-normal.woff2') format('woff2');
  unicode-range: U+011E-011F, U+0130, U+015E-015F, U+20BA;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 700 800;
  src: url('fonts/bricolage-grotesque-latin-opsz-normal.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0-00BF, U+00C2, U+00C7, U+00CE, U+00D6, U+00DB, U+00DC, U+00E2, U+00E7, U+00EE, U+00F6, U+00FB,
    U+00FC, U+0131, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url('fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-011D, U+0120-012F, U+0132-015D, U+0160-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20B9, U+20BB-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url('fonts/inter-tr-wght-normal.woff2') format('woff2');
  unicode-range: U+011E-011F, U+0130, U+015E-015F, U+20BA;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url('fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;

  --page: #f2f1ee;
  --card: #ffffff;
  --surface-2: #f4f3f0;
  --row-hover: #f7f5f1;
  --border: #dddad3;
  --border-strong: #b5b2ab;
  --field-border: #8b8985;
  --heading: #0a0908;
  --text: #1c1b19;
  --muted: #6b6860;

  --ember: #cc4d08;
  --ember-hover: #b83f04;
  --ember-text: #be4807;
  --on-ember: #ffffff;
  --selection: rgba(204, 77, 8, 0.18);
  --focus-neutral: rgba(10, 9, 8, 0.12);

  --gold: #d4a853;
  --gold-text: #866a34;
  --gold-soft: #fffbef;

  --success: #166534;
  --success-soft: #f0fdf4;
  --warning: #92400e;
  --warning-soft: #fffbeb;
  --warning-border: #fdba74;
  --danger: #991b1b;
  --danger-soft: #fef2f2;
  --danger-border: #fca5a5;

  --shadow-card: 0 1px 2px rgba(10, 9, 8, 0.05), 0 2px 8px rgba(10, 9, 8, 0.06);
  --shadow-raised: 0 2px 4px rgba(10, 9, 8, 0.06), 0 8px 20px rgba(10, 9, 8, 0.08);
  --shadow-ember: 0 1px 2px rgba(10, 9, 8, 0.12), 0 4px 12px rgba(204, 77, 8, 0.22);
  --shadow-ember-pressed: 0 1px 2px rgba(10, 9, 8, 0.12);
  --shadow-thumb: 0 1px 2px rgba(10, 9, 8, 0.2), 0 2px 6px rgba(10, 9, 8, 0.18);

  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter: clamp(16px, 4.4vw, 64px);
  --content: 1312px;
  --section-space: clamp(64px, 7.5vw, 112px);
  --section-pad: 64px;

  /* Defter ızgarası: iki sütunlu bölümler aynı başlık rayını ve aynı içerik eksenini kullanır (ilk ekran şeridi, net kâr,
     özellik satırları, demo, SSS). Böylece sayfa boyunca iki dikey çizgi sabit kalır. */
  --rail: clamp(330px, 23vw + 64px, 460px);
  --rail-gap: clamp(40px, 4.4vw, 64px);
  /* Alt alta dizilen bloklar arası (telefonda yazı ile ekran, yapay zekâ satırı ile tanım listesi); her bölümde aynı. */
  --head-gap: clamp(32px, 3.4vw, 48px);
  --h2-size: clamp(2rem, 1.15rem + 2.1vw, 3rem);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

@media (min-width: 760px) {
  :root {
    --section-pad: 88px;
  }
}

@media (min-width: 1200px) {
  :root {
    --section-pad: 112px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #161412;
    --card: #232220;
    --surface-2: #1f1d1b;
    --row-hover: #2b2926;
    --border: #34322e;
    --border-strong: #45433e;
    --field-border: #6e6c6a;
    --heading: #ebe9e3;
    --text: #ebe9e3;
    --muted: #9b988e;

    --ember: #ff7d3a;
    --ember-hover: #e8580a;
    --ember-text: #ff7d3a;
    --on-ember: #1a1918;
    --selection: rgba(255, 125, 58, 0.3);
    --focus-neutral: rgba(235, 233, 227, 0.16);

    --gold-text: #d4a853;
    --gold-soft: rgba(212, 168, 83, 0.1);

    --success: #86efac;
    --success-soft: rgba(74, 222, 128, 0.1);
    --warning: #fde68a;
    --warning-soft: rgba(251, 191, 36, 0.1);
    --warning-border: rgba(251, 191, 36, 0.4);
    --danger: #fca5a5;
    --danger-soft: rgba(248, 113, 113, 0.1);
    --danger-border: rgba(248, 113, 113, 0.4);

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-raised: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.35);
    --shadow-ember: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-ember-pressed: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-thumb: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.45);
  }
}

/* Temel */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  scrollbar-color: var(--border-strong) var(--page);
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  caret-color: var(--ember);
}

::selection {
  background: var(--selection);
  color: var(--heading);
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  color: var(--heading);
  font-family: var(--font-display);
  font-optical-sizing: auto;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--ember-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--heading);
  color: var(--page);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus-visible {
  transform: none;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--content));
  margin-inline: auto;
}

/* Simgeler: assets/icons.svg içinden, tek çizgi kalınlığı, renk metinden gelir. */
.i {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Düğmeler. Dolu Ember yalnız birincil eylemde (ekran başına bir tane). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font: 600 16px/1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(0.16, 1, 0.3, 1), border-color 160ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary {
  background: var(--ember);
  color: var(--on-ember);
  box-shadow: var(--shadow-ember);
}

.btn-primary:hover {
  background: var(--ember-hover);
  text-decoration: none;
}

.btn-primary:active {
  box-shadow: var(--shadow-ember-pressed);
}

.btn-secondary {
  background: var(--card);
  border-color: var(--border-strong);
  color: var(--heading);
}

.btn-secondary:hover {
  border-color: var(--heading);
  text-decoration: none;
}

.btn[disabled],
.btn[aria-disabled='true'] {
  cursor: progress;
  opacity: 0.72;
}

/* Logo: simge, "Pratik" mürekkep, "Pazaryeri" düğmeyle aynı Ember (açıkta #cc4d08, koyuda #ff7d3a). Yazı panelle ortak Inter;
   simge de temayla değişir (koyuda açık turuncu zemin, koyu PP). Ad ekran okuyucuya tek sözcük okunur. */
.logo {
  display: inline-flex;
  align-items: center;
  color: var(--heading);
  font: 700 26px/1 var(--font-body);
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

/* Simge süstür: bağlantının adı aria-label'dadır, bu yüzden resim öğesi değil arka plan. */
.logo::before {
  content: '';
  flex: none;
  width: 1.3em;
  height: 1.3em;
  margin-right: 0.36em;
  background: url('/assets/logo-simge.svg') center / contain no-repeat;
}

@media (prefers-color-scheme: dark) {
  .logo::before {
    background-image: url('/assets/logo-simge-koyu.svg');
  }
}

.logo:hover {
  text-decoration: none;
}

.logo-accent {
  color: var(--ember);
}

/* Üst bilgi */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--page);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-nav a:not(.btn) {
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.site-nav a:not(.btn):hover {
  color: var(--heading);
}

.site-nav .btn {
  min-height: 40px;
  padding: 0 16px;
  font-size: 14px;
}

/* Alt bilgi */
.site-footer {
  padding-top: 56px;
  padding-bottom: 40px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 14px;
}

.site-footer .wrap {
  display: grid;
  gap: 24px;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 40px;
}

.footer-top p {
  max-width: 44ch;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.footer-links a {
  color: var(--text);
  font-weight: 600;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}

@media (max-width: 760px) {
  .site-nav a:not(.btn) {
    display: none;
  }

  .logo {
    font-size: 22px;
  }
}

/* Simgeli logo 375px telefonda "Demo talep et" düğmesini iki satıra itmesin. */
@media (max-width: 420px) {
  .logo {
    font-size: 19px;
  }

  .site-nav .btn {
    padding: 0 14px;
    white-space: nowrap;
  }
}

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

  *,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== Ortak parçalar ===== */
.btn-lg {
  min-height: 52px;
  padding: 0 28px;
}

.lead {
  margin-top: 20px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.55;
}

.lead + p {
  margin-top: 16px;
}

/* Not kendi figürünün genişliğinde kırılır (karakter sınırı yok). */
.sample-note {
  text-wrap: pretty;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

/* Panel parçası: panelin kartı, başlık çubuğu, alt şerit. */
.panel-figure {
  margin: 0;
}

.panel {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.panel + .panel {
  margin-top: 24px;
}

/* Panel ekranları: demo hesabın gerçek panel ekranından yakın plan kırpım (DESIGN.md, Panel ekranları). */
/* Kap görselin boyuna sarılır; görsel doğal genişliğini (width özniteliği) aşmaz, yalnız küçülür: büyütülen ekran bulanıklaşır. */
.panel.screen {
  width: fit-content;
  max-width: 100%;
}

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

.screen video {
  display: block;
  width: 100%;
  height: auto;
}

/* ===== 1. İlk ekran ===== */
/* Üstte başlık ve yanında kısa metin ile düğme; altında video ve sağında bölümleri; en altta tam genişlik şerit (pazaryerleri ve
   yapay zekâ notu). 1280x800 ve üstünde başlık, video ve bölümler birlikte ilk ekrana sığar. */
.hero {
  padding-top: clamp(32px, 3.4vw, 52px);
}

.hero-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px var(--rail-gap);
  align-items: start;
}

.stage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--head-gap) 32px;
  align-items: start;
  margin-top: clamp(28px, 2.8vw, 40px);
}

.hero h1 {
  max-width: 13em;
  font-size: clamp(2.375rem, 0.75rem + 3.2vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.025em;
}

.hero-lead {
  font-size: 18px;
  line-height: 1.55;
}

.hero-actions {
  margin-top: 24px;
}

/* Bölümler: defter satırları. Zaman eşit genişlikli rakamla solda, ad ve tek cümle sağda. Oynatılan bölüm (site.js,
   aria-current) kart zeminiyle kalkar ve zamanı Köz Metni olur: etkileşimin işareti. */
.chapters-title {
  padding: 0 12px 12px;
  border-bottom: 1px solid var(--border-strong);
  color: var(--heading);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}

/* Ayırıcı çizgi satırda (li); bağlantının yuvarlak zemini yalnız üzerine gelince ve oynatılan bölümde görünür. */
.chapter-list li {
  border-bottom: 1px solid var(--border);
}

.chapter-list a {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  color: var(--text);
  text-decoration: none;
  transition: background-color 160ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.chapter-time {
  grid-row: span 2;
  padding-top: 1px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}

.chapter-name {
  color: var(--heading);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

/* Yapay zekâ bölümü: adın önünde ışıltı simgesi (ilk ekran şeridindeki yapay zekâ notuyla aynı). */
.chapter-ai {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chapter-ai .i {
  width: 16px;
  height: 16px;
}

.chapter-text {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.chapter-list a:hover,
.chapter-list a[aria-current='true'] {
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.chapter-list a:hover .chapter-time,
.chapter-list a[aria-current='true'] .chapter-time {
  color: var(--ember-text);
}

/* Video sahnesi: içerik genişliğinde, kaynak 1920 geniş (büyütme olmaz). Betik varken denetim çubuğu oynatana kadar gizlidir,
   kapağın ortasında oynat düğmesi durur. */
.stage {
  min-width: 0;
  margin: 0;
  scroll-margin-top: 96px;
}

.stage-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #161412;
  box-shadow: var(--shadow-raised);
}

.stage video {
  display: block;
  width: 100%;
  height: auto;
}

/* Kapak videonun üstünde durur (poster yerine duyarlı görsel, landing/index.html). Tıklama alttaki videoya ve oynat düğmesine geçer;
   oynatma başlayınca betik hidden ekler. */
.stage-cover {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stage-cover[hidden] {
  display: none;
}

.stage-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Oynat düğmesi: opak, yuvarlak, yalnız simge (erişilebilir adı "Videoyu oynat"). Koyu temada da başlık mürekkebi zemin, sayfa
   rengi simge: iki temada da kapağın üstünde güçlü zıtlık. */
.stage-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--heading);
  color: var(--page);
  box-shadow: 0 2px 4px rgba(10, 9, 8, 0.2), 0 12px 32px rgba(10, 9, 8, 0.28);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Düğmenin display değeri hidden özniteliğini ezmesin: oynatma başlayınca ve betik yokken düğme görünmez. */
.stage-play[hidden] {
  display: none;
}

/* Üçgenin görsel merkezi sağa kaydırılır (optik ortalama). */
.stage-play .i {
  width: 30px;
  height: 30px;
  margin-left: 5px;
  fill: currentColor;
}

.stage-play:hover {
  transform: translate(-50%, -50%) scale(1.06);
}

.stage-play:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

.hero-strip {
  margin-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--border);
}

.hero-strip-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px var(--rail-gap);
  align-items: start;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 14px;
  line-height: 1.6;
}

.hero-channels {
  color: var(--muted);
}

.hero-ai {
  display: flex;
  gap: 10px;
  color: var(--text);
}

.hero-ai .i {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--heading);
}

/* ===== Bölümler ===== */
/* Her bölüm defter sayfasının bir bloğudur: üstte 1px çizgi, iki sütunlu düzenlerde başlık rayda, içerik ekseninde metin. */
.section {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
  border-top: 1px solid var(--border);
}

.section h2 {
  font-size: var(--h2-size);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.ledger-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--head-gap) var(--rail-gap);
  align-items: start;
}

.section-copy p + p {
  margin-top: 16px;
}

/* Net kâr dökümü: defter satırları, tutarlar sağa hizalı ve eşit genişlikli; son satır büyük net kâr. */
.ledger {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.ledger caption {
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--heading);
  color: var(--heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
}

.ledger th,
.ledger td {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
  line-height: 1.4;
  vertical-align: baseline;
}

.ledger th {
  color: var(--text);
  font-weight: 400;
  text-align: left;
}

.ledger th span {
  margin-left: 6px;
  color: var(--muted);
  font-size: 13px;
}

.ledger td {
  padding-left: 16px;
  color: var(--heading);
  text-align: right;
  white-space: nowrap;
}

.ledger tfoot th,
.ledger tfoot td {
  padding-top: 20px;
  border-bottom: none;
}

.ledger tfoot th {
  color: var(--heading);
  font-weight: 700;
}

.ledger tfoot .ledger-loss {
  color: var(--danger);
  font-family: var(--font-display);
  font-size: clamp(2.375rem, 0.75rem + 3.2vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Geniş ekran şeridi: kendi kenarlıklı tablosu olan kırpım, satırın tamamını doldurur (kaynak 2x çekildiği için 1312 genişlikte
   de net). Dar ekranda küçülmez; şerit doğal boyutunda yatay kaydırılır (kaydırılabilir bölge klavyeyle odaklanır). */
.shot-wide {
  margin-top: var(--head-gap);
}

.screen-strip {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.screen-strip img {
  display: block;
  width: 100%;
  height: auto;
}

.screen-strip:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

/* Kendi çerçevesi olmayan kırpım (denetim kutusu): panelin kartı, iç boşlukla; metin sütununu doldurur. */
.panel.screen-pad {
  width: auto;
  padding: 20px;
}

.screen-pad img {
  width: 100%;
}

/* Özellik listesi: her özellik bir defter satırı. */
.feature-list {
  margin-top: var(--head-gap);
  border-bottom: 1px solid var(--border);
}

.feature-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px var(--rail-gap);
  padding-top: 28px;
  padding-bottom: 28px;
  border-top: 1px solid var(--border);
  scroll-margin-top: 96px;
}

.feature-item h3 {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.feature-body > p {
  color: var(--text);
  text-wrap: pretty;
}

.feature-body .panel-figure {
  margin-top: 24px;
}

.feature-item > .shot-wide {
  margin-top: 12px;
}

/* İki sütun: 960 ve üstünde başlık rayda, içerik ekseninde metin; geniş şerit satırın tamamına yayılır. */
@media (min-width: 960px) {
  .ledger-grid,
  .feature-item {
    grid-template-columns: var(--rail) minmax(0, 1fr);
  }

  .hero-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
  }

  /* Video sütunu pencere yüksekliğine göre de sınırlanır (her yükseklikte): üst bilgi, başlık katı ve not için yaklaşık 400px
     ayrılır, kalan yükseklik 16:9 oranla genişliğe çevrilir; bölüm listesi videonun hemen yanında kalır. */
  .stage-grid {
    --chapters-w: clamp(280px, 24vw, 340px);
    grid-template-columns: minmax(0, min(calc((100svh - 400px) * 16 / 9), calc(100% - var(--chapters-w) - 32px))) var(--chapters-w);
    justify-content: space-between;
  }

  .feature-item > .shot-wide {
    grid-column: 1 / -1;
  }
}

/* Kısa geniş ekran (1280x800, küçük pencere): başlık, video ve bölümler yine ilk ekrana sığsın diye boşluk ve başlık küçülür,
   video boyu pencereye göre sınırlanır, bölümlerde yalnız süre ve ad kalır (açıklama satırı gizlenir). */
@media (min-width: 960px) and (max-height: 860px) {
  .hero {
    padding-top: 24px;
  }

  .hero h1 {
    font-size: clamp(2rem, 7svh, 3.5rem);
  }

  .hero-lead {
    font-size: 16px;
  }

  /* Kısa ekranda başlık katı küçüldüğü için video için ayrılan pay 320px'e iner. */
  .stage-grid {
    grid-template-columns: minmax(0, min(calc((100svh - 320px) * 16 / 9), calc(100% - var(--chapters-w) - 32px))) var(--chapters-w);
    margin-top: 24px;
  }

  .chapter-list a {
    padding-top: 11px;
    padding-bottom: 11px;
  }

  .chapter-text {
    display: none;
  }
}

/* Çok kısa pencere (yaklaşık 550-640px): bölüm satırları da sıkılaşır, liste videonun boyunu aşmaz. */
@media (min-width: 960px) and (max-height: 640px) {
  .chapters-title {
    padding-bottom: 8px;
  }

  .chapter-list a {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .chapter-name {
    font-size: 14px;
  }
}

@media (min-width: 1120px) {
  .hero-strip-inner {
    grid-template-columns: var(--rail) minmax(0, 1fr);
  }
}

/* Tüm özellikler bandı: sayfanın tek renkli bölümü, kenardan kenara kart zemini (açıkta beyaz, koyuda #232220); içerik yine kabın
   çizgilerinde. Üstte ve altta 1px İnce Çizgi. Sonraki bölümün üst çizgisi bandın alt çizgisiyle çakışmasın diye kaldırılır. */
.section.index {
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.section.index + .section {
  border-top: none;
}

/* Tüm özellikler: akordeon gruplar, SSS ile aynı satır dili (1px çizgi, 18px 600 özet, açılınca dönen ok). Özette grup adı ve
   özellik sayısı; açılınca özellikler 640 ve üstünde iki sütun defter satırı. */
.index-list details {
  border-top: 1px solid var(--border);
}

.index-list details:last-child {
  border-bottom: 1px solid var(--border);
}

.index-list summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  color: var(--heading);
  list-style: none;
  cursor: pointer;
}

.index-list summary::-webkit-details-marker {
  display: none;
}

.index-name {
  flex: 1 1 auto;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.index-count {
  color: var(--muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.index-list summary .i {
  width: 20px;
  height: 20px;
  color: var(--muted);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.index-list details[open] summary .i {
  transform: rotate(180deg);
}

.index-list summary:hover .index-name {
  color: var(--ember-text);
}

.index-items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--rail-gap);
  padding-bottom: 20px;
}

.index-items > div {
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.index-items dt {
  color: var(--heading);
  font-weight: 600;
  line-height: 1.4;
}

.index-items dd {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  text-wrap: pretty;
}

@media (min-width: 640px) {
  .index-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Demo ve SSS */

/* Talepten sonra: sonuç sayfasındaki adım listesinin aynısı, formun yanında. */
.next-title {
  margin-top: 40px;
  color: var(--heading);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}

.demo-copy .next-steps {
  margin-top: 12px;
}

.faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px var(--rail-gap);
  margin-top: var(--section-space);
}

/* SSS de aynı rayı kullanır. */
@media (min-width: 960px) {
  .faq {
    grid-template-columns: var(--rail) minmax(0, 1fr);
  }
}

.faq-title {
  font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
}

.faq-list details {
  border-top: 1px solid var(--border);
}

.faq-list details:last-child {
  border-bottom: 1px solid var(--border);
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  color: var(--heading);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary .i {
  width: 20px;
  height: 20px;
  color: var(--muted);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-list details[open] summary .i {
  transform: rotate(180deg);
}

.faq-list summary:hover {
  color: var(--ember-text);
}

.faq-list details p {
  padding-bottom: 20px;
  color: var(--text);
}

/* ===== Duyarlılık ===== */
@media (max-width: 640px) {
  .hero-lead,
  .lead {
    font-size: 16px;
  }

  .faq-list summary,
  .index-name {
    font-size: 16px;
  }

  .stage-play {
    width: 60px;
    height: 60px;
  }

  .stage-play .i {
    width: 24px;
    height: 24px;
    margin-left: 4px;
  }
}

/* Telefonda geniş şerit küçülmez: doğal boyutunda yatay kaydırılır. */
@media (max-width: 759.98px) {
  .screen-strip {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    mask-image: linear-gradient(to right, var(--heading) 82%, transparent);
  }

  .screen-strip img {
    width: 1060px;
    max-width: none;
  }
}

/* ===== Demo formu ===== */
.demo-card {
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-raised);
}

.demo-form {
  display: grid;
  gap: 20px;
}

.demo-form[hidden] {
  display: none;
}

.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}

.field {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field > label,
.field legend {
  padding: 0;
  color: var(--heading);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.field legend {
  margin-bottom: 8px;
}

.optional {
  color: var(--muted);
  font-weight: 400;
}

.field input:not([type='checkbox']),
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font: 400 16px/1.4 var(--font-body);
  transition: border-color 160ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.field textarea {
  min-height: 112px;
  resize: vertical;
}

.field input:not([type='checkbox']):hover,
.field textarea:hover {
  border-color: var(--heading);
}

.field input:not([type='checkbox']):focus-visible,
.field textarea:focus-visible {
  border-color: var(--ember);
  outline: none;
  box-shadow: 0 0 0 3px var(--selection);
}

.field-hint {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.field-error {
  color: var(--danger);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.field.has-error input:not([type='checkbox']),
.field.has-error textarea {
  border-color: var(--danger);
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 160ms cubic-bezier(0.16, 1, 0.3, 1), background-color 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.choice:hover {
  border-color: var(--heading);
}

.choice:has(input:checked) {
  border-color: var(--heading);
  background: var(--row-hover);
  color: var(--heading);
}

.choice:has(input:focus-visible) {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

.choice input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ember);
}

.choice input:focus-visible {
  outline: none;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px 24px;
  padding-top: 4px;
}

.form-foot .btn {
  min-width: 200px;
}

.form-privacy {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.form-alert {
  padding: 12px 14px;
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-md);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.form-alert[hidden] {
  display: none;
}

.form-success {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 16px 0;
}

.form-success[hidden] {
  display: none;
}

.form-success:focus {
  outline: none;
}

.form-success-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
}

.form-success-mark .i {
  width: 22px;
  height: 22px;
  stroke-width: 2.25;
}

.form-success h3 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.form-success p {
  max-width: 40ch;
  color: var(--text);
}

/* ===== Alt sayfalar: sonuç, aydınlatma metni, 404 ===== */
.page-main {
  padding-top: 56px;
  padding-bottom: 96px;
}

.page-narrow {
  max-width: 44rem;
}

.page-main h1 {
  font-size: clamp(2.25rem, 1.2rem + 2.6vw, 3.5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.page-lead {
  margin-top: 20px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.55;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 32px;
}

.page-note {
  margin-top: 16px;
  color: var(--muted);
  font-size: 14px;
}

.next-steps {
  margin-top: 40px;
  border-top: 1px solid var(--border);
  counter-reset: adim;
}

.next-steps li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  padding-top: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  counter-increment: adim;
}

.next-steps li::before {
  content: counter(adim);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--heading);
  font-size: 13px;
  font-weight: 600;
}

.next-steps strong {
  display: block;
  color: var(--heading);
}

.reasons {
  margin-top: 32px;
  border-top: 1px solid var(--border);
}

.reasons > li {
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.reasons h2 {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}

.reasons p {
  margin-top: 6px;
  color: var(--text);
}

.reasons.is-single {
  border-top: 0;
}

.reasons.is-single > li {
  padding: 0;
  border-bottom: 0;
}

.reasons.is-single h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
}

.draft-banner {
  display: flex;
  gap: 10px;
  margin-bottom: 32px;
  padding: 14px 16px;
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-md);
  background: var(--warning-soft);
  color: var(--warning);
  font-weight: 600;
  line-height: 1.5;
}

.draft-banner .i {
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.legal h2 {
  margin-top: 40px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.legal p,
.legal ul {
  margin-top: 12px;
  color: var(--text);
  line-height: 1.65;
}

.legal ul {
  padding-left: 20px;
  list-style: disc;
}

.legal li + li {
  margin-top: 6px;
}

.legal-meta {
  margin-top: 16px;
  color: var(--muted);
  font-size: 14px;
}

.legal h3 {
  margin-top: 28px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

/* Aydınlatma metnindeki amaç ve hukuki sebep tablosu: panelin tablo başlığı dili, sabit iki sütun (dar ekranda taşmaz). */
.legal-table {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
  line-height: 1.5;
}

.legal-table th,
.legal-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  overflow-wrap: break-word;
  text-align: left;
  vertical-align: top;
}

.legal-table th {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.legal-table td {
  color: var(--text);
}

@media (max-width: 640px) {
  .legal-table th,
  .legal-table td {
    padding: 8px;
  }
}

.placeholder {
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  background: var(--warning-soft);
  color: var(--warning);
  font-weight: 600;
}

@media (max-width: 640px) {
  .demo-card {
    padding: 20px 16px;
  }

  .form-row,
.form-foot {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-foot .btn {
    width: 100%;
  }

  .page-main {
    padding-top: 40px;
    padding-bottom: 72px;
  }
}