/* ── RESET ── */
/* Renk + tipografi token'ları css/tokens.css'te tanımlı, ondan önce yüklenmeli */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Yatay shift'i tamamen önle:
   - scrollbar-gutter: stable → kısa sayfada bile scrollbar yeri rezerve
   - overflow-x: hidden → tooltip/modal/element taşması yatay scroll açmaz
   Sayfa sadece dikey scroll'lanır, hiçbir koşulda yana kaymaz. */
html {
  scrollbar-gutter: stable;
  overflow-x: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  min-height: 100vh;
  padding: 0;             /* nav full-width tepeye yapışsın; .wrap kendi padding'ini yönetir */
  overflow-x: hidden;
  max-width: 100vw;
}

/* ── LAYOUT ── */
.wrap { width: 90%; max-width: 1500px; margin: 0 auto; padding: 2rem 0 4rem; }

/* ── HEADER ── */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: .4rem;
}
h1 {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: 2rem;
}
h1 span { color: var(--accent); }

/* Brand + logo — header'da ortak kullanım */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 1;
}
.brand-logo {
  height: clamp(72px, 9vw, 110px);
  width: auto;
  display: block;
}

/* Analiz sayfası içerik başlığı — tagline solda, PRO/Birim kontrolleri sağda */
.page-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0 2rem;
  flex-wrap: wrap;
  min-height: 38px;
}
.page-controls { margin-left: auto; }
.page-controls {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}

/* Birim inline dropdown — sayfada yerinde açılır */
.birim-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  z-index: 100;
  display: none;
}
.cur-stack.is-open .birim-menu { display: block; }
.cur-stack.is-open .cs-arrow { transform: rotate(180deg); }
.birim-menu .cs-option {
  display: flex;
  align-items: center;
  gap: .65rem;
}
.bm-flag { font-size: 18px; flex-shrink: 0; }
img.bm-flag {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}
.cur-switch-flag img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

/* Brand: logo + altında tagline (sadece analiz sayfasında .brand--with-tag) */
.brand--with-tag {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1.2;
}
.brand-tagline {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text3);
  letter-spacing: 0;
}
@media (max-width: 700px) {
  .brand-tagline { display: none; }
}
.cur-stack {
  position: relative;
  display: inline-flex;
  align-items: center;          /* cur-stack yüksekliği = sadece buton yüksekliği */
  min-width: 0;
}
.cur-live {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--text2);
  line-height: 1.4;
  text-align: center;
  margin: 0;
}
.cur-live-rate,
.cur-live-src { display: block; }
.cur-live-rate strong { color: var(--accent2); font-weight: 600; }
.cur-live-src { color: var(--text3); font-size: 11.5px; }
.tagline {
  font-family: var(--sans);
  font-size: clamp(.95rem, 1.8vw, 1.05rem);
  font-weight: 400;
  color: var(--text2);
  letter-spacing: -.005em;
  margin-bottom: 1.5rem;
  max-width: 640px;
}

/* ── HERO QUESTION PILLS ── */
.hero-questions { margin-bottom: 2.25rem; }
.hq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .55rem;
  margin-bottom: 1.1rem;
}
.hq {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: .75rem 1rem;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.4;
  transition: background .15s, transform .15s;
}
.hq:hover { background: #1c1c1c; transform: translateY(-1px); }
.hq-emoji {
  display: inline-block;
  margin-right: .55rem;
  font-size: 1.15em;
  vertical-align: -1px;
}
.hq-foot {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--text2);
  line-height: 1.6;
}
.hq-foot strong { color: var(--accent); font-weight: 600; }

/* ── CUSTOM SELECT — Şehir/Semt için site-formatında dropdown
   Native <select> hidden, üstüne kart-içi UI: trigger butonu + açılır menü.
   csInit() js/ui/ui.js içinde wrap'liyor; native select hâlâ value tutuyor (engine/calculator.js uyumlu). */
.cs-wrap {
  position: relative;
  width: 100%;
}
.cs-wrap select { display: none; }
.cs-trigger {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.4rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  gap: .5rem;
}
.cs-label-empty { color: var(--text3); font-weight: 500; }
.cs-arrow {
  color: var(--accent);
  font-size: .9rem;
  transition: transform .15s;
  flex-shrink: 0;
}
.cs-wrap.is-open .cs-arrow { transform: rotate(180deg); }
.cs-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: -8px;
  right: -8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .04);
  z-index: 100;
  display: none;
  max-height: 320px;
  overflow-y: auto;
  padding: .4rem;
}
.cs-wrap.is-open .cs-menu { display: block; }

/* Dropdown içi arama (ilçe/mahalle typeahead) */
.cs-search {
  position: sticky;
  top: 0;
  background: var(--surface);
  padding-bottom: .35rem;
  margin-bottom: .1rem;
  z-index: 2;
}
.cs-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: .55rem .8rem;
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
}
.cs-search-input:focus { border-color: var(--accent); }
.cs-search-input::placeholder { color: var(--text3); }
.cs-option {
  padding: .65rem .9rem;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--text);
  cursor: pointer;
  border-radius: 8px;
  transition: background .12s, color .12s;
  user-select: none;
}
.cs-option:hover { background: var(--surface2); }
.cs-option.is-active {
  background: var(--surface2);
  color: var(--accent);
  font-weight: 600;
}
.cs-option.is-placeholder { color: var(--text3); }
.cs-option.is-soon {
  opacity: 0.55;
  cursor: not-allowed;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cs-option.is-soon:hover { background: transparent; }
.cs-soon-badge {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text3);
  background: var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  flex-shrink: 0;
}

/* ── INFO STRIP — Endeksa data preview (semt seçilince görünür) ── */
.info-strip {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .65rem 1.1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .4rem 1rem;
  margin-bottom: .75rem;
}
.ii { font-size: 12px; font-family: var(--mono); }
.ii .il { color: var(--text2); font-weight: 500; }
.ii .iv { color: var(--text); font-weight: 600; font-size: 13px; }
.ii .iv.hi { color: var(--accent); }
.ii .iv-sub {
  display: block;
  font-size: 10px;
  color: var(--text3);
  font-weight: 500;
  margin-top: .15rem;
}

.src-note {
  font-size: 11px;
  color: var(--text2);
  padding: .35rem 1.1rem;
  margin-bottom: .75rem;
  font-family: var(--sans);
}

/* ── INPUTS GRID — kart bazlı, parent green frame yok
   auto-fit: cash modda gizlenen inputlar yer kaplamaz, görünenler kendi kart'ı olur.
   Her .ic kendi border + radius'una sahip → kaç input olursa olsun arkada yeşil görünmez. */
.inputs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .5rem;
  margin-bottom: 1rem;
}
.ic {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .65rem .85rem;
  transition: border-color .15s;
  display: flex;
  flex-direction: column;
}
/* Hint en alta itilir, böylece tüm input row'ları aynı dikey hizada başlar */
.ic .ih { margin-top: auto; padding-top: .3rem; }
.ic:hover { border-color: var(--accent); }
.ic.full {
  grid-column: 1 / -1;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .65rem .85rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.il2 {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--text2);
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: .3rem;
  display: block;
  min-height: 1.3em;
  line-height: 1.25;
}
.ir { display: flex; align-items: center; gap: .4rem; }
.if {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 600;
  width: 100%;
  min-width: 0;
}
.if::placeholder { color: #b0b0b0; }

/* Form içindeki dropdown (faiz tipi) */
.if-select {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  width: 100%;
  cursor: pointer;
  padding: .35rem .55rem;
  margin-bottom: .5rem;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%2310b981'%3E%3Cpath d='M6 8L2 4h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .55rem center;
  background-size: 10px;
  padding-right: 1.4rem;
  transition: border-color .15s, background-color .15s;
}
.if-select:hover  { border-color: var(--accent); background-color: #1c1c1c; }
.if-select:focus  { border-color: var(--accent); }
.if:focus { color: var(--accent); }
.iu {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text2);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.ih {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text2);
  margin-top: .4rem;
  line-height: 1.5;
}
.ih strong { color: var(--accent2); }

/* Calc button */
.cb-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-top: .25rem;
}
.cb {
  background: var(--accent);
  border: none;
  border-radius: 10px;
  padding: .95rem 1.5rem;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: #111111;
  letter-spacing: 0;
  text-align: center;
  transition: background .15s, color .15s;
}
.cb:hover { background: #33ddb8; color: #111111; }
.cb.cb-full { grid-column: 1 / -1; width: 100%; }
.cb.cb-alt {
  background: var(--surface2);
  color: var(--accent);
}
.cb.cb-alt:hover { background: var(--border); color: var(--accent); }
@media (max-width: 480px) {
  .cb-row { grid-template-columns: 1fr; }
}

/* ── TAX TOGGLE ROW ── */
.tax-toggle {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text2);
  cursor: pointer;
}
.tax-toggle input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.tax-note {
  font-size: 11px;
  color: var(--text2);
  margin-left: auto;
}
.gider-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
}
.gider-row select {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text2);
  font-family: var(--mono);
  font-size: 11px;
  cursor: pointer;
}
.gider-row input[type=number] {
  width: 48px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
}

