/* ============================================
   SAYFA STİLLERİ — tokenlar ve bileşenler tasarim/ klasöründe
   ============================================ */
:root {
  /* ESKİ ADLAR → YENİ TOKENLAR
     Bu dosyadaki sayfa stilleri eski değişken adlarını kullanır; hepsi
     tasarim/tokenlar.css'teki yeni değerlere bağlıdır. Yeni kodda
     doğrudan tokenlar.css adlarını kullan. */
  --color-primary: var(--text-primary);
  --color-secondary: var(--text-on-dark);
  --color-accent: var(--accent);
  --color-bg: var(--background);
  --color-surface: var(--surface-secondary);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-tertiary: var(--text-muted);
  --color-border: var(--border);
  --color-success: var(--positive);
  --color-danger: var(--negative);

  --chart-1: var(--data-2);
  --chart-2: var(--data-1);
  --bal-1: var(--data-seq-1);
  --bal-2: var(--data-seq-2);
  --bal-3: var(--data-seq-3);
  --bal-4: var(--data-seq-4);
  --bal-5: var(--data-warm-1);
  --bal-6: var(--data-warm-2);
  --bal-7: var(--data-neutral);

  --color-dark-bg: var(--dark);
  --color-dark-surface: var(--dark-surface);
  --color-dark-text-secondary: var(--text-on-dark-secondary);
  --color-dark-border: var(--border-on-dark);

  --font-system: var(--font-sans);

  --text-display: var(--text-hero);
  --text-h1: var(--text-article);
  --text-h2: var(--text-section);
  --text-h3: 1.25rem;

  --space-xxs: var(--s-8);
  --space-xs: var(--s-12);
  --space-sm: var(--s-16);
  --space-md: var(--s-24);
  --space-lg: var(--s-24);
  --space-xl: var(--s-32);
  --space-xxl: var(--s-48);
  --space-xxxl: var(--s-48);
  --space-section: var(--section);

  --radius-sm: var(--radius-s);
  --radius-md: var(--radius-m);
  --radius-lg: var(--radius-m);
  --radius-xl: var(--radius-l);
  --radius-xxl: var(--radius-l);
  --radius-pill: var(--radius-full);

  --ease-out: var(--ease);
  --duration-fast: var(--motion-fast);
  --duration: var(--motion-normal);
  --duration-slow: var(--motion-story);

  /* Tema kanalları: rgba(var(--ink), 0.08) gibi kullanılır */
  --ink: 23,25,28;
  --glass-rgb: 255,255,255;
  --tint-rgb: 250,250,251;
  --shadow-rgb: 0,0,0;
  --hilite: transparent;
  --surface-raised: var(--surface);

  /* Eski "cam" yüzeyler artık düz yüzey + ince çizgi */
  --glass-bg: var(--surface);
  --glass-bg-strong: var(--surface);
  --glass-rim: transparent;
  --glass-blur: var(--blur);
  --glass-shadow: none;              /* kartlar düz: sis grisi, gölgesiz */
  --glass-shadow-hover: 0 0 0 1px var(--border-strong);
  --glass-dark-bg: var(--dark-surface);
  --glass-dark-rim: transparent;

  --width-content: var(--width-page);
  --width-text: var(--width-article);
}

/* ============================================
   TEMEL
   ============================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background: var(--color-bg);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + var(--space-md));
  -webkit-text-size-adjust: 100%;
  interpolate-size: allow-keywords; /* <details> yumuşak açılsın */
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  color: var(--text-primary);
  background: var(--background);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "calt";
}

h1, h2, h3, h4 { letter-spacing: var(--tracking-heading); line-height: var(--leading-snug); text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Görünür odak: klavyeyle gezen herkes nerede olduğunu bilsin */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--accent-soft); }

a { color: inherit; }


.container {
  max-width: calc(var(--width-content) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.narrow {
  max-width: var(--width-text);
}

/* ============================================
   SAYFA GEÇİŞİ — "damla"
   Yeni sayfa, dokunulan noktadan genişleyen bir daire içinde açılır;
   eski sayfa o noktaya doğru hafifçe geri çekilir. Menü ve sekme çubuğu
   yerinde kalır, etkin sekmenin işareti yeni sekmeye kayar. Geri
   gelirken hareket tersine döner. Koordinatları tema.js yazar.
   ============================================ */
@view-transition { navigation: auto; }

.nav-bar { view-transition-name: ust-menu; }
.tabbar { view-transition-name: sekme-cubugu; }
.nav-hap { view-transition-name: menu-hap; }
.tab-hap { view-transition-name: sekme-hap; }

::view-transition-group(root) { animation-duration: 0.7s; }

::view-transition-old(root) {
  transform-origin: var(--gecis-x, 50%) var(--gecis-y, 50%);
  animation: gecis-geri-cekil 0.7s var(--ease-out) both;
}

::view-transition-new(root) {
  animation: gecis-damla 0.7s cubic-bezier(0.65, 0, 0.2, 1) both;
}

/* Geri gelirken: eski sayfa üstte kalır ve dokunulan noktaya doğru kapanır */
html[data-gecis="geri"]::view-transition-old(root) {
  z-index: 1;
  animation: gecis-kapan 0.6s cubic-bezier(0.65, 0, 0.35, 1) both;
}
html[data-gecis="geri"]::view-transition-new(root) {
  transform-origin: 50% 50%;
  animation: gecis-one-gel 0.6s var(--ease-out) both;
}

::view-transition-group(ust-menu),
::view-transition-group(sekme-cubugu) { animation: none; }
::view-transition-old(ust-menu),
::view-transition-new(ust-menu),
::view-transition-old(sekme-cubugu),
::view-transition-new(sekme-cubugu) { animation-duration: 0.3s; }
::view-transition-group(menu-hap),
::view-transition-group(sekme-hap) { animation-duration: 0.55s; animation-timing-function: var(--ease); }

@keyframes gecis-damla {
  from { clip-path: circle(0 at var(--gecis-x, 50%) var(--gecis-y, 50%)); }
  to   { clip-path: circle(var(--gecis-r, 150vmax) at var(--gecis-x, 50%) var(--gecis-y, 50%)); }
}
@keyframes gecis-geri-cekil { to { transform: scale(0.94); opacity: 0.35; } }
@keyframes gecis-kapan {
  from { clip-path: circle(var(--gecis-r, 150vmax) at var(--gecis-x, 50%) var(--gecis-y, 50%)); }
  to   { clip-path: circle(0 at var(--gecis-x, 50%) var(--gecis-y, 50%)); }
}
@keyframes gecis-one-gel { from { transform: scale(0.94); opacity: 0.35; } }

/* ============================================
   KAYDIRINCA BELİRME
   Yalnızca JS açıksa gizlenir; kapalıysa içerik hep görünür.
   ============================================ */
@media (scripting: enabled) {
  .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition:
      opacity var(--duration-slow) var(--ease-out),
      transform var(--duration-slow) var(--ease-out);
    transition-delay: var(--delay, 0s);
  }

  .reveal.visible {
    opacity: 1;
    transform: none;
  }

  /* Sayfa geçişiyle gelen ilk ekran: daireyle birlikte kısa bir yükseliş */
  .reveal.gecisle {
    transition-duration: 0.7s;
  }
  .reveal.gecisle:not(.visible) { transform: translateY(16px); }
}

/* ============================================
   BÖLÜMLER
   ============================================ */
.section {
  padding: var(--space-section) 0;
}

.section-light {
  background: rgba(var(--tint-rgb),0.45);
}

.section-dark {
  background: var(--dark);
  color: var(--color-secondary);
}

.eyebrow {
  display: block;
  font-size: var(--text-overline);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}
.section-dark .eyebrow { color: var(--text-on-dark-secondary); }

.headline {
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-md);
}

.lead {
  font-size: var(--text-lead);
  line-height: 1.4;
  color: var(--color-text-secondary);
  max-width: var(--width-text);
}

.section-dark .lead {
  color: var(--color-dark-text-secondary);
}

.center {
  text-align: center;
}

.center .lead {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   BUTONLAR VE BAĞLANTILAR
   ============================================ */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.center .actions,
.hero .actions {
  justify-content: center;
}

.button {
  display: inline-block;
  padding: 12px 24px;
  font: inherit;
  font-size: var(--text-body);
  color: var(--text-on-accent);
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease), filter var(--duration-fast) var(--ease);
}

.button:hover {
  filter: brightness(1.08);
}

.button:active {
  transform: scale(0.97);
}

.button-secondary {
  color: var(--color-text-primary);
}

.link-more {
  font-size: var(--text-body);
  color: var(--color-accent);
  text-decoration: none;
}

.link-more::after {
  content: " ›";
  display: inline-block;
  transition: transform var(--duration-fast) var(--ease);
}

.link-more:hover::after {
  transform: translateX(3px);
}

/* ============================================
   ANA SAYFA — HERO
   ============================================ */
.hero {
  padding: clamp(64px, 12vw, 140px) 0 var(--space-section);
  text-align: center;
}

.hero h1 {
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-lg);
}

.hero .accent {
  color: var(--color-accent);
}

.hero .lead {
  margin: 0 auto;
}

/* ============================================
   İLKELER (koyu bölüm)
   ============================================ */
.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  margin-top: var(--space-xxxl);
}

.principle {
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
}

.principle-number {
  display: block;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.principle h3 {
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: var(--space-xxs);
}

.principle p {
  font-size: var(--text-small);
  color: var(--color-dark-text-secondary);
}

/* ============================================
   ÖĞRENME YOLU KARTLARI
   ============================================ */
.path {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xxxl);
}

.path-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 260px;
  padding: var(--space-xl);
  border-radius: var(--radius-xxl);
  text-decoration: none;
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}

.path-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--glass-shadow-hover);
}

.path-card .step {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.path-card h3 {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-xxs);
}

.path-card p {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.path-card .link-more {
  margin-top: auto;
  padding-top: var(--space-lg);
  font-size: var(--text-small);
}

/* ============================================
   ETKİLEŞİMLİ DEMO
   ============================================ */
.demo-card {
  max-width: 520px;
  margin: var(--space-xxxl) auto 0;
  color: var(--color-secondary);
  border-radius: var(--radius-xxl);
  padding: var(--space-xl);
  text-align: left;
}

.demo-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-md);
}

.demo-symbol {
  font-size: 22px;
  font-weight: 600;
}

.demo-tag {
  font-size: var(--text-caption);
  color: var(--color-dark-text-secondary);
}

.demo-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--space-sm) 0;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  border-top: 1px solid var(--color-dark-border);
  cursor: pointer;
  text-align: left;
}

.demo-metric-label {
  font-size: 15px;
  color: var(--color-dark-text-secondary);
  transition: color var(--duration-fast) var(--ease);
}

.demo-metric[aria-expanded="true"] .demo-metric-label {
  color: var(--color-secondary);
}

.demo-metric-value {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 600;
}

/* Yumuşak açılır panel: yükseklik 0fr → 1fr */
.demo-explanation {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration) var(--ease-out);
}

.demo-explanation > p {
  overflow: hidden;
  font-size: var(--text-small);
  line-height: 1.6;
  color: rgba(245,245,240,0.75);
  opacity: 0;
  transition: opacity var(--duration) var(--ease-out);
}

.demo-explanation.open {
  grid-template-rows: 1fr;
}

.demo-explanation.open > p {
  opacity: 1;
  padding-bottom: var(--space-sm);
}

.demo-hint {
  font-size: var(--text-caption);
  color: rgba(245,245,240,0.4);
  text-align: center;
  margin-top: var(--space-sm);
}

/* ============================================
   VERİ KAYNAKLARI
   ============================================ */
.source-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xxxl);
  text-align: left;
}

.source-card {
  padding: var(--space-xl);
  border-radius: var(--radius-xxl);
}

.source-card h3 {
  font-size: var(--text-h3);
  font-weight: 600;
  margin-bottom: var(--space-xxs);
}

.source-card p {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

/* ============================================
   İÇ SAYFALAR
   ============================================ */
.page-hero {
  padding: clamp(56px, 10vw, 112px) 0 clamp(48px, 8vw, 88px);
}

.page-hero h1 {
  font-size: var(--text-h1);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.035em;
  margin-bottom: var(--space-md);
}

/* Sayfa içi bölüm menüsü */
.chapter-nav {
  display: flex;
  gap: var(--space-xxs);
  overflow-x: auto;
  scrollbar-width: none;
  margin-top: var(--space-xl);
}

.chapter-nav::-webkit-scrollbar { display: none; }

.chapter-nav a {
  flex-shrink: 0;
  padding: 8px 16px;
  font-size: var(--text-small);
  color: var(--color-text-primary);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: background var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}

.chapter-nav a:hover {
  background: var(--glass-bg-strong);
}

.chapter-nav a:active {
  transform: scale(0.96);
}

.chapter {
  padding: var(--space-section) 0;
  border-top: 1px solid var(--color-border);
}

/* Bölüm etiketi ("01 — Kredi"): sessiz gri, büyük harf ya da renk yok */
.chapter-number {
  display: block;
  font-size: var(--text-overline);
  font-weight: var(--weight-book);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

.chapter .lead {
  margin-bottom: var(--space-xxl);
}

/* Bilanço görseli */
.balance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
  margin-bottom: var(--space-xxl);
  font-size: var(--text-small);
  font-weight: 600;
}

.balance-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.balance-caption {
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--color-text-tertiary);
  letter-spacing: 0;
  text-align: center;
}

.balance-block {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-sm);
  border-radius: var(--radius-lg);
}

.balance-block span {
  display: block;
  font-weight: 400;
  font-size: var(--text-caption);
  opacity: 0.7;
}

.balance-block.dv { height: 110px; background: var(--color-surface); }
.balance-block.drv { height: 170px; background: var(--color-border); }
.balance-block.kv { height: 80px; background: var(--color-dark-surface); color: var(--color-secondary); }
.balance-block.uv { height: 70px; background: #3A3A3C; color: var(--color-secondary); }
.balance-block.oz { height: 118px; background: var(--color-accent); color: #FFFFFF; }

/* Formül */
.formula {
  display: block;
  margin: var(--space-xs) 0;
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border-radius: var(--radius-md);
}

/* Açılır kavram kartları */
.concept {
  border-top: 1px solid var(--color-border);
}

.concept:last-of-type {
  border-bottom: 1px solid var(--color-border);
}

.concept summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
}

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

.concept summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 24px;
  font-weight: 300;
  color: var(--color-text-tertiary);
  transition: transform var(--duration) var(--ease-out);
}

.concept[open] summary::after {
  transform: rotate(45deg);
}

.concept::details-content {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    height var(--duration) var(--ease-out),
    opacity var(--duration) var(--ease-out),
    content-visibility var(--duration) allow-discrete;
}

.concept[open]::details-content {
  height: auto;
  opacity: 1;
}

.concept-body {
  padding-bottom: var(--space-lg);
  color: var(--color-text-secondary);
}

.concept-body p + p,
.concept-body p + .formula,
.concept-body .formula + p {
  margin-top: var(--space-xs);
}

.concept-body strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

.read-tip {
  display: block;
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  font-size: var(--text-small);
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ============================================
   ADIM ADIM ANALİZ
   ============================================ */
.example-company {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  padding: var(--space-md);
  border-radius: var(--radius-xl);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

.example-company strong {
  display: block;
  font-size: var(--text-body);
  color: var(--color-text-primary);
}

.example-badge {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-weight: 600;
  color: var(--text-on-accent);
  background: var(--color-accent);
  border-radius: var(--radius-md);
}

.steps {
  list-style: none;
  counter-reset: step;
}

.step-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-md);
  padding: var(--space-xxl) 0;
  border-top: 1px solid var(--color-border);
}

.step-num {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  font-weight: 600;
  color: var(--color-accent);
  line-height: 1.2;
}

.step-item h3 {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-xxs);
}

.step-item > div > p {
  color: var(--color-text-secondary);
}

.step-meta {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

.step-row {
  padding: var(--space-sm);
  border-radius: var(--radius-lg);
  font-size: var(--text-small);
}

.step-row b {
  display: block;
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  color: var(--color-text-tertiary);
  margin-bottom: 2px;
}

.step-row.example {
  color: var(--color-secondary);
}

.step-row.example b {
  color: var(--accent-on-dark);
}

/* ============================================
   HESAPLAYICI
   ============================================ */
.calc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-xxxl);
  text-align: left;
}

.calc-inputs,
.calc-results {
  padding: var(--space-xl);
  border-radius: var(--radius-xxl);
}

.calc-results {
  color: var(--color-text-primary);
}

.field {
  display: block;
  margin-bottom: var(--space-sm);
}

.field span {
  display: block;
  font-size: 13px;
  color: var(--color-dark-text-secondary);
  margin-bottom: 6px;
}

.field small {
  color: rgba(245,245,240,0.6);
}

.field input {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 16px; /* iOS'ta yakınlaştırmayı önler */
  color: var(--color-secondary);
  background: rgba(245,245,240,0.06);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}

.field input:focus {
  border-color: var(--color-accent);
  background: rgba(245,245,240,0.1);
}

.calc-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

.calc-buttons .button {
  padding: 10px 18px;
  font-size: var(--text-small);
}

.calc-buttons .button-secondary {
  color: var(--color-secondary);
  background: transparent;
  border-color: var(--color-dark-border);
}

.result {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.result:last-child {
  border-bottom: none;
}

.result-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
}

.result-name {
  font-size: 15px;
  font-weight: 600;
}

.result-value {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-secondary);
  transition: color var(--duration-fast) var(--ease);
}

.result-value.filled {
  color: var(--color-text-primary);
}

.result-note {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.calc-disclaimer {
  font-size: var(--text-caption);
  color: var(--color-dark-text-secondary);
  margin-top: var(--space-xl);
}

/* ============================================
   SEKTÖRLER
   ============================================ */
.sector {
  padding: var(--space-section) 0;
  border-top: 1px solid var(--color-border);
}

.sector-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.sector-box {
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
}

.sector-box h3 {
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-sm);
}

