/* ── Yazı tipleri: KENDİ SUNUCUMUZDAN ────────────────────────────────────────
   Önceden Google Fonts'tan yükleniyordu ve o istek ziyaretçinin IP adresini
   Google'a taşıyordu — sitedeki TEK üçüncü taraf akışı buydu (veri envanteri
   23 Ağustos 2026). Kendi kendine yeten bir kurulumu satan ürün için tutarsızdı,
   ve gizlilik metninin beyan etmesi gereken bir madde üretiyordu.

   Şimdi hiçbir üçüncü tarafa istek gitmiyor: analitik yok, izleyici yok, çerez yok.

   Dosyalar Google'ın servis ettiği alt kümelerin aynısı (latin + latin-ext) ve
   DEĞİŞKEN font — dört ağırlık için tek dosya. unicode-range değerleri Google'ın
   CSS'inden birebir alındı; uydurulmadı, çünkü yanlış aralık Türkçe karakterlerde
   sessizce yedek yazı tipine düşürür.

   Lisans: her ikisi de SIL Open Font License 1.1 — fonts/OFL-*.txt. OFL,
   fontla birlikte lisansın dağıtılmasını şart koşuyor.
   ────────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  /* Değişken font: tek dosya 100-900 aralığını kapsıyor. Google'ın CSS'i ağırlık
     başına bir @font-face yazıyordu ama dördü de AYNI dosyayı gösteriyordu. */
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  /* Değişken font: tek dosya 100-900 aralığını kapsıyor. Google'ın CSS'i ağırlık
     başına bir @font-face yazıyordu ama dördü de AYNI dosyayı gösteriyordu. */
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  /* Değişken font: tek dosya 100-900 aralığını kapsıyor. Google'ın CSS'i ağırlık
     başına bir @font-face yazıyordu ama dördü de AYNI dosyayı gösteriyordu. */
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  /* Değişken font: tek dosya 100-900 aralığını kapsıyor. Google'ın CSS'i ağırlık
     başına bir @font-face yazıyordu ama dördü de AYNI dosyayı gösteriyordu. */
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ─────────────────────────────────────────────────────────────────────────────
   NotusShip açılış sayfası — notusship.com

   TOKEN'LAR ÜRÜNÜN KENDİSİNDEN. src/NotusShip.Ui/wwwroot/tokens.css ile birebir
   aynı değerler. Sayfa ürüne benzemiyor, ürünün kendi görsel dilini konuşuyor —
   bu bir tutarlılık tercihi değil, dürüstlük: gördüğün şey kuracağın şey.

   KARANLIK MOD BİRİNCİL (CLAUDE.md design sistemi kuralı), bu yüzden çıplak
   :root karanlık paleti taşıyor; açık palet prefers-color-scheme ve açık
   data-theme ile geliyor.

   TEK EKLENTİ: gösterim boyutları. Ürünün ölçeği 24px'te bitiyor çünkü yoğun bir
   uygulama; açılış sayfası daha büyük başlık istiyor. Eklenen boyutlar --display-*
   olarak ayrı adlandırıldı ki ürüne geri sızmasın.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Karanlık: ürünün birincil modu ── */
  --surface-0: #0A0A14;
  --surface-1: #111120;
  --surface-2: #17172A;
  --surface-3: #1D1D33;
  --surface-inset: #08080F;

  --border-subtle:  #22223A;
  --border-default: #2C2C48;
  --border-strong:  #3A3A5C;

  --text-primary:   #E8E8F0;
  --text-secondary: #A0A0B8;
  --text-tertiary:  #7E7E9C;
  --text-disabled:  #4A4A63;
  --text-on-accent: #FFFFFF;

  --accent-400: #8B78FF;   /* koyu zeminde metin/link */
  --accent-500: #6E56F8;   /* dolgu */
  --accent-600: #5B44D9;
  --accent-subtle: rgba(110, 86, 248, 0.14);
  --accent-ring:   rgba(110, 86, 248, 0.45);

  --status-todo:        #8A8AA3;
  --status-in-progress: #3B9EFF;
  --status-done:        #34D399;

  --type-task:  #3B9EFF;
  --type-bug:   #F04438;
  --type-story: #34D399;
  --type-epic:  #A855F7;

  --pri-highest: #F04438;
  --pri-high:    #FB923C;
  --pri-medium:  #EAB308;
  --pri-low:     #60A5FA;

  --danger:  #F87171;
  --success: #34D399;
  --warning: #F5A524;

  --shadow-md: 0 4px 12px rgba(0,0,0,.5);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.6);

  /* Renkli çipin (tür harfi, avatar) üstündeki mürekkep. İKİ TEMADA DA KOYU ve
     bu yüzden hiçbir yerde geçersiz kılınmıyor: çipin zemini her iki temada da
     parlak bir tür/durum rengi. Başta var(--surface-0) kullanılıyordu ve açık
     temada parlak çipin üstüne açık harf koyuyordu. */
  --chip-ink: #0A0A14;

  /* ── Tipografi ── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;   /* ürünün gövde boyutu — yoğun, bilinçli */
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  24px;

  /* Açılış sayfasına özel gösterim boyutları */
  --display-sm: clamp(26px, 4.2vw, 38px);
  --display-md: clamp(34px, 6.4vw, 58px);
  --display-lg: clamp(40px, 9.5vw, 92px);

  --tracking-heading: -0.02em;
  --tracking-label: 0.08em;

  /* ── Boşluk: 4px ızgarası ── */
  --sp-2: 4px;  --sp-3: 6px;  --sp-4: 8px;  --sp-5: 12px; --sp-6: 16px;
  --sp-7: 20px; --sp-8: 24px; --sp-9: 32px; --sp-10: 40px; --sp-11: 48px;
  --sp-12: 64px; --sp-14: 96px; --sp-16: 128px;

  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-full: 9999px;

  --dur-fast: 100ms; --dur-base: 150ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --measure: 62ch;
  --page: 1080px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --surface-0: #FBFBFD;
    --surface-1: #FFFFFF;
    --surface-2: #F4F4F8;
    --surface-3: #FFFFFF;
    --surface-inset: #F0F0F5;

    --border-subtle:  #EDEDF2;
    --border-default: #E0E0E9;
    --border-strong:  #C8C8D6;

    --text-primary:   #16162A;
    --text-secondary: #5A5A72;
    --text-tertiary:  #6B6B86;
    --text-disabled:  #A8A8BC;

    --accent-400: #5B44D9;   /* açık zeminde metin/link — 6.41:1 */
    --accent-subtle: rgba(110, 86, 248, 0.10);

    --status-todo:        #6B6B86;
    --status-in-progress: #2563EB;
    --status-done:        #047857;

    --type-task: #2563EB;
    --type-story: #047857;

    --danger:  #B91C1C;
    --success: #047857;
    --warning: #B45309;

    --shadow-md: 0 4px 12px rgba(20,20,45,.08);
    --shadow-lg: 0 12px 32px rgba(20,20,45,.12);
  }
}