/* ── VERDICT BOX ── */
.verdict-box {
  border-radius: 16px;
  padding: 1.8rem 2rem;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  display: none;
  border: 2px solid;
}
.verdict-box.show { display: block; }
.verdict-box.good {
  background: linear-gradient(135deg, rgba(0,212,168,.12), rgba(0,212,168,.04));
  border-color: rgba(0,212,168,.5);
}
.verdict-box.meh {
  background: linear-gradient(135deg, rgba(245,165,36,.13), rgba(245,165,36,.04));
  border-color: rgba(245,165,36,.5);
}
.verdict-box.bad {
  background: linear-gradient(135deg, rgba(255,45,45,.12), rgba(255,45,45,.04));
  border-color: rgba(255,45,45,.5);
}
.v-icon {
  font-size: 1.8rem;
  margin-right: .6rem;
  vertical-align: -2px;
}
.v-headline {
  font-family: var(--sans);
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: .6rem;
}
.verdict-box.good .v-headline { color: #33ddb8; }
.verdict-box.meh  .v-headline { color: #fbbf24; }
.verdict-box.bad  .v-headline { color: #ff5555; }
.v-summary {
  font-family: var(--sans);
  font-size: 1.08rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 1rem;
}
.v-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text2);
}
.v-meta strong { color: var(--text); font-weight: 600; }
.v-score {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.6);
  padding: .4rem .9rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13.5px;
}
.v-score strong { font-size: 14.5px; }

/* Sonuç banner — gerçek TL maliyet özeti (tablonun üstünde) */
.v-summary-bar {
  background: rgba(255,255,255,.55);
  border-radius: 10px;
  padding: .85rem 1.1rem;
  margin: 1rem 0;
  border-left: 4px solid var(--accent);
}
.v-summary-line {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: .25rem;
}
.v-summary-line:last-child { margin-bottom: 0; }
.v-summary-line strong { font-weight: 700; }
.v-sb-sub {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--text3);
  font-weight: 400;
}

/* Ana rakamlar tablosu (verdict içinde) */
.v-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(255,255,255,.6);
  border-radius: 10px;
  overflow: hidden;
  margin: 1.2rem 0;
  font-family: var(--mono);
  font-size: 14px;
}
.v-table thead th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: right;
  padding: .7rem .9rem;
  border-bottom: 1.5px solid var(--border);
  background: rgba(255,255,255,.4);
}
.v-table thead th:first-child { text-align: left; }
.v-table tbody td {
  padding: .75rem .9rem;
  text-align: right;
  border-bottom: 1px solid rgba(0,0,0,.06);
  color: var(--text);
  font-size: 14px;
  white-space: nowrap;
}
.v-table tbody tr:last-child td { border-bottom: none; }
.v-table tbody tr.v-divider td {
  padding: 0;
  border-bottom: 2px solid var(--border);
  height: 8px;
  background: rgba(0,0,0,0.02);
}
.v-table tbody td:first-child { text-align: left; }
.v-table tbody td strong {
  font-weight: 700;
  color: var(--text);
  font-size: 15px;
}
.v-row-label {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
}
.v-emo {
  display: inline-block;
  margin-right: .55rem;
  font-size: 1.15em;
  vertical-align: -1px;
}
.v-cell-na {
  color: var(--text3);
  font-size: 13px;
}
.v-cell-pct {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
}
.v-cell-pct.pos { color: var(--accent2); }
.v-cell-pct.neg { color: var(--danger); }
.v-pct-sub {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11px;
  color: var(--text3);
  margin-left: .25rem;
}
.v-pct {
  display: block;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text3);
  margin-top: .15rem;
  letter-spacing: -.01em;
}
.v-pct.pos { color: var(--accent2); }
.v-pct.neg { color: var(--danger); }
.v-row-sub {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--text3);
}
.v-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0 .5rem;
}
.v-stat {
  background: rgba(0,0,0,0.02);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .85rem 1rem;
  text-align: center;
}
.v-stat-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text2);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.v-stat-value {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
.v-stat-sub {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--text3);
  margin-top: .25rem;
}
@media (max-width: 600px) {
  .v-table { font-size: 12.5px; }
  .v-table thead th, .v-table tbody td { padding: .55rem .55rem; }
  .v-row-label { font-size: 12.5px; }
  .v-table tbody td strong { font-size: 13.5px; }
  .v-stat-value { font-size: 19px; }
}

/* ── REASONS GRID ── */
.reasons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .55rem;
  margin-bottom: 1.5rem;
}
.reason-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text3);
  border-radius: 10px;
  padding: .8rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.reason-card.ok   { border-left-color: var(--accent2); }
.reason-card.warn { border-left-color: var(--warning); }
.reason-card.bad  { border-left-color: var(--danger); }
.r-icon {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: .25rem;
}
.reason-card.ok   .r-icon { color: var(--accent2); }
.reason-card.warn .r-icon { color: var(--warning); }
.reason-card.bad  .r-icon { color: var(--danger); }
.r-title {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.r-value {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text2);
  font-weight: 500;
  margin-top: .15rem;
}

/* ── CASH NEEDS ── */
.cash-needs {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.5rem;
}
.cash-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 13px;
  padding: .4rem 0;
  border-bottom: 1px dashed var(--border);
}
.cash-row:last-child { border-bottom: none; }
.cash-row.cash-total {
  border-top: 2px solid var(--text);
  border-bottom: none;
  margin-top: .35rem;
  padding-top: .7rem;
  font-size: 15px;
  font-weight: 600;
}
.cash-label { color: var(--text2); }
.cash-row.cash-total .cash-label { color: var(--text); }
.cash-value {
  color: var(--text);
  font-weight: 600;
}
.cash-value-sub {
  color: var(--text3);
  font-size: 11px;
  font-weight: 500;
  margin-left: .35rem;
}
.cash-note {
  font-size: 10.5px;
  color: var(--text3);
  margin-top: .3rem;
  font-style: italic;
}

/* sl-note */
.sl-note {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--text3);
  text-transform: none;
  letter-spacing: 0;
  margin-left: .5rem;
}

/* ── RISK BOX ── */
.risk-box {
  margin-top: 2rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  background: var(--surface2);
}
.risk-summary {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text2);
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.risk-summary::-webkit-details-marker { display: none; }
.risk-summary::before {
  content: '▸ ';
  display: inline-block;
  margin-right: .35rem;
  transition: transform .15s;
}
.risk-box[open] .risk-summary::before { transform: rotate(90deg); }
.risk-content {
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text2);
  line-height: 1.55;
}
.risk-content strong { color: var(--text); font-weight: 600; }
.risk-item {
  display: flex;
  gap: .55rem;
  margin-bottom: .5rem;
  align-items: flex-start;
}
.risk-item:last-child { margin-bottom: 0; }
.risk-bullet {
  color: var(--warning);
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}
.risk-item:last-child .risk-bullet { color: var(--accent); }

/* ── ERROR BOX ── */
.err {
  background: rgba(255, 45, 45, .08);
  border: 1px solid rgba(255, 45, 45, .35);
  border-radius: 8px;
  padding: .65rem 1rem;
  font-size: 13px;
  color: var(--danger);
  margin-bottom: 1.5rem;
  display: none;
}

/* ── RESULTS ── */
.results { display: none; scroll-margin-top: 2rem; }

/* Sonuç görünümü: loader bitince .wrap'a is-results-view eklenir →
   form gizlenir, sadece #results tam sayfa kalır (ayrı sayfa hissi). */
.wrap.is-results-view > *:not(#results) { display: none; }
.wrap.is-results-view { padding-top: 1.5rem; }

.results-back {
  display: none;                 /* sadece sonuç görünümünde görünür */
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text2);
  font-family: var(--sans);
  font-size: 0.9rem;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 1.25rem;
  transition: border-color .15s, color .15s;
}
.wrap.is-results-view .results-back { display: inline-flex; }
.results-back:hover { border-color: var(--accent); color: var(--accent); }

.sl {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text2);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 2rem 0 .85rem;
}

/* ── METRICS GRID ── */
.mg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: .75rem;
}
.m {
  background: var(--surface);
  padding: .85rem 1rem;
}
.ml {
  font-size: 10.5px;
  color: var(--text2);
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.mv {
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.15;
}
.mv.pos  { color: var(--accent2); }
.mv.neg  { color: var(--danger);  }
.mv.warn { color: var(--warning); }
.ms {
  font-size: 12px;
  color: var(--text2);
  margin-top: .4rem;
  font-family: var(--mono);
  font-weight: 500;
  line-height: 1.35;
}

/* ── STATUS BAR ── */
.sb {
  border-radius: 8px;
  padding: .6rem 1rem;
  font-size: 12px;
  font-family: var(--mono);
  margin-bottom: 1.5rem;
}
.sb.ok   { background: rgba(0,212,168,.10);   border: 1px solid rgba(0,212,168,.30);   color: #33ddb8; }
.sb.warn { background: rgba(245,165,36,.10); border: 1px solid rgba(245,165,36,.30); color: #fbbf24; }
.sb.neg  { background: rgba(255,45,45,.10);  border: 1px solid rgba(255,45,45,.30);  color: #ff5555; }

/* ── TAX BOX ── */
.tax-box {
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.tax-header {
  background: var(--surface2);
  padding: .65rem 1rem;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text2);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.tax-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--border);
}
.tax-cell {
  background: var(--surface);
  padding: .75rem 1rem;
}
.tax-warn {
  background: var(--surface);
  padding: .75rem 1rem;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  font-family: var(--mono);
  color: var(--text2);
  line-height: 1.55;
}

/* ── TABLE ── */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 2rem;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-family: var(--mono);
}
thead tr { background: var(--surface2); }
th {
  padding: .6rem .85rem;
  color: var(--text2);
  text-align: right;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
th:first-child { text-align: left; }
td {
  padding: .55rem .85rem;
  color: var(--text);
  text-align: right;
  border-bottom: .5px solid var(--border);
  white-space: nowrap;
}
td:first-child { text-align: left; color: var(--text2); font-weight: 500; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--surface2); }
.tp  { color: var(--accent2); font-weight: 500; }
.tn  { color: var(--danger);  font-weight: 500; }
.tw2 { color: var(--warning); }
.td  { color: var(--text2);   }

/* ── CHARTS ── */
.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.chart-cell {
  background: var(--surface);
  padding: 1.1rem;
}
.chart-title {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text2);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .75rem;
}
canvas { width: 100% !important; }

.leg {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: .65rem;
}
.leg-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
  font-family: var(--mono);
}
.leg-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.leg-dot.leg-ring {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-sizing: border-box;
}
.chart-disclaimer {
  margin-top: .55rem;
  font-size: 11px;
  color: var(--text2);
  line-height: 1.5;
}

