/* Fluentia landing — W40 "görsel etki" yeniden kuruluşu. Uygulamayla AYNI
   dili konuşur (aynı token'lar, tek açık tema, transform/opacity-only motion,
   global reduced-motion kill) ama kendi ritmi vardır: tam-genişlik bantlar
   (koyu hero → beyaz özellikler → krem görseller → koyu manifesto → beyaz
   gizlilik → kapanış kartı), cömert 120px dikey nefes, gerçek ürün görseli.
   Bu sayfada JavaScript YOKTUR. */

:root {
  color-scheme: light;
  --canvas: #f2f2ed;
  --surface: #ffffff;
  --surface-soft: #f8f8f4;
  --sidebar: #17201c;
  --sidebar-soft: #222c27;
  --hero-text-soft: #a4afa9;
  --text: #17201c;
  --text-soft: #5e6762;
  --text-faint: #6b736e;
  --line: #dedfd7;
  --line-strong: #c9cbc1;
  --accent: #d9ff6b;
  --accent-strong: #bfe743;
  --accent-line: #d8e0b9;
  --on-dark: #ffffff;
  --on-dark-soft: #d9e0dc;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --shadow-sm: 0 1px 2px rgba(23, 32, 28, 0.05);
  --shadow-md: 0 14px 40px rgba(23, 32, 28, 0.08);
  --shadow-lg: 0 32px 80px rgba(23, 32, 28, 0.28);
  --font-sans: "Segoe UI Variable", "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --motion-fast: 140ms;
  --motion-base: 200ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

a:focus-visible {
  outline: none;
  border-radius: 6px;
  box-shadow: 0 0 0 3px rgba(110, 92, 189, 0.28);
}

.hero a:focus-visible,
.manifesto a:focus-visible,
.cta__card a:focus-visible {
  box-shadow: 0 0 0 3px rgba(217, 255, 107, 0.45);
}

.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 60;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--sidebar);
  color: var(--on-dark);
  text-decoration: none;
  transition: transform var(--motion-fast) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(64px);
}

/* ---- butonlar ---- */

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}

.button:hover {
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0) scale(0.985);
}

.button--accent {
  background: var(--accent);
  color: var(--text);
}

.button--accent:hover {
  background: var(--accent-strong);
}

.button--ghost {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
}

.button--ghost:hover {
  border-color: var(--text-faint);
}

.button--ghost-dark {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.04);
  color: var(--on-dark);
}

.button--ghost-dark:hover {
  border-color: rgba(255, 255, 255, 0.45);
}

.button--big {
  min-height: 52px;
  padding: 14px 30px;
  font-size: 1.02rem;
}

/* ---- header: koyu hero üstüne oturur ---- */

.site-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  padding: 22px 0;
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--on-dark);
  font-weight: 800;
  font-size: 1.1rem;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--accent);
  color: var(--text);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
}

.site-header .button--ghost {
  border-color: rgba(255, 255, 255, 0.22);
  background: transparent;
  color: var(--on-dark);
}

.site-header .button--ghost:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

.site-header nav {
  display: flex;
  gap: 10px;
}

/* ---- HERO: tam genişlik koyu bant + gerçek ürün mockup'ı ---- */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(120px, 16vh, 170px) 0 clamp(72px, 9vh, 110px);
  background:
    radial-gradient(ellipse at 78% -10%, rgba(217, 255, 107, 0.14), transparent 45%),
    radial-gradient(ellipse at 15% 115%, rgba(110, 92, 189, 0.16), transparent 42%),
    var(--sidebar);
  color: var(--on-dark);
}