.check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.check-list li {
  position: relative;
  padding-left: var(--space-md);
  font-size: 15px;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

.tickers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xxs);
  margin-top: var(--space-md);
}

.ticker {
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  background: var(--glass-bg);
  border: 1px solid var(--glass-rim);
  border-radius: var(--radius-sm);
}

.tickers-note {
  width: 100%;
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
}

/* ============================================
   SONRAKİ BÖLÜM + FOOTER
   ============================================ */
.next {
  display: block;
  padding: var(--space-section) 0;
  text-align: center;
  text-decoration: none;
}

.next .eyebrow {
  color: var(--color-text-tertiary);
}

.next h2 {
  font-size: var(--text-h2);
  font-weight: 600;
  letter-spacing: -0.03em;
  transition: color var(--duration-fast) var(--ease);
}

.next:hover h2 {
  color: var(--color-accent);
}

/* ============================================
   CAM KATMANI (iOS)
   Tüm cam yüzeyler burada tanımlı. Yeni bir bileşen cam olacaksa
   seçici listesine eklenir.

   Not: Gerçek bulanıklık (backdrop-filter) yalnızca arkasından içerik
   kayan yüzeylerde kullanılır: menü, sekme çubuğu, açılır pencere.
   Diğer kartların arkası zaten yumuşak bir renk geçişi olduğundan,
   yarı saydam zemin aynı görüntüyü telefonu yormadan verir.
   ============================================ */
.glass,
.path-card,
.source-card,
.sector-box,
.step-row,
.example-company,
.chapter-nav a,
.button-secondary,
.calc-results,
.term-card,
.quiz-option,
.daily-card,
.segmented,
.tool-inputs,
.tool-results,
.tool-card,
.qa,
.qa-teaser a,
.lesson-card,
.dq,
.report,
.next-step,
.badge-item,
.lab-company,
.spotlight,
.akis-sahne,
.akis-adim > div,
.oran-tablo,
.sektor-harita,
.scenario,
.lab-dial,
.lab-panel,
.kpi {
  position: relative;
  background: var(--glass-bg);
  box-shadow: var(--glass-shadow);
  border: none;
}

.glass-dark,
.principle,
.demo-card,
.step-row.example,
.calc-inputs {
  position: relative;
  background: var(--glass-dark-bg);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  border: none;
}

/* Açık zeminde duran koyu cam daha yoğun olmalı; yoksa griye döner */
.demo-card,
.step-row.example {
  background: rgba(28,28,30,0.88);
}

/* Koyu zeminde duran açık cam da aynı şekilde */
/* Işık kenarı: sol üstten vuran ışığın camın kenarında parlaması */
.glass::after,
.path-card::after,
.source-card::after,
.sector-box::after,
.step-row::after,
.example-company::after,
.chapter-nav a::after,
.button-secondary::after,
.calc-results::after,
.term-card::after,
.quiz-option::after,
.daily-card::after,
.segmented::after,
.tool-inputs::after,
.tool-results::after,
.tool-card::after,
.qa::after,
.qa-teaser a::after,
.lesson-card::after,
.dq::after,
.report::after,
.next-step::after,
.badge-item::after,
.lab-company::after,
.spotlight::after,
.akis-sahne::after,
.akis-adim > div::after,
.oran-tablo::after,
.sektor-harita::after,
.scenario::after,
.lab-dial::after,
.lab-panel::after,
.kpi::after,
.glass-dark::after,
.principle::after,
.demo-card::after,
.calc-inputs::after,
.tabbar::after,
.sheet-panel::after {
  /* Tasarım sistemi v2: cam kenarı kaldırıldı; yüzeyler ince çizgiyle ayrılır */
  content: none;
}

.glass-dark::after,
.principle::after,
.demo-card::after,
.step-row.example::after,
.calc-inputs::after {
  background: linear-gradient(145deg,
    var(--glass-dark-rim) 0%,
    rgba(255,255,255,0.04) 40%,
    rgba(255,255,255,0.02) 60%,
    rgba(255,255,255,0.10) 100%);
}

/* Bulanıklığı desteklemeyen tarayıcılarda cam yüzeyleri daha opak */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sheet-panel, .glossary-bar { background: var(--surface) !important; }
}

/* ============================================
   GÜNÜN KAVRAMI
   ============================================ */
.daily-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-xl);
  padding: var(--space-xl);
  border-radius: var(--radius-xxl);
  overflow: hidden;
  isolation: isolate;
}

/* Kartın içinde hafif turuncu ışıma */
.daily-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: none;
}

.home-daily {
  max-width: 820px;
  margin: var(--space-xxxl) auto 0;
  text-align: left;
}

.daily-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
}

.daily-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: pulse 2.4s var(--ease) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.daily-term {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: var(--space-xxs) 0;
}

.daily-short {
  max-width: 520px;
  color: var(--color-text-secondary);
}

.daily-actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-xs);
}

.daily-actions .button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.daily-actions svg,
.search-field svg,
.sheet-icon-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================
   SÖZLÜK
   ============================================ */
.glossary-hero {
  padding-bottom: var(--space-xxl);
}

.glossary-progress {
  max-width: 360px;
  margin-top: var(--space-xl);
}

.progress-text {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xxs);
}

.progress-text strong {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}

.progress-track {
  height: 6px;
  background: rgba(var(--ink),0.08);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-fill {
  width: 0;
  height: 100%;
  background: var(--color-accent);
  border-radius: inherit;
  transition: width var(--duration-slow) var(--ease-out);
}

/* Arama ve filtre çubuğu — kaydırırken üstte cam olarak kalır */
.glossary-bar {
  position: sticky;
  top: var(--nav-height);
  z-index: 40;
  margin-top: var(--space-xxl);
  padding: var(--space-xs) 0;
  transition: background var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}

.glossary-bar.stuck {
  background: rgba(var(--glass-rgb),0.55);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 1px 0 rgba(var(--ink),0.06);
}

.glossary-bar .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  height: 48px;
  padding: 0 var(--space-sm);
  background: var(--glass-bg-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow), inset 0 0 0 1px var(--hilite);
  color: var(--color-text-tertiary);
  transition: box-shadow var(--duration-fast) var(--ease);
}

.search-field:focus-within {
  box-shadow: var(--glass-shadow), inset 0 0 0 2px var(--color-accent);
}

.search-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  font: inherit;
  font-size: 17px;
  color: var(--color-text-primary);
  background: none;
  border: none;
  outline: none;
}

.search-field input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m8 8 8 8M16 8l-8 8' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat,
    var(--color-text-tertiary);
  cursor: pointer;
}

.search-kbd {
  padding: 2px 8px;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--color-text-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

/* iOS tarzı bölümlü seçici */
.segmented {
  display: flex;
  gap: 2px;
  padding: 3px;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: var(--radius-pill);
  align-self: flex-start;
  max-width: 100%;
}

.segmented::-webkit-scrollbar { display: none; }

.segmented button {
  flex-shrink: 0;
  padding: 7px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}

.segmented button[aria-selected="true"],
.segmented button[aria-checked="true"] {
  color: var(--color-text-primary);
  background: var(--surface-raised);
  box-shadow: 0 1px 2px rgba(var(--shadow-rgb),0.08), 0 3px 8px rgba(var(--shadow-rgb),0.08);
}

.glossary-body {
  position: relative;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-section);
}

.letter-group + .letter-group {
  margin-top: var(--space-xxl);
}

.letter-heading {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
  scroll-margin-top: calc(var(--nav-height) + 150px);
}

.letter-heading small {
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-text-tertiary);
}

.term-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.term-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  min-height: 150px;
  padding: var(--space-lg);
  font: inherit;
  text-align: left;
  color: inherit;
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out), background var(--duration-fast) var(--ease);
  animation: card-in 0.5s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 25ms);
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
}

.term-card:hover {
  transform: translateY(-3px);
  background: var(--glass-bg-strong);
  box-shadow: var(--glass-shadow-hover);
}

.term-card:active {
  transform: scale(0.98);
}

.term-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.term-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-tertiary);
}

.term-read {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  opacity: 1;
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.term-card.read .term-read {
  opacity: 0;
  transform: scale(0.4);
}

.term-name {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.term-short {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-text-secondary);
}

mark {
  color: inherit;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 3px;
  padding: 0 1px;
}

.glossary-empty {
  padding: var(--space-section) 0;
  text-align: center;
  color: var(--color-text-secondary);
}

.glossary-empty-title {
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xxs);
}

/* Sağ kenarda harf dizini (iOS Kişiler gibi) */
.letter-index {
  position: fixed;
  right: 6px;
  top: 50%;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 2px;
  border-radius: var(--radius-pill);
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration) var(--ease), background var(--duration-fast) var(--ease);
}

body.glossary-in-view .letter-index {
  opacity: 1;
  pointer-events: auto;
}

.letter-index:hover,
.letter-index.active {
  background: var(--glass-bg);
}

.letter-index a {
  display: block;
  width: 22px;
  padding: 1px 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  color: var(--color-accent);
  text-decoration: none;
}

/* ============================================
   KAVRAM PENCERESİ (sheet)
   Telefonda alttan kayan, bilgisayarda ortada açılan cam pencere.
   ============================================ */
.sheet {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: none;
  overflow: hidden;
}

.sheet::backdrop {
  background: rgba(28,28,30,0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: fade-in 0.4s var(--ease) both;
}

.sheet.closing::backdrop {
  animation: fade-out 0.3s var(--ease) both;
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

.sheet-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  width: min(640px, calc(100% - 48px));
  max-height: min(86vh, 860px);
  background: rgba(var(--glass-rgb),0.72);
  -webkit-backdrop-filter: saturate(180%) blur(40px);
  backdrop-filter: saturate(180%) blur(40px);
  border-radius: var(--radius-xxl);
  box-shadow: 0 30px 80px rgba(var(--shadow-rgb),0.25), 0 2px 6px rgba(var(--shadow-rgb),0.06);
  transform: translate(-50%, -50%);
  animation: panel-in 0.55s var(--ease-out) both;
}

.sheet.closing .sheet-panel {
  animation: panel-out 0.3s var(--ease) both;
}

@keyframes panel-in {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
}

@keyframes panel-out {
  to { opacity: 0; transform: translate(-50%, -48%) scale(0.97); }
}

.sheet-panel:focus {
  outline: none;
}

.sheet-grabber {
  display: none;
}

.sheet-top {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 2;
  display: flex;
  gap: var(--space-xxs);
}

.sheet-icon-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--color-text-secondary);
  background: rgba(var(--tint-rgb),0.8);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: none;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(var(--shadow-rgb),0.08), inset 0 0 0 0.5px rgba(var(--ink),0.06);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}

.sheet-icon-button:hover {
  background: rgba(var(--tint-rgb),1);
}

.sheet-icon-button:active {
  transform: scale(0.9);
}

.sheet-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.sheet-content {
  padding: var(--space-xxl) var(--space-xl) var(--space-lg);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}

.sheet-content.swapping {
  opacity: 0;
  transform: translateY(8px);
}

.sheet-term {
  padding-right: 88px; /* sağ üstteki düğmelere yer */
  font-size: clamp(30px, 5vw, 40px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: var(--space-sm);
}

.sheet-short {
  font-size: var(--text-lead);
  line-height: 1.4;
  color: var(--color-text-primary);
  margin-bottom: var(--space-xl);
}

.sheet-section {
  margin-bottom: var(--space-xl);
}

.sheet-section h3 {
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-xxs);
}

.sheet-section p {
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.sheet-example {
  padding: var(--space-md);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: var(--radius-lg);
}

.sheet-example h3 {
  color: var(--color-accent);
}

.sheet-example p {
  color: var(--color-text-primary);
}

.sheet-evaluate {
  padding-left: var(--space-md);
  border-left: 3px solid var(--color-accent);
}

.sheet-evaluate p {
  color: var(--color-text-primary);
}

.sheet-page,
.sheet-learn {
  display: inline-block;
  margin: 0 var(--space-md) var(--space-xl) 0;
  font-size: 15px;
}

.related {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xxs);
}

.related button {
  padding: 8px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  background: rgba(var(--glass-rgb),0.7);
  border: none;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px rgba(var(--ink),0.08);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}

.related button:hover {
  background: var(--surface-raised);
}

.related button:active {
  transform: scale(0.95);
}

.sheet-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xxs);
  padding: var(--space-sm) var(--space-xl) var(--space-lg);
  border-top: 1px solid rgba(var(--ink),0.06);
}

.sheet-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--space-xs) var(--space-sm);
  font: inherit;
  text-align: left;
  color: inherit;
  background: rgba(var(--glass-rgb),0.55);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease);
}

.sheet-nav:hover { background: rgba(var(--glass-rgb),0.9); }
.sheet-nav:active { transform: scale(0.97); }
.sheet-nav[hidden] { display: flex; visibility: hidden; }

.sheet-nav.next-dir {
  text-align: right;
}

.sheet-nav-dir {
  font-size: 12px;
  color: var(--color-text-tertiary);
}

.sheet-nav-term {
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ============================================
   MİNİ HESAPLAYICILAR (sözlük içinde)
   ============================================ */
.mini-calc {
  padding: var(--space-md);
  background: rgba(var(--glass-rgb),0.6);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--hilite), 0 4px 16px rgba(var(--shadow-rgb),0.05);
}

.mini-calc h3 {
  color: var(--color-text-primary);
  letter-spacing: 0.04em;
}

.slider {
  display: block;
  margin-top: var(--space-md);
}

.slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xxs);
}

.slider-head output {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* iOS tarzı kaydırıcı: ince iz, büyük beyaz tutamaç */
.slider input[type="range"] {
  --p: 50%;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.slider input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--color-accent) var(--p), rgba(var(--ink),0.12) var(--p));
}

.slider input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--color-accent) var(--p), rgba(var(--ink),0.12) var(--p));
}

.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -12px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0.5px 4px rgba(0,0,0,0.12), 0 6px 13px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(0,0,0,0.04);
  transition: transform var(--duration-fast) var(--ease);
}

.slider input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.1);
}

.slider input[type="range"]::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0.5px 4px rgba(0,0,0,0.12), 0 6px 13px rgba(0,0,0,0.12);
}

.slider input[type="range"]:focus-visible {
  outline: none;
}

.slider input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), 0 6px 13px rgba(0,0,0,0.12);
}

.calc-answer {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(var(--ink),0.08);
}

.calc-big {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.calc-big.negative { color: var(--color-danger); }
.calc-big.positive { color: var(--color-success); }

.calc-answer p {
  margin-top: 4px;
  font-size: 15px;
}

/* Yıllara göre büyüme / erime çubukları */
.bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 72px;
  margin-top: var(--space-md);
}

.bars span {
  flex: 1;
  min-height: 2px;
  background: rgba(var(--ink),0.12);
  border-radius: 3px 3px 1px 1px;
  transition: height var(--duration) var(--ease-out), background var(--duration-fast) var(--ease);
}

.bars span.gain {
  background: var(--data-1);
}

/* ============================================
   BİLDİRİM (toast)
   ============================================ */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 200;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-secondary);
  background: rgba(28,28,30,0.82);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-radius: var(--radius-pill);
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease), transform var(--duration) var(--ease-out);
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============================================
   KENDİNİ SINA
   ============================================ */
.quiz-wrap {
  padding-bottom: var(--space-section);
}

.quiz-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.quiz-count {
  flex-shrink: 0;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.quiz-track {
  flex: 1;
  height: 6px;
  background: rgba(var(--ink),0.08);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.quiz-track-fill {
  width: 0;
  height: 100%;
  background: var(--color-accent);
  border-radius: inherit;
  transition: width var(--duration) var(--ease-out);
}

.quiz-stage {
  position: relative;
}

.quiz-card {
  padding: var(--space-xl);
  background: rgba(var(--glass-rgb),0.62);
  border-radius: var(--radius-xxl);
  box-shadow: var(--glass-shadow), inset 0 0 0 1px var(--hilite);
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease-out);
}

.quiz-card.leaving {
  opacity: 0;
  transform: translateX(-32px);
}

.quiz-card.entering {
  opacity: 0;
  transform: translateX(32px);
  transition: none;
}

.quiz-situation {
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.quiz-data {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xxs);
  margin: var(--space-md) 0;
}

.quiz-data div {
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-float);
  color: var(--text-primary);
  border-radius: var(--radius-m);
}

.quiz-data dt {
  font-size: 12px;
  color: var(--text-muted);
}

.quiz-data dd {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 600;
}

.quiz-question {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: var(--space-md);
}

.quiz-options {
  display: grid;
  gap: var(--space-xxs);
}

.quiz-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
  color: var(--color-text-primary);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease), transform var(--duration-fast) var(--ease), opacity var(--duration) var(--ease), box-shadow var(--duration-fast) var(--ease);
}

.quiz-option:hover:not(:disabled) {
  background: rgba(var(--glass-rgb),0.9);
}

.quiz-option:active:not(:disabled) {
  transform: scale(0.985);
}

.quiz-option:disabled {
  cursor: default;
}

.option-key {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: rgba(var(--ink),0.06);
  border-radius: 50%;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}

.quiz-option.correct {
  background: color-mix(in srgb, var(--positive) 12%, transparent);
  box-shadow: inset 0 0 0 2px var(--color-success), var(--glass-shadow);
}

.quiz-option.correct .option-key {
  color: var(--text-on-accent);
  background: var(--color-success);
}

.quiz-option.wrong {
  background: rgba(255,59,48,0.08);
  box-shadow: inset 0 0 0 2px var(--color-danger), var(--glass-shadow);
  animation: shake 0.4s var(--ease);
}

.quiz-option.wrong .option-key {
  color: var(--text-on-accent);
  background: var(--color-danger);
}

.quiz-option.dim {
  opacity: 0.45;
}

@keyframes shake {
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.quiz-feedback {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration) var(--ease-out);
}

.quiz-feedback.open {
  grid-template-rows: 1fr;
}

.quiz-feedback-inner {
  overflow: hidden;
}