/* ── DIVIDER ── */
hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}

/* ── WELCOME / LANDING ── */
.welcome-overlay {
  position: fixed;
  inset: 0;
  background: #111111;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: stretch;          /* nav full-width yayılır */
  padding: 0;
  overflow-y: auto;
  opacity: 1;
  transition: opacity .55s ease;
}
.welcome-overlay.is-leaving { opacity: 0; pointer-events: none; }

/* Birim kartı seçildiğinde kısa görsel feedback (fade-out öncesi).
   Tick ikonu yok; sadece subtle highlight, sonra welcome overlay smooth fade. */
.cur-card.is-selected {
  border-color: var(--accent2) !important;
  background: rgba(0,212,168, .08);
  transform: scale(1.02);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
  box-shadow: 0 6px 18px rgba(0,212,168, .18);
}

/* Welcome step'leri arası slide/fade transition */
.welcome-step {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s ease, transform .4s ease;
}
.welcome-step.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.welcome-step.is-leaving {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}
.welcome-inner {
  width: 100%;
  max-width: 1240px;          /* daha geniş frame için */
  margin: 1rem auto 3rem;     /* üst margin daraltıldı → logo+title yukarı çıktı */
  padding: 0 1.25rem;
  text-align: center;
}
.welcome-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: .25em;
  text-transform: lowercase;
  margin-bottom: .6rem;
}
.welcome-title {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 600;
  color: var(--text);
  margin-bottom: .65rem;
  letter-spacing: -.035em;
  line-height: 1.05;
}
.welcome-title span { color: var(--accent); }
.welcome-sub {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text2);
  margin-bottom: 2.8rem;
  line-height: 1.55;
}
.welcome-sub strong { color: var(--accent); font-weight: 600; }

/* Bölüm başlıkları */
.feat-intro,
.welcome-cta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text3);
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
  text-align: left;
}
.welcome-cta {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 1.05rem;
  font-family: var(--sans);
  color: var(--text2);
  letter-spacing: -.005em;
  text-transform: none;
  font-weight: 400;
}
.welcome-cta strong { color: var(--text); font-weight: 600; }

/* Özellik kartları (2x2) */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: .5rem;
  text-align: left;
}
.feat-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem 1.4rem;
  transition: border-color .15s, transform .15s, background .15s;
}
.feat-card:hover {
  border-color: var(--accent);
  background: #1c1c1c;
}
.feat-emoji {
  font-size: 1.9rem;
  display: block;
  margin-bottom: .65rem;
  line-height: 1;
}
.feat-icon {
  width: 52px;
  height: 52px;
  display: block;
  margin-bottom: .75rem;
  object-fit: contain;
}
.feat-title {
  font-family: var(--sans);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .4rem;
  letter-spacing: -.01em;
}
.feat-desc {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--text2);
  line-height: 1.55;
}
@media (max-width: 600px) {
  .feat-grid { grid-template-columns: 1fr; }
}

/* Welcome step transitions */
.welcome-step { animation: stepIn .3s ease; }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* BAŞLA button */
.welcome-cta-btn {
  margin-top: 2.5rem;
  background: var(--accent);
  color: #111111;
  border: none;
  border-radius: 999px;
  padding: 1rem 3rem;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .15em;
  cursor: pointer;
  transition: background .15s, transform .15s, box-shadow .15s;
  box-shadow: 0 4px 14px rgba(0,212,168, .35);
}
.welcome-cta-btn:hover {
  background: #33ddb8;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,212,168, .45);
}

/* Geri butonu — overlay'in sol üst köşesinde sabit */
.welcome-back {
  position: fixed;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 1001;
  background: #111111;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .45rem 1rem;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text2);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.welcome-back:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface2);
}

/* Senaryo kartları */
.senaryo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}
@media (max-width: 700px) {
  .senaryo-grid { grid-template-columns: 1fr; }
}
.senaryo-card {
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 2rem 1.6rem;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, transform .15s, background .15s, box-shadow .15s;
  position: relative;
}
.senaryo-card:not(.disabled):hover {
  border-color: var(--accent);
  background: #1c1c1c;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,212,168, .15);
}
.senaryo-card.disabled {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(.4);
}
.senaryo-emoji {
  display: block;
  font-size: 2.4rem;
  margin-bottom: .8rem;
  line-height: 1;
}
img.senaryo-emoji {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.senaryo-title {
  font-family: var(--sans);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .5rem;
  letter-spacing: -.015em;
}
.senaryo-desc {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--text2);
  line-height: 1.55;
}
.senaryo-arrow {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 1.4rem;
  color: var(--accent);
  font-weight: 600;
  transition: transform .15s;
}
.senaryo-card:not(.disabled):hover .senaryo-arrow {
  transform: translateX(4px);
}
.soon-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--text3);
  color: #111111;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  padding: .2rem .6rem;
  border-radius: 999px;
  letter-spacing: .1em;
}
.cur-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.cur-card {
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 1.7rem 1.2rem 1.4rem;
  cursor: pointer;
  transition: border-color .15s, transform .15s, background .15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.cur-card:hover {
  border-color: var(--accent);
  background: #1c1c1c;
  transform: translateY(-2px);
}
.cur-flag { font-size: 2.6rem; line-height: 1; }
img.cur-flag {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.cur-code {
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .06em;
  margin-top: .2rem;
}
.cur-name {
  font-size: 12.5px;
  color: var(--text2);
  font-weight: 500;
}
.cur-rate {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text3);
  margin-top: .35rem;
  min-height: 14px;
}

/* Üst bar: premium toggle + birim değiştirme */
/* PRO ve Birim toggle butonları — top-bar içinde, büyük & okunaklı */
.su-toggle,
.cur-switch {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .6rem 1.1rem;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: border-color .15s, color .15s, background .15s;
}
.su-toggle:hover,
.cur-switch:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: #1c1c1c;
}
.su-toggle strong,
.cur-switch strong { font-weight: 600; color: var(--text); }
html.is-super .su-toggle {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0,212,168, .08);
}
html.is-super .su-toggle strong { color: var(--accent); }
.cur-switch .cur-switch-flag { font-size: 16px; }

/* TRY modu: bazı input/label/chart kısımları gizlenir */
.try-mode .hide-on-try { display: none !important; }

/* SUPER-USER MOD — PRO öncesi kilitli inputs
   not-super: görünür ama devre dışı (gri). is-super: tam erişim */
html.not-super .super-only { position: relative; }
html.not-super .super-only .il2,
html.not-super .super-only .iu,
html.not-super .super-only .ih { color: var(--text3); }
html.not-super .super-only input {
  pointer-events: none;
  background: var(--surface2);
  color: var(--text3);
  cursor: not-allowed;
}
html.is-super .super-only { position: relative; }

/* PRO inputs wrapper — inputs-grid'in kardeşi, kendi grid'i.
   Frame yok — kartlar tek tek border'lı. */
.super-inputs-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}
.su-badge {
  display: inline-block;
  background: var(--text3);
  color: #111111;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: .12rem .42rem;
  border-radius: 999px;
  margin-left: .5rem;
  vertical-align: middle;
}
html.is-super .su-badge { background: var(--accent); }