:root[data-theme="light"] {
  --surface-0: #FBFBFD;
  --surface-1: #FFFFFF;
  --surface-2: #F4F4F8;
  --surface-3: #FFFFFF;
  --surface-inset: #F0F0F5;

  --border-subtle:  #EDEDF2;
  --border-default: #E0E0E9;
  --border-strong:  #C8C8D6;

  --text-primary:   #16162A;
  --text-secondary: #5A5A72;
  --text-tertiary:  #6B6B86;
  --text-disabled:  #A8A8BC;

  --accent-400: #5B44D9;
  --accent-subtle: rgba(110, 86, 248, 0.10);

  --status-todo:        #6B6B86;
  --status-in-progress: #2563EB;
  --status-done:        #047857;

  --type-task: #2563EB;
  --type-story: #047857;

  --danger:  #B91C1C;
  --success: #047857;
  --warning: #B45309;

  --shadow-md: 0 4px 12px rgba(20,20,45,.08);
  --shadow-lg: 0 12px 32px rgba(20,20,45,.12);
}

/* ── Temel ── */

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

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--accent-400); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--sp-7);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.lede {
  max-width: var(--measure);
  font-size: var(--text-lg);
  line-height: 26px;
  color: var(--text-secondary);
}

.section-title {
  font-family: var(--font-mono);
  font-size: var(--display-sm);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--tracking-heading);
}

