/*
 * tokens.css — tasarım token'ları (BP-014).
 * Tüm renkler WCAG 2.1 AA kontrastına göre onaylıdır:
 *   metin ≥ 4.5:1, büyük metin/UI bileşenleri ≥ 3:1 (A8).
 * Bileşenlerde token dışı renk YOKTUR.
 */

:root {
  /* Metin / arka plan */
  --color-bg: #ffffff; /* beyaz */
  --color-surface: #f5f6f8; /* açık gri yüzey (kart dışı) */
  --color-card: #ffffff;
  --color-text: #1f2430; /* koyu lacivert — beyaz üstü 15.4:1 */
  --color-text-muted: #3d4757; /* gri-lacivert — beyaz üstü 8.1:1 */
  --color-border: #c9d0dc; /* ince çizgi */

  /* Marka / aksan (logo navy, 2026-08-19 UX hardening planı) */
  --color-primary: #152b4a; /* navy — beyaz üstü 14.22:1 */
  --color-primary-hover: #1e3a63; /* navy'nin bir tık açığı — beyaz üstü 11.41:1 */
  --color-primary-bg: #eff6ff; /* açık mavi zemin (seçili radyo) */
  --color-on-primary: #ffffff;

  /* Sonuç pozitif / negatif */
  --color-success: #166534; /* koyu yeşil — beyaz üstü 6.9:1 */
  --color-success-bg: #ecfdf3; /* açık yeşil zemin */
  --color-danger: #b42318; /* koyu kırmızı — beyaz üstü 6.3:1 */
  --color-danger-bg: #fef3f2; /* açık kırmızı zemin */
  --color-warning: #7a4d00; /* koyu amber — beyaz üstü 6.2:1 */
  --color-warning-bg: #fffbeb; /* açık amber zemin */

  /* Odak (klavye, :focus-visible) */
  --color-focus: #2563eb; /* parlak mavi — AA odak */

  /* Boşluk */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Tip ölçeği */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;

  /* Ölçü */
  --radius: 0.5rem;
  --radius-sm: 0.375rem;
  --border-w: 1px;
  --shadow-card: 0 1px 3px rgb(31 36 48 / 0.12);
  --focus-ring: 2px solid var(--color-focus);
}

/*
 * layout.css — sayfa/panel yerleşimi (BP-014).
 * Token tabanlı; doğrudan renk/ölçü kullanılmaz.
 */

* {
  box-sizing: border-box;
}

html {
  line-height: 1.5;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.site-header {
  max-width: 56rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-4);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.site-brand {
  display: inline-block;
  line-height: 0;
}

.site-brand img {
  display: block;
  height: 44px;
  width: auto;
}

.nav-back {
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--text-sm);
}

.site-header h1 {
  font-size: var(--text-2xl);
  margin: 0 0 var(--space-2);
}

.lead {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  margin: 0 0 var(--space-2);
}

.data-note {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0;
}

.site-main {
  max-width: 56rem;
  margin: 0 auto;
  padding: var(--space-4);
}

.site-footer {
  max-width: 56rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  border-top: var(--border-w) solid var(--color-border);
}