.quiz-verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-8);
  margin-top: var(--space-lg);
  padding: var(--s-12) var(--s-16);
  border-radius: var(--radius-m);
  font-size: var(--text-small);
  color: var(--text-secondary);
}
.quiz-verdict strong { font-size: var(--text-body); font-weight: 600; }
.quiz-verdict.ok { background: var(--positive-soft); }
.quiz-verdict.ok strong, .quiz-verdict.ok .quiz-isaret { color: var(--positive); }
.quiz-verdict.no { background: var(--negative-soft); }
.quiz-verdict.no strong, .quiz-verdict.no .quiz-isaret { color: var(--negative); }
.quiz-isaret { font-weight: 700; }
.quiz-katman { margin-top: var(--s-16); }
.quiz-katman h3 { margin-bottom: var(--s-4); font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: 0; color: var(--text-muted); }
.quiz-katman .quiz-explain { margin: 0; }
.quiz-katman .ilgili-liste { margin-top: var(--s-4); }

.quiz-explain {
  margin: var(--space-xxs) 0 var(--space-sm);
  color: var(--color-text-secondary);
}

.quiz-feedback .link-more {
  font-size: 15px;
}

.quiz-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-lg);
}

.button:disabled {
  opacity: 0.35;
  cursor: default;
  filter: none;
  transform: none;
}

/* Sonuç */
.quiz-result {
  text-align: center;
  animation: fade-up 0.8s var(--ease-out) both;
}

.result-ring {
  position: relative;
  width: 168px;
  height: 168px;
  margin: 0 auto var(--space-xl);
}

.result-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.result-ring circle {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
}

.ring-bg { stroke: rgba(var(--ink),0.08); }

.ring-fill {
  stroke: var(--color-accent);
  stroke-dasharray: 326.73;
  stroke-dashoffset: 326.73;
  transition: stroke-dashoffset 1.4s var(--ease-out) 0.2s;
}

.ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding-top: 58px;
  gap: 4px;
}

.ring-label strong {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 44px;
  font-weight: 600;
}

.ring-label span {
  color: var(--color-text-tertiary);
}

.result-best {
  margin-top: var(--space-sm);
  font-size: var(--text-small);
  color: var(--color-text-tertiary);
}

.review {
  display: grid;
  gap: var(--space-xxs);
  margin-top: var(--space-xl);
  text-align: left;
}

.review a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--glass-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  text-decoration: none;
  font-size: 15px;
}

.review a span:last-child {
  flex-shrink: 0;
  color: var(--color-accent);
}

.review-title {
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  color: var(--color-text-tertiary);
  margin-bottom: 4px;
}

/* ============================================
   SÖZLÜK, PENCERE VE TEST — TELEFON
   ============================================ */
@media (max-width: 1023px) {
  .term-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .daily-card {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-lg);
  }

  .daily-actions .button { flex: 1; justify-content: center; }

  .search-kbd { display: none; }

  .term-grid { grid-template-columns: 1fr; gap: var(--space-xxs); padding-right: 14px; }
  .term-card { min-height: 0; padding: var(--space-md); }

  .letter-heading { font-size: 26px; }

  /* Telefonda pencere alttan kayar ve aşağı çekilerek kapatılır */
  .sheet-panel {
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-height: calc(100% - 44px - env(safe-area-inset-top));
    border-radius: var(--radius-xxl) var(--radius-xxl) 0 0;
    transform: none;
    animation-name: sheet-up;
    animation-duration: 0.5s;
  }

  .sheet.closing .sheet-panel {
    animation-name: sheet-down;
  }

  .sheet-panel.dragging {
    animation: none;
    transition: none;
  }

  @keyframes sheet-up {
    from { transform: translateY(100%); }
  }

  @keyframes sheet-down {
    to { transform: translateY(100%); }
  }

  .sheet-grabber {
    display: flex;
    justify-content: center;
    padding: 8px 0 4px;
    touch-action: none;
    cursor: grab;
  }

  .sheet-grabber span {
    width: 38px;
    height: 5px;
    border-radius: 3px;
    background: rgba(var(--ink),0.2);
  }

  .sheet-top { top: 18px; }
  .sheet-content { padding: var(--space-lg) var(--space-md) var(--space-md); }
  .sheet-footer { padding: var(--space-xs) var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom)); }

  .toast { bottom: calc(var(--tabbar-height) + 28px + env(safe-area-inset-bottom)); }

  .quiz-card { padding: var(--space-lg); }
  .quiz-question { font-size: 20px; }
  .quiz-actions .button { width: 100%; }
}

.spot-field svg,
.spot-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================
   SİTE GENELİ ARAMA (Spotlight)
   ============================================ */
.spotlight {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: none;
}

.spotlight::backdrop {
  background: color-mix(in srgb, var(--background) 55%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  backdrop-filter: blur(12px) saturate(120%);
  animation: fade-in var(--motion-normal) var(--ease) both;
}

.spot-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(680px, calc(100% - 32px));
  max-height: min(72vh, 640px);
  margin: 12vh auto 0;
  background: var(--surface-elevated);
  border-radius: var(--radius-l);
  box-shadow: 0 0 0 1px var(--border), var(--shadow-raised);
  overflow: hidden;
  animation: spot-in var(--motion-normal) var(--ease) both;
}

.spotlight.closing .spot-panel { animation: spot-out 0.2s var(--ease) both; }
.spotlight.closing::backdrop { animation: fade-out 0.2s var(--ease) both; }

@keyframes spot-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
@keyframes spot-out { to { opacity: 0; transform: scale(0.98); } }

.spot-field {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0 var(--space-md);
  height: 60px;
  color: var(--color-text-tertiary);
  border-bottom: 1px solid rgba(var(--ink),0.08);
}

.spot-field svg { width: 22px; height: 22px; }

.spot-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  font: inherit;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  background: none;
  border: none;
  outline: none;
}

.spot-field input::-webkit-search-cancel-button { display: none; }

.spot-close {
  padding: 4px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--color-text-secondary);
  background: rgba(var(--ink),0.06);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.spot-results {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-xxs);
}

.spot-group {
  padding: var(--space-xs) var(--space-xs) 4px;
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  color: var(--color-text-tertiary);
}

.spot-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px var(--space-xs);
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-md);
  scroll-margin: var(--space-xxs);
}

.spot-item[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.spot-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--color-accent);
  background: rgba(var(--ink),0.05);
  border-radius: var(--radius-sm);
}

.spot-text {
  min-width: 0;
}

.spot-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.spot-sub {
  display: block;
  overflow: hidden;
  font-size: 13px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.spot-empty {
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  color: var(--color-text-secondary);
}

.spot-suggest {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xxs);
  margin-top: var(--space-sm);
}

.spot-suggest button {
  padding: 6px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--color-text-primary);
  background: rgba(var(--ink),0.06);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.spot-foot {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-md);
  font-size: 12px;
  color: var(--color-text-tertiary);
  border-top: 1px solid rgba(var(--ink),0.06);
}

.spot-foot kbd {
  padding: 1px 6px;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  border: 1px solid rgba(var(--ink),0.12);
  border-radius: 4px;
}

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

/* ============================================
   ANA SAYFA — NEDEN PAKTOLOS + UYGULAMA KARTI
   ============================================ */
.story-teaser {
  max-width: var(--width-text);
  margin: 0 auto;
  text-align: center;
}

.story-teaser .wave-mark {
  width: 64px;
  height: 14px;
  margin: 0 auto var(--space-lg);
  display: block;
}

.wave-mark path {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.story-teaser blockquote {
  font-size: var(--text-lead);
  line-height: 1.45;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}

.install-card {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  max-width: 760px;
  margin: var(--space-xxxl) auto 0;
  padding: var(--space-lg);
  border-radius: var(--radius-xxl);
  text-align: left;
}

.install-card[hidden],
.install-card .button[hidden] { display: none; }

.install-icon {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(var(--shadow-rgb),0.18);
}

.install-card h3 {
  font-size: var(--text-h3);
  font-weight: 600;
  margin-bottom: 4px;
}

.install-card p {
  font-size: 15px;
  color: var(--color-text-secondary);
}

.install-card .button {
  flex-shrink: 0;
  margin-left: auto;
}

.install-steps {
  font-size: 15px;
  color: var(--color-text-secondary);
}

.install-steps b {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* ============================================
   HİKÂYE SAYFASI
   ============================================ */
.story-hero {
  padding: clamp(72px, 14vw, 160px) 0 clamp(48px, 8vw, 96px);
  text-align: center;
}

.story-hero h1 {
  font-size: var(--text-display);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: var(--space-md);
}

.story-hero .lead {
  margin: 0 auto;
}

.story {
  position: relative;
}

/* Sayfa boyunca akan nehir: kaydırdıkça çizilir */
.story-river {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 40px;
  transform: translateX(-50%);
  pointer-events: none;
}

.story-river svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.story-river path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.story-river .river-bed { stroke: rgba(var(--ink),0.08); }
.story-river .river-flow { stroke: var(--brand); }

.scene {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(48px, 10vw, 140px);
  min-height: 80vh;
  padding: var(--space-section) 0;
}

.scene:nth-child(even) .scene-art { order: 2; }

.scene-art {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-width: 360px;
  width: 100%;
  justify-self: center;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 10%, transparent), transparent);
}

.scene-art svg {
  width: 72%;
  height: 72%;
  overflow: visible;
}

.scene-art .line {
  fill: none;
  stroke: var(--color-text-primary);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scene-art .gold-line {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scene-art .gold { fill: var(--brand); }

/* Çizgiler sahne görünür olunca çizilir */
.scene .draw {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  transition: stroke-dashoffset 2s var(--ease-out) 0.2s;
}

.scene.visible .draw {
  stroke-dashoffset: 0;
}

.scene .spark {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.2);
  transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: calc(1s + var(--d, 0s));
}

.scene.visible .spark {
  opacity: 1;
  transform: none;
}

/* Kadeh altınla dolar */
.scene .fill-rise {
  transform-box: fill-box;
  transform: translateY(100%);
  transition: transform 2.4s var(--ease-out) 0.8s;
}

.scene.visible .fill-rise {
  transform: none;
}

/* Sikke yavaşça döner */
.coin {
  animation: coin-turn 8s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

/* Dönen sikke: yatay daralıp genişleyerek çevrilme hissi verir */
@keyframes coin-turn {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.12); }
}

.scene-label {
  display: block;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.scene-text h2 {
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-md);
}

.scene-text p {
  font-size: var(--text-lead);
  line-height: 1.45;
  color: var(--color-text-secondary);
}

.scene-text p + p {
  margin-top: var(--space-sm);
}

.scene-note {
  display: block;
  margin-top: var(--space-md);
  font-size: 13px;
  color: var(--color-text-tertiary);
}

.story-moral {
  text-align: center;
}

.story-moral .quote {
  font-family: var(--font-serif);
  font-size: clamp(30px, 5.5vw, 56px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
  max-width: 900px;
  margin: 0 auto var(--space-xl);
}

.story-moral .quote span { font-style: italic; }
.section-dark .link-more { color: var(--accent-on-dark); }

.story-sources {
  max-width: var(--width-text);
  margin: 0 auto;
  font-size: 13px;
  color: var(--color-text-tertiary);
  text-align: center;
}

@media (max-width: 767px) {
  .nav-end { gap: 0; }

  .story-river { left: 20px; transform: none; width: 24px; }

  .scene {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    min-height: 0;
    padding: var(--space-section) 0 var(--space-section) 40px;
  }

  .scene:nth-child(even) .scene-art { order: 0; }
  .scene-art { max-width: 240px; justify-self: start; }

  .install-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-sm) var(--space-md);
    align-items: center;
  }
  .install-icon { width: 56px; height: 56px; border-radius: 14px; }
  .install-card .button { grid-column: 1 / -1; margin-left: 0; width: 100%; text-align: center; }

  .spot-panel { margin-top: 12px; max-height: calc(100vh - 24px - env(safe-area-inset-bottom)); }
  .spot-foot { display: none; }
}

/* ============================================
   ARAÇ KUTUSU
   ============================================ */
.tool {
  padding: var(--space-section) 0;
  scroll-margin-top: var(--nav-height);
}

.tool-head {
  max-width: var(--width-text);
  margin-bottom: var(--space-xxl);
}

.tool-grid {
  display: grid;
  grid-template-columns: minmax(280px, 5fr) 7fr;
  gap: var(--space-lg);
  align-items: start;
}

.tool-inputs,
.tool-results {
  padding: var(--space-xl);
  border-radius: var(--radius-xxl);
}

.tool-inputs {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-md));
}

/* Kaydırıcı + yazılabilir sayı */
.num-field {
  display: block;
  margin-bottom: var(--space-md);
}

.num-field:last-child { margin-bottom: 0; }

.num-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: 2px;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.num-input {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: var(--touch);
  padding: 0 12px;
  background: rgba(var(--ink),0.05);
  border-radius: var(--radius-sm);
  transition: box-shadow var(--duration-fast) var(--ease);
}

.num-input:focus-within {
  box-shadow: inset 0 0 0 2px var(--color-accent);
}

.num-input input {
  align-self: stretch;
  width: 9ch;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 600;
  text-align: right;
  color: var(--color-text-primary);
  background: none;
  border: none;
  outline: none;
}

.num-input span {
  font-size: 13px;
  color: var(--color-text-tertiary);
}

.num-field input[type="range"] { display: block; }

.tool-note {
  margin-top: var(--space-md);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-tertiary);
}

/* Sonuç: bir büyük rakam, altında destek rakamları */
.hero-figure {
  font-size: clamp(40px, 7vw, 56px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  font-variant-numeric: proportional-nums;
}

.hero-caption {
  margin-top: 4px;
  font-size: 15px;
  color: var(--color-text-secondary);
}

.verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-xs);
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  background: rgba(var(--ink),0.06);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(var(--ink),0.08);
}

.stat-row dt {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.stat-row dd {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.insight {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  font-size: 15px;
  line-height: 1.55;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: var(--radius-lg);
}

.insight b {
  font-weight: 600;
}

.insight-title {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  color: var(--color-accent);
}

/* Karşılaştırma çubukları (taksit mi peşin mi) */
.compare {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.compare-row {
  display: grid;
  grid-template-columns: 11rem 1fr;
  align-items: center;
  gap: var(--space-sm);
  font-size: 14px;
  color: var(--color-text-secondary);
}

.compare-track {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.compare-bar {
  height: 20px;
  min-width: 4px;
  background: var(--chart-1);
  border-radius: 1px 4px 4px 1px;
  transition: width var(--duration) var(--ease-out);
}

.compare-bar.alt { background: var(--chart-2); }

.compare-value {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

/* ============================================
   GRAFİK
   ============================================ */
.chart {
  position: relative;
  margin-top: var(--space-lg);
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-xs);
  font-size: 13px;
  color: var(--color-text-secondary);
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.key-line,
.key-rect {
  display: inline-block;
  flex-shrink: 0;
}

.key-line { width: 14px; height: 2px; border-radius: 1px; }
.key-rect { width: 10px; height: 10px; border-radius: 2px; }

.chart svg {
  display: block;
  width: 100%;
  overflow: visible;
  touch-action: pan-y;
}

.chart svg:focus { outline: none; }
.chart svg:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 4px; }

.chart .grid line { stroke: var(--data-grid); stroke-width: 1; }
.chart .grid line:first-child { stroke: var(--data-axis); }
.chart .axis text { fill: var(--text-muted); font-size: 11px; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.chart .series-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart .series-area { opacity: 0.08; }
.chart .crosshair { stroke: var(--data-axis); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .dot { stroke: var(--surface); stroke-width: 2; }
.chart .end-label { fill: var(--color-text-primary); font-size: 12px; font-weight: 600; font-family: var(--font-system); }
.chart .bar { transition: opacity var(--duration-fast) var(--ease); }
.chart .bar-group.dim .bar { opacity: 0.45; }

.chart-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  min-width: 160px;
  max-width: 240px;
  padding: var(--s-12);
  font-size: var(--text-caption);
  line-height: 1.45;
  color: var(--text-primary);
  background: var(--surface-elevated);
  border-radius: var(--radius-m);
  box-shadow: 0 0 0 1px var(--border), var(--shadow-raised);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}
.chart-tip .tip-context {
  margin-top: var(--s-8);
  padding-top: var(--s-8);
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
}

/* Figür: başlık, not, grafik, tablo, kaynak */
.grafik-figur { display: grid; gap: var(--s-12); margin: var(--s-48) 0; }
.grafik-figur figcaption { display: grid; gap: var(--s-4); }
.grafik-figur figcaption strong { font-size: var(--text-title); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-heading); }
.grafik-figur figcaption span { font-size: var(--text-small); color: var(--text-secondary); }
.grafik-kaynak { font-size: var(--text-caption); color: var(--text-muted); }

.chart-tip.show { opacity: 1; }

.chart-tip .tip-title {
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.chart-tip .tip-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-tip strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.chart-tip .tip-name {
  color: var(--color-text-secondary);
}

/* Tablo görünümü */
.table-view {
  margin-top: var(--space-md);
}

.table-view summary {
  display: inline-block;
  font-size: 14px;
  color: var(--color-accent);
  cursor: pointer;
  list-style: none;
}

.table-view summary::-webkit-details-marker { display: none; }
.table-view summary::after { content: " ›"; }
.table-view[open] summary::after { content: " ⌄"; }

.table-scroll {
  max-height: 320px;
  margin-top: var(--space-xs);
  overflow: auto;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px rgba(var(--ink),0.08);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.data-table th,
.data-table td {
  padding: 8px 12px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid rgba(var(--ink),0.06);
}

.data-table th:first-child,
.data-table td:first-child { text-align: left; }

.data-table thead th {
  position: sticky;
  top: 0;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: rgba(var(--glass-rgb),0.95);
}

/* Araç kartları (ana sayfa ve sayfa başı) */
.tool-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-xxl);
  text-align: left;
}

.tool-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  text-decoration: none;
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}

.tool-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--glass-shadow-hover);
}

.tool-card svg {
  width: 28px;
  height: 28px;
  margin-bottom: var(--space-xxs);
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool-card strong {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.tool-card span {
  font-size: 14px;
  color: var(--color-text-secondary);
}

.sheet-tool {
  display: inline-block;
  margin: 0 var(--space-md) var(--space-xl) 0;
  font-size: 15px;
}

@media (max-width: 900px) {
  .tool-grid { grid-template-columns: 1fr; }
  .tool-inputs { position: static; }
}

@media (max-width: 767px) {
  .tool-inputs, .tool-results { padding: var(--space-lg); }
  .compare-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================
   AKLINA TAKILAN (soru kütüphanesi)
   ============================================ */
.qa-body {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-section);
}

.qa-group + .qa-group {
  margin-top: var(--space-xxl);
}

.qa-group-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.qa-group-title small {
  font-size: var(--text-small);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-text-tertiary);
}

.qa {
  margin-bottom: var(--space-xs);
  border-radius: var(--radius-xl);
  scroll-margin-top: calc(var(--nav-height) + 150px);
}

.qa summary {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  cursor: pointer;
  list-style: none;
  border-radius: inherit;
}

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

.qa summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.qa-q { flex: 1; }

.qa-chevron {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(var(--ink),0.06);
  transition: transform var(--duration) var(--ease-out), background var(--duration-fast) var(--ease);
}

.qa-chevron svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--color-text-secondary);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.qa[open] .qa-chevron {
  transform: rotate(180deg);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.qa-badge {
  flex-shrink: 0;
  padding: 3px 8px;
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: var(--radius-sm);
}

.qa.news .qa-q {
  font-weight: 600;
  font-style: italic;
}

.qa::details-content {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    height var(--duration) var(--ease-out),
    opacity var(--duration) var(--ease-out),
    content-visibility var(--duration) allow-discrete;
}

.qa[open]::details-content {
  height: auto;
  opacity: 1;
}

.qa-content {
  padding: 0 var(--space-lg) var(--space-lg);
}

.qa-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  color: var(--color-text-tertiary);
}

.qa-short {
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  font-size: 17px;
  line-height: 1.55;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: var(--radius-lg);
}

.qa-short .qa-label { color: var(--color-accent); }

.qa-steps {
  list-style: none;
  counter-reset: adim;
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.qa-steps li {
  position: relative;
  padding-left: 40px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  counter-increment: adim;
}

.qa-steps li::before {
  content: counter(adim);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 50%;
}

.qa-caution {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);
  font-size: 15px;
  line-height: 1.5;
  border-left: 3px solid var(--color-accent);
  background: rgba(var(--ink),0.04);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.qa-caution b { font-weight: 600; }

.qa-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xxs);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(var(--ink),0.08);
}