.hero__terrain {
  position: absolute;
  inset: 0;
  z-index: 0;
  color: var(--accent);
  opacity: 0.4;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(100deg, transparent 26%, #000 62%);
  mask-image: linear-gradient(100deg, transparent 26%, #000 62%);
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.6vw, 3.9rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.hero h1 em {
  font-style: italic;
  color: var(--accent);
}

.hero__tagline {
  max-width: 46ch;
  margin: 0 0 30px;
  color: var(--on-dark-soft);
  font-size: 1.08rem;
  line-height: 1.65;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

.hero__note {
  margin: 0 0 10px;
  color: var(--hero-text-soft);
  font-size: 0.85rem;
}

.hero__creed {
  margin: 26px 0 0;
  color: var(--hero-text-soft);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
}

/* Tarayıcı-çerçeveli gerçek ürün görseli — sayfanın "vay" anı. */
.frame {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: var(--sidebar-soft);
  box-shadow: var(--shadow-lg);
}

.frame__bar {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.06);
}

.frame__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

.frame--glow {
  position: relative;
  animation: landing-rise 640ms var(--ease-out) both;
}

.hero__shot {
  position: relative;
}

/* Mockup'ın arkasındaki lime ışıma — derinlik, gösteriş değil. */
.hero__shot::before {
  position: absolute;
  inset: 8% -4% -6% 6%;
  z-index: -1;
  border-radius: 40px;
  background: radial-gradient(ellipse at 50% 60%, rgba(217, 255, 107, 0.22), transparent 70%);
  content: "";
}

/* ---- bölüm iskeleti: kicker + h2 + alt satır ---- */

section {
  scroll-margin-top: 40px;
}

.kicker {
  margin: 0 0 14px;
  color: var(--text-faint);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.kicker--on-dark {
  color: var(--accent);
}

main h2 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.section-sub {
  max-width: 56ch;
  margin: 0 0 56px;
  color: var(--text-soft);
  font-size: 1.05rem;
}

/* ---- ÖZELLİKLER: beyaz bant + ikonlu 6 kart ---- */

.features {
  padding: clamp(88px, 11vh, 130px) 0;
  background: var(--surface);
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.feature {
  padding: 30px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  transition: transform var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-standard);
}

.feature:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
}

.feature__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: var(--accent);
  color: var(--text);
}

.feature__icon svg {
  width: 24px;
  height: 24px;
}

.feature h3 {
  margin: 0 0 10px;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
}

.feature p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ---- SES ÖRNEĞİ: iddianın yanına kanıt ----
   Sayfa "hepsi seslendirildi" diyordu ve tek bir kayıt çaldırmıyordu. Yerli
   <audio controls> kullanılıyor: sayfada JavaScript yok ve olmayacak, tarayıcı
   denetimleri klavye ve ekran okuyucuyla zaten çalışıyor. */
.sample {
  margin: 14px 0 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft, rgba(0, 0, 0, 0.02));
}

.sample__label {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: var(--text-soft);
  line-height: 1.5;
}

.sample__player {
  display: block;
  width: 100%;
  max-width: 100%;
}

.sample__note {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--text-soft);
  line-height: 1.5;
}

/* ---- GÖRSELLER: krem bant, çerçeveli gerçek ekranlar ---- */

.shots {
  padding: clamp(88px, 11vh, 130px) 0;
  background: var(--canvas);
}

.shots__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
  margin-top: 48px;
}

.shot {
  margin: 0;
}

.shot .frame {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.shot .frame__bar {
  background: var(--surface-soft);
}

.shot .frame__bar i {
  background: var(--line-strong);
}

.shot figcaption {
  max-width: 52ch;
  margin-top: 16px;
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ---- MANİFESTO: koyu tam-genişlik marka bandı ---- */

.manifesto {
  padding: clamp(96px, 12vh, 140px) 0;
  background:
    radial-gradient(ellipse at 85% 0%, rgba(217, 255, 107, 0.1), transparent 40%),
    var(--sidebar);
  color: var(--on-dark);
}

.manifesto h2 {
  max-width: 20ch;
}

.manifesto__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 56px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

.manifesto__list li {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.manifesto__num {
  flex: none;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-style: italic;
  line-height: 1;
  opacity: 0.85;
}

.manifesto__list strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.02rem;
}

.manifesto__list div {
  color: var(--on-dark-soft);
  font-size: 0.94rem;
  line-height: 1.65;
}

.manifesto__creed {
  margin: 64px 0 0;
  color: var(--hero-text-soft);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  text-align: center;
}

/* ---- GİZLİLİK: beyaz bant, kompakt ızgara ---- */

.privacy {
  padding: clamp(80px, 10vh, 120px) 0;
  background: var(--surface);
}

.privacy__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 40px;
  max-width: 900px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.privacy__grid li {
  position: relative;
  padding: 4px 0 4px 30px;
  color: var(--text-soft);
  line-height: 1.6;
}

.privacy__grid li::before {
  position: absolute;
  top: 4px;
  left: 0;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 800;
  content: "✓";
}

.privacy code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--canvas);
  font-size: 0.85em;
}