/* ── Üst çubuk ── */

.nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--surface-0);
  background: color-mix(in srgb, var(--surface-0) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  height: 56px;
}

.mark {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-width: 0;
}

/* Marka işareti (site/mark.svg'nin satır içi hâli).
   currentColor kullandığı için karanlık/açık temada ayrı dosya gerekmiyor:
   bulunduğu yerin metin rengini alıyor. */
.mark-glyph {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--accent-500);
}

.mark-name {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mark-by {
  display: none;   /* dar ekranda yer yok; marka adı zaten yanında */
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
@media (min-width: 560px) { .mark-by { display: inline; } }

.nav-spacer { flex: 1; }

.nav-links {
  display: none;
  align-items: center;
  gap: var(--sp-7);
  font-size: var(--text-md);
}
.nav-links a { color: var(--text-secondary); }
.nav-links a:hover { color: var(--text-primary); text-decoration: none; }

/* Eşik 760 → 880: 760-860 arasında bağlantılar sıkışıp iki satıra sarıyordu
   (ölçüldü). O aralıkta gezinmeyi hiç göstermemek, kırık göstermekten iyi. */
@media (min-width: 880px) { .nav-links { display: flex; } }

/* Gezinme düğmesinin metni dar ekranda kısalıyor: aynı eylem, sığan etiket. */
.only-wide { display: none; }
.only-narrow { display: inline; }
@media (min-width: 560px) {
  .only-wide { display: inline; }
  .only-narrow { display: none; }
}

/* Dil değiştirici: sade bir bağlantı, açılır menü değil. İki dil için menü
   açmak, tek seçenekli bir menü kadar gereksiz. */
.dil {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  color: var(--text-tertiary);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease-out);
}
.dil:hover { color: var(--text-primary); text-decoration: none; }

/* ── Düğmeler ── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  height: 36px;
  padding-inline: var(--sp-7);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
  /* Düğme metni SARMIYOR: 390px'te gezinme çubuğundaki "Kurulum görüşmesi"
     iki satıra kırılıp çubuğu taşırıyordu. */
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn-primary {
  background: var(--accent-500);
  color: var(--text-on-accent);
}
.btn-primary:hover { background: var(--accent-600); text-decoration: none; }

.btn-ghost {
  background: transparent;
  border-color: var(--border-default);
  color: var(--text-primary);
}
.btn-ghost:hover { background: var(--surface-2); text-decoration: none; }

.btn-lg { height: 44px; padding-inline: var(--sp-8); font-size: var(--text-lg); }

/* DOKUNMA HEDEFİ: dar ekranda her kontrol en az 44px.
   390px'te ölçüldü: gezinme düğmesi 36px, dil değiştirici 31×32px — ikisi de
   parmak için küçük. Masaüstünde 36px doğru (imleç hassas), telefonda değil.
   Bu yüzden eşik gezinme bağlantılarının göründüğü noktayla aynı: 880px. */
@media (max-width: 879px) {
  .btn { height: 44px; }

  .dil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* Marka BAĞLANTI olduğu sayfalarda (karşılaştırma sayfası) da hedef 44px.
     Satır içi metin bağlantıları bu kuralın dışında: akış içinde 44px yükseklik
     paragrafı bozar ve o bağlantılar birincil kontrol değil. */
  a.mark { min-height: 44px; }
}

/* ── Hero ─────────────────────────────────────────────────────────────────────
   TEZ: tagline'ın üç kelimesi ürünün üç durum kategorisi. Planla = Yapılacak,
   Yap = Devam ediyor, Yayınla = Tamamlandı. Renkler süs değil; ürünün kendi
   status token'ları ve okuyan kişi ilerleyişi kelimelerde görüyor.
   ───────────────────────────────────────────────────────────────────────────── */

.hero { padding-block: var(--sp-14) var(--sp-12); }

/* MOBİLDE minmax(0, 1fr) ZORUNLU.
   Izgara parçasının varsayılan alt sınırı "auto" — yani içeriğin max-content
   genişliği. Board maketi (üç kolon × 190px) ve terminal bloğu bu yüzden parçayı
   620px'e çıkarıp SAYFAYI yana kaydırıyordu; 360, 390 ve 430px'te ölçüldü.
   minmax(0, ...) alt sınırı sıfıra çekiyor ve iç kaydırma devreye giriyor. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-11);
  align-items: start;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--sp-11); }
}

.hero-h1 {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
  margin-bottom: var(--sp-8);
  font-weight: inherit;   /* h1'in tarayıcı varsayılanı iç elemanlara sızmasın */
}