/* Input-level info icon (kaynak bilgisi tooltip'i) */
.ic-info {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--accent2);
  font-size: 10px; font-weight: 700;
  margin-left: .35rem;
  cursor: help;
  position: relative;
  vertical-align: 1px;
  transition: background .15s;
}
.ic-info:hover { background: var(--accent2); color: #111111; border-color: var(--accent2); }
.ic-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  background: #ffffff;
  color: #1c1c1c;
  padding: .75rem .9rem;
  border-radius: 8px;
  font-size: 12px; line-height: 1.5;
  font-weight: 400;
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0; visibility: hidden;
  transition: opacity .15s, visibility .15s;
  z-index: 100;
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
  pointer-events: none;
  white-space: normal;
}
.ic-tooltip::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #ffffff;
}
.ic-info:hover .ic-tooltip,
.ic-info:focus .ic-tooltip { opacity: 1; visibility: visible; }
.ic-tt-title {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #333333;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.ic-tt-body { color: #1c1c1c; }
.ic-tt-body p { margin: 0 0 .4rem; }
.ic-tt-body p:last-child { margin-bottom: 0; }
.ic-tt-body strong { color: #111111; font-weight: 600; }

/* PRO kilitli input click → upsell modal overlay'i */
html.not-super .super-only { cursor: pointer; }
html.not-super .super-only:hover {
  border-color: var(--accent);
  background: rgba(0,212,168, .04);
}
html.not-super .super-only::before {
  content: '🔒 Özelleştirmek için PRO';
  position: absolute;
  top: .5rem; right: .5rem;
  font-size: 9.5px; font-weight: 600;
  color: var(--text3);
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
  letter-spacing: 0;
  text-transform: none;
  z-index: 2;
}
html.not-super .super-only:hover::before { opacity: 1; }

/* PRO upsell modal */
.pro-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 31, 21, .55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(4px);
}
.pro-modal.show { display: flex; }
.pro-modal-card {
  background: #111111;
  border-radius: 14px;
  padding: 2rem 2rem 1.5rem;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  position: relative;
  text-align: center;
}
.pro-modal-close {
  position: absolute;
  top: .65rem; right: .85rem;
  background: none; border: 0;
  font-size: 22px; line-height: 1;
  color: var(--text3);
  cursor: pointer;
  padding: 4px 8px;
}
.pro-modal-close:hover { color: var(--text); }
.pro-modal-icon {
  font-size: 36px;
  margin-bottom: .5rem;
}
.pro-modal-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 .5rem;
  letter-spacing: -.01em;
}
.pro-modal-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text2);
  margin: 0 0 1.25rem;
}
.pro-modal-body strong { color: var(--text); }
.pro-modal-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--accent2);
  color: #111111;
  border: 0;
  padding: .7rem 1.4rem;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
}
.pro-modal-cta:hover { background: #33ddb8; }
.pro-modal-foot {
  margin-top: 1rem;
  font-size: 11px;
  color: var(--text3);
}

/* Birim değiştiğinde bütçe input'unu vurgula */
.ic.needs-input {
  background: rgba(255, 45, 45, 0.05);
  box-shadow: inset 0 0 0 2px var(--danger);
  animation: needsInputShake .45s ease;
  position: relative;
}
.ic.needs-input::after {
  content: 'Yeni birim · güncelle';
  position: absolute;
  top: .5rem;
  right: .55rem;
  background: var(--danger);
  color: #111111;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  padding: .18rem .55rem;
  border-radius: 999px;
  letter-spacing: .03em;
  pointer-events: none;
}
.ic.needs-input .il2 { color: var(--danger); }
@keyframes needsInputShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

/* Eski errBox kaldırıldı: validation feedback artık per-field highlight + toast */
.err { display: none !important; }

/* Hesapla butonu ile sonuç dashboard'u arasında nefes + ince ayraç */
.form-results-divider {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: 3rem 0 2.5rem;
  width: 100%;
}

/* Validation: eksik field'ın .ic kartı anında kırmızı, 2.4sn kalır, 1.6sn fade.
   Animation timing tüm field'larda senkron başlar — JS aynı frame'de class ekler. */
.ic.has-error {
  animation: needsInputShake .45s ease, errorPulse 4s ease forwards;
}
.ic.has-error .il2 {
  animation: errorLabelPulse 4s ease forwards;
}
@keyframes errorPulse {
  0%, 60% {
    border-color: var(--danger);
    background-color: rgba(255, 45, 45, 0.08);
    box-shadow: inset 0 0 0 1.5px var(--danger);
  }
  100% {
    border-color: var(--border);
    background-color: transparent;
    box-shadow: none;
  }
}
@keyframes errorLabelPulse {
  0%, 60% { color: var(--danger); }
  100%    { color: var(--text2); }
}

/* Toast: form üstünde merkezi uyarı bandı */
.form-toast {
  position: fixed;
  top: 96px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  background: var(--danger);
  color: #111111;
  padding: 11px 22px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
  z-index: 10500;
  box-shadow: 0 12px 32px rgba(255, 45, 45, 0.28);
  white-space: nowrap;
}
.form-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── SKOR GAUGE (verdict box içinde — Skor pill'i değiştirir) ── */
.skor-gauge-wrap {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,.08);
}
.skor-gauge-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .5rem;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text2);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.skor-gauge-head strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
}
.skor-gauge {
  position: relative;
  height: 10px;
  border-radius: 999px;
  overflow: visible;
  display: flex;
  background: rgba(255,255,255,.4);
}
.sg-zone { height: 100%; }
.sg-zone.sg-bad  { width: 40%; background: rgba(255,45,45,.35); border-radius: 999px 0 0 999px; }
.sg-zone.sg-meh  { width: 30%; background: rgba(245,165,36,.45); }
.sg-zone.sg-good { width: 30%; background: rgba(0,212,168,.45); border-radius: 0 999px 999px 0; }
.sg-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text);
  border: 2.5px solid #111111;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  z-index: 2;
}
.verdict-box.good .sg-marker { background: #33ddb8; }
.verdict-box.meh  .sg-marker { background: #fbbf24; }
.verdict-box.bad  .sg-marker { background: #ff5555; }
.sg-labels {
  display: grid;
  grid-template-columns: 40% 30% 30%;
  margin-top: .5rem;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text3);
  letter-spacing: .04em;
}
.sg-labels span {
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(0,0,0,.1);
  padding-left: .4rem;
}
.sg-labels span:first-child { border-left: none; padding-left: 0; }
.sg-labels span strong {
  color: var(--text2);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0;
}

/* ── BOTTOM LINE — plain-Turkish wrap-up callout ── */
.bottom-line {
  margin: 2rem 0 1.5rem;
  padding: 1.4rem 1.6rem;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--surface2), rgba(255,255,255,.5));
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  display: none;
}
.bottom-line.show { display: block; }
.bl-head {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text2);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .8rem;
}
.bl-line {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: .55rem;
  display: flex;
  gap: .6rem;
  align-items: flex-start;
}
.bl-line:last-child { margin-bottom: 0; }
.bl-line strong { font-weight: 600; }
.bl-bullet {
  flex-shrink: 0;
  font-size: 14px;
  margin-top: 2px;
}
.bl-bullet.ok  { color: var(--accent2); }
.bl-bullet.warn { color: var(--warning); }
.bl-bullet.bad { color: var(--danger); }
.bl-bullet.info { color: var(--text3); font-weight: 700; }
@media (max-width: 600px) {
  .bottom-line { padding: 1.1rem 1.1rem; }
  .bl-line { font-size: 14px; }
}

/* ── DETAIL BOX — collapsed yıllık projeksiyon + vergi ── */
.detail-box {
  margin: 0 0 1.5rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: .9rem 1.1rem;
}
.detail-box[open] { padding-bottom: 1.4rem; }
.detail-summary {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text2);
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.detail-summary::-webkit-details-marker { display: none; }
.detail-summary::before {
  content: '▸';
  display: inline-block;
  transition: transform .15s;
  color: var(--accent);
}
.detail-box[open] .detail-summary::before { transform: rotate(90deg); }
.detail-sub {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11.5px;
  color: var(--text3);
  margin-left: .4rem;
}
.detail-content {
  margin-top: 1.2rem;
}
.sl-inset {
  margin-top: 0;
}

/* ── TAX SUMMARY — one-liner above tax grid ── */
.tax-summary {
  background: var(--surface);
  padding: .8rem 1rem;
  margin: 0;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.tax-summary strong { font-weight: 700; color: var(--text); }
.tax-summary.ok    { color: #33ddb8; background: rgba(0,212,168,.06); }
.tax-summary.warn  { color: #fbbf24; background: rgba(245,165,36,.08); }

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  .if { font-size: 1rem; }
  .mv { font-size: .95rem; }
  .tax-note { display: none; }
}

/* ── Sahibinden link import (v0) ── */
.shb-block {
  margin-top: 36px;
  padding-top: 28px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.shb-divider {
  position: relative;
  text-align: center;
  margin-bottom: 20px;
  color: var(--text3);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.shb-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
  z-index: 0;
}
.shb-divider span {
  position: relative;
  z-index: 1;
  background: var(--bg);
  padding: 0 14px;
}
.shb-intro {
  font-family: var(--sans);
  color: var(--text2);
  font-size: 15px;
  margin: 0 0 12px;
  text-align: center;
}
.shb-intro strong { color: var(--accent); font-weight: 600; }
.shb-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.shb-input {
  flex: 1;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface2);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  outline: none;
  min-width: 0;
}
.shb-input:focus {
  border-color: var(--accent);
  background: #111111;
}
.shb-input::placeholder { color: #b0b0b0; }
.shb-btn {
  padding: 12px 20px;
  background: var(--accent);
  color: #111111;
  border: none;
  border-radius: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease;
}
.shb-btn:hover:not(:disabled) { background: #33ddb8; }
.shb-btn:disabled { opacity: .55; cursor: wait; }
.shb-error {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: #1f0a0a;
  border: 1px solid #2a0e0e;
  border-radius: 6px;
  color: #ff5555;
  font-size: 13px;
  font-family: var(--sans);
}
.shb-note {
  margin: 10px 0 0;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text3);
  text-align: center;
}
.shb-preview { margin-top: 16px; }
.shb-pv-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  align-items: flex-start;
}
.shb-pv-img {
  width: 160px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: #111111;
}
.shb-pv-body { flex: 1; min-width: 0; }
.shb-pv-title {
  margin: 0 0 12px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}
.shb-pv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 16px;
  margin-bottom: 14px;
}
.shb-pv-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 12px;
}
.shb-pv-row span { color: var(--text3); }
.shb-pv-row strong { color: var(--text); font-weight: 600; }
.shb-pv-cta { margin: 0 0 8px; width: 100%; }
.shb-pv-skip {
  background: transparent;
  border: none;
  color: var(--text3);
  font-family: var(--sans);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  text-decoration: underline;
}
.shb-pv-skip:hover { color: var(--text2); }
@media (max-width: 640px) {
  .shb-row { flex-direction: column; }
  .shb-btn { width: 100%; }
  .shb-pv-card { flex-direction: column; }
  .shb-pv-img { width: 100%; height: 180px; }
}