.qa-chip {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  background: rgba(var(--glass-rgb),0.7);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px rgba(var(--ink),0.08);
  transition: background var(--duration-fast) var(--ease);
}

.qa-chip:hover { background: var(--surface-raised); }

.qa-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  margin-top: var(--space-xs);
}

.qa-actions .button {
  padding: 9px 18px;
  font-size: 15px;
}

.qa-share {
  margin-left: auto;
  font: inherit;
  font-size: 14px;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
}

.qa-share:hover { color: var(--color-text-primary); }

/* Ana sayfa: popüler sorular */
.qa-teaser {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-xxl);
  text-align: left;
}

.qa-teaser a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  border-radius: var(--radius-xl);
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}

.qa-teaser a:hover {
  transform: translateY(-2px);
  box-shadow: var(--glass-shadow-hover);
}

.qa-teaser .arrow {
  flex-shrink: 0;
  color: var(--color-accent);
}

@media (max-width: 767px) {
  .qa summary { padding: var(--space-md); font-size: 17px; }
  .qa-content { padding: 0 var(--space-md) var(--space-md); }
  .qa-teaser { grid-template-columns: 1fr; }
  .qa-group-title { font-size: 21px; }
}

/* ============================================
   PAKTOLOS OKULU — DERSLER
   ============================================ */
.school-progress {
  max-width: 420px;
  margin-top: var(--space-xl);
}

.track {
  padding: var(--space-xxl) 0;
}

.track-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-md);
  margin-bottom: var(--space-lg);
}

.track-head h2 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.track-head p {
  color: var(--color-text-secondary);
}

.lesson-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-md);
}

.lesson-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  min-height: 220px;
  padding: var(--space-lg);
  font: inherit;
  text-align: left;
  color: inherit;
  border: none;
  border-radius: var(--radius-xxl);
  cursor: pointer;
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}

.lesson-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--glass-shadow-hover);
}

.lesson-card:active { transform: scale(0.98); }
.lesson-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.lesson-num {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--color-accent);
}

.lesson-card h3 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.lesson-card p {
  font-size: 15px;
  color: var(--color-text-secondary);
}

.lesson-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: var(--space-md);
  font-size: 13px;
  color: var(--color-text-tertiary);
}

.lesson-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-on-accent);
  background: var(--color-accent);
  border-radius: var(--radius-pill);
}

.lesson-state.done {
  color: var(--color-success);
  background: color-mix(in srgb, var(--positive) 14%, transparent);
}

.lesson-state svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.deeper {
  padding: var(--space-xxl) 0 var(--space-section);
}

.deeper-cards { margin-top: 0; }

.badges-head { margin: var(--space-section) 0 0; }

/* ============================================
   DERS OYNATICI
   ============================================ */
.lesson-player {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: none;
}

.lesson-player::backdrop {
  background: rgba(var(--shadow-rgb),0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: fade-in 0.4s var(--ease) both;
}

.lesson-player.closing::backdrop { animation: fade-out 0.3s var(--ease) both; }

.lp-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  width: min(680px, calc(100% - 48px));
  height: min(760px, calc(100% - 48px));
  background: rgba(var(--glass-rgb),0.82);
  -webkit-backdrop-filter: saturate(180%) blur(40px);
  backdrop-filter: saturate(180%) blur(40px);
  border-radius: var(--radius-xxl);
  box-shadow: 0 30px 80px rgba(var(--shadow-rgb),0.3);
  transform: translate(-50%, -50%);
  animation: panel-in 0.55s var(--ease-out) both;
  overflow: hidden;
}

.lesson-player.closing .lp-panel { animation: panel-out 0.3s var(--ease) both; }

.lp-top {
  padding: var(--space-md) var(--space-lg) 0;
}

.lp-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.lp-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lp-bars {
  display: flex;
  gap: 4px;
}

.lp-bars span {
  flex: 1;
  height: 4px;
  background: rgba(var(--ink),0.1);
  border-radius: 2px;
  overflow: hidden;
}

.lp-bars span::after {
  content: "";
  display: block;
  width: 0;
  height: 100%;
  background: var(--color-accent);
  transition: width var(--duration) var(--ease-out);
}

.lp-bars span.done::after { width: 100%; }

.lp-stage {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lp-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: var(--space-xl) clamp(24px, 6vw, 56px);
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease-out);
}

.lp-card.leaving { opacity: 0; transform: translateX(-28px); }
.lp-card.leaving.back { transform: translateX(28px); }
.lp-card.entering { opacity: 0; transform: translateX(28px); transition: none; }
.lp-card.entering.back { transform: translateX(-28px); }

.lp-kind {
  display: block;
  margin-bottom: var(--space-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
}

.lp-card h2 {
  font-size: clamp(26px, 5vw, 36px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-md);
}

.lp-card > p {
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.lp-example {
  padding: var(--space-lg);
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--color-text-primary);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: var(--radius-xl);
}

.lp-card .quiz-options { margin-top: var(--space-sm); }

.lp-feedback {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration) var(--ease-out);
}

.lp-feedback.open { grid-template-rows: 1fr; }
.lp-feedback > div { overflow: hidden; }
.lp-feedback p { padding-top: var(--space-md); color: var(--color-text-secondary); }
.lp-feedback strong { display: block; font-size: 17px; }
.lp-feedback .ok { color: var(--color-success); }
.lp-feedback .no { color: var(--color-danger); }

.lp-summary {
  list-style: none;
  display: grid;
  gap: var(--space-md);
}

.lp-summary li {
  position: relative;
  padding-left: 40px;
  font-size: 19px;
  line-height: 1.45;
}

.lp-summary li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat,
    var(--color-accent);
}

.lp-done {
  align-items: center;
  text-align: center;
}

.lp-done .result-ring { width: 140px; height: 140px; margin-bottom: var(--space-lg); }
.lp-done .ring-label { padding-top: 46px; }
.lp-done .ring-label strong { font-size: 36px; }

.lp-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xxs);
  margin-top: var(--space-lg);
}

.lp-foot {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg) calc(var(--space-lg) + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(var(--ink),0.06);
}

.lp-foot .button { flex: 1; text-align: center; }
.lp-foot .button-secondary { flex: 0 0 auto; }
.lp-foot .button[hidden] { display: none; }

/* ============================================
   GÜNÜN SORUSU
   ============================================ */
.dq {
  max-width: 820px;
  margin: var(--space-lg) auto 0;
  padding: var(--space-xl);
  border-radius: var(--radius-xxl);
  text-align: left;
}

.dq-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.dq-streak {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.dq-streak svg {
  width: 18px;
  height: 18px;
  fill: var(--color-accent);
}

.dq-week {
  display: flex;
  gap: 6px;
  margin-top: var(--space-md);
}

.dq-week span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-tertiary);
  background: rgba(var(--ink),0.05);
  border-radius: 50%;
}

.dq-week span.on {
  color: var(--text-on-accent);
  background: var(--color-accent);
}

.dq-week span.today {
  box-shadow: 0 0 0 2px var(--color-accent);
}

.dq .quiz-situation { margin-bottom: var(--space-xs); }
.dq .quiz-question { font-size: 20px; }

/* ============================================
   KARNEM
   ============================================ */
.report {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xl);
  align-items: center;
  padding: var(--space-xl);
  border-radius: var(--radius-xxl);
}

.report .result-ring { margin: 0; }

.report-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.report-tile {
  padding: var(--space-md);
  background: rgba(var(--ink),0.04);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease);
}

.report-tile:hover { background: rgba(var(--ink),0.07); }

.report-tile dt {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.report-tile dd {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.report-tile dd small {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-tertiary);
}

.next-step {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-xxl);
  text-decoration: none;
}

.next-step .eyebrow { margin-bottom: 2px; }
.next-step h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.next-step p { font-size: 15px; color: var(--color-text-secondary); }
.next-step .button { flex-shrink: 0; margin-left: auto; }

.badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xxs);
  padding: var(--space-lg) var(--space-sm);
  text-align: center;
  border-radius: var(--radius-xl);
}

.badge-medal {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-xxs);
  border-radius: 50%;
  color: var(--color-text-tertiary);
  background: rgba(var(--ink),0.06);
}

.badge-medal svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.badge-item.on .badge-medal {
  color: var(--text-on-accent);
  background: var(--data-1);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent), inset 0 1px 0 rgba(255,255,255,0.5);
}

.badge-item strong {
  font-size: 15px;
  font-weight: 600;
}

.badge-item span {
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-text-secondary);
}

.badge-item:not(.on) strong { color: var(--color-text-secondary); }

.report-note {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xxl);
  font-size: 13px;
  color: var(--color-text-tertiary);
}

.report-note button {
  font: inherit;
  font-size: 13px;
  color: var(--color-danger);
  background: none;
  border: none;
  cursor: pointer;
}

@media (max-width: 767px) {
  .lp-panel {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    transform: none;
    animation-name: sheet-up;
    padding-top: env(safe-area-inset-top);
  }

  .lesson-player.closing .lp-panel { animation-name: sheet-down; }
  .lp-card { justify-content: flex-start; padding-top: var(--space-xl); }

  .dq { padding: var(--space-lg); }

  .report { grid-template-columns: 1fr; justify-items: center; padding: var(--space-lg); }
  .report-tiles { width: 100%; }
  .next-step { flex-wrap: wrap; padding: var(--space-lg); }
  .next-step .button { margin-left: 0; width: 100%; text-align: center; }
}

/* ============================================
   ŞİRKET LABORATUVARI
   ============================================ */
.lab-hero { padding-bottom: var(--space-xl); }

.lab { padding-bottom: var(--space-section); }

.lab-company {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-md);
  border-radius: var(--radius-xl);
}

.lab-company strong { display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.lab-company span { font-size: 14px; color: var(--color-text-secondary); }

.lab-logo {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-on-accent);
  background: var(--data-1);
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(42,120,200,0.3), inset 0 1px 0 rgba(255,255,255,0.35);
}

/* Senaryolar */
.scenarios {
  display: grid;
  min-width: 0;
  max-width: 100%;
  grid-auto-flow: column;
  grid-auto-columns: minmax(170px, 1fr);
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  padding: 4px 2px var(--space-xs);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.scenarios::-webkit-scrollbar { display: none; }

.scenario {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--space-sm);
  font: inherit;
  text-align: left;
  color: inherit;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}

.scenario:hover { transform: translateY(-2px); }
.scenario:active { transform: scale(0.97); }
.scenario:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.scenario strong { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.scenario > span:last-child { font-size: 12px; color: var(--color-text-secondary); }

.scenario-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 6px;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 10px;
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}

.scenario-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scenario[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: inset 0 0 0 2px var(--color-accent), var(--glass-shadow);
}

.scenario[aria-pressed="true"] .scenario-icon {
  color: var(--text-on-accent);
  background: var(--color-accent);
}

/* Yerleşim */
.lab-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.lab-controls {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-md));
}

.lab-dial {
  padding: var(--space-lg);
  border-radius: var(--radius-xxl);
}

.lab-dial summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  font-size: 17px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.lab-dial summary::-webkit-details-marker { display: none; }
.lab-dial:not([open]) summary { margin-bottom: 0; }
.lab-dial .qa-chevron { font-size: 14px; color: var(--color-text-secondary); }
.lab-dial[open] .qa-chevron { transform: rotate(180deg); }

.lab-group + .lab-group {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(var(--ink),0.08);
}

.lab-group-title {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  color: var(--color-text-tertiary);
}

.lab-group .num-field { margin-bottom: var(--space-sm); }
.lab-group .num-input input { width: 7ch; }

.lab-reset { width: 100%; margin-top: var(--space-md); }

.lab-board {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

/* Hikâye kartı */
.lab-story {
  position: relative;
  padding: var(--space-lg) var(--space-xl);
  color: var(--color-secondary);
  background: var(--dark);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.lab-story-inner { transition: opacity 0.35s var(--ease), transform 0.45s var(--ease-out); }
.lab-story-inner.entering { opacity: 0; transform: translateY(10px); }

.lab-story h3 {
  margin: 2px 0 var(--space-xs);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.lab-story p {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(245,245,240,0.82);
}

.lab-story b { color: #FFFFFF; font-weight: 600; }
.lab-story a { color: inherit; text-decoration-color: var(--text-on-dark-secondary); }
.lab-story .lab-warn { color: #E07A7A; }

/* Ana göstergeler */
.lab-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

.kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-md);
  border-radius: var(--radius-xl);
}

.kpi-label { font-size: 13px; color: var(--color-text-secondary); }

.kpi-value {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.delta {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.delta[data-yon="ayni"] { color: var(--color-text-tertiary); font-weight: 500; }

.negative { color: var(--color-danger) !important; }

/* Paneller */
.lab-panel {
  padding: var(--space-lg);
  border-radius: var(--radius-xxl);
}

.lab-panel-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-xxs) var(--space-md);
}

.lab-panel h2 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }

.lab-panel-sub {
  margin: 2px 0 var(--space-md);
  font-size: 14px;
  color: var(--color-text-secondary);
}

.lab-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.lab-legend .key-rect + * { margin-right: 6px; }

.lab-equation {
  padding: 3px 10px;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: rgba(var(--ink),0.06);
  border-radius: var(--radius-pill);
}

/* Şelale */
.waterfall { display: grid; gap: 4px; }

.wf-row {
  display: grid;
  grid-template-columns: 11rem 1fr 5.5rem;
  align-items: center;
  gap: var(--space-sm);
  padding: 3px 6px;
  margin: 0 -6px;
  border-radius: var(--radius-sm);
}

.wf-label { font-size: 14px; color: var(--color-text-secondary); }
.wf-total .wf-label { font-weight: 600; color: var(--color-text-primary); }

.wf-track { position: relative; height: 22px; }

.wf-zero {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 1px;
  background: rgba(var(--ink),0.18);
}

.wf-bar {
  position: absolute;
  top: 3px;
  height: 16px;
  border-radius: 4px;
  transition: left 0.6s var(--ease-out), width 0.6s var(--ease-out), background var(--duration-fast) var(--ease);
}

.wf-row[data-tur="toplam"] .wf-bar { background: var(--chart-2); }
.wf-row[data-tur="negatif"] .wf-bar { background: var(--color-danger); }
.wf-row[data-tur="eksi"] .wf-bar { background: var(--chart-1); opacity: 0.85; }
.wf-row[data-tur="arti"] .wf-bar { background: var(--chart-2); opacity: 0.55; }

.wf-value {
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.wf-row[data-tur="negatif"] .wf-value { color: var(--color-danger); }

.changed { animation: flash 1.1s var(--ease-out); }

@keyframes flash {
  from { background: color-mix(in srgb, var(--accent) 22%, transparent); }
  to { background: transparent; }
}

/* Canlı bilanço */
.balance-live {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: var(--space-md);
}

.bal-side {
  display: grid;
  grid-template-columns: 88px 1fr;
  grid-template-rows: auto 1fr;
  gap: var(--space-xs) var(--space-md);
}

.bal-title {
  grid-column: 1 / -1;
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  color: var(--color-text-tertiary);
}

.bal-stage {
  display: flex;
  align-items: flex-end;
  height: 280px;
}

.bal-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  width: 100%;
  height: 100%;
}

.bal-seg {
  min-height: 0;
  border-radius: 4px;
  transition: height 0.6s var(--ease-out);
}

.bal-list {
  list-style: none;
  display: grid;
  align-content: end;
  gap: 4px;
}

.bal-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 3px 6px;
  font-size: 13px;
  border-radius: var(--radius-sm);
}

.bal-list li span { color: var(--color-text-secondary); }
.bal-list li b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bal-list li[hidden] { display: none; }

.bal-eq {
  align-self: center;
  font-size: 36px;
  font-weight: 300;
  color: var(--color-text-tertiary);
}

/* Oranlar */
.lab-ratios {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xs);
}