/* ---- KAPANIŞ: krem bant içinde koyu kart ---- */

.cta {
  padding: clamp(88px, 11vh, 130px) 0;
  background: var(--canvas);
}

.cta__card {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 8vw, 88px) clamp(24px, 6vw, 80px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse at 80% 10%, rgba(217, 255, 107, 0.12), transparent 45%),
    var(--sidebar);
  color: var(--on-dark);
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.cta__terrain {
  position: absolute;
  inset: 0;
  z-index: 0;
  color: var(--accent);
  opacity: 0.45;
  pointer-events: none;
}

.cta__card > * {
  position: relative;
  z-index: 1;
}

.cta__terrain {
  z-index: 0;
}

.cta__card h2 {
  margin-bottom: 14px;
}

.cta__card p {
  max-width: 46ch;
  margin: 0 auto 30px;
  color: var(--on-dark-soft);
}

.cta__note {
  margin: 22px auto 0;
  color: var(--hero-text-soft);
  font-size: 0.85rem;
}

/* ---- footer ---- */

.site-footer {
  padding: 36px 0 44px;
  border-top: 1px solid var(--line);
  background: var(--canvas);
  color: var(--text-faint);
  font-size: 0.85rem;
}

.site-footer p {
  margin: 0;
}

/* ---- W41 sinematik açılış: tek koreografili zaman çizelgesi ----
   Sıra: kontur çizgileri kendini çizer → rota akar → düğümler sırayla
   yanar → metin 3 kademede yükselir → mockup gelip ışıması açılır.
   Tamamı ~1.6s, bir kez çalışır; reduced-motion'da global kill her şeyi
   anında son-karesine (görünür) oturtur. */

@keyframes landing-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes terrain-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes node-pop {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes glow-in {
  to {
    opacity: 1;
  }
}

.hero__terrain path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: terrain-draw 900ms var(--ease-standard) forwards;
}

.hero__terrain .t-c1 path { animation-delay: 100ms; }
.hero__terrain .t-c2 path { animation-delay: 240ms; }
.hero__terrain .t-c3 path { animation-delay: 380ms; }

.hero__terrain .t-route {
  animation: terrain-draw 1150ms var(--ease-out) 420ms forwards;
}

.hero__terrain .t-nodes circle {
  opacity: 0;
  transform: scale(0.4);
  transform-box: fill-box;
  transform-origin: center;
  animation: node-pop 300ms var(--ease-out) forwards;
}

.hero__terrain .t-nodes circle:nth-child(1) { animation-delay: 700ms; }
.hero__terrain .t-nodes circle:nth-child(2) { animation-delay: 950ms; }
.hero__terrain .t-nodes circle:nth-child(3) { animation-delay: 1200ms; }
.hero__terrain .t-nodes circle:nth-child(4) { animation-delay: 1450ms; }

/* The route stays alive after the draw — the ONE ambient motion on the page.
   17fafa0's route-halo, restored after the W40 rebuild silently dropped it
   (fbe5d3 finding §3.1); this is a redesign, not a mechanical restore: the
   old halo marked "you are here" on an HTML route strip that no longer
   exists, and a landing visitor has no position yet. The halo now sits on
   the SUMMIT node — the only node the hero composition leaves visible at
   desktop widths — and reads "the route is live and leads here". Aylin-safe:
   a slow 6s cycle that moves for ~1s of it, opacity/transform only, and the
   reduced-motion block below kills it with everything else. */
@keyframes route-halo {
  0%, 82% { opacity: 0; transform: scale(0.6); }
  90% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.35); }
}

.hero__terrain .t-halo {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: route-halo 6s var(--ease-standard) 2200ms infinite;
}

.hero__copy > * {
  opacity: 0;
  animation: landing-rise 520ms var(--ease-out) forwards;
}

.hero__copy > *:nth-child(1) { animation-delay: 80ms; }
.hero__copy > *:nth-child(2) { animation-delay: 200ms; }
.hero__copy > *:nth-child(3) { animation-delay: 340ms; }
.hero__copy > *:nth-child(4) { animation-delay: 480ms; }
.hero__copy > *:nth-child(5) { animation-delay: 620ms; }
.hero__copy > *:nth-child(6) { animation-delay: 740ms; }