/* ── LANDING HERO + SHOWCASE — Midas-tarzı büyük slogan + sonuç önizleme ─ */

.hero {
  text-align: center;
  padding: 1.5rem 0 3rem;
  max-width: 1040px;
  margin: 0 auto;
}
.hero-logo {
  height: clamp(90px, 11vw, 140px);
  width: auto;
  display: block;
  margin: 0 auto 1.1rem;
}
.hero-title {
  font-family: var(--sans);
  font-size: clamp(1.7rem, 3.8vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: .9rem;
}
.hero-title span {
  color: var(--accent);
  display: inline-block;
}
.hero-sub {
  font-family: var(--sans);
  font-size: clamp(.95rem, 1.5vw, 1.05rem);
  color: var(--text2);
  line-height: 1.55;
  margin-bottom: 1.4rem;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.hero-cta {
  background: var(--accent);
  color: #111111;
  border: none;
  border-radius: 999px;
  padding: 1.05rem 2.4rem;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 22px rgba(0,212,168, .35);
}
.hero-cta:hover {
  background: #33ddb8;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0,212,168, .45);
}
.hero-foot {
  margin-top: .8rem;
  margin-bottom: 1.5rem;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--text3);
  letter-spacing: -.005em;
}

/* ── LANDING NAV — pencerenin tam tepesinde full-width; içerik site max-width'inde (.wrap) hizalanır
   padding-x = .wrap'in kenar margin'iyle eşleşir: max(5vw, calc((100vw - 1500px) / 2))
   position:relative → step-tracker absolute center'a alınabilsin */
.landing-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.1rem max(5vw, calc((100vw - 1500px) / 2));
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}
.ln-link {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  padding: .55rem .9rem;
  border-radius: 8px;
  transition: background .15s, color .15s;
}
.ln-link:hover { background: var(--surface2); color: var(--accent); }
.ln-right { display: flex; gap: .55rem; align-items: center; }
.ln-btn {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  padding: .65rem 1.3rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.ln-btn:active { transform: translateY(1px); }
.ln-btn-ghost {
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--text);
}
.ln-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.ln-btn-primary {
  background: var(--text);
  border: 1.5px solid var(--text);
  color: #111111;
}
.ln-btn-primary:hover { background: var(--accent2); border-color: var(--accent2); }

/* ── COMING-FRAME — dashed çerçeve + 'YAKINDA' rozeti (footer + auth buttons ortak) ── */
.coming-frame {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  padding: .55rem .75rem;
  background: var(--surface2);
}
.coming-badge {
  position: absolute;
  top: -.55rem;
  left: .9rem;
  background: var(--surface);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent);
  padding: 0 .55rem;
  border-radius: 999px;
  text-transform: uppercase;
}
.ln-auth-frame .ln-btn {
  pointer-events: none;
  opacity: .8;
}

/* Sahibinden link yapıştır — page-head'de YAKINDA framed button */
.sahibinden-frame {
  padding: .35rem .65rem;
}
.sahibinden-btn {
  background: transparent;
  border: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  cursor: not-allowed;
  padding: .25rem .35rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  opacity: .85;
}

/* ── STEP TRACKER — 3 nokta + prev tuşu + sayaç
   welcome step içinde, başlığın altında / seçimlerin üstünde ortalanır */
.step-tracker {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .4rem .85rem;
  margin: 1.5rem auto 2rem;
}
.st-arrow {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: background .15s, color .15s;
}
.st-arrow:hover:not(:disabled) { background: var(--surface); color: var(--accent); }
.st-arrow:disabled { color: var(--text3); cursor: not-allowed; opacity: .5; }
.st-dots { display: inline-flex; gap: 6px; }
.st-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text3);
  opacity: .35;
  transition: opacity .15s, background .15s, transform .15s;
}
.st-dot.is-done { background: var(--accent); opacity: .8; }
.st-dot.is-active {
  background: var(--accent);
  opacity: 1;
  transform: scale(1.35);
}
.st-count {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text2);
  margin-left: .25rem;
}
.st-count strong { color: var(--text); font-weight: 700; }

/* ── PREVIEW STAGE — premium gradient backdrop + vertical bar pattern (Semrush tarzı)
   welcome-inner 1240px parent'ından breakout: 100vw + left:50% + translateX(-50%) ile pencere genişliğinde
   margin-top negatif → gradient preview frame'in tepesinden epey yukarıda başlar (hero alanını da yakalar) */
.preview-stage {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  padding: 4rem max(4vw, calc((100vw - 1620px) / 2)) 0;
  margin: -3rem 0 2rem;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      rgba(236, 253, 245, 0) 0%,
      rgba(187, 247, 208, .55) 30%,
      rgba(110, 231, 183, .70) 70%,
      rgba(52, 211, 153, .60) 100%);
}
/* Vertical bar pattern — premium "bars rising" feel */
.preview-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 16px,
    rgba(0,212,168, .18) 16px 17px
  );
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 25%, rgba(0,0,0,1) 70%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 25%, rgba(0,0,0,1) 70%);
  pointer-events: none;
}
/* Yumuşak glow halesi (preview'in arkasında, aşağı doğru) */
.preview-stage::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -30%;
  width: 85%;
  height: 75%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,212,168, .28) 0%, rgba(0,212,168, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── PREVIEW FRAME — screenshot/MP4 için browser-chrome stili çerçeve ── */
/* ── PREVIEW FRAME — sade clean kart, Semrush tarzı liquid glass
   Glass hissi gradient bar'lardan + soft floating shadow'dan geliyor; frame'in kendisi sade. */
.preview-frame {
  position: relative;
  z-index: 1;
  max-width: 1480px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    /* İnce iç beyaz hat (cam kenar refleksi) */
    inset 0 1px 0 rgba(255, 255, 255, 1),
    /* Tek katman soft float — bar pattern frame'in arkasından görülür */
    0 24px 60px rgba(0, 0, 0, .14),
    0 8px 24px rgba(0, 0, 0, .06);
}
.preview-body {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, #111111 0%, #1c1c1c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-body img,
.preview-body video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.preview-placeholder {
  text-align: center;
  color: var(--text3);
  padding: 2rem;
}
.pp-icon { font-size: 3rem; display: block; margin-bottom: .8rem; opacity: .6; }
.pp-text {
  font-family: var(--sans);
  font-size: 1.05rem;
  color: var(--text2);
  margin: 0 0 .3rem;
  font-weight: 500;
}
.pp-hint {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text3);
  margin: 0;
}

/* ── HAKKIMIZDA sayfası ── */
.brand-logo--sm { height: clamp(48px, 6vw, 64px); }
.about-hero {
  max-width: 760px;
  margin: 2rem auto 3.5rem;
  text-align: center;
}
.about-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 .8rem;
}
.about-title {
  font-family: var(--sans);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.15;
  margin: 0 0 1.1rem;
  color: var(--text);
}
.about-lede {
  font-family: var(--sans);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--text2);
  line-height: 1.6;
  margin: 0;
}
.about-lede + .about-lede { margin-top: 1.1rem; }
.about-section {
  max-width: 1100px;
  margin: 0 auto 3.5rem;
}
.about-section-label {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text3);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 1.5rem;
}

/* FAQ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  max-width: 800px;
  margin: 0 auto;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  transition: border-color .15s;
}
.faq-item:hover { border-color: var(--accent); }
.faq-item[open] { border-color: var(--accent); }
.faq-q {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  padding: 1rem 1.2rem;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 2.5rem;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: '+';
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--accent);
  transition: transform .15s;
}
.faq-item[open] .faq-q::after { content: '−'; }
.faq-a {
  font-family: var(--sans);
  font-size: .98rem;
  color: var(--text2);
  line-height: 1.6;
  padding: 0 1.2rem 1.1rem;
  margin: 0;
}
.faq-a-pending {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .15em;
  color: var(--accent);
}
/* ── SITE FOOTER — js/ui/footer.js tarafından inject ediliyor; her sayfada görünür ── */
.site-footer {
  margin-top: 4rem;
  padding: 2.5rem max(5vw, calc((100vw - 1500px) / 2)) 2rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--sans);
}
.sf-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.sf-social-block {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  padding: .85rem 1.1rem;
  background: var(--surface2);
}
.sf-coming-badge {
  position: absolute;
  top: -.55rem;
  left: .9rem;
  background: var(--surface);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent);
  padding: 0 .55rem;
  border-radius: 999px;
  text-transform: uppercase;
}
.sf-social-icons { display: inline-flex; gap: .65rem; }
.sf-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
  opacity: .55;
  cursor: not-allowed;
  border-radius: 8px;
  transition: opacity .15s, color .15s, background .15s;
}
.sf-icon:hover { opacity: .8; color: var(--accent2); background: rgba(0,212,168, .06); }
.sf-icon svg { width: 18px; height: 18px; }