.ratio {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-sm);
  text-decoration: none;
  background: rgba(var(--ink),0.04);
  border-radius: var(--radius-lg);
  transition: background var(--duration-fast) var(--ease);
}

.ratio:hover { background: rgba(var(--ink),0.08); }
.ratio-name { font-size: 13px; color: var(--color-text-secondary); }
.ratio-value { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.lab-warn { color: var(--color-danger); }

.lab-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-tertiary);
}

/* ============================================
   FİNANSAL CHECK-UP
   ============================================ */
.checkup-wrap { padding-bottom: var(--space-section); }

.checkup-results { display: grid; gap: var(--space-lg); }

.checkup-summary {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.mini-ring { flex-shrink: 0; width: 104px; height: 104px; margin: 0; }
.mini-ring .ring-label { padding-top: 34px; }
.mini-ring .ring-label strong { font-size: 30px; }

.checkup-summary h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin: 2px 0 4px; }
.checkup-summary p { color: var(--color-text-secondary); }
.checkup-summary b { color: var(--color-text-primary); font-weight: 600; }

.flow { display: grid; gap: var(--space-xs); }

.flow-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.flow-sum { font-size: 14px; color: var(--color-text-secondary); }
.flow-sum b { color: var(--color-text-primary); }

.flow-bar {
  display: flex;
  gap: 2px;
  height: 14px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(var(--ink),0.06);
}

.flow-bar span { transition: width 0.6s var(--ease-out); }

.flow-legend {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px var(--space-md);
}

.flow-legend li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.flow-legend span { color: var(--color-text-secondary); }
.flow-legend b { font-weight: 600; font-variant-numeric: tabular-nums; }
.flow-legend small { font-weight: 500; color: var(--color-text-tertiary); }

.meters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.meter {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  padding: var(--space-md);
  background: rgba(var(--ink),0.04);
  border-radius: var(--radius-lg);
}

.meter-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xs); }
.meter-name { font-size: 14px; font-weight: 600; }
.meter-value { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.meter-track {
  position: relative;
  height: 8px;
  margin: 6px 0 4px;
  border-radius: var(--radius-pill);
  background: rgba(var(--ink),0.06);
}

.meter-zone { position: absolute; top: 0; bottom: 0; }
.meter-zone:first-child { border-radius: 4px 0 0 4px; }
.meter-zone:nth-last-child(2) { border-radius: 0 4px 4px 0; }
.meter-zone[title="Güçlü"] { background: color-mix(in srgb, var(--positive) 28%, transparent); }
.meter-zone[title="Geliştirilebilir"] { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.meter-zone[title="Dikkat"] { background: rgba(255,59,48,0.24); }

.meter-mark {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  background: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.06);
  transform: translate(-50%, -50%);
  transition: left 0.6s var(--ease-out);
}

.meter-note { font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); }
.meter-note b { color: var(--color-text-primary); font-weight: 600; }

.meter-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.meter-links .qa-chip { font-size: 13px; padding: 5px 10px; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 6px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-pill);
}

.status-pill svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.status-pill[data-durum="iyi"] { color: var(--positive); background: color-mix(in srgb, var(--positive) 16%, transparent); }
.status-pill[data-durum="orta"] { color: var(--caution); background: var(--caution-soft); }
.status-pill[data-durum="dikkat"] { color: var(--negative); background: var(--negative-soft); }