.tool-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.tool-card {
  display: block;
  padding: var(--space-6);
  background: var(--color-card);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.tool-card:hover {
  border-color: var(--color-primary);
}

/*
 * Mobil sticky sonuç çubuğu (Faz D, 2026-08-19 — "Zarabiaj").
 * Tek breakpoint, projede bilinçli olarak buraya sınırlı: bar tanımı gereği
 * yalnızca dar ekranda anlamlıdır (masaüstünde sonuç zaten görünür alanda).
 * Bar KENDİ HESAPLAMASINI YAPMAZ — controller aynı CalculationResult'ı
 * buraya da yazar (engine tek gerçek kaynak, §6/§27).
 */
.sticky-result {
  display: none;
  /* Native <button> reset — a11y §20/lint/a11y/useSemanticElements gereği div+role yerine gerçek button. */
  appearance: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
}

@media (max-width: 640px) {
  .site-main {
    padding-bottom: calc(var(--space-8) + 4.5rem);
  }

  /*
   * Faz D hardening (2026-08-19): scrollIntoView({block:'end'}) (klavye
   * odak/anchor scroll dahil) bir öğeyi viewport altına tam hizalayabilir —
   * tarayıcı bunu yaparken position:fixed sticky bar'ın kapladığı alanı
   * BİLMEZ, bu da öğenin bar'ın arkasında kalmasına yol açar (ölçülen
   * örtüşme: ~41px). scroll-padding-bottom, native scroll-into-view
   * mekanizmasına (Tab odaklanma dahil) bu alanı ayırt etmesini söyler —
   * JS/magic-number offset yerine tarayıcı-native çözüm.
   * Değer, gerçek bar yüksekliğinin (375px genişlikte ölçüldü: 42px —
   * padding var(--space-3)×2 + text-sm satırı) küçük bir güvenlik payıyla
   * yuvarlanmış hali + safe-area. Bar boyutu değişirse (metin/padding)
   * burası da güncellenmeli.
   */
  html {
    scroll-padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
  }

  .sticky-result[data-visible="true"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: var(--color-card);
    border-top: var(--border-w) solid var(--color-border);
    box-shadow: 0 -2px 8px rgb(31 36 48 / 0.12);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
  }

  .sticky-result[data-visible="true"]:focus-visible {
    outline: var(--focus-ring);
    outline-offset: -2px;
  }

  /*
   * Uzun etiketler (ör. sağlayıcı adı) taşmasın — yalnızca sunum/CSS,
   * metni kısaltan bir JS mantığı yok. min-width:0 flex item'ın varsayılan
   * "shrink etmeme" davranışını kırar (klasik flex+ellipsis gereksinimi).
   */
  .sticky-result .sticky-result-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .sticky-result .sticky-result-arrow {
    flex-shrink: 0;
    color: var(--color-primary);
    font-weight: 700;
  }
}

/*
 * components.css — form + sonuç bileşenleri (BP-014/015).
 * Token tabanlı; :focus-visible her etkileşimde (A8 klavye).
 */

/* --- Form kartları (fieldset) --- */

.param-card {
  background: var(--color-card);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin: 0 0 var(--space-4);
  padding: var(--space-4) var(--space-6) var(--space-6);
}

.param-card legend {
  font-weight: 700;
  font-size: var(--text-lg);
  padding: 0 var(--space-2);
}

/* --- Gelişmiş ayarlar (progressive disclosure, Faz C) --- */

.param-card-collapsible {
  padding: var(--space-4) var(--space-6);
}

.param-card-collapsible[open] {
  padding-bottom: var(--space-6);
}

.param-card-collapsible summary {
  font-weight: 700;
  font-size: var(--text-lg);
  cursor: pointer;
  list-style: none;
}

.param-card-collapsible summary::-webkit-details-marker {
  display: none;
}

.param-card-collapsible summary::before {
  content: "▸";
  display: inline-block;
  margin-right: var(--space-2);
  color: var(--color-text-muted);
}

.param-card-collapsible[open] summary::before {
  content: "▾";
}

.param-card-collapsible summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.param-card-collapsible .field:first-of-type {
  margin-top: var(--space-4);
}

.field {
  margin: var(--space-4) 0 0;
}

.field-label {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}

.field-hint {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  margin: var(--space-1) 0 0;
}

.field-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-card);
}

.field-input:focus-visible,
.field-select:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
}

.field-input[aria-invalid="true"] {
  border-color: var(--color-danger);
}

/* --- Radyo grubu (Tool 3 fulfillmentMode — BP-020) --- */

.field-radio {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.radio-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  cursor: pointer;
}

.radio-option:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}

.radio-option input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
}

/* --- Hata paneli (A8) --- */

.error-panel {
  background: var(--color-danger-bg);
  border: var(--border-w) solid var(--color-danger);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
}

.error-panel[role="alert"] {
  color: var(--color-danger);
  font-weight: 600;
}

/* --- Sonuç paneli --- */

.result-panel {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-6);
  min-height: 2rem;
}

.result-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  margin: var(--space-4) 0 0;
}

.result-metric {
  background: var(--color-card);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.result-metric dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

.result-metric dd {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xl);
  font-weight: 700;
}

.result-metric dd.positive {
  color: var(--color-success);
}

.cost-lines {
  margin: var(--space-4) 0 0;
}