.sf-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.sf-links a {
  color: var(--text2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color .15s;
}
.sf-links a:hover { color: var(--accent); }

.sf-copyright {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: 13px;
  color: var(--text3);
}
.sf-brand img {
  height: 36px;
  width: auto;
  display: block;
  opacity: .85;
}
@media (max-width: 700px) {
  .sf-inner { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
}

/* Section labels (showcase, features) */
.hero-section-label {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text3);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 1.6rem;
}

/* Showcase — 3 mock result cards yan yana */
.hero-showcase {
  margin: 1rem 0 3.5rem;
}
.showcase-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 1.1rem;
  align-items: stretch;
}
@media (max-width: 900px) {
  .showcase-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }
}
.showcase-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem 1.3rem;
  box-shadow: 0 4px 20px rgba(10, 31, 21, .04);
  text-align: left;
  transition: transform .2s ease, box-shadow .2s ease;
}
.showcase-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(10, 31, 21, .08);
}

/* Verdict card */
.sc-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.sc-pill-good {
  background: #1c1c1c;
  color: #33ddb8;
  border: 1px solid #2a2a2a;
}
.sc-verdict-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem 1rem;
}
.sc-cell { display: flex; flex-direction: column; gap: 2px; }
.sc-label {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--text3);
  letter-spacing: -.005em;
}
.sc-val {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.sc-val-hi { color: var(--accent); font-weight: 600; }
.sc-val-sub {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text3);
  letter-spacing: -.005em;
  margin-top: 2px;
}

/* Chart card */
.sc-title {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .55rem;
}
.sc-leg {
  display: flex;
  gap: .9rem;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--text2);
  margin-bottom: .7rem;
  flex-wrap: wrap;
}
.sc-leg span { display: inline-flex; align-items: center; gap: 4px; }
.sc-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.sc-dot-ring {
  background: #111111;
  border: 2px solid #00d4a8;
}
.sc-svg {
  width: 100%;
  height: 140px;
  display: block;
}

/* Reasons card */
.sc-reasons-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}
.sc-reasons-list li {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.3;
}
.sc-reasons-list em {
  color: var(--text3);
  font-style: normal;
  font-size: 12px;
}
.sc-reason-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .05em;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.sc-ok {
  background: #1c1c1c;
  color: #33ddb8;
}

.hero-showcase-note {
  text-align: center;
  margin-top: 1.3rem;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--text3);
  font-style: italic;
}

/* Features section — relabeled "şu sorulara cevap verir" */
.hero-features {
  margin: 2.5rem 0 2.5rem;
}

/* CTA-wrapper bottom shb block separator */
#step-landing .shb-block {
  max-width: 720px;
  margin: 0 auto;
}

/* ── CASH-BUYER MODE — krediyi olmayan inputlar/grafikler gizli ── */
html.cash-mode [data-credit-only] { display: none !important; }

/* Cash-mode rozet — form üstünde bilgi pill'i, "Peşin alım modu" der */
/* Cash-mode badge — page-head içinde Birim ile aynı satırda, inline button */
.cash-mode-badge {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 16px;
  background: #1c1c1c;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text2);
  text-align: left;
  line-height: 1.3;
  white-space: normal;
}
.cash-mode-badge strong { color: var(--text); }
html.cash-mode .cash-mode-badge { display: inline-flex; }

.pesin-info-box {
  background: #111111;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text2);
  line-height: 1.55;
  margin-bottom: .25rem;
  display: none;
}
html.cash-mode .pesin-info-box { display: block; }

/* ── WAITLIST GATE — blur + modal ──────────────────────────────── */

.locked-zone { position: relative; }

.locked-zone.is-locked > .locked-content {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
  transition: filter .35s ease;
}

.locked-zone.is-locked > .locked-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 35%,
    rgba(255,255,255,.85) 100%
  );
  z-index: 5;
}

.locked-zone:not(.is-locked) > .locked-fade { display: none; }

/* Reopen pill — shown when modal is dismissed but content still locked */
.wl-reopen {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1099;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--accent);
  color: #111111;
  border: none;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0,212,168,.35);
  transition: background .15s ease, transform .15s ease;
}
.wl-reopen:hover { background: #33ddb8; transform: translateY(-1px); }
.wl-reopen.is-visible { display: inline-flex; }
.wl-reopen-lock { font-size: 14px; }

/* Modal overlay */
.wl-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(10, 31, 21, 0.55);
  backdrop-filter: blur(2px);
  animation: wlFadeIn .2s ease;
}
.wl-overlay.is-open { display: flex; }
@keyframes wlFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.wl-modal {
  width: 100%;
  max-width: 460px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 26px 24px;
  box-shadow: 0 30px 80px rgba(10, 31, 21, .25);
  position: relative;
  animation: wlSlideUp .25s ease;
}
@keyframes wlSlideUp {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.wl-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--text3);
  cursor: pointer;
  border-radius: 6px;
}
.wl-close:hover { background: var(--surface2); color: var(--text); }

.wl-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--accent);
  margin-bottom: 8px;
}
.wl-title {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
  margin-bottom: 8px;
}
.wl-sub {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text2);
  margin-bottom: 16px;
}

.wl-feats {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.wl-feats li {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  padding-left: 18px;
  position: relative;
  line-height: 1.45;
}
.wl-feats li::before {
  content: "•";
  color: var(--accent);
  position: absolute;
  left: 4px;
  font-weight: 700;
}

/* Tier groups (her analiz / eval PRO / eval MAX) */
.wl-tier {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.wl-tier-head {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent2);
  margin-bottom: 6px;
  letter-spacing: 0;
}
/* PRO → Apple-style koyu gri; MAX → siyah */
.wl-tier-head .wl-tier-tag {
  background: #e0e0e0;   /* slate-700, Apple koyu gri */
  color: #111111;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .05em;
}
.wl-tier-head { color: #e0e0e0; }
.wl-tier-head.max .wl-tier-tag {
  background: #ffffff;   /* siyah */
}
.wl-tier-head.max { color: #ffffff; }
.wl-tier-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}
.wl-tier-list li {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
  padding-left: 16px;
  position: relative;
}
.wl-tier-list li::before {
  content: "✓";
  color: #e0e0e0;
  position: absolute;
  left: 0;
  font-weight: 700;
  font-size: 11px;
  top: 1px;
}
.wl-tier-head.max ~ .wl-tier-list li::before { color: #ffffff; }

/* Free tier (her analiz): kutusuz, plain paragraph */
.wl-tier-free {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text2);
  margin: 0 0 12px;
  padding: 0 4px;
}
.wl-tier-free strong { color: var(--text); font-weight: 700; }

/* Tier başlığındaki fiyat (sağa yaslı) */
.wl-tier-price {
  margin-left: auto;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0;
  white-space: nowrap;
}
.wl-tier-price span {
  color: var(--text3);
  font-weight: 500;
  font-size: 11px;
}

/* "Her tam analiz" numaralı liste (yeşil rozetli) */
.wl-analiz-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0 4px;
  counter-reset: analiz;
  display: grid;
  gap: 6px;
}
.wl-analiz-list li {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
  padding-left: 24px;
  position: relative;
  counter-increment: analiz;
}
.wl-analiz-list li::before {
  content: counter(analiz);
  position: absolute;
  left: 0;
  top: 0;
  width: 17px;
  height: 17px;
  background: var(--accent);
  color: #111111;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Prominent açılış fiyatı kutusu (yeşil: marka accent, en vurgulu eleman) */
.wl-offer {
  background: rgba(0, 212, 168, .08);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 16px;
  margin: 0 0 18px;
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 212, 168, .16);
}
.wl-offer-badge {
  position: absolute;
  top: -10px;
  left: 14px;
  background: var(--accent);
  color: #111111;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 3px 8px;
  border-radius: 4px;
}
.wl-offer-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.wl-offer-body strong { color: var(--accent); font-weight: 700; }

.wl-pricing {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text2);
}
.wl-pricing strong { color: var(--text); }