@media (max-width: 1100px) {
  .lab-kpis { grid-template-columns: repeat(2, 1fr); }
  .lab-ratios { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .lab-grid { grid-template-columns: minmax(0, 1fr); }
  .lab-controls { position: static; order: 2; }
  .meters { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .lab-story { padding: var(--space-lg); }
  .lab-story h3 { font-size: 22px; }
  .lab-panel { padding: var(--space-md); }
  .kpi-value { font-size: 22px; }
  .wf-row { grid-template-columns: 7.5rem 1fr 4.2rem; gap: var(--space-xs); }
  .wf-label, .wf-value { font-size: 12.5px; }
  .balance-live { grid-template-columns: 1fr 1fr; }
  .bal-eq { display: none; }
  .bal-side { grid-template-columns: 1fr; }
  .bal-stage { height: 200px; justify-content: center; }
  .bal-col { width: 72px; }
  .bal-list li { font-size: 12px; padding: 2px 4px; }
  .checkup-summary { gap: var(--space-md); }
  .mini-ring { width: 84px; height: 84px; }
  .mini-ring .ring-label { padding-top: 26px; }
  .mini-ring .ring-label strong { font-size: 24px; }
  .flow-legend { grid-template-columns: 1fr; }
}

/* Öne çıkan: laboratuvar ve check-up kartları */
.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
  text-align: left;
}
.spotlight {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.spotlight:hover { transform: translateY(-4px); }
.spotlight h3 { font-size: 26px; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
.spotlight p { color: var(--color-text-secondary); margin: 0; flex: 1; }
.spotlight .eyebrow { margin: 0; }
.spot-visual { height: 96px; margin-bottom: var(--space-sm); }
.spot-wf { display: flex; align-items: flex-end; gap: 10px; }
.spot-wf i {
  position: relative;
  flex: 1;
  max-width: 44px;
  height: 100%;
}
.spot-wf i::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: var(--o, 0%);
  height: var(--h);
  border-radius: 6px;
  background: var(--chart-1);
  transform-origin: bottom;
  animation: spot-grow 3.2s var(--ease) infinite alternate;
}
.spot-wf i:first-child::before, .spot-wf i:last-child::before { background: var(--chart-2); }
.spot-wf i:nth-child(2)::before { animation-delay: 0.15s; }
.spot-wf i:nth-child(3)::before { animation-delay: 0.3s; }
.spot-wf i:nth-child(4)::before { animation-delay: 0.45s; }
.spot-wf i:nth-child(5)::before { animation-delay: 0.6s; }
@keyframes spot-grow { from { transform: scaleY(0.55); } to { transform: scaleY(1); } }
.spot-ring { position: relative; width: 96px; }
.spot-ring svg { width: 96px; height: 96px; transform: rotate(-90deg); }
.spot-ring circle { fill: none; stroke: rgba(var(--ink), 0.1); stroke-width: 7; }
.spot-ring .spot-ring-fill {
  stroke: var(--color-accent);
  stroke-linecap: round;
  stroke-dasharray: 163.4;
  stroke-dashoffset: 32.7;
  animation: spot-ring 3.2s var(--ease) infinite alternate;
}
@keyframes spot-ring { from { stroke-dashoffset: 98; } to { stroke-dashoffset: 32.7; } }
.spot-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; letter-spacing: -0.02em; }
@media (prefers-reduced-motion: reduce) {
  .spot-wf i::before, .spot-ring .spot-ring-fill { animation: none; }
}
@media (max-width: 767px) {
  .spotlight-grid { grid-template-columns: 1fr; }
  .spotlight h3 { font-size: 22px; }
}

/* ============================================
   AKIŞ — kaydırdıkça ilerleyen infografikler (akis.js)
   ============================================ */
.gizli {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.akis {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(24px, 4vw, 56px);
  width: min(1080px, calc(100vw - 48px));
  margin: var(--space-xl) 0;
  margin-left: calc(50% - min(540px, 50vw - 24px));
}

.akis-sahne {
  position: sticky;
  top: calc(var(--nav-height) + 5vh);
  align-self: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(76vh, 620px);
  padding: clamp(20px, 3vw, 36px);
  border-radius: var(--radius-xxl);
  overflow: hidden;
}

.akis-adimlar { padding: 22vh 0 30vh; }

.akis-adim {
  display: flex;
  align-items: center;
  min-height: 72vh;
}
.akis-adim:first-child { min-height: 50vh; align-items: flex-start; }
.akis-adim:last-child { min-height: 50vh; }

.akis-adim > div {
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease-out);
}
.akis.hazir .akis-adim > div { opacity: 0.28; transform: scale(0.97); }
.akis.hazir .akis-adim.aktif > div { opacity: 1; transform: none; }
.akis-adim h3 { margin: 0 0 var(--space-xs); font-size: 21px; letter-spacing: -0.02em; line-height: 1.25; }
.akis-adim p { margin: 0; color: var(--color-text-secondary); line-height: 1.55; }
.akis-adim p + p { margin-top: var(--space-sm); }
.akis-adim strong { color: var(--color-text-primary); }
.akis-adim a.qa-chip { display: inline-flex; margin-top: var(--space-md); }
.akis-sayac {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  color: var(--color-accent);
}

/* Sahnenin altındaki küçük not */
.akis-not { margin: calc(-1 * var(--space-lg)) 0 0; text-align: center; font-size: 13px; color: var(--color-text-secondary); }

.akis-altyazi { display: none; }
@keyframes altyazi-gel { from { opacity: 0; transform: translateY(8px); } }

/* JS yokken sahne gizlenir, metin tek sütunda okunur */
html:not(.js) .akis:not(.hazir) { display: block; }
html:not(.js) .akis:not(.hazir) .akis-sahne { display: none; }
html:not(.js) .akis:not(.hazir) .akis-adimlar { padding: 0; }
html:not(.js) .akis:not(.hazir) .akis-adim { min-height: 0; margin-bottom: var(--space-md); }

/* Terazi */
.tz { display: flex; flex-direction: column; gap: var(--space-md); }
.tz-svg { width: 100%; height: auto; overflow: visible; }
.tz-direk, .tz-ip, .tz-tepsi { fill: none; stroke: rgba(var(--ink), 0.35); stroke-width: 2; stroke-linecap: round; }
.tz-direk { stroke: rgba(var(--ink), 0.5); stroke-width: 4; }
.tz-tepsi { stroke: rgba(var(--ink), 0.55); stroke-width: 3; }
.tz-tepe { fill: var(--color-accent); }
.tz-kol rect { fill: rgba(var(--ink), 0.78); }
.tz-kol circle { fill: rgba(var(--ink), 0.78); }
.tz-mil { fill: var(--color-accent); stroke: var(--surface-raised, #fff); stroke-width: 3; }
.tz-kol, .tz-kefe {
  transform-box: view-box;
  transform-origin: 220px 60px;
  transition: transform 1.1s var(--ease);
}
.tz-blok {
  opacity: 0;
  transform: translateY(-60px);
  transform-box: fill-box;
  transition: opacity 0.35s var(--ease), transform 0.7s var(--ease);
}
.tz-blok.var { opacity: 1; transform: none; }
.tz-durum {
  align-self: center;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: rgba(var(--ink), 0.06);
  color: var(--color-text-secondary);
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.tz-durum.denge { background: color-mix(in srgb, var(--positive) 14%, transparent); color: var(--positive); }
[data-theme="dark"] .tz-durum.denge { color: var(--positive); }
.tz-listeler { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.tz-baslik {
  display: flex;
  justify-content: space-between;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(var(--ink), 0.1);
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  color: var(--color-text-secondary);
}
.tz-baslik b { color: var(--color-text-primary); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.tz-liste ul { list-style: none; margin: 0; padding: 0; }
.tz-liste li {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 3px 6px;
  margin: 0 -6px;
  border-radius: 8px;
  font-size: 13px;
  opacity: 0.25;
  transition: opacity 0.4s var(--ease), background 0.6s var(--ease);
}
.tz-liste li.var { opacity: 1; }
.tz-liste li.yeni { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.tz-liste li i { width: 10px; height: 10px; border-radius: 3px; }
.tz-liste li b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* 100 liranın yolculuğu */
.yl { display: flex; flex-direction: column; gap: var(--space-md); }
.yl-ust { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-sm); }
.yl-etiket { display: block; font-size: 14px; font-weight: 600; color: var(--color-text-secondary); }
.yl-sayi { display: block; font-size: clamp(34px, 5vw, 52px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.yl-not { font-size: 12px; color: var(--color-text-secondary); white-space: nowrap; }
.yl-izgara {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: clamp(3px, 0.6vw, 6px);
  aspect-ratio: 1;
  width: min(100%, 42vh);
  margin: 0 auto;
}
.yl-izgara i {
  border-radius: 22%;
  background: var(--chart-2);
  transition: background-color 0.45s var(--ease), transform 0.6s var(--ease-out), opacity 0.45s var(--ease);
}
.yl-izgara i.dusen { background: var(--chart-1); transform: scale(0.82); }
.yl-izgara i.bos { background: rgba(var(--ink), 0.07); transform: scale(0.6); }
.yl-izgara i.kismi {
  background: linear-gradient(90deg, var(--chart-2) var(--pay), var(--chart-1) var(--pay));
}
.yl-defter { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--space-md); }
.yl-defter li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 6px;
  margin: 0 -6px;
  border-radius: 6px;
  font-size: 12.5px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease-out), background 0.6s var(--ease);
}
.yl-defter li.var { opacity: 1; transform: none; }
.yl-defter li.yeni { background: color-mix(in srgb, var(--data-2) 12%, transparent); }
.yl-defter li span { color: var(--color-text-secondary); }
.yl-defter li b { font-variant-numeric: tabular-nums; color: var(--chart-1); }

/* Kâr ≠ nakit */
.kn { display: flex; flex-direction: column; gap: var(--space-md); }
.kn-ust { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-sm); flex-wrap: wrap; }
.kn-ust span:first-child { display: block; font-size: 14px; font-weight: 600; color: var(--color-text-secondary); }
.kn-ust b { display: block; font-size: clamp(34px, 5vw, 52px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.kn-anahtar { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-secondary); }
.kn-anahtar i { width: 10px; height: 10px; border-radius: 3px; margin-left: 6px; }
.kn-anahtar i.giren { background: var(--chart-2); }
.kn-anahtar i.cikan { background: var(--chart-1); }
.kn-svg { width: 100%; height: auto; overflow: visible; }
.kn-eksen { stroke: rgba(var(--ink), 0.2); stroke-width: 1; }
.kn-ad { font-size: 12.5px; fill: var(--color-text-secondary); }
.kn-ad.kalin { font-weight: 600; fill: var(--color-text-primary); }
.kn-deger { font-size: 12.5px; font-weight: 600; fill: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.kn-satir.toplam .kn-cubuk, .kn-satir.giren .kn-cubuk { fill: var(--chart-2); }
.kn-satir.cikan .kn-cubuk { fill: var(--chart-1); }
.kn-bag { stroke: rgba(var(--ink), 0.3); stroke-dasharray: 2 3; }
.kn-satir { opacity: 0; transition: opacity 0.4s var(--ease); }
.kn-satir .kn-cubuk { transform: scaleX(0); transition: transform 0.8s var(--ease-out) 0.1s; }
.kn-satir.var { opacity: 1; }
.kn-satir.var .kn-cubuk { transform: none; }
.kn-satir.yeni .kn-ad { fill: var(--color-accent); font-weight: 600; }

/* 1.000 liranın erimesi */
.en { display: flex; flex-direction: column; gap: var(--space-lg); }
.en-zaman {
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(var(--ink), 0.06);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.faizli .en-zaman { background: color-mix(in srgb, var(--positive) 14%, transparent); color: var(--positive); }
[data-theme="dark"] .faizli .en-zaman { color: var(--positive); }
.en-sepetler { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(6px, 1.4vw, 14px); }
.en-sepet {
  position: relative;
  aspect-ratio: 1;
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
.en-sepet.ek:not(.gorunur) { opacity: 0; transform: scale(0.5); }
.en-sepet svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.en-sepet .bos { fill: none; stroke: rgba(var(--ink), 0.22); }
.en-sepet .dolu {
  fill: var(--color-accent);
  stroke: var(--color-accent);
  clip-path: inset(0 calc((1 - var(--dolu, 1)) * 100%) 0 0);
  transition: clip-path 0.9s var(--ease-out);
  transition-delay: inherit;
}
.faizli .en-sepet .dolu { fill: var(--positive); stroke: var(--positive); }
.en-tablo { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); margin: 0; }
.en-tablo div { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-lg); background: rgba(var(--ink), 0.04); }
.en-tablo dt { font-size: 12px; color: var(--color-text-secondary); }
.en-tablo dd { margin: 2px 0 0; font-size: clamp(18px, 2.4vw, 24px); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.en-tablo .vurgu { color: var(--color-accent); }
.faizli .en-tablo .vurgu { color: var(--positive); }
[data-theme="dark"] .faizli .en-tablo .vurgu { color: var(--positive); }

/* ============================================
   ETKİLEŞİMLİ TABLOLAR — oran tablosu ve sektör haritası
   ============================================ */
.oran-tablo, .sektor-harita {
  margin: var(--space-xl) 0;
  padding: clamp(16px, 3vw, 28px);
  border-radius: var(--radius-xxl);
}
.ot-kaydir { position: relative; overflow-x: auto; margin: 0 -8px; padding: 0 8px; }
.ot-tablo, .sh-tablo { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.ot-tablo th, .ot-tablo td, .sh-tablo th, .sh-tablo td { padding: 12px 10px; text-align: left; vertical-align: middle; }
.ot-kose { font-size: 13px; font-weight: var(--weight-medium); letter-spacing: 0; color: var(--color-text-secondary); }
.ot-sirket {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  width: 100%;
  padding: 8px;
  margin: -8px;
  border: 0;
  border-radius: var(--radius-lg);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.3s var(--ease);
}
.ot-sirket:hover { background: rgba(var(--ink), 0.05); }
.ot-sirket[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ot-logo {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(var(--ink), 0.08);
  font-weight: 600;
}
.ot-sirket[aria-pressed="true"] .ot-logo { background: var(--color-accent); color: var(--text-on-accent); }
.ot-sirket span:not(.ot-logo) { font-size: 14px; font-weight: 600; line-height: 1.2; }
.ot-sirket small { font-size: 12px; color: var(--color-text-secondary); }
.ot-satir { cursor: pointer; }
.ot-satir > * { border-top: 1px solid rgba(var(--ink), 0.08); transition: background 0.3s var(--ease), opacity 0.3s var(--ease); }
.ot-satir:hover > *, .ot-satir.acik > * { background: rgba(var(--ink), 0.035); }
.ot-satir:focus-visible { outline: none; }
.ot-satir:focus-visible th { box-shadow: inset 3px 0 0 var(--color-accent); }
.ot-satir th { font-weight: 600; font-size: 14px; white-space: nowrap; }
.ot-satir th span { margin-right: 6px; }
.ot-ok {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1.6px solid var(--color-text-secondary);
  border-bottom: 1.6px solid var(--color-text-secondary);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.35s var(--ease);
}
.ot-satir.acik .ot-ok { transform: translateY(1px) rotate(-135deg); }
.ot-satir td b { display: block; font-size: 17px; letter-spacing: -0.01em; }
.ot-satir td small { font-size: 11px; color: var(--positive); }
[data-theme="dark"] .ot-satir td small { color: var(--positive); }
.ot-cubuk {
  display: block;
  height: 5px;
  margin-top: 6px;
  border-radius: 3px;
  background: rgba(var(--ink), 0.08);
  overflow: hidden;
  position: relative;
}
.ot-cubuk::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--w);
  border-radius: inherit;
  background: var(--chart-2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease-out) var(--g, 0s);
}
.ot-cubuk.eksi::after { background: var(--positive); }
.gorundu .ot-cubuk::after { transform: none; }
.ot-tablo[data-kolon="0"] td:not(:nth-child(2)),
.ot-tablo[data-kolon="1"] td:not(:nth-child(3)),
.ot-tablo[data-kolon="2"] td:not(:nth-child(4)) { opacity: 0.35; }
.ot-tablo[data-kolon="0"] .ot-detay td,
.ot-tablo[data-kolon="1"] .ot-detay td,
.ot-tablo[data-kolon="2"] .ot-detay td { opacity: 1; }
.ot-detay td { padding: 0 10px; }
.ot-detay td > div {
  padding: 4px 0 18px;
  animation: ot-ac 0.45s var(--ease-out);
}
.ot-detay p { margin: 0; max-width: 62ch; color: var(--color-text-secondary); line-height: 1.55; }
.ot-detay .qa-chip { margin-top: var(--space-sm); display: inline-flex; }
@keyframes ot-ac { from { opacity: 0; transform: translateY(-6px); } }
.ot-profil, .sh-bilgi {
  min-height: 3em;
  margin: var(--space-md) 0 0;
  color: var(--color-text-secondary);
  line-height: 1.55;
}
.ot-profil strong, .sh-bilgi strong { color: var(--color-text-primary); }

.sh-tablo thead button {
  padding: 6px 10px;
  margin: -6px -4px;
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(var(--ink), 0.05);
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.sh-tablo thead button:hover { background: rgba(var(--ink), 0.1); }
.sh-tablo thead button[aria-pressed="true"] { background: var(--color-accent); color: var(--text-on-accent); }
.sh-tablo th, .sh-tablo td { text-align: center; }
.sh-tablo .kisa { display: none; }
.sh-tablo thead th:first-child { text-align: left; }
.sh-tablo tbody th { text-align: left; }
.sh-tablo tbody tr > * { border-top: 1px solid rgba(var(--ink), 0.08); background: rgba(var(--glass-rgb), 0.001); }
.sh-tablo tbody th a { display: block; font-weight: 600; font-size: 15px; color: var(--color-text-primary); text-decoration: none; }
.sh-tablo tbody th a:hover { color: var(--color-accent); }
.sh-tablo tbody th small { display: block; font-size: 12px; font-weight: 400; color: var(--color-text-secondary); white-space: nowrap; }
.sh-nokta {
  display: inline-block;
  vertical-align: middle;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.6s var(--ease) var(--g, 0s), opacity 0.3s var(--ease);
}
.sh-anahtar .sh-nokta, .gorundu .sh-nokta { transform: none; }
.sh-nokta.v3 { width: 18px; height: 18px; background: var(--color-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent); }
.sh-nokta.v2 { width: 14px; height: 14px; background: rgba(var(--ink), 0.7); }
.sh-nokta.v1 { width: 12px; height: 12px; border: 2px solid rgba(var(--ink), 0.4); }
.sh-nokta.v0 { width: 14px; height: 2px; border-radius: 1px; background: rgba(var(--ink), 0.25); }
.sh-tablo[data-kolon] td { transition: opacity 0.3s var(--ease), background 0.3s var(--ease); }
.sh-tablo[data-kolon="0"] td:not([data-k="0"]),
.sh-tablo[data-kolon="1"] td:not([data-k="1"]),
.sh-tablo[data-kolon="2"] td:not([data-k="2"]),
.sh-tablo[data-kolon="3"] td:not([data-k="3"]),
.sh-tablo[data-kolon="4"] td:not([data-k="4"]),
.sh-tablo[data-kolon="5"] td:not([data-k="5"]) { opacity: 0.25; }
.sh-anahtar { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: var(--space-sm); font-size: 12.5px; color: var(--color-text-secondary); }
.sh-anahtar > span { display: inline-flex; align-items: center; gap: 8px; }
.sh-anahtar .sh-nokta.v3 { width: 14px; height: 14px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.sh-anahtar .sh-nokta.v2 { width: 11px; height: 11px; }
.sh-anahtar .sh-nokta.v1 { width: 10px; height: 10px; }

/* ============================================
   OKUMA — ilerleme çizgisi
   ============================================ */
/* Sayfanın ilk ekranı en büyük içeriktir: çabuk yerine otursun */
.page-hero .reveal { transition-duration: var(--motion-slow); }

.okuma {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  pointer-events: none;
}
.okuma::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(var(--okuma, 0));
}
.okuma-sure {
  position: absolute;
  right: max(12px, calc(50% - var(--width-content) / 2 + var(--space-md)));
  top: calc(100% + 8px);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(var(--glass-rgb), 0.85);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 4px 14px rgba(var(--shadow-rgb), 0.12);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.okuma-sure.gorunur { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .akis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .akis {
    --akis-h: calc(100svh - var(--nav-height) - var(--tabbar-height) - 44px - env(safe-area-inset-bottom));
    display: block;
    width: auto;
    margin-left: 0;
  }
  .akis-sahne {
    top: calc(var(--nav-height) + 8px);
    z-index: 2;
    height: var(--akis-h);
    min-height: 0;
    padding: 14px 16px;
    justify-content: flex-start;
    border-radius: var(--radius-xl);
  }
  .akis-gorsel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .akis-altyazi {
    display: block;
    flex: none;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(var(--ink), 0.08);
  }
  .akis-altyazi.yeni { animation: altyazi-gel 0.5s var(--ease-out); }
  .akis-altyazi h3 { margin: 0 0 4px; font-size: 17px; letter-spacing: -0.01em; line-height: 1.3; }
  .akis-altyazi p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--color-text-secondary); }
  .akis-altyazi a.qa-chip { display: inline-flex; margin-top: 10px; }
  .akis-altyazi .akis-sayac { margin-bottom: 4px; }
  .akis-adimlar { position: relative; z-index: 1; margin-top: calc(-1 * var(--akis-h)); padding: 0 0 8svh; }
  .akis-adim, .akis-adim:first-child, .akis-adim:last-child { min-height: 58svh; }
  .akis.hazir .akis-adim > div { opacity: 0; pointer-events: none; }
  .akis.hazir .akis-adim.aktif > div { opacity: 0; }
  .yl-izgara { width: min(100%, 30svh); }
  .yl-sayi, .kn-ust b { font-size: 30px; }
  .tz { gap: 10px; }
  .tz-svg { max-height: 30svh; }
  .tz-durum { padding: 4px 12px; font-size: 13px; }
  .tz-baslik { font-size: 11px; padding-bottom: 4px; margin-bottom: 4px; }
  .tz-liste li { padding: 1px 6px; }
  .yl, .kn { gap: 10px; }
  .kn-svg { max-height: 30svh; }
  .tz-liste li { font-size: 12px; }
  .yl-defter li { font-size: 12px; padding: 1px 6px; }
  .en { gap: var(--space-md); }
  .en-tablo div { padding: 8px 10px; }
  .en-tablo dd { font-size: 17px; }
  .ot-tablo th, .ot-tablo td, .sh-tablo th, .sh-tablo td { padding: 10px 6px; }
  .ot-sirket { grid-template-columns: 1fr; justify-items: start; }
  .ot-logo { grid-row: auto; width: 26px; height: 26px; font-size: 13px; margin-bottom: 4px; }
  .ot-sirket span:not(.ot-logo) { font-size: 12.5px; }
  .ot-sirket small { display: none; }
  .ot-satir th { font-size: 13px; white-space: normal; }
  .ot-satir td b { font-size: 15px; }
  .okuma-sure { display: none; }
  .sh-tablo th, .sh-tablo td { padding: 10px 2px; }
  .sh-tablo tbody th { padding-right: 8px; }
  .sh-tablo tbody th a { font-size: 14px; }
  .sh-tablo tbody th small { font-size: 11px; white-space: normal; line-height: 1.3; }
  .sh-tablo thead button { margin: 0; padding: 6px 4px; border-radius: 10px; font-size: 10.5px; line-height: 1.15; white-space: normal; }
  .sh-tablo .uzun { display: none; }
  .sh-tablo .kisa { display: inline; }
  .sh-nokta.v3 { width: 14px; height: 14px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
  .sh-nokta.v2 { width: 11px; height: 11px; }
  .sh-nokta.v1 { width: 10px; height: 10px; }
}

/* ============================================
   ANA SAYFA (tasarım sistemi v2)
   Sıra: hero → dört sayı → temeller → faiz zinciri → veri hikâyesi →
   rehberler → araçlar → kapanış
   ============================================ */

/* Giriş sırası: zemin → menü → başlık → metin → eylemler → görsel.
   Yalnızca ilk açılışta; sayfa geçişiyle gelindiyse geçişin kendisi yeterli. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .giris { animation: giris-yuksel var(--motion-story) var(--ease) both; animation-delay: calc(var(--sira, 0) * 110ms + 80ms); }
  html[data-gecis] .giris { animation: none; }
  html.ilk-acilis .nav-bar { animation: giris-sol var(--motion-slow) var(--ease) both; animation-delay: 60ms; }
  html.ilk-acilis .nav-bar .logo-mark { animation: sikke-darp 700ms var(--ease) 120ms both; }
}
@keyframes giris-yuksel { from { opacity: 0; transform: translateY(16px); } }
@keyframes giris-sol { from { opacity: 0; } }
@keyframes sikke-darp {
  0%   { opacity: 0; transform: translateY(-10px) scale(1.3); }
  60%  { opacity: 1; transform: scale(0.94); }
  100% { transform: none; }
}

/* ---------- Giriş sahnesi ----------
   Ortada serif başlık; çevresinde dört "yüzen parça": sitedeki araçlardan
   kesitler. Parçalar örnek rakam taşır ve üzerlerinde "Örnek" yazar. */
.sahne {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  min-height: min(820px, calc(100svh - var(--nav-height)));
  padding-top: clamp(64px, 12vw, 176px);
  padding-bottom: clamp(160px, 16vw, 220px);
  overflow-x: clip;
}
.sahne::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -20%;
  pointer-events: none;
  background:
    radial-gradient(28% 34% at 50% 48%, var(--glow-warm), transparent 72%),
    radial-gradient(22% 26% at 40% 38%, var(--glow-sun), transparent 70%),
    radial-gradient(22% 28% at 60% 60%, var(--glow-rose), transparent 70%);
  filter: blur(40px);
  animation: isik-nefes 16s var(--ease-in-out) infinite alternate;
}
.sahne-metin { position: relative; z-index: 1; max-width: 900px; text-align: center; }
.sahne h1 {
  font-size: var(--text-hero);
  line-height: 1.08;
  letter-spacing: var(--tracking-display) !important;
}
.sahne .govde-giris { max-width: 44ch; margin: var(--s-24) auto 0; }
.sahne .hero-eylemler { justify-content: center; align-items: center; }

.sahne-parcalar { position: absolute; inset: 0; pointer-events: none; }
.parca {
  position: absolute;
  display: grid;
  gap: var(--s-8);
  width: 240px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--text-caption);
  pointer-events: auto;
  transition: box-shadow var(--motion-normal) var(--ease);
}
.parca:hover { box-shadow: var(--shadow-float), 0 0 0 1px var(--border-strong); }
.parca-bas { display: flex; justify-content: space-between; gap: var(--s-8); font-weight: var(--weight-medium); }
.parca-etiket { flex: none; align-self: start; padding: 1px 8px; border-radius: var(--radius-full); background: var(--surface); color: var(--text-muted); font-size: 12px; font-weight: var(--weight-book); }
.parca-alt { color: var(--text-muted); }
.parca-sayi { font-size: 22px; font-weight: var(--weight-semibold); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.parca-tablo { display: grid; gap: 2px; }
.parca-tablo > span { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid var(--border); }
.parca-tablo i { font-style: normal; color: var(--text-secondary); }
.parca-tablo b { font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
.parca-cubuklar { display: flex; align-items: flex-end; gap: 6px; height: 40px; }
.parca-cubuklar i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: var(--data-1); opacity: 0.85; }
.parca-halka-ic { position: relative; display: grid; place-items: center; width: 92px; height: 92px; margin: var(--s-4) auto; }
.parca-halka-ic svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.parca-halka-ic circle { fill: none; stroke-width: 2.5; }
.parca-halka-ic .iz { stroke: var(--surface-secondary); }
.parca-halka-ic .dolu { stroke: var(--peach-ink); stroke-linecap: round; }
.parca-halka-ic b { font-size: 20px; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.parca-halka { width: 180px; text-align: center; }
.parca-halka .parca-bas { text-align: left; }
.parca-egri { width: 100%; height: 44px; overflow: visible; }
.parca-egri path { fill: none; stroke: var(--peach-ink); stroke-width: 1.5; stroke-linecap: round; }
.parca-egri circle { fill: var(--peach-ink); }
.parca-sor {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  width: 380px;
  padding: var(--s-12) var(--s-12) var(--s-12) var(--s-20);
  border: 0;
  border-radius: var(--radius-m);
  font: var(--weight-regular) var(--text-small)/1.4 var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.parca-sor-yazi { flex: 1; color: var(--text-muted); }
.parca-sor-dugme { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--text-on-accent); }
.parca-sor-dugme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Yerleşim: masaüstünde başlığın çevresine dağılır */
/* Konumlar sahnenin kenarına göre; dar masaüstünde kenardan biraz taşar */
.parca-alim { left: 0; top: 7%; width: 210px; }
.parca-halka { right: 0; top: 26%; }
.parca-cizgi { left: 4%; bottom: 14%; }
.parca-sor { left: 50%; bottom: 5%; margin-left: -110px; }
@media (max-width: 1279px) {
  .parca-alim { left: -28px; top: 3%; width: 190px; }
  .parca-halka { right: -20px; top: 8%; width: 170px; }
  .parca-cizgi { left: -16px; }
  .parca-sor { left: auto; right: var(--gutter); margin-left: 0; }
}
/* Tablet ve telefonda parçalar başlığın altına, düzenli bir sıraya iner */
@media (max-width: 1023px) {
  .sahne { min-height: 0; padding-bottom: clamp(48px, 8vw, 96px); }
  .sahne-parcalar { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-16); width: 100%; max-width: 560px; margin-top: var(--s-48); }
  .parca { position: static; width: auto; margin: 0; }
  .parca[data-yuzen] { translate: none; }
  .parca-sor { grid-column: 1 / -1; order: -1; }
  .parca-cizgi { display: none; }
}
@media (max-width: 479px) {
  .parca-alim .parca-tablo span:nth-child(2) { display: none; }
}

/* ---------- Pencere: bir uygulama penceresi gibi çerçeve ---------- */
.pencere {
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--surface-elevated);
  box-shadow: var(--shadow-float);
}
.pencere-ust { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 var(--s-16); border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-muted); }
.pencere-ust i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-secondary); }
.pencere-ust span { margin-left: var(--s-12); }
.pencere-govde { display: grid; grid-template-columns: 180px minmax(0, 1fr); }
.pencere-yan { display: grid; align-content: start; gap: 2px; padding: var(--s-16) var(--s-12); border-right: 1px solid var(--border); background: var(--background-alt); }
.pencere-yan a { display: flex; align-items: center; min-height: 36px; padding: 0 var(--s-12); border-radius: var(--radius-s); font-size: var(--text-caption); color: var(--text-secondary); text-decoration: none; }
.pencere-yan a:hover { background: var(--surface); color: var(--text-primary); }
.pencere-yan a[aria-current] { background: var(--surface); color: var(--text-primary); font-weight: var(--weight-medium); }
.pencere-ana { padding: clamp(24px, 4vw, 48px); }
.pencere-h { max-width: 22ch; margin-bottom: var(--s-16); font-size: var(--text-heading); }
.pencere-bolum { position: relative; z-index: 1; }
.pencere-bolum .ana-hero-gorsel { max-width: 640px; margin: 0 auto; }
/* Kaydırırken pencere hafifçe büyüyüp yerine oturur (destekleyen tarayıcılarda) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pencere-bolum .pencere { animation: pencere-otur linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  }
}
@keyframes pencere-otur { from { transform: translateY(48px) scale(0.94); opacity: 0.4; } }
@media (max-width: 767px) {
  .pencere-govde { grid-template-columns: minmax(0, 1fr); }
  .pencere-yan { display: none; }
}

/* ---------- Kaynak şeridi ---------- */
.kaynak-serit { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-24); padding-block: clamp(64px, 8vw, 112px); text-align: center; }
.kaynak-serit > p { font-size: var(--text-small); color: var(--text-muted); }
.kaynak-serit ul { list-style: none; }
.kaynak-serit li { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.01em; color: var(--text-secondary); white-space: nowrap; }

/* ---------- Yeni bir yol: üç kart ---------- */
.yol { padding-top: 0; }
.yol-baslik { max-width: 18ch; margin: 0 auto var(--s-64); font-size: var(--text-section); text-align: center; }
.yol-kartlar { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: var(--s-24); align-items: end; }
.yol-kart { display: grid; gap: var(--s-24); align-content: space-between; min-height: 400px; padding: var(--s-32) var(--s-24); }
.yol-kart h3 { font-size: var(--text-subheading) !important; font-weight: var(--weight-book) !important; letter-spacing: -0.009em; }
.yol-kart-buyuk { min-height: 470px; }
.yol-kart p { font-size: var(--text-small); }
.cizim { width: 100%; max-width: 220px; height: auto; margin-inline: auto; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; color: var(--text-secondary); }
.card-seftali .cizim { color: var(--peach-ink); }
@media (max-width: 899px) {
  .yol-kartlar { grid-template-columns: minmax(0, 1fr); }
  .yol-kart, .yol-kart-buyuk { min-height: 0; }
  .cizim { max-width: 180px; }
}

/* ---------- Öğren: sekmeli liste ve ekranlar ---------- */
.ogren-bolum .section-header { margin-bottom: var(--s-64); }
.ogren-bolum .section-header .btn { justify-self: start; }
.ekran { display: grid; place-items: center; min-height: 420px; padding: clamp(24px, 4vw, 56px); border-radius: var(--radius-l); background: var(--surface); }
.ekran-kart { display: grid; gap: var(--s-16); width: min(100%, 460px); padding: var(--s-24); border-radius: var(--radius-float); background: var(--surface-elevated); box-shadow: var(--shadow-float); }
.ekran-kart > .btn { justify-self: start; }
.ekran-kart p { font-size: var(--text-small); line-height: 1.55; color: var(--text-secondary); }
.ekran-kart .overline { margin: 0; }
.ekran-h { font-size: var(--text-title); font-weight: var(--weight-semibold); line-height: 1.35; }
.ekran-serif { font-family: var(--font-serif); font-size: 2.25rem; font-weight: var(--weight-regular); letter-spacing: -0.015em; }
.ekran-adimlar { display: flex; gap: 6px; }
.ekran-adimlar i { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-secondary); }
.ekran-adimlar i.dolu { background: var(--text-primary); }
.ekran-ara { display: flex; align-items: center; gap: var(--s-8); min-height: 44px; padding: 0 var(--s-16); border-radius: var(--radius-m); background: var(--surface); color: var(--text-primary); }
.ekran-ara svg { width: 18px; height: 18px; fill: none; stroke: var(--text-muted); stroke-width: 1.5; }
.ekran-liste { display: grid; list-style: none; }
.ekran-liste li { border-bottom: 1px solid var(--border); }
.ekran-liste a, .ekran-liste-sade li { display: grid; gap: 2px; padding: var(--s-12) 0; color: inherit; text-decoration: none; }
.ekran-liste a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.ekran-liste strong { font-weight: var(--weight-medium); }
.ekran-liste span { font-size: var(--text-caption); color: var(--text-secondary); }
.ekran-liste-sade .overline { font-size: 12px; }
.ekran-basitce { padding: var(--s-16); border-radius: var(--radius-m); background: var(--surface); }
.ekran-basitce p { color: var(--text-primary); font-size: var(--text-body); }
.ekran-secenek { display: grid; gap: var(--s-8); list-style: none; }
.ekran-secenek li { padding: var(--s-12) var(--s-16); border-radius: var(--radius-m); background: var(--surface); font-size: var(--text-small); }
.ekran-secenek li.dogru { box-shadow: inset 0 0 0 1.5px var(--positive); background: var(--positive-soft); }
@media (max-width: 767px) { .ekran { min-height: 0; padding: var(--s-16); } }

/* ---------- Bant ve koyu bölüm ---------- */
.bolum-bant { background: var(--background-alt); }
/* Zemin değişen bölümlerde üst boşluk korunur (bilesenler: .bolum + .bolum) */
.bolum:is(.bolum-bant, .bolum-koyu, .hikaye-bant),
:is(.bolum-bant, .bolum-koyu, .hikaye-bant) + .bolum { padding-top: clamp(64px, 8vw, 128px); }
.section-header > .btn { justify-self: start; }
/* Koyu bölüm: tokenlar yerelde yeniden tanımlanır; içerideki bileşenler
   kendiliğinden koyu zemine uyar */
.bolum-koyu, .section-dark {
  --background: #17191C;
  --background-alt: #1D1F23;
  --surface: #222428;
  --surface-secondary: #2B2D32;
  --surface-elevated: #24262A;
  --text-primary: #F2F2F3;
  --text-secondary: #B4B7BF;
  --text-muted: #A3A6AF;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.2);
  --accent: #F2F2F3;
  --accent-soft: rgba(242, 242, 243, 0.08);
  --text-on-accent: #17191C;
  /* eski adlar da yerel değerlere bağlansın (:root'ta bir kez çözülürler) */
  --color-accent: var(--accent);
  --color-bg: var(--background);
  --color-surface: var(--surface-secondary);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-tertiary: var(--text-muted);
  --color-border: var(--border);
  --glass-bg: var(--surface);
  --glass-bg-strong: var(--surface);
  background: var(--background);
  color: var(--text-primary);
  overflow: clip;
}
:root[data-theme="dark"] :is(.bolum-koyu, .section-dark) { --background: #0B0C0D; --background-alt: #121314; --surface: #1A1B1E; }
.bolum-koyu .section-header .btn { justify-self: start; }

.sema {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.4fr) 64px minmax(0, 1fr);
  align-items: stretch;
  margin-top: var(--s-16);
  padding: clamp(24px, 4vw, 48px);
  border-radius: var(--radius-l);
  background: linear-gradient(180deg, var(--background-alt), color-mix(in srgb, var(--glow-violet) 40%, var(--background-alt)));
  box-shadow: inset 0 0 0 1px var(--border);
}
.sema ul { display: flex; flex-direction: column; justify-content: space-around; gap: var(--s-12); list-style: none; }
.sema li { padding: var(--s-8) var(--s-16); border-radius: var(--radius-full); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); font-size: var(--text-caption); white-space: nowrap; }
.sema-sag li { border-radius: var(--radius-s); }
.sema-bag { width: 100%; height: 100%; overflow: visible; }
.sema-bag path { fill: none; stroke: var(--border-strong); stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-dasharray: 4 5; animation: sema-ak 1.6s linear infinite; }
@keyframes sema-ak { to { stroke-dashoffset: -18; } }
.sema-orta { display: grid; align-content: center; gap: var(--s-16); padding: var(--s-24); border-radius: var(--radius-float); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.sema-marka { display: flex; align-items: center; gap: var(--s-8); font-family: var(--font-serif); font-size: var(--text-title); }
.sema-marka .logo-mark { width: 18px; height: 18px; fill: var(--brand); }
.sema-merkez { padding: var(--s-16); border-radius: var(--radius-m); background: var(--surface-secondary); font-size: var(--text-caption); text-align: center; }
.sema-uclu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); }
.sema-uclu span { padding: var(--s-12) var(--s-8); border-radius: var(--radius-m); background: var(--surface-secondary); font-size: var(--text-caption); text-align: center; }
.sema-ozellik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-32); margin-top: var(--s-48); }
.sema-ozellik > div { padding-top: var(--s-16); border-top: 1px solid var(--border); }
.sema-ozellik h3 { margin-bottom: var(--s-8); font-size: var(--text-body); font-weight: var(--weight-medium); }
.sema-ozellik p { font-size: var(--text-small); line-height: 1.55; color: var(--text-secondary); }
@media (max-width: 899px) {
  .sema { grid-template-columns: minmax(0, 1fr); gap: var(--s-16); }
  .sema-bag { display: none; }
  .sema ul { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .sema-ozellik { grid-template-columns: minmax(0, 1fr); gap: var(--s-16); }
}

/* ---------- Araçlar: pencere ve çevresindeki sorular ---------- */
.araclar-bolum::before { background: radial-gradient(34% 40% at 50% 58%, var(--glow-rose), transparent 72%), radial-gradient(28% 32% at 58% 50%, var(--glow-violet), transparent 72%); opacity: 0.6; }
.arac-sahne { position: relative; max-width: 720px; margin: var(--s-16) auto 0; padding-block: var(--s-48); }
.arac-ekran { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-24); padding: var(--s-24); }
.arac-girdi { display: grid; gap: var(--s-8); align-content: start; }
.arac-girdi > span { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 var(--s-16); border-radius: var(--radius-m); background: var(--surface); font-size: var(--text-caption); }
.arac-girdi i { font-style: normal; color: var(--text-secondary); }
.arac-girdi b { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.arac-sonuc { display: grid; gap: var(--s-8); align-content: start; }
.arac-taksit { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: var(--weight-semibold); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.arac-sonuc > span { font-size: var(--text-caption); color: var(--text-muted); }
.arac-sonuc dl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); margin: var(--s-8) 0; }
.arac-sonuc dt { font-size: 12px; color: var(--text-muted); }
.arac-sonuc dd { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.arac-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--data-2); }
.arac-bar i { width: var(--p); background: var(--data-1); }
.arac-bar-not { display: flex; gap: var(--s-16); font-size: 12px; color: var(--text-muted) !important; }
.arac-bar-not i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; }
.arac-bar-not .anapara { background: var(--data-1); }
.arac-bar-not .faiz { background: var(--data-2); }
.balon { position: absolute; z-index: 2; max-width: 250px; padding: var(--s-12) var(--s-16); font-size: var(--text-caption); line-height: 1.45; color: var(--text-primary); text-decoration: none; }
.balon:hover { box-shadow: var(--shadow-float), 0 0 0 1px var(--border-strong); }
.balon-1 { left: -200px; top: 18%; }
.balon-2 { right: -210px; top: 44%; }
.balon-3 { left: -150px; bottom: 6%; }
.arac-alt { margin-top: var(--s-48); }
.arac-alti { display: grid; gap: var(--s-8); padding-top: var(--s-16); border-top: 1px solid var(--border); color: inherit; text-decoration: none; }
.arac-alti h3 { font-size: var(--text-body); font-weight: var(--weight-medium); }
.arac-alti:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.arac-alti p { font-size: var(--text-small); line-height: 1.55; color: var(--text-secondary); }
@media (max-width: 1199px) {
  .arac-sahne { padding-block: 0; }
  .balon { position: static; display: block; max-width: none; margin-top: var(--s-12); translate: none !important; }
}
@media (max-width: 639px) {
  .arac-ekran { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Hikâye bandı: gök mavisi ---------- */
.hikaye-bant { --bant: #DCE6F6; background: var(--bant); }
:root[data-theme="dark"] .hikaye-bant { --bant: #172031; }
.hikaye-bant-ic { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: var(--s-48); align-items: center; }
.hikaye-soz { max-width: 22ch; margin-bottom: var(--s-24); font-size: var(--text-heading); }
.hikaye-bant p { max-width: 52ch; color: var(--text-secondary); }
.hikaye-cizim { max-width: 260px; color: var(--text-primary); }
.cizim .nehir { stroke: var(--data-1); }
.cizim .sikke { stroke: var(--brand); }
@media (max-width: 767px) {
  .hikaye-bant-ic { grid-template-columns: minmax(0, 1fr); }
  .hikaye-cizim { max-width: 180px; margin: 0; }
}

/* Ekonomi ağı */
.ag-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ag-bag {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1.25;
  transition: stroke var(--motion-slow) var(--ease), stroke-width var(--motion-slow) var(--ease);
}
.ag-bag.etkin { stroke: var(--accent); stroke-width: 1.75; }
.ag-isaret { fill: var(--accent); transition: opacity var(--motion-normal) var(--ease); }
.ag-isaret.gizli-isaret { opacity: 0; }
.ag-dugum { cursor: pointer; outline: none; }
.ag-hale { fill: var(--accent-soft); opacity: 0; transition: opacity var(--motion-normal) var(--ease); }
.ag-nokta { fill: var(--text-primary); transition: fill var(--motion-normal) var(--ease); }
.ag-ad { font: var(--weight-medium) 15px var(--font-sans); fill: var(--text-secondary); transition: fill var(--motion-normal) var(--ease); }
.ag-dugum.etkin .ag-ad, .ag-dugum.secili .ag-ad { fill: var(--text-primary); }
.ag-dugum.etkin .ag-nokta, .ag-dugum.secili .ag-nokta { fill: var(--accent); }
.ag-dugum.secili .ag-hale, .ag-dugum:focus-visible .ag-hale { opacity: 1; }
.ag-altyazi {
  min-height: 3em;
  max-width: 44ch;
  margin: var(--s-16) auto 0;
  text-align: center;
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--text-secondary);
}
.ag-altyazi.yeni { animation: altyazi-gel var(--motion-slow) var(--ease); }

/* Başlık satırında sağa yaslı bağlantı */
.section-header-satir > div { display: grid; gap: var(--s-16); max-width: 760px; }
.section-header-satir .btn-sade { flex: none; margin-bottom: 4px; }

/* Kompakt gösterge kartı */
.gosterge .anlam-soru { margin: 0 0 var(--s-8); font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--text-primary); }
[data-gostergeler="kompakt"] .gosterge h3 { font-size: var(--text-title); }
[data-gostergeler] { align-items: start; }
[data-gostergeler="kompakt"] .gosterge-ne { font-size: var(--text-small) !important; color: var(--text-secondary) !important; }

/* Faiz zinciri */
.zincir-duzen { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-64); align-items: start; }
.zincir-duzen .section-header { margin-bottom: 0; position: sticky; top: calc(var(--nav-height) + var(--s-32)); }
.zincir-duzen .segmented { justify-self: start; margin-top: var(--s-8); }
.zincir-kutu { padding: var(--s-32); }
.zincir-baslik { font-size: var(--text-title); margin-bottom: var(--s-24); }
.zincir { position: relative; display: grid; gap: 0; list-style: none; }
.zincir li {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--s-16);
  padding-bottom: var(--s-24);
}
.zincir li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 19.5px;
  top: 40px;
  bottom: 4px;
  width: 1px;
  background: var(--border-strong);
}
.zincir-yon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-secondary);
  color: var(--text-primary);
}
.zincir-yon svg { width: 18px; height: 18px; }
.zincir strong { display: block; padding-top: 8px; font-weight: var(--weight-semibold); }
.zincir-fiil { color: var(--text-secondary); font-weight: var(--weight-regular); }
.zincir p { margin-top: 4px; font-size: var(--text-small); line-height: 1.55; color: var(--text-secondary); }
.zincir-bedel { padding: var(--s-16) var(--s-24); border-radius: var(--radius-m); background: var(--surface-secondary); font-size: var(--text-small); line-height: 1.55; }
.zincir-not { margin-top: var(--s-16); color: var(--text-muted); }
@media (prefers-reduced-motion: no-preference) {
  .oynat .zincir li { animation: giris-yuksel var(--motion-slow) var(--ease) both; animation-delay: calc(var(--i) * 120ms); }
  .oynat .zincir-bedel { animation: giris-yuksel var(--motion-slow) var(--ease) both; animation-delay: 650ms; }
}