.hero__shot .frame {
  opacity: 0;
  animation: landing-rise 720ms var(--ease-out) 520ms forwards;
}

.hero__shot::before {
  opacity: 0;
  animation: glow-in 1000ms var(--ease-standard) 950ms forwards;
}

/* ---- W41 scroll-reveal (landing'in tek JS'i; bilinçli zero-JS istisnası).
   html.js yalnız observer kurulunca eklenir → JS yoksa/reduced-motion'da
   içerik daima görünür. transform/opacity-only. ---- */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
  }

  .js .reveal.is-revealed {
    opacity: 1;
    transform: none;
  }

  .js .features__grid .reveal:nth-child(2),
  .js .manifesto__list .reveal:nth-child(2),
  .js .privacy__grid .reveal:nth-child(2),
  .js .shots__grid .reveal:nth-child(2) { transition-delay: 90ms; }
  .js .features__grid .reveal:nth-child(3),
  .js .manifesto__list .reveal:nth-child(3),
  .js .privacy__grid .reveal:nth-child(3) { transition-delay: 180ms; }
  .js .features__grid .reveal:nth-child(4),
  .js .manifesto__list .reveal:nth-child(4),
  .js .privacy__grid .reveal:nth-child(4) { transition-delay: 270ms; }
  .js .features__grid .reveal:nth-child(5),
  .js .manifesto__list .reveal:nth-child(5) { transition-delay: 360ms; }
  .js .features__grid .reveal:nth-child(6),
  .js .manifesto__list .reveal:nth-child(6) { transition-delay: 450ms; }
}

/* ---- responsive ---- */

@media (max-width: 980px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-top: 110px;
  }

  .hero__shot {
    max-width: 640px;
  }

  .features__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .features__grid,
  .shots__grid,
  .manifesto__list,
  .privacy__grid {
    grid-template-columns: 1fr;
  }

  .manifesto__list {
    gap: 28px;
  }

  .site-header .button--ghost {
    display: none;
  }
}

/* All motion on this page is transform/opacity only and is fully disabled
   here, matching the app's global reduced-motion policy. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

/* The three finished courses, surfaced on the front door for the first time. */
.cta__courses {
  margin-top: var(--space-20, 1.5rem);
  padding-top: var(--space-16, 1.25rem);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  text-align: left;
}

.cta__courses-lead {
  margin: 0 0 var(--space-10, 0.75rem);
  font-size: 0.9rem;
  opacity: 0.85;
}

.cta__course-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10, 0.75rem) var(--space-20, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cta__course-list a {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cta__course-list span {
  opacity: 0.7;
  font-size: 0.85rem;
}

.cta__courses-note {
  margin: var(--space-12, 0.9rem) 0 0;
  font-size: 0.8rem;
  opacity: 0.72;
  max-width: 62ch;
}

/* ---- Dil anahtarı (en ↔ tr) ----
   İki sayfa da birbirine işaret eder. Otomatik yönlendirme YOK: tarayıcı diline
   göre zorla yönlendirmek hem düşmanca, hem de sayfanın tek-script kuralını
   bozardı. Görünür bir bağlantı + <link rel="alternate" hreflang> yeter —
   arama motoru doğru sayfayı servis eder, insan kendi seçer. */

.langswitch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: var(--on-dark);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: border-color var(--motion-fast) var(--ease-standard);
}

.langswitch:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

/* ---- KURSLAR: Türkçe sayfanın asıl kararı ----
   İngilizce sayfa tek bir kursu (İngilizce) satar; Türkçe sayfa DÖRT kurs
   arasında seçim yaptırır. O yüzden bu, sayfadaki en erken ve en büyük
   bileşen — özellik kartlarından önce gelir. */

.courses {
  padding: clamp(80px, 10vh, 120px) 0;
  background: var(--surface);
}

.courses__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 48px;
}

.course-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  color: inherit;
  text-decoration: none;
  transition: transform var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-standard);
}

.course-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
}

.course-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.course-card__head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.course-card__level {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.course-card p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.94rem;
  line-height: 1.6;
}

/* Scoped past `.course-card p { margin: 0 }`, which outranks a bare class and was
   silently cancelling the auto margin — so the stats line and the call to action sat
   wherever the blurb ended and the four cards' CTAs never lined up. */