.commands {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.command {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  font-family: var(--font-mono);
  font-size: var(--display-lg);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.04em;
  animation: rise 600ms var(--ease-out) both;
}
.command:nth-child(1) { animation-delay: 60ms; }
.command:nth-child(2) { animation-delay: 200ms; }
.command:nth-child(3) { animation-delay: 340ms; }

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.dot {
  width: 0.34em;
  height: 0.34em;
  border-radius: var(--r-full);
  flex-shrink: 0;
}
.dot-todo { background: var(--status-todo); }
.dot-doing { background: var(--status-in-progress); }
.dot-done { background: var(--status-done); }

.command-todo { color: var(--text-tertiary); }
.command-doing { color: var(--text-secondary); }
.command-done { color: var(--text-primary); }

.hero-note {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-7);
  margin-top: var(--sp-8);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.hero-note span { display: inline-flex; align-items: center; gap: var(--sp-4); }

.tick { color: var(--success); font-weight: 700; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  align-items: center;
}

/* ── Board maketi: gerçek yapı, gerçek token'lar ── */

.board {
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow-x: auto;
}

/* Kolonlar GENİŞ EKRANDA payı bölüşüyor, DARDA kayıyor.
   İlk yazımda hep 190px sabitti ve masaüstünde üçüncü kolon kırpılıyordu —
   hero'da kırpılmış bir maket, bozuk bir arayüz gibi okunuyor. */
.col {
  flex: 0 0 190px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}
@media (min-width: 900px) {
  .col { flex: 1 1 0; min-width: 150px; }
}

.col-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-inline: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  background: var(--surface-2);
  border-radius: var(--r-full);
  padding: 1px var(--sp-4);
  font-variant-numeric: tabular-nums;
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
}

.card-title {
  font-size: var(--text-base);
  line-height: 18px;
  color: var(--text-primary);
}

.card-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

/* Tür = harf + renk; öncelik = ok + renk. Renk asla tek sinyal değil. */
.type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--chip-ink);
  flex-shrink: 0;
}
.type-task  { background: var(--type-task); }
.type-bug   { background: var(--type-bug); }
.type-story { background: var(--type-story); }
.type-epic  { background: var(--type-epic); }

.key {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
}

.pri { font-size: var(--text-sm); line-height: 1; }
.pri-highest { color: var(--pri-highest); }
.pri-high    { color: var(--pri-high); }
.pri-medium  { color: var(--pri-medium); }
.pri-low     { color: var(--pri-low); }

.meta-spacer { flex: 1; }

.points {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.who {
  width: 18px;
  height: 18px;
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  color: var(--chip-ink);
  flex-shrink: 0;
}

.board-caption {
  margin-top: var(--sp-5);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* ── Bölümler ── */

.section { padding-block: var(--sp-14); border-top: 1px solid var(--border-subtle); }
.section-head { display: flex; flex-direction: column; gap: var(--sp-6); max-width: var(--measure); }

.stack-lg { display: flex; flex-direction: column; gap: var(--sp-11); }
.stack-md { display: flex; flex-direction: column; gap: var(--sp-8); }

.three {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) { .three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.stance {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-8);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
}
.stance h3 {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-heading);
}
.stance p { color: var(--text-secondary); font-size: var(--text-md); line-height: 22px; }
.stance .against {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-subtle);
}

/* ── Ne DEĞİL: sayfanın en cesur yeri ── */

.refuse-wrap { overflow-x: auto; }