/* Rehberler */
.rehber-buyuk { justify-content: flex-end; min-height: 360px; padding: var(--s-32); background: var(--dark); box-shadow: none; }
.rehber-buyuk h3 { max-width: 16ch; font-size: clamp(1.5rem, 2.6vw, 2.25rem) !important; line-height: 1.15; color: var(--text-on-dark); }
.rehber-buyuk p { max-width: 44ch; color: var(--text-on-dark-secondary); }
.rehber-buyuk .overline, .rehber-buyuk .meta { color: var(--text-on-dark-secondary); }
.rehber-buyuk .meta { margin-top: 0; }
[data-theme="dark"] .rehber-buyuk { background: var(--surface-elevated); box-shadow: var(--shadow-hairline); }
.rehber-yan { display: grid; gap: var(--s-24); }

/* Araçlar */
.arac-kart { display: flex; flex-direction: column; gap: var(--s-8); }
.arac-kart svg { width: 24px; height: 24px; margin-bottom: var(--s-24); color: var(--text-primary); }
.arac-kart .overline { margin: 0; }
.arac-kart h3 { margin: 0; }

/* Kapanış: solda davet, sağda aralık kapıdan sızan ışık */
.kapanis-ic { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-48); align-items: center; }
.kapanis-ic h2 { max-width: 12ch; font-size: var(--text-section); }
.kapanis-ic .govde-giris { max-width: 42ch; margin-top: var(--s-24); }
.kapanis-ic .hero-eylemler { align-items: center; }
.kapi { max-width: 300px; color: var(--text-primary); }
.kapi .kapi-isik { fill: var(--peach); stroke: none; }
.kapanis .install-card { grid-column: 1 / -1; margin-top: var(--s-32); }
@media (max-width: 767px) {
  .kapanis-ic { grid-template-columns: minmax(0, 1fr); }
  .kapi { max-width: 200px; margin: 0; }
}

@media (max-width: 1099px) {
  .zincir-duzen { grid-template-columns: minmax(0, 1fr); gap: var(--s-32); }
  .zincir-duzen .section-header { position: static; }
}
@media (max-width: 767px) {
  .ag-ad { font-size: 22px; }
  .section-header-satir { flex-direction: column; align-items: flex-start; }
  .zincir-kutu { padding: var(--s-24); }
  .rehber-buyuk { min-height: 280px; padding: var(--s-24); }
}

/* ============================================
   KAVRAM SAYFASI (kavram.html?k=…)
   Okuma genişliği; bölümler arası geniş boşluk, kısa paragraflar.
   ============================================ */