.course-card .course-card__stats {
  margin-top: auto;
  padding-top: 6px;
  color: var(--text-faint);
  font-size: 0.82rem;
}

.course-card__go {
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* İnsan ana dili incelemesi YOK ifşası. Teklifin yanında, okunur boyutta,
   dipnot değil — CLAUDE.md §4/§9: bu üç paket incelenmemişken incelenmiş gibi
   sunulamaz, ve ifşayı küçültmek de aynı yalanın yumuşak hâli. */
.disclosure {
  max-width: 74ch;
  margin: 32px 0 0;
  padding: 18px 22px;
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--accent-strong);
  border-radius: var(--radius-sm);
  background: var(--canvas);
  color: var(--text-soft);
  font-size: 0.88rem;
  line-height: 1.65;
}

/* ---- KURULUM: mağazasız "uygulama" ----
   Ürünün tek-dosya mimarisi burada somut bir faydaya çevrilir. Türk
   kullanıcıların çoğu bir web sayfasının ana ekrana eklenebildiğini bilmiyor;
   bilmiyorsa özellik yok sayılır. */

.install {
  padding: clamp(80px, 10vh, 120px) 0;
  background: var(--canvas);
}

.install__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 18px;
  margin-top: 40px;
}

.install__step {
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.install__step h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.install__step p {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ---- Yasal sayfalar (gizlilik / koşullar / iade) ----
   Pazarlama sayfalarının bandlı ritmi yok: tek sütun, uzun okuma, açık hiyerarşi.
   Aynı token'ları kullanır, kendi renk ya da yazı tipini getirmez. */

.legal-page {
  background: var(--surface);
}

.legal-header {
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
  padding: 18px 0;
}

.legal-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.legal-header .brand {
  color: var(--text);
  text-decoration: none;
}

.legal {
  padding: clamp(48px, 7vh, 80px) 0 clamp(64px, 9vh, 104px);
}

.legal__wrap {
  max-width: 760px;
}

.legal h1 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.legal__meta {
  margin: 0 0 32px;
  color: var(--text-faint);
  font-size: 0.86rem;
}

.legal__lead {
  margin: 0 0 40px;
  color: var(--text);
  font-size: 1.08rem;
  line-height: 1.7;
}

.legal h2 {
  margin: 40px 0 12px;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.legal p,
.legal li {
  color: var(--text-soft);
  line-height: 1.72;
}

.legal p {
  margin: 0 0 14px;
}

.legal__list,
.legal__ordered {
  margin: 0 0 16px;
  padding-left: 22px;
}

.legal__list li,
.legal__ordered li {
  margin-bottom: 10px;
}

.legal code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--canvas);
  font-size: 0.85em;
  word-break: break-word;
}

/* Ücretli ürün yokken iade sayfasının en üstünde duran dürüstlük kutusu. */
.legal__callout {
  margin: 0 0 36px;
  padding: 18px 22px;
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--accent-strong);
  border-radius: var(--radius-sm);
  background: var(--canvas);
  color: var(--text-soft);
  line-height: 1.7;
}

.legal__footnote {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-size: 0.9rem;
}

.site-footer__legal {
  margin-top: 8px;
  font-size: 0.82rem;
}

.site-footer__legal a {
  text-underline-offset: 3px;
}

@media (max-width: 700px) {
  .courses__grid {
    grid-template-columns: 1fr;
  }

  /* Dil anahtarı mobilde KALIR — ghost butonlar gizlenirken bu gizlenirse
     Türkçe konuşan bir ziyaretçi İngilizce sayfada mahsur kalır. */
  .site-header .langswitch {
    display: inline-flex;
  }

  /* Telefonda sayfa ~20 ekran; başlık `absolute` olduğu için ilk ekrandan sonra
     tıklanacak hiçbir şey kalmıyordu — ikna anı nerede gelirse gelsin karşılığı
     boştu. Yalnızca mobilde yapışkan: masaüstünde hero'nun üstüne oturan şeffaf
     tasarım korunuyor. */
  .site-header {
    position: sticky;
    padding: 12px 0;
    background: var(--sidebar);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .hero {
    padding-top: clamp(48px, 7vh, 72px);
  }
}