.wl-form { display: grid; gap: 12px; }
.wl-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface2);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  outline: none;
}
.wl-input:focus { border-color: var(--accent); background: #111111; }
.wl-input.is-error { border-color: var(--danger); background: #1f0a0a; }

.wl-segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.wl-segment label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--text2);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.wl-segment input { display: none; }
.wl-segment label:hover { color: var(--text); }
.wl-segment input:checked + span { color: var(--text); font-weight: 600; }
.wl-segment label:has(input:checked) {
  background: #111111;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.wl-submit {
  padding: 12px 18px;
  background: var(--accent);
  color: #111111;
  border: none;
  border-radius: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s ease;
}
.wl-submit:hover:not(:disabled) { background: #33ddb8; }
.wl-submit:disabled { opacity: .55; cursor: wait; }

.wl-foot {
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--text3);
  text-align: center;
  line-height: 1.5;
}
.wl-foot strong { color: var(--text2); font-weight: 500; }
.wl-foot a { color: var(--accent2); text-decoration: underline; }
.wl-foot a:hover { color: #33ddb8; }

.wl-success {
  display: none;
  text-align: center;
  padding: 8px 4px 4px;
}
.wl-success.is-visible { display: block; }
.wl-success-emoji { font-size: 28px; margin-bottom: 8px; }
.wl-success-title {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.wl-success-msg {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
}

@media (max-width: 480px) {
  .wl-modal { padding: 22px 18px 18px; }
  .wl-title { font-size: 18px; }
}


/* ============================================================
   DASHBOARD (yeni verdict yapısı)
   Bölüm yapısı: headline + Gider + Amortisman + Alternatif Yatırım
   Tüm class'lar dashboard-mock.html'den alındı, isimler benzersiz.
   ============================================================ */

.dashboard { display: flex; flex-direction: column; gap: 1rem; }

/* Headline — eval brand greens (--accent: emerald-500 #00d4a8, primary brand) */
.v-headline {
  background: linear-gradient(180deg, rgba(0,212,168,.14), rgba(0,212,168,.05));
  border: 2px solid rgba(0,212,168,.55);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: center;
}
.v-headline.meh { background: linear-gradient(180deg, rgba(245,165,36,.08), rgba(245,165,36,.04)); border-color: rgba(245,165,36,.5); }
.v-headline.bad { background: linear-gradient(180deg, rgba(255,45,45,.08), rgba(255,45,45,.04)); border-color: rgba(255,45,45,.5); }
.v-h-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--accent); color: #111111; display: grid; place-items: center; font-size: 32px; font-weight: 700; }
.v-headline.meh .v-h-icon { background: var(--warning); }
.v-headline.bad .v-h-icon { background: var(--danger); }
.v-h-main { display: flex; flex-direction: column; gap: .15rem; }
.v-h-title { font-size: 12px; font-weight: 600; color: var(--text3); letter-spacing: .04em; }
.v-h-verdict { font-size: 26px; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.v-headline.good .v-h-verdict { color: var(--accent); }
.v-headline.meh  .v-h-verdict { color: #fbbf24; }
.v-headline.bad  .v-h-verdict { color: var(--danger); }
.v-h-sub { font-size: 13px; color: var(--text2); }
.v-h-score { text-align: right; display: flex; flex-direction: row; align-items: baseline; gap: .65rem; }
.v-h-score-num { font-size: 42px; font-weight: 700; color: var(--accent); line-height: 1; letter-spacing: -.04em; }
.v-headline.meh .v-h-score-num { color: var(--warning); }
.v-headline.bad .v-h-score-num { color: var(--danger); }
.v-h-score-num small { font-size: 42px; color: var(--accent); font-weight: 700; letter-spacing: -.04em; }
.v-headline.meh .v-h-score-num small { color: var(--warning); }
.v-headline.bad .v-h-score-num small { color: var(--danger); }
.v-h-grade { display: inline-block; padding: 0 .85rem; border-radius: 10px; background: var(--accent); color: #111111; font-size: 42px; font-weight: 700; line-height: 1.1; letter-spacing: -.03em; }
.v-headline.meh .v-h-grade { background: var(--warning); }
.v-headline.bad .v-h-grade { background: var(--danger); }

/* Varsayımlar kartı — verdict box'ın hemen altında, hesabın temel girdileri */
.vars-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-top: 1rem;
}
.vars-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .65rem;
  padding-bottom: .5rem;
  border-bottom: 1px dashed var(--border);
}
.vars-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.vars-sub {
  font-size: 11px;
  color: var(--text3);
}
.vars-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem 1.5rem;
}
.vars-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .55rem;
  align-items: center;
  padding: .45rem 0;
  font-size: 13.5px;
  border-bottom: 1px dashed #1c1c1c;
}
.vars-row:last-of-type,
.vars-row:nth-last-of-type(2) { border-bottom: 0; }
.vars-label { color: var(--text2); font-weight: 500; }
.vars-val {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vars-val small {
  font-size: 11px;
  color: var(--text3);
  font-weight: 500;
  margin-left: 2px;
}
.vars-info {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 10px; font-weight: 700;
  cursor: help;
  position: relative;
  transition: background .15s;
}
.vars-info:hover { background: var(--accent); color: #111111; border-color: var(--accent); }
.vars-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: #ffffff;
  color: #1c1c1c;
  padding: .75rem .9rem;
  border-radius: 8px;
  font-size: 12px; line-height: 1.5;
  font-weight: 400;
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0; visibility: hidden;
  transition: opacity .15s, visibility .15s;
  z-index: 100;
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
  pointer-events: none;
}
.vars-tip::after {
  content: '';
  position: absolute;
  top: 100%; right: 6px;
  border: 6px solid transparent;
  border-top-color: #ffffff;
}
.vars-info:hover .vars-tip,
.vars-info:focus .vars-tip { opacity: 1; visibility: visible; }
.vars-tip-title {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #333333;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.vars-tip-body { color: #1c1c1c; }
.vars-tip-body strong { color: #111111; font-weight: 600; }

@media (max-width: 700px) {
  .vars-list { grid-template-columns: 1fr; }
  .vars-row:nth-last-of-type(2) { border-bottom: 1px dashed #1c1c1c; }
}

/* Section — başlık + sayı hizalı (round icon ile title center) */
.dash-section { margin-top: 1rem; }
.dash-section:first-child { margin-top: 0; }
.dash-section-head { display: flex; align-items: center; gap: .75rem; padding-bottom: .6rem; border-bottom: 2px solid var(--accent); margin-bottom: 1rem; }
.dash-section-num { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #111111; display: inline-grid; place-items: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.dash-section-title { font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -.01em; margin: 0; }
.dash-section-sub { font-size: 12px; color: var(--text3); margin-left: auto; font-weight: 500; }
.dash-section-body { display: flex; flex-direction: column; gap: 1rem; }

/* Özet card (bullets) */
.ozet-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem 1.75rem; }
.ozet-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .85rem; }
.ozet-item { display: grid; grid-template-columns: 28px 1fr; gap: .85rem; align-items: start; padding-bottom: .85rem; border-bottom: 1px dashed #1c1c1c; }
.ozet-item:last-child { border-bottom: 0; padding-bottom: 0; }
.ozet-icon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #111111; flex-shrink: 0; }
.ozet-icon.good { background: var(--accent); }
.ozet-icon.warn { background: #ffffff; }   /* siyah, premium */
.ozet-icon.bad { background: var(--danger); }
.ozet-body { display: flex; flex-direction: column; gap: .15rem; }
.ozet-headline { font-size: 16px; line-height: 1.4; color: var(--text); font-weight: 500; }
.ozet-headline strong { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.ozet-headline .num-good { color: var(--accent); font-weight: 700; }
.ozet-headline .num-bad { color: var(--danger); font-weight: 700; }
.ozet-headline .num-warn { color: var(--text); font-weight: 700; }
.ozet-sub { font-size: 12.5px; color: var(--text3); line-height: 1.45; margin-top: .15rem; }

/* Bullet tooltip */
.ozet-info { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--surface2); border: 1px solid var(--border); color: var(--accent2); font-size: 10px; font-weight: 700; margin-left: .35rem; cursor: help; position: relative; vertical-align: 1px; transition: background .15s; }
.ozet-info:hover { background: var(--accent2); color: #111111; border-color: var(--accent2); }
.ozet-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 320px; background: #ffffff; color: #1c1c1c; padding: .85rem 1rem; border-radius: 8px; font-size: 12px; line-height: 1.55; font-weight: 400; text-align: left; letter-spacing: 0; text-transform: none; opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s; z-index: 100; box-shadow: 0 12px 32px rgba(0,0,0,.25); pointer-events: none; }
.ozet-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #ffffff; }
.ozet-info:hover .ozet-tooltip, .ozet-info:focus .ozet-tooltip { opacity: 1; visibility: visible; }
.ozet-item:first-child .ozet-tooltip { bottom: auto; top: calc(100% + 8px); }
.ozet-item:first-child .ozet-tooltip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #ffffff; }
.ozet-tooltip-title { display: block; font-size: 10px; font-weight: 700; color: #333333; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .4rem; }
.ozet-tooltip-body { color: #1c1c1c; }
.ozet-tooltip-body p { margin: 0 0 .5rem; }
.ozet-tooltip-body p:last-child { margin: 0; }
.ozet-tooltip-body strong { color: #111111; font-weight: 600; }
.ozet-tooltip-list { list-style: none; padding: 0; margin: .35rem 0 0; display: grid; gap: .25rem; }
.ozet-tooltip-list li { display: grid; grid-template-columns: 1fr auto; gap: .5rem; font-variant-numeric: tabular-nums; color: #1c1c1c; font-size: 11.5px; }
.ozet-tooltip-list li strong { color: #111111; }

/* Eval Farkı (inline comparison) */
.eval-diff { margin-top: .65rem; padding: .7rem .85rem; background: linear-gradient(180deg, rgba(0,212,168,.06), rgba(0,212,168,.02)); border: 1px solid rgba(0,212,168,.25); border-left: 3px solid var(--accent2); border-radius: 6px; }
.eval-diff-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--accent2); }
.eval-diff-tag { background: var(--accent); color: #111111; padding: 1px 6px; border-radius: 3px; font-size: 9.5px; }
.eval-diff-rows { display: flex; flex-direction: column; gap: .3rem; }
.eval-diff-row { display: grid; grid-template-columns: 130px 1fr 60px; gap: .6rem; align-items: center; font-size: 12px; }
.eval-diff-label { color: var(--text2); font-weight: 500; }
.eval-diff-bar { height: 8px; background: #1c1c1c; border-radius: 4px; position: relative; overflow: hidden; }
.eval-diff-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.eval-diff-bar-fill.sector { background: #2a2a2a; }
.eval-diff-bar-fill.eval { background: var(--accent); }
.eval-diff-val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); text-align: right; font-size: 12px; }
.eval-diff-foot { margin-top: .5rem; font-size: 11px; color: var(--text3); line-height: 1.45; }
.eval-diff-foot strong { color: var(--accent2); font-weight: 600; }

/* Gizli masraf waterfall */
.hc-card { background: #111111; border: 1px solid #2a2a2a; border-radius: 12px; padding: 1.25rem 1.5rem; }
.hc-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .75rem; flex-wrap: wrap; gap: .5rem; }
.hc-title { font-size: 14px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: .4rem; }
.hc-title-tag { font-size: 10px; font-weight: 700; letter-spacing: .06em; background: #ffffff; color: #111111; padding: 2px 6px; border-radius: 4px; }
.hc-sub { font-size: 11px; color: var(--text3); }
.hc-body { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; }
.hc-bars { position: relative; height: 260px; display: flex; justify-content: space-around; align-items: flex-end; padding: 30px 1rem; }
.hc-bar { width: 90px; position: relative; display: flex; flex-direction: column-reverse; border-radius: 6px 6px 0 0; overflow: hidden; }
.hc-bar-label { position: absolute; bottom: -22px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: var(--text3); white-space: nowrap; letter-spacing: .04em; text-transform: uppercase; }
.hc-bar-total { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hc-seg { width: 100%; border-bottom: 1px solid rgba(255,255,255,.7); }
.hc-seg:first-child { border-bottom: 0; }
.hc-seg.base { background: var(--accent); }
.hc-seg.tapu  { background: #b0b0b0; }   /* slate-400 */
.hc-seg.emlak { background: #b0b0b0; }   /* slate-500 */
.hc-seg.sig   { background: #e0e0e0; }   /* slate-700 */
.hc-seg.kredi { background: #ffffff; }   /* near-black */
.hc-diff-arrow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #ffffff; border: 2px solid #ffffff; color: #111111; padding: .4rem .7rem; border-radius: 8px; font-size: 13px; font-weight: 700; box-shadow: 0 6px 18px rgba(0,0,0,.18); white-space: nowrap; }
.hc-breakdown { border-left: 1px solid #2a2a2a; padding-left: 1.5rem; }
.hc-row { display: grid; grid-template-columns: 14px 1fr auto auto; gap: .5rem; align-items: center; padding: .35rem 0; font-size: 13px; border-bottom: 1px dashed #2a2a2a; }
.hc-row:last-of-type { border-bottom: 0; }
.hc-swatch { width: 10px; height: 10px; border-radius: 2px; }
.hc-row-label { color: var(--text2); }
.hc-row-pct { color: var(--text3); font-size: 11px; font-variant-numeric: tabular-nums; }
.hc-row-val { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; padding-left: .5rem; }
.hc-total-row { margin-top: .5rem; padding-top: .6rem; border-top: 2px solid #ffffff; display: flex; justify-content: space-between; align-items: baseline; }
.hc-total-row .label { color: var(--text); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.hc-total-row .val { font-size: 18px; color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Projection chart + table card */
.proj-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem 1.5rem; }
.proj-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5rem; flex-wrap: wrap; gap: .5rem; }
.proj-title { font-size: 14px; font-weight: 700; color: var(--text); }
.proj-sub { font-size: 11px; color: var(--text3); }
.proj-body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.5rem; margin-top: .75rem; }
.proj-chart { background: #111111; border: 1px solid var(--border); border-radius: 8px; padding: .75rem; height: 300px; }
.proj-chart svg { width: 100%; height: 100%; display: block; }
.proj-legend { display: flex; flex-wrap: wrap; gap: .75rem; font-size: 11px; margin-top: .5rem; }
.proj-legend-item { display: inline-flex; align-items: center; gap: .3rem; color: var(--text2); }
.proj-legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.proj-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.proj-table th, .proj-table td { padding: .55rem .5rem; text-align: right; font-variant-numeric: tabular-nums; border-bottom: 1px solid #1c1c1c; }
.proj-table th { font-size: 11px; font-weight: 600; color: var(--text3); letter-spacing: .04em; text-transform: uppercase; background: var(--surface2); }
.proj-table th:first-child, .proj-table td:first-child { text-align: left; }
.proj-table .row-label { display: flex; align-items: center; gap: .4rem; color: var(--text2); font-weight: 500; }
.proj-table .row-dot { width: 8px; height: 8px; border-radius: 50%; }
.proj-table tr.ev-row { background: rgba(0,212,168,.05); }
.proj-table tr.ev-row .row-label { color: var(--text); font-weight: 700; }
.proj-table strong { color: var(--text); font-weight: 600; }
.proj-table .pct-pos { color: var(--accent2); font-size: 10px; display: block; }
.proj-table .pct-neg { color: var(--danger); font-size: 10px; display: block; }
.proj-disclaimer { font-size: 10.5px; color: var(--text3); margin-top: .5rem; line-height: 1.45; }

/* Responsive */
@media (max-width: 900px) {
  .hc-body, .proj-body { grid-template-columns: 1fr; }
  .v-headline { grid-template-columns: auto 1fr; }
  .v-h-score { grid-column: span 2; flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ============================================================
   LOADING OVERLAY — Hesapla tıklamada gösterilir
   ============================================================ */
.loader-overlay {
  position: fixed; inset: 0;
  background: #111111;
  backdrop-filter: blur(8px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 10000;
  opacity: 1;
  transition: opacity .6s ease;
}
.loader-overlay.show { display: flex; }
.loader-overlay.fade-out { opacity: 0; pointer-events: none; }

/* Ready state: bar 100%, "Sonuçlar hazır" + checkmark, ~2.5sn göster sonra fade */
.loader-ready-check {
  display: none;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #111111;
  font-size: 28px; font-weight: 700;
  align-items: center; justify-content: center;
  margin: 0 auto 1rem;
  animation: loaderReadyPop .5s cubic-bezier(.34, 1.56, .64, 1);
}
.loader-overlay.is-ready .loader-ready-check { display: flex; }
.loader-overlay.is-ready .loader-bar-wrap,
.loader-overlay.is-ready .loader-pct,
.loader-overlay.is-ready .loader-status { display: none; }
.loader-overlay.is-ready .loader-logo {
  font-size: 22px;
  color: var(--accent);
  margin-bottom: 1.25rem;
}
.loader-overlay.is-ready .loader-disclaimer { opacity: .6; }
@keyframes loaderReadyPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.loader-card {
  max-width: 480px;
  width: 90%;
  padding: 2rem 2rem 1.5rem;
  text-align: center;
  position: relative;
}

/* İptal butonu — siyah daire, beyaz X */
.loader-cancel-btn {
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #2a2a2a;
  color: #ffffff;
  border: none;
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.65;
  transition: opacity .15s, transform .15s;
  line-height: 1;
  padding: 0;
}
.loader-cancel-btn:hover { opacity: 1; transform: scale(1.1); }

/* İptal edildi state — bar/pct/status gizle, metin koyu */
.loader-overlay.is-cancelled .loader-bar-wrap,
.loader-overlay.is-cancelled .loader-pct,
.loader-overlay.is-cancelled .loader-status,
.loader-overlay.is-cancelled .loader-cancel-btn { display: none; }
.loader-overlay.is-cancelled .loader-logo {
  font-size: 20px;
  color: var(--text1);
}
.loader-overlay.is-cancelled .loader-disclaimer { opacity: .5; }
.loader-logo {
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 1.25rem;
  letter-spacing: -.02em;
}
.loader-logo small {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text3);
  margin-top: .25rem;
  letter-spacing: 0;
}
.loader-bar-wrap {
  height: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  margin: 0 0 .75rem;
}
.loader-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  width: 0%;
  transition: width .4s cubic-bezier(.4, 0, .2, 1);
}

/* Durum mesajı (her adımda değişir, Claude/GPT tarzı) */
.loader-status {
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  margin: 0 0 1rem;
  min-height: 1.45em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  letter-spacing: 0;
}
.loader-status .ls-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: loaderDotPulse 1s ease-in-out infinite;
  flex-shrink: 0;
}
.loader-status-text {
  animation: loaderStatusFade .3s ease;
}
@keyframes loaderStatusFade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes loaderDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.65); }
}
.loader-pct {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 1.5rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.loader-disclaimer {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.6;
  padding: 1rem 1.25rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: left;
}
.loader-disclaimer strong { color: var(--text); font-weight: 600; }

/* Sayfa altı disclaimer (sonuç ekranı sonu) */
.bottom-disclaimer {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.6;
  text-align: center;
}
.bottom-disclaimer strong { color: var(--text); font-weight: 600; }
.bottom-disclaimer .bd-title {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: .5rem;
}