.kavram { padding-top: var(--s-48); padding-bottom: var(--s-96); }
.kv-yukleniyor { display: grid; gap: var(--s-16); padding-top: var(--s-48); }
.kv-bas { margin-bottom: var(--s-32); }
.kv-bas h1 { font-size: var(--text-article); font-weight: var(--weight-semibold); line-height: 1.08; letter-spacing: var(--tracking-display); }
.kv-basitce p { font-size: var(--text-subheading); line-height: 1.4; letter-spacing: var(--tracking-heading); color: var(--text-primary); }
.kv-bolum { margin-top: var(--s-64); }
.kv-bolum > h2 { margin-bottom: var(--s-16); font-size: var(--text-subheading); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-heading); }
.kv-bolum > p, .kv-ornek p, .kv-derin p { font-size: var(--text-body); line-height: var(--leading-body); color: var(--text-primary); }
.kv-bolum > p + p, .kv-derin p + p { margin-top: var(--s-16); }
.kv-liste { display: grid; gap: var(--s-12); list-style: none; }
.kv-liste li { position: relative; padding-left: var(--s-24); line-height: 1.55; }
.kv-liste li::before { content: ""; position: absolute; left: 4px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.kv-ornek { padding-left: var(--s-24); border-left: 2px solid var(--border-strong); }
.kv-ornek p { color: var(--text-secondary); }
.key-takeaway { margin-top: var(--s-64); }
.key-takeaway p { font-size: var(--text-title); }
.kv-derin { margin-top: var(--s-48); }
.kv-derin > div { display: grid; gap: var(--s-16); }
.kv-derin p { color: var(--text-secondary) !important; }
.kv-gorsel { display: grid; gap: var(--s-16); padding: var(--s-24); }
.kv-girdiler { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-16); }
.kv-ozet { font-size: var(--text-body); line-height: 1.5; }
.kv-ozet b { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.kv-mini { padding: var(--s-24); }
.kv-zincir { display: grid; gap: var(--s-16); }
.kv-zincir .segmented { justify-self: start; }
.kv-ilgili { margin-top: var(--s-64); }
.kv-sirali { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-16); margin-top: var(--s-64); }
.kv-sirali strong { font-weight: var(--weight-semibold); }
.kv-sonraki { text-align: right; align-items: flex-end; }
.kv-uyari { margin-top: var(--s-32); color: var(--text-muted); }
@media (max-width: 767px) {
  .kavram { padding-top: var(--s-24); }
  .kv-bolum { margin-top: var(--s-48); }
}

/* ============================================
   EKONOMİ HARİTASI (ekonomi-haritasi.html, harita.js)
   Akış türü çizgi biçimiyle: para düz, kredi kesikli, sermaye noktalı.
   Renk yalnızca "şu an anlatılan" akışı işaretler.
   ============================================ */
.eh-bolum { padding-bottom: var(--s-64); }
.eh-arac { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-16); margin-bottom: var(--s-24); }
.eh-filtreler { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.eh-filtre {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  min-height: 36px;
  padding: 0 var(--s-12);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-primary);
  font: var(--weight-medium) var(--text-small)/1 var(--font-sans);
  cursor: pointer;
  transition: opacity var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.eh-filtre[aria-pressed="false"] { opacity: 0.45; border-style: dashed; }
.eh-ornek { width: 28px; height: 8px; overflow: visible; }
.eh-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-32); align-items: start; }
.eh-figur { margin: 0; padding: var(--s-16); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-hairline); }
.eh-svg { display: block; width: 100%; height: auto; overflow: visible; }

.eh-akis { fill: none; stroke: var(--text-muted); stroke-width: 1.5; stroke-linecap: round; transition: stroke var(--motion-normal) var(--ease), opacity var(--motion-normal) var(--ease), stroke-width var(--motion-normal) var(--ease); }
.eh-kredi { stroke-dasharray: 7 5; }
.eh-sermaye { stroke-dasharray: 1.5 5; stroke-width: 2; }
.eh-akis.eh-etkin { stroke: var(--accent); stroke-width: 2.25; }
.eh-akis.eh-gecmis { stroke: var(--text-primary); }
.eh-akis.eh-soluk { opacity: 0.25; }
.eh-ok { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.eh-ok-silik { stroke: var(--text-muted); }
.eh-ok-etkin { stroke: var(--accent); }
.eh-ok-gecmis { stroke: var(--text-primary); }
.eh-nokta { fill: var(--accent); }

.eh-dugum { cursor: pointer; outline: none; transition: opacity var(--motion-normal) var(--ease); }
.eh-dugum rect { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; transition: fill var(--motion-fast) var(--ease), stroke var(--motion-fast) var(--ease); }
.eh-dugum:hover rect { stroke: var(--text-secondary); }
.eh-dugum:focus-visible rect { stroke: var(--accent); stroke-width: 2; }
.eh-dugum.secili rect { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.eh-dugum.soluk { opacity: 0.4; }
.eh-ad { font: var(--weight-semibold) 15px var(--font-sans); fill: var(--text-primary); }
.eh-rol { font: 12px var(--font-sans); fill: var(--text-secondary); }
.eh-etiket rect { fill: var(--surface); stroke: var(--border); }
.eh-etiket text { font: var(--weight-medium) 12px var(--font-sans); fill: var(--text-primary); }

.eh-panel { position: sticky; top: calc(var(--nav-height) + var(--s-24)); display: grid; gap: var(--s-12); padding: var(--s-24); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-hairline); animation: altyazi-gel var(--motion-normal) var(--ease); }
.eh-panel .overline { margin: 0; }
.eh-panel h2 { font-size: var(--text-subheading); letter-spacing: var(--tracking-heading); }
.eh-panel h3 { margin-top: var(--s-8); font-size: var(--text-small); font-weight: var(--weight-semibold); color: var(--text-secondary); }
.eh-panel p { font-size: var(--text-small); line-height: 1.6; }
.eh-giris, .eh-senaryo-metin { font-size: var(--text-body) !important; line-height: 1.55 !important; }
.eh-sonuc { padding: var(--s-12) var(--s-16); border-radius: var(--radius-m); background: var(--surface-secondary); }
.eh-panel .btn { justify-self: start; }
.eh-etkiler { display: grid; gap: var(--s-8); list-style: none; font-size: var(--text-small); line-height: 1.55; color: var(--text-secondary); }
.eh-hedef { padding: 0; border: 0; background: none; font: inherit; font-weight: var(--weight-semibold); color: var(--text-primary); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; cursor: pointer; }
.eh-hedef:hover { text-decoration-color: currentColor; }
.eh-tur { display: flex; gap: var(--s-8); margin-top: var(--s-8); }
.eh-liste { margin-top: var(--s-24); }
.eh-not { margin-top: var(--s-16); font-size: var(--text-caption); color: var(--text-muted); }
@media (max-width: 1099px) {
  .eh-duzen { grid-template-columns: 1fr; }
  .eh-panel { position: static; }
}
@media (max-width: 767px) {
  /* Telefonda harita okunur boyutta kalır ve yana kaydırılır */
  .eh-figur { padding: var(--s-8); margin-inline: calc(-1 * var(--gutter)); border-radius: 0; overflow-x: auto; overscroll-behavior-x: contain; }
  .eh-svg { width: 640px; max-width: none; }
  .eh-figur::after { content: "Haritayı yana kaydırabilirsin"; display: block; padding: var(--s-8) var(--s-8) 0; font-size: var(--text-caption); color: var(--text-muted); position: sticky; left: 0; }
}

/* Arama sonucu kategorisi */
.spot-kat { flex: none; align-self: center; margin-left: auto; padding-left: var(--s-12); font-size: var(--text-caption); color: var(--text-muted); white-space: nowrap; }
@media (max-width: 767px) { .spot-kat { display: none; } }

/* ============================================
   MOBİL
   ============================================ */
@media (max-width: 767px) {
  .principle-grid,
  .path,
  .source-grid,
  .calc,
  .sector-grid {
    grid-template-columns: 1fr;
  }

  .principle-grid { gap: var(--space-lg); }
  .path-card { min-height: 220px; padding: var(--space-lg); }
  .calc-inputs, .calc-results { padding: var(--space-lg); }
  .step-item { grid-template-columns: 1fr; gap: var(--space-xxs); }
  .nav { gap: var(--space-sm); }
}

/* ============================================
   AZALTILMIŞ HAREKET TERCİHİ
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after,
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================
   KARANLIK MOD
   tema.js, <html> etiketine data-theme="dark" ekler.
   Önce tema kanalları, sonra açık zemin için özel ayarlanmış
   birkaç bileşen.
   ============================================ */
[data-theme="dark"] {
  --ink: 242,242,243;
  --glass-rgb: 28,29,32;
  --tint-rgb: 22,23,26;
  --shadow-rgb: 0,0,0;
}


/* Açık camın ışık kenarı karanlıkta daha ince */
[data-theme="dark"] .glass::after,
[data-theme="dark"] .path-card::after,
[data-theme="dark"] .source-card::after,
[data-theme="dark"] .sector-box::after,
[data-theme="dark"] .step-row::after,
[data-theme="dark"] .example-company::after,
[data-theme="dark"] .chapter-nav a::after,
[data-theme="dark"] .button-secondary::after,
[data-theme="dark"] .calc-results::after,
[data-theme="dark"] .term-card::after,
[data-theme="dark"] .quiz-option::after,
[data-theme="dark"] .daily-card::after,
[data-theme="dark"] .segmented::after,
[data-theme="dark"] .tool-inputs::after,
[data-theme="dark"] .tool-results::after,
[data-theme="dark"] .tool-card::after,
[data-theme="dark"] .qa::after,
[data-theme="dark"] .qa-teaser a::after,
[data-theme="dark"] .lesson-card::after,
[data-theme="dark"] .dq::after,
[data-theme="dark"] .report::after,
[data-theme="dark"] .next-step::after,
[data-theme="dark"] .badge-item::after,
[data-theme="dark"] .lab-company::after,
[data-theme="dark"] .spotlight::after,
[data-theme="dark"] .akis-sahne::after,
[data-theme="dark"] .akis-adim > div::after,
[data-theme="dark"] .oran-tablo::after,
[data-theme="dark"] .sektor-harita::after,
[data-theme="dark"] .scenario::after,
[data-theme="dark"] .lab-dial::after,
[data-theme="dark"] .lab-panel::after,
[data-theme="dark"] .kpi::after,
[data-theme="dark"] .tabbar::after,
[data-theme="dark"] .sheet-panel::after {
  background: linear-gradient(145deg,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.04) 40%,
    rgba(255,255,255,0.02) 60%,
    rgba(255,255,255,0.08) 100%);
}

/* Koyu bölümler sayfadan ayrışsın */
[data-theme="dark"] .section-dark {
  background: var(--surface);
  border-block: 1px solid var(--border);
}

/* Açık zeminde yoğunlaştırılmış koyu kartlar */
[data-theme="dark"] .demo-card,
[data-theme="dark"] .step-row.example {
  background: rgba(58,58,60,0.6);
}

/* Bilanço çizimi */
[data-theme="dark"] .balance-block.dv { background: #2C2C2E; }
[data-theme="dark"] .balance-block.drv { background: #3A3A3C; }
[data-theme="dark"] .balance-block.kv { background: #48484A; }
[data-theme="dark"] .balance-block.uv { background: #636366; }

[data-theme="dark"] .quiz-option.correct { background: color-mix(in srgb, var(--positive) 16%, transparent); }
[data-theme="dark"] .quiz-option.wrong { background: rgba(255,59,48,0.14); }
[data-theme="dark"] .sheet-example { background: color-mix(in srgb, var(--accent) 12%, transparent); }
[data-theme="dark"] mark { background: color-mix(in srgb, var(--accent) 35%, transparent); }
[data-theme="dark"] .toast { background: rgba(58,58,60,0.9); }
[data-theme="dark"] .install-icon { box-shadow: 0 0 0 0.5px rgba(255,255,255,0.15); }

[data-theme="dark"] .lab-story { background: var(--surface-elevated); box-shadow: 0 0 0 1px var(--border); }

/* ============================================
   DOKUNMA ALANLARI
   Parmakla dokunulan her hedef en az 44 × 44 px. Görünüm değişmeden
   alan büyütülür; satır içindeki metin bağlantıları hariç.
   ============================================ */
.breadcrumbs a,
.kaynakca a,
.chapter-nav a,
.table-view summary,
.eh-liste summary,
.qa-share,
.report-note button {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
}

.kavram-baglanti,
.sh-tablo thead button,
.sh-tablo tbody th a {
  position: relative;
}

.kavram-baglanti::after,
.sh-tablo thead button::after,
.sh-tablo tbody th a::after {
  content: '';
  position: absolute;
  inset: -12px -4px;
}

@media (max-width: 359px) {
  .wf-row { grid-template-columns: 6.5rem 1fr 4.25rem; }
}

/* ============================================
   YER AYIRMA
   Betikle dolan alanlar boşken yer tutar; içerik gelince alttaki
   bölümler ve alt bilgi aşağı kaymaz.
   ============================================ */
.js #kavram:has(> .kv-yukleniyor),
.js #checkup:empty,
.js #tracks:empty { min-height: 100svh; }
.js .ekonomi-haritasi:has(> noscript:only-child) { min-height: min(100svh, 740px); }
.js #daily-question:empty { min-height: 500px; }
.js #report:empty { min-height: 418px; }
.js #scenarios:empty { min-height: 174px; }
.js #quiz-stage:has(#quiz-options:empty) { min-height: 563px; }
@media (max-width: 767px) { .js #quiz-stage:has(#quiz-options:empty) { min-height: 671px; } }
.js #lab-story:empty { min-height: 207px; }
.js #lab-kpis:empty { min-height: 134px; }
@media (max-width: 1099px) { .js #lab-kpis:empty { min-height: 266px; } }
.js #ekonomi-agi:has(> figcaption:only-child) { min-height: 352px; }
@media (min-width: 768px) {
  .js #ekonomi-agi:has(> figcaption:only-child) { min-height: 500px; }
}
.js #kavram > .error-state { min-height: 100svh; align-content: center; }

/* ============================================
   EDİTORYAL BAŞLIKLAR
   Sayfa başlıkları Newsreader serif, her boyutta 400 ağırlık. Bu dosyadaki
   eski kalın başlık kurallarını ezmek için :not(#_) ile güçlendirildi;
   küçük arayüz başlıkları (.sans) sans kalır.
   ============================================ */
:is(h1, h2, .headline):not(#_):not(.sans) {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-tight);
}
h1:not(#_):not(.sans) { letter-spacing: -0.02em; }
:is(footer h2, .gizli, .ilgili h2, .kaynakca-bolum h2):not(#_):not(#_) { font-family: var(--font-sans); letter-spacing: 0; line-height: 1.3; }

@media (prefers-reduced-motion: reduce) {
  .sahne::before, .sema-bag path { animation: none; }
  .serit-ic > [aria-hidden="true"] { display: none; }
  .serit-ic { justify-content: center; margin-inline: auto; row-gap: var(--s-16); }
}

/* ============================================
   ÜRÜN EKRANI VE BANTLAR
   Hesaplayıcı sonuçları, oran hesaplayıcı ve laboratuvar panelleri
   beyaz, yüzen bir uygulama ekranı gibi durur; girişler sis grisinde
   kalır. Araç bölümleri çizgiyle değil, dönüşümlü bantla ayrılır.
   ============================================ */
.tool-results, .calc-results, .lab-panel { background: var(--surface-elevated); box-shadow: var(--shadow-float); }
.tool:nth-of-type(even) { background: var(--background-alt); }
/* "Örnek A.Ş." satırları: koyu cam yerine yüzen beyaz parça, kahve etiket */
.step-row.example:not(#_) { background: var(--surface-elevated); box-shadow: var(--shadow-float); color: var(--text-primary); }
.step-row.example b:not(#_) { color: var(--peach-ink); }
[data-theme="dark"] .step-row.example b:not(#_) { color: var(--peach-ink); }

/* ============================================
   BAŞLIK ÇİZİMLERİ
   Merkez sayfalarının başlığında, sağda ince çizgi bir çizim.
   Tek aile: 1.25 px mürekkep çizgi; şeftali dolgu ve sikke turuncusu
   yalnızca birer vurgu. Telefonda metnin üstünde küçük durur.
   ============================================ */
.hero-cizimli { position: relative; }
.hero-cizim { color: var(--text-primary); }
.cizim .vurgu { fill: var(--peach); stroke: var(--peach-ink); }
.cizim .akis-cizgi { stroke: var(--peach-ink); stroke-dasharray: 3 5; }
.hero-cizim .akis-cizgi { animation: sema-ak 1.8s linear infinite; }
@media (min-width: 900px) {
  .hero-cizimli > :is(h1, p, .school-progress) { max-width: min(640px, 58%); }
  .hero-cizim { position: absolute; right: var(--gutter); top: 0; width: min(340px, 30vw); max-width: none; margin: 0; }
  .sayfa-hero.hero-cizimli > .hero-cizim { top: clamp(64px, 11vw, 144px); }
}
@media (max-width: 899px) {
  .hero-cizim { display: block; width: 150px; margin: 0 0 var(--s-16); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cizim .akis-cizgi { animation: none; }
}
/* Laboratuvarın koyu hikâye kutusunda etiket açık gri */
.lab-story .eyebrow { color: var(--text-on-dark-secondary); }

/* ============================================
   DERS SAYFASI (ders/<id>.html, statik)
   Dersin okunabilir özeti; etkileşimli hali "Derse başla" ile açılır.
   ============================================ */
.ders-sayfa .kv-bas .govde-giris { margin-top: var(--s-16); }
.ders-sayfa .kv-bas .hero-eylemler { margin-top: var(--s-24); }
.ders-ornek, .ders-soru { margin-top: var(--s-32); }
.ders-ornek h3 { margin: var(--s-4) 0 var(--s-8); font-size: var(--text-title); font-weight: var(--weight-semibold); }
.ders-secenek { display: grid; gap: var(--s-8); margin: var(--s-12) 0; list-style: none; }
.ders-secenek li { display: flex; gap: var(--s-12); padding: var(--s-12) var(--s-16); border-radius: var(--radius-m); background: var(--surface); font-size: var(--text-small); }
.ders-secenek li span { font-weight: var(--weight-semibold); color: var(--text-muted); }
.ders-secenek li.dogru { box-shadow: inset 0 0 0 1.5px var(--positive); background: var(--positive-soft); }
.ders-sayfa .key-takeaway { margin-top: var(--s-48); }