.refuse {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  text-align: left;
}
.refuse th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 0 var(--sp-6) var(--sp-5);
  border-bottom: 1px solid var(--border-default);
}
.refuse td {
  padding: var(--sp-6);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
  font-size: var(--text-md);
  line-height: 21px;
}
.refuse tr:last-child td { border-bottom: none; }
.refuse .no {
  color: var(--text-primary);
  font-weight: 600;
  width: 38%;
}
.refuse .no::before {
  content: "—";
  color: var(--danger);
  font-family: var(--font-mono);
  font-weight: 700;
  margin-right: var(--sp-5);
}
.refuse .why { color: var(--text-secondary); }

.refuse-foot {
  margin-top: var(--sp-8);
  padding: var(--sp-7);
  background: var(--accent-subtle);
  border-left: 2px solid var(--accent-500);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--text-md);
  line-height: 22px;
  color: var(--text-secondary);
  max-width: var(--measure);
}

/* ── Var olanlar ── */

.features {
  display: grid;
  gap: var(--sp-9) var(--sp-10);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.feature { display: flex; flex-direction: column; gap: var(--sp-4); }
.feature h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  font-size: var(--text-md);
  font-weight: 600;
}
.feature p { color: var(--text-secondary); font-size: var(--text-base); line-height: 20px; }

.rail {
  width: 2px;
  height: 14px;
  border-radius: var(--r-full);
  background: var(--accent-500);
  flex-shrink: 0;
}

.soon {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--warning);
  border: 1px solid currentColor;
  border-radius: var(--r-full);
  padding: 0 var(--sp-4);
}

/* ── Kurulum ── */

.install-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-10);
  align-items: start;
}
@media (min-width: 900px) { .install-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-11); } }

.term {
  background: var(--surface-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.term-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: 30px;
  padding-inline: var(--sp-5);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.term-body {
  margin: 0;
  padding: var(--sp-7);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 22px;
  color: var(--text-secondary);
}
.term-body .p { color: var(--accent-400); user-select: none; }
.term-body .c { color: var(--text-disabled); }
.term-body .out { color: var(--text-tertiary); }

.steps { display: flex; flex-direction: column; gap: var(--sp-7); }
.step { display: flex; gap: var(--sp-6); }
.step-n {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--accent-400);
  width: 20px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.step-b { display: flex; flex-direction: column; gap: var(--sp-3); }
.step-b strong { font-size: var(--text-md); font-weight: 600; }
.step-b span { font-size: var(--text-base); color: var(--text-secondary); line-height: 20px; }
.steps > .btn { align-self: flex-start; }

/* ── Dağıtım dürüstlüğü ── */

.honest {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) { .honest { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.honest-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-left: var(--sp-7);
  border-left: 1px solid var(--border-default);
}
.honest-item strong { font-size: var(--text-md); }
.honest-item span { font-size: var(--text-base); color: var(--text-secondary); line-height: 20px; }

/* ── Fiyat ── */

.fiyat {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) { .fiyat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.fiyat-kart {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-8);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
}

.fiyat-tur {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Rakamlar hizalı okunsun: fiyat karşılaştırılan bir sayıdır. */
.fiyat-tutar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-4);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--display-sm);
  color: var(--text-primary);
}
.fiyat-tutar span {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-secondary);
}

.fiyat-liste {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-base);
  line-height: 20px;
  color: var(--text-secondary);
}

.fiyat-not {
  padding-left: var(--sp-7);
  border-left: 1px solid var(--border-default);
  font-size: var(--text-base);
  line-height: 20px;
  color: var(--text-secondary);
}
.fiyat-not strong { color: var(--text-primary); }

/* ── Kapanış ── */

.close {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  align-items: flex-start;
  padding: var(--sp-12);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
}
.close h2 {
  font-family: var(--font-mono);
  font-size: var(--display-md);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

/* ── Alt bilgi ── */

.foot {
  border-top: 1px solid var(--border-subtle);
  padding-block: var(--sp-10);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  align-items: center;
}
.foot-inner .grow { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  .command { animation: none; }
  * { transition-duration: 1ms !important; }
}