.cost-lines h3 {
  font-size: var(--text-base);
  margin: 0 0 var(--space-2);
}

.cost-lines ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cost-lines li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
}

.cost-lines .cost-amount {
  font-weight: 600;
}

/* --- Kaynak rozeti (SourceBadge) --- */

.source-badge {
  display: inline-block;
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: var(--border-w) solid var(--color-warning);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  margin: var(--space-1) var(--space-1) 0 0;
}

/* --- Sürüm bilgisi (data-version-info) --- */

.data-version-info {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: var(--space-4) 0 0;
}

/* --- Yaşlılık banner'ı + rozeti (3 seviye — Faz A, 2026-08-19) ---
 * Renk tek kanal değil: her seviye ayrıca metinle ayırt edilir (A8).
 * Eşikler burada TANIMLANMAZ — yalnızca data/staleness.ts'in ürettiği
 * fresh/unknown/stale durumuna görsel karşılık atanır. */

.staleness-banner {
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
  font-weight: 600;
}

.staleness-tag {
  display: inline-block;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
}

.staleness-fresh.staleness-banner,
.staleness-tag.staleness-fresh {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.staleness-unknown.staleness-banner,
.staleness-tag.staleness-unknown {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.staleness-stale.staleness-banner,
.staleness-tag.staleness-stale {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

/* --- Kaynak şeffaflığı: resmi rozeti + detay açılır paneli (Faz B) --- */

.source-official {
  display: inline-block;
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--color-primary-bg);
  color: var(--color-primary);
}

.source-details {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.source-details summary {
  cursor: pointer;
  color: var(--color-primary);
}

.source-details p {
  margin: var(--space-1) 0 0;
}

/* --- Uyarılar --- */

.warnings {
  margin: var(--space-4) 0 0;
}

.warnings li {
  color: var(--color-warning);
}

/* --- Aksiyonlar --- */

.form-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.button {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  border: var(--border-w) solid transparent;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
}

.button:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 1px;
}

.button-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.button-primary:hover {
  background: var(--color-primary-hover);
}

.button-ghost {
  background: var(--color-card);
  color: var(--color-text);
  border-color: var(--color-border);
}

/* --- Tool 3 karşılaştırma tablosu (BP-020) --- */

/*
 * Dar viewport'ta (320-375px) çoklu satır + büyük PLN değerleri tabloyu
 * taşırabilir — sayfa genelini değil yalnızca tabloyu kaydırır (UX hardening
 * planı, 2026-08-19, önleyici — canlı testte doğrulanmış bir hata değil).
 */
.table-scroll {
  overflow-x: auto;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
}

.compare-table caption {
  font-weight: 700;
  text-align: left;
  margin-bottom: var(--space-2);
}

.compare-table th,
.compare-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-w) solid var(--color-border);
  text-align: right;
}

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

.compare-table thead th {
  background: var(--color-surface);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.compare-table tbody tr:hover {
  background: var(--color-surface);
}

/* En ucuz satır — aria-current + rozet (renk tek kanal DEĞİL, A8). */
.compare-table tr[aria-current="true"] {
  font-weight: 600;
}

.option-label {
  display: block;
  font-weight: 600;
}

.cheapest-badge {
  display: inline-block;
  margin: var(--space-1) 0 0;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-success-bg);
  color: var(--color-success);
  font-size: var(--text-xs);
  font-weight: 700;
}

.option-source,
.option-formula {
  display: block;
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
  font-weight: 400;
}

.option-source a {
  color: var(--color-primary);
}

.desi-note {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* --- Tool 4 ödeme karşılaştırması (BP-023) --- */

.option-hint {
  display: block;
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 400;
}

.bnpl-note {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.empty-state {
  color: var(--color-text-muted);
  margin: var(--space-2) 0;
}

/* --- Przykład notu (Faz C, 2026-08-19: progressive disclosure + örnek senaryo) --- */

.example-notice {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* --- Zaufanie: disclaimer + zgłoszenie błędu (BP-035) --- */

.trust-notice {
  border-top: var(--border-w) solid var(--color-border);
  margin: var(--space-6) 0 0;
  padding: var(--space-4) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.trust-notice p {
  margin: 0 0 var(--space-2);
}

.trust-notice a {
  color: var(--color-primary);
}