/* ═══════════════════════════════════════════════════════════
   COMPONENTS.CSS — Solar Rota v2.0 Modüler Bileşenler
   ═══════════════════════════════════════════════════════════ */

/* ── Öz-barındırılan fontlar (P3 — Google Fonts bağımlılığı kaldırıldı)
   Inter: 400/500/600/700  |  Space Grotesk: 400/500/600/700(+800 alias)
   Kaynak: assets/fonts/*.woff2  — SRI hash'leri scripts/verify-sri.mjs ile doğrulanabilir.
   Not: Space Grotesk max weight=700; CSS'teki 800 referansları bu alias'a düşer. ── */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/Inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/Inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/Inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/Inter-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/SpaceGrotesk-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/SpaceGrotesk-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/SpaceGrotesk-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/SpaceGrotesk-700.woff2') format('woff2');
}
/* weight:800 alias → Space Grotesk'in maksimum ağırlığı 700'dür; tarayıcı en yakın değeri seçer */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/SpaceGrotesk-700.woff2') format('woff2');
}

/* ── F1.F: index.html inline <style> bloğundan taşınan FOUC-kritik
   reset, :root vars, theme-light override, body, scrollbar, keyframes.
   Bu kurallar dış CSS olmadan tarayıcı flicker üretebileceği için
   en üstte tutuldu. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Core palette */
  --primary:#F59E0B;--primary-dark:#D97706;--primary-glow:rgba(245,158,11,0.25);
  --accent:#06B6D4;--accent-dark:#0891B2;--accent-glow:rgba(6,182,212,0.2);
  --secondary:#1C1C1E;--surface:#242426;--surface-light:#2C2C2E;
  --surface-glass:rgba(255,255,255,0.04);
  --text:#F5F5F7;--text-muted:#B1B1B6;
  --success:#10B981;--danger:#EF4444;
  --border:#3A3A3C;--border-subtle:rgba(255,255,255,0.07);
  --radius:14px;--radius-lg:20px;--radius-xl:28px;--radius-2xl:40px;
  --transition:0.3s ease;--transition-bounce:0.4s cubic-bezier(0.34,1.56,0.64,1);
  --font-display:'Space Grotesk','Inter',sans-serif;
  --font-body:'Inter',sans-serif;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.5),0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:0 4px 16px rgba(0,0,0,0.6),0 2px 8px rgba(0,0,0,0.4);
  --shadow-glow-primary:0 0 24px rgba(245,158,11,0.3),0 4px 16px rgba(0,0,0,0.5);
  --shadow-glow-accent:0 0 24px rgba(6,182,212,0.25),0 4px 16px rgba(0,0,0,0.5);
  --shadow-card:0 1px 0 rgba(255,255,255,0.04) inset,0 8px 32px rgba(0,0,0,0.5),0 2px 8px rgba(0,0,0,0.4);
  /* Scenario colors */
  --scenario-ongrid:#F59E0B;--scenario-offgrid:#8B5CF6;--scenario-irrigation:#10B981;
  --scenario-heatpump:#EC4899;--scenario-mobile:#06B6D4;--scenario-ev:#3B82F6;
  /* Hero */
  --hero-gradient:linear-gradient(135deg,#1C1C1E 0%,#242426 50%,#1C1C1E 100%);
  --header-h:138px;
}
[data-theme="light"]{
  --secondary:#F2F2F7;--surface:#FFFFFF;--surface-light:#E5E5EA;
  --surface-glass:rgba(0,0,0,0.03);
  --text:#1C1C1E;--text-muted:#6C6C70;
  --border:#C7C7CC;--border-subtle:rgba(0,0,0,0.08);
  --shadow-sm:0 1px 3px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:0 4px 16px rgba(0,0,0,0.12),0 2px 8px rgba(0,0,0,0.08);
  --shadow-glow-primary:0 0 24px rgba(245,158,11,0.25),0 4px 16px rgba(0,0,0,0.1);
  --shadow-glow-accent:0 0 24px rgba(6,182,212,0.2),0 4px 16px rgba(0,0,0,0.1);
  --shadow-card:0 1px 0 rgba(255,255,255,0.9) inset,0 4px 16px rgba(0,0,0,0.1),0 2px 8px rgba(0,0,0,0.06);
  --hero-gradient:linear-gradient(135deg,#F2F2F7 0%,#E5E5EA 50%,#F2F2F7 100%);
}
.settings-choice-btn{flex:1;padding:9px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface-light);color:var(--text);cursor:pointer;font-size:0.85rem;transition:0.2s;text-align:center;font-family:var(--font-body)}
.settings-choice-btn:hover{background:var(--primary);color:#000;border-color:var(--primary)}
.settings-choice-btn.active{background:var(--primary);color:#000;border-color:var(--primary);font-weight:700}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);background:var(--secondary);color:var(--text);
  min-height:100vh;overflow-x:hidden;
  background-image:
    radial-gradient(ellipse 80% 60% at 20% -10%,rgba(245,158,11,0.08) 0%,transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 110%,rgba(6,182,212,0.06) 0%,transparent 55%);
  animation:bgDrift 18s ease-in-out infinite alternate;
}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes bgDrift{0%{background-position:0% 0%}50%{background-position:2% 2%}100%{background-position:-1% 1%}}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0.022;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
body>*{position:relative;z-index:1}
body>main{z-index:auto}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--secondary)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* ── BÖLÜM TANITIM METNİ ────────────────────────────────── */
.section-intro {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--primary);
  border-radius: 0 8px 8px 0;
}

/* ── DİL SEÇİCİ ──────────────────────────────────────────── */
.lang-switcher {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 3px;
}

.lang-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

.lang-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text);
}

.lang-btn.active {
  background: var(--primary);
  color: #000;
}

/* ── PARA BİRİMİ SEÇİCİ ────────────────────────────────── */
.currency-switcher {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 3px;
}

.currency-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}

.currency-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text);
}

.currency-btn.active {
  background: var(--primary);
  color: #000;
}

/* ── ON-GRID FLOW ───────────────────────────────────────── */
.on-grid-flow-panel {
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 18px;
}

.on-grid-flow-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.on-grid-flow-head h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0 0 6px;
  letter-spacing: 0;
}

.on-grid-flow-head p {
  color: var(--text-muted);
  font-size: .86rem;
  line-height: 1.6;
  margin: 0;
  max-width: 760px;
}

.on-grid-mode-toggle {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
}

.on-grid-mode-toggle button,
.on-grid-monthly-head button {
  border: 0;
  border-radius: 6px;
  padding: 7px 10px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: .78rem;
}

.on-grid-mode-toggle button.active,
.on-grid-monthly-head button {
  background: var(--primary);
  color: #111827;
  font-weight: 700;
}

.offgrid-l2-card {
  margin: 16px 0;
  padding: 18px;
  border: 1px solid rgba(245,158,11,.18);
  border-radius: 16px;
  background:
    radial-gradient(circle at top left, rgba(245,158,11,.12), transparent 34%),
    linear-gradient(145deg, rgba(15,23,42,.54), rgba(2,6,23,.24));
  box-shadow: 0 18px 46px rgba(2,6,23,.16);
}

.offgrid-l2-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: .94rem;
  font-weight: 800;
}

.offgrid-block {
  margin-bottom: 14px;
}

.offgrid-block-kicker {
  color: var(--text-muted);
  font-size: .75rem;
  margin-bottom: 7px;
}

.offgrid-sizing-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.offgrid-mode-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.offgrid-sizing-choice-grid button,
.offgrid-mode-toggle button {
  min-width: 0;
  border: 1px solid rgba(245,158,11,.16);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(15,23,42,.34);
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
}

.offgrid-sizing-choice-grid button strong,
.offgrid-mode-toggle button strong {
  display: block;
  color: var(--text);
  font-family: var(--font-display);
  font-size: .92rem;
  margin-bottom: 4px;
}

.offgrid-sizing-choice-grid button span,
.offgrid-mode-toggle button span {
  display: block;
  font-size: .74rem;
  line-height: 1.55;
}

.offgrid-sizing-choice-grid button small {
  display: block;
  margin-top: 7px;
  color: var(--text-muted);
  font-size: .68rem;
  line-height: 1.45;
}

.offgrid-sizing-choice-grid button.active,
.offgrid-mode-toggle button.active {
  border-color: rgba(245,158,11,.62);
  background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(6,182,212,.07));
  box-shadow: 0 10px 24px rgba(15,23,42,.18);
}

.offgrid-mode-hint,
.offgrid-advanced-note,
.offgrid-simple-intro {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: .74rem;
  line-height: 1.65;
}

.offgrid-simple-intro,
.offgrid-advanced-note {
  margin-bottom: 10px;
  padding: 11px 13px;
  border: 1px solid rgba(245,158,11,.14);
  border-radius: 10px;
  background: rgba(245,158,11,.055);
}

.offgrid-simple-intro strong {
  display: block;
  color: var(--text);
  margin-bottom: 4px;
}

.offgrid-simple-intro span {
  display: block;
}

.offgrid-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.offgrid-explain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.offgrid-explain-grid > div {
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 10px;
  padding: 10px;
  background: rgba(2,6,23,.16);
}

.offgrid-explain-grid strong {
  display: block;
  color: var(--text);
  font-size: .78rem;
  margin-bottom: 4px;
}

.offgrid-explain-grid span {
  display: block;
  color: var(--text-muted);
  font-size: .71rem;
  line-height: 1.55;
}

.offgrid-profile-card {
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255,255,255,.035);
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
}

.offgrid-profile-card.selected {
  border-color: rgba(245,158,11,.68);
  background: linear-gradient(145deg, rgba(245,158,11,.18), rgba(15,23,42,.18));
}

.offgrid-profile-card-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--text);
  font-family: var(--font-display);
  font-size: .9rem;
  margin-bottom: 6px;
}

.offgrid-profile-card-title small {
  color: var(--primary);
  font-family: var(--font-body);
  font-size: .72rem;
  white-space: nowrap;
}

.offgrid-profile-card p {
  margin: 0 0 8px;
  font-size: .74rem;
  line-height: 1.55;
}

.offgrid-profile-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.offgrid-profile-chip-row span {
  border: 1px solid rgba(245,158,11,.18);
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--text-muted);
  font-size: .68rem;
}

.offgrid-profile-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}

.offgrid-profile-summary-card {
  border: 1px solid rgba(245,158,11,.14);
  border-radius: 10px;
  padding: 10px;
  background: rgba(15,23,42,.24);
}

.offgrid-profile-summary-card span {
  display: block;
  color: var(--text-muted);
  font-size: .68rem;
  margin-bottom: 3px;
}

.offgrid-profile-summary-card strong {
  display: block;
  color: var(--text);
  font-size: .86rem;
}

.offgrid-generator-card {
  margin-bottom: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(245,158,11,.22);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(245,158,11,.09), rgba(15,23,42,.18));
}

.offgrid-generator-copy {
  color: var(--text-muted);
  font-size: .74rem;
  line-height: 1.65;
  margin-bottom: 10px;
}

.offgrid-generator-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.offgrid-generator-details label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.offgrid-generator-details label span {
  color: var(--text-muted);
  font-size: .7rem;
}

.offgrid-generator-details input,
.offgrid-generator-details select {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--text);
  font-size: .82rem;
}

.offgrid-generator-preview {
  display: none;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(245,158,11,.16);
  border-radius: 10px;
  background: rgba(2,6,23,.16);
  color: var(--text-muted);
  font-size: .73rem;
  line-height: 1.6;
}

.offgrid-generator-preview strong {
  color: var(--text);
}

.offgrid-generator-expert {
  grid-column: 1 / -1;
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 10px;
  background: rgba(2,6,23,.14);
}

.offgrid-generator-expert summary {
  cursor: pointer;
  padding: 9px 11px;
  color: var(--text-muted);
  font-size: .74rem;
}

.offgrid-generator-expert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  padding: 0 11px 11px;
}

.on-grid-flow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 14px;
}

.on-grid-basic-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 14px;
  margin-bottom: 14px;
}

.on-grid-panel-section {
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px;
  background: rgba(15,23,42,.34);
}

.on-grid-basic-main,
.on-grid-basic-help {
  background: rgba(15,23,42,.38);
}

.on-grid-panel-section h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: .95rem;
  letter-spacing: 0;
}

.on-grid-basic-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(245,158,11,.28);
  background: rgba(245,158,11,.10);
  color: var(--primary);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.on-grid-basic-intro {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.7;
}

.on-grid-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.on-grid-choice-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  text-align: left;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 12px;
  padding: 14px;
  background: rgba(255,255,255,.035);
  color: var(--text);
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.on-grid-choice-card:focus-visible {
  outline: 3px solid rgba(6,182,212,0.78);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(6,182,212,0.16);
}

.on-grid-choice-card:hover {
  transform: translateY(-1px);
  border-color: rgba(245,158,11,.28);
  background: rgba(245,158,11,.06);
}

.on-grid-choice-card.active {
  border-color: rgba(245,158,11,.42);
  background: rgba(245,158,11,.10);
  box-shadow: 0 14px 28px rgba(2,6,23,.20);
}

.on-grid-choice-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: .98rem;
}

.on-grid-choice-card span,
.on-grid-choice-card small {
  color: var(--text-muted);
  line-height: 1.6;
}

.on-grid-choice-card small {
  font-size: .74rem;
}

.on-grid-basic-form {
  margin-top: 10px;
}

.on-grid-guide-list {
  display: grid;
  gap: 10px;
}

.on-grid-guide-item {
  padding: 12px 12px 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.03);
}

.on-grid-guide-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: .9rem;
  margin-bottom: 4px;
}

.on-grid-guide-item span {
  display: block;
  color: var(--text-muted);
  font-size: .76rem;
  line-height: 1.65;
}

.on-grid-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 10px;
}

.on-grid-field-grid--advanced {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.on-grid-field-grid label,
.on-grid-month-input {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  color: var(--text-muted);
  font-size: .73rem;
}

.on-grid-field-card {
  min-width: 0;
  height: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.14);
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

.on-grid-field-card--wide {
  grid-column: 1 / -1;
}

.on-grid-field-label {
  display: block;
  min-height: 2.7em;
  color: var(--text-muted);
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.35;
}

.on-grid-field-grid input,
.on-grid-field-grid select,
.on-grid-month-input input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text);
  font-size: .88rem;
  min-width: 0;
}

.on-grid-field-grid select {
  padding-right: 34px;
  line-height: 1.35;
}

.on-grid-field-hint {
  display: block;
  margin-top: 7px;
  color: var(--text-muted);
  font-size: .71rem;
  line-height: 1.55;
}

.on-grid-explain {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: .76rem;
  line-height: 1.55;
}

.on-grid-monthly-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--text);
  font-size: .82rem;
  font-weight: 700;
}

.on-grid-monthly-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.on-grid-month-input span {
  text-align: center;
}

.on-grid-month-input input {
  box-sizing: border-box;
  text-align: center;
  padding: 7px 8px;
  appearance: textfield;
  -moz-appearance: textfield;
}

.on-grid-month-input input::-webkit-outer-spin-button,
.on-grid-month-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.on-grid-flow-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.on-grid-flow-summary div,
.on-grid-result-metric {
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,.035);
}

.on-grid-flow-summary strong,
.on-grid-result-metric strong {
  display: block;
  color: var(--primary);
  font-family: var(--font-display);
  font-size: .98rem;
  margin-bottom: 2px;
}

.on-grid-flow-summary span,
.on-grid-result-metric span {
  color: var(--text-muted);
  font-size: .72rem;
  line-height: 1.4;
}

.on-grid-impact-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.7;
}

.on-grid-result-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.on-grid-missing-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.7;
}

.confidence-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  padding: 6px 10px;
  font-weight: 800;
  font-size: .76rem;
  border: 1px solid rgba(245,158,11,.28);
  color: var(--primary);
  background: rgba(245,158,11,.08);
  margin-bottom: 10px;
}

/* Data source table in confidence card */
.on-grid-data-source-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  margin: 6px 0 10px;
  font-size: .78rem;
}
.on-grid-ds-row {
  display: contents;
}
.on-grid-ds-row > span:first-child {
  color: var(--text-muted);
}

/* Question labels in confidence card */
.on-grid-question {
  margin: 8px 0 4px;
  font-size: .80rem;
}

/* Hourly CSV upload area */
.on-grid-hourly-upload {
  margin-top: 10px;
  padding: 10px 0 0;
  border-top: 1px solid var(--border);
}
.on-grid-upload-label { display: block; margin-bottom: 4px; font-size: .85rem; color: var(--text-muted); }
.on-grid-upload-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }

.step5-advanced-card {
  overflow: hidden;
  margin-top: 16px;
}

.step5-advanced-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  list-style: none;
}

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

.step5-advanced-summary-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--text);
}

.step5-advanced-summary-copy {
  color: var(--text-muted);
  font-size: .8rem;
  line-height: 1.55;
  max-width: 620px;
  text-align: right;
}

.step5-advanced-summary::after {
  content: 'Aç';
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(245,158,11,.24);
  color: var(--primary);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.step5-advanced-card[open] .step5-advanced-summary::after {
  content: 'Kapat';
}

.step5-advanced-body {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

.step5-advanced-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.step5-advanced-guide-card {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px;
  background: rgba(255,255,255,.03);
}

.step5-advanced-guide-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: .92rem;
  margin-bottom: 6px;
}

.step5-advanced-guide-card span {
  display: block;
  color: var(--text-muted);
  font-size: .76rem;
  line-height: 1.65;
}

.step5-subdetails {
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: rgba(15,23,42,.26);
  margin-bottom: 14px;
  overflow: hidden;
}

.step5-subsummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  padding: 14px 16px;
}

.step5-subsummary::-webkit-details-marker {
  display: none;
}

.step5-subsummary strong {
  display: block;
  font-family: var(--font-display);
  font-size: .94rem;
  margin-bottom: 3px;
}

.step5-subsummary span {
  color: var(--text-muted);
  font-size: .76rem;
  line-height: 1.55;
}

.step5-subsummary::after {
  content: 'Aç';
  flex: 0 0 auto;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(245,158,11,.24);
  color: var(--primary);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.step5-subdetails[open] > .step5-subsummary::after {
  content: 'Kapat';
}

.step5-subbody {
  padding: 0 16px 16px;
  border-top: 1px solid var(--border-subtle);
}

.step5-inline-note {
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(245,158,11,.18);
  background: rgba(245,158,11,.07);
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.65;
}

.step5-inline-note strong {
  color: var(--text);
}

.feature-toggle-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.feature-toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.feature-toggle-copy strong {
  font-size: .88rem;
  line-height: 1.25;
  color: var(--text);
}

.feature-toggle-copy span {
  font-size: .74rem;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 620px;
}

.step5-tariff-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.step5-tariff-tips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.step5-tariff-tip {
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 10px;
  padding: 12px;
  background: rgba(255,255,255,.025);
}

.step5-tariff-tip strong {
  display: block;
  font-size: .82rem;
  font-family: var(--font-display);
  margin-bottom: 4px;
}

.step5-tariff-tip span {
  display: block;
  color: var(--text-muted);
  font-size: .74rem;
  line-height: 1.6;
}

.assumption-control {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.assumption-control small {
  color: var(--text-muted);
  font-size: .72rem;
  line-height: 1.45;
}

.assumption-conditional {
  margin-top: 12px;
  padding-top: 2px;
}

/* ═══ UZMAN ANALİZ MODÜLLERİ ═══════════════════════════════════ */

.expert-modules-card  { margin-top: 20px; overflow: hidden; }

/* ── Summary (click target) ── */
.expert-modules-summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; cursor: pointer; list-style: none;
}
.expert-modules-summary::-webkit-details-marker { display: none; }

.expert-modules-summary-title {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 1rem; color: var(--text);
}

.expert-modules-summary-copy {
  color: var(--text-muted); font-size: .8rem;
  line-height: 1.55; max-width: 620px; text-align: right;
}

/* ── "Aç / Kapat" pill (CSS-only) ── */
.expert-modules-summary::after {
  content: 'Aç'; flex: 0 0 auto; padding: 7px 12px;
  border-radius: 999px; border: 1px solid rgba(99,102,241,.28);
  color: #818CF8; font-size: .72rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}
.expert-modules-card[open] .expert-modules-summary::after { content: 'Kapat'; }

/* ── Body ── */
.expert-modules-body {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}

@media (max-width: 860px) {
  .expert-modules-summary { align-items: flex-start; flex-direction: column; }
  .expert-modules-summary-copy { max-width: none; text-align: left; }
}

/* (eski header stilleri kaldırıldı, artık summary kullanılıyor) */
.expert-modules-header p {
  font-size: .77rem; color: var(--text-muted); margin: 0; line-height: 1.55;
}

.expert-modules-list { display: flex; flex-direction: column; gap: 10px; }

.expert-module-card {
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: rgba(15,23,42,.36);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.expert-module-card.module-active {
  border-color: rgba(245,158,11,.30);
  box-shadow: 0 0 0 1px rgba(245,158,11,.08);
}

.expert-module-header {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px; cursor: pointer; user-select: none;
  transition: background .15s;
}
.expert-module-header:hover { background: rgba(255,255,255,.025); }

.expert-module-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.18);
  display: flex; align-items: center; justify-content: center;
  color: #F59E0B; margin-top: 1px;
}

.expert-module-info { flex: 1; min-width: 0; }

.expert-module-name {
  font-family: var(--font-display); font-size: .9rem; font-weight: 600;
  color: var(--text); margin: 0 0 5px;
}

.expert-module-desc {
  font-size: .76rem; color: var(--text-muted); line-height: 1.55; margin: 0 0 8px;
}

.expert-module-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.expert-module-tag {
  font-size: .63rem; font-weight: 700; padding: 2px 8px; border-radius: 20px;
  background: rgba(6,182,212,.1); border: 1px solid rgba(6,182,212,.2); color: #06B6D4;
}
.expert-module-tag.tag-law  { background:rgba(245,158,11,.1); border-color:rgba(245,158,11,.2); color:#F59E0B; }
.expert-module-tag.tag-long { background:rgba(34,197,94,.1);  border-color:rgba(34,197,94,.2);  color:#22C55E; }
.expert-module-tag.tag-load { background:rgba(99,102,241,.1); border-color:rgba(99,102,241,.2); color:#818CF8; }
.expert-module-tag.tag-corp { background:rgba(139,92,246,.1); border-color:rgba(139,92,246,.2); color:#8B5CF6; }
.expert-module-tag.tag-on   { background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.25); color:#F59E0B; }

.expert-module-body {
  padding: 14px 18px 18px 70px;
  border-top: 1px solid var(--border-subtle);
}

@media (max-width: 600px) {
  .expert-module-header { gap: 10px; padding: 14px; }
  .expert-module-icon   { width: 32px; height: 32px; }
  .expert-module-body   { padding: 12px 14px 16px 14px; }
}

@media (max-width: 860px) {
  .on-grid-flow-head,
  .on-grid-basic-shell,
  .on-grid-flow-grid {
    grid-template-columns: 1fr;
    flex-direction: column;
  }
  .on-grid-flow-summary {
    grid-template-columns: repeat(2, 1fr);
  }
  .on-grid-monthly-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .on-grid-choice-grid {
    grid-template-columns: 1fr;
  }
  .step5-advanced-summary {
    align-items: flex-start;
    flex-direction: column;
  }
  .step5-advanced-summary-copy {
    max-width: none;
    text-align: left;
  }
  .on-grid-field-grid--advanced {
    grid-template-columns: 1fr;
  }
  .on-grid-field-card--wide {
    grid-column: auto;
  }
  .step5-advanced-guide {
    grid-template-columns: 1fr;
  }
  .offgrid-mode-toggle,
  .offgrid-sizing-choice-grid {
    grid-template-columns: 1fr;
  }
  .step5-tariff-tips {
    grid-template-columns: 1fr;
  }
  .step5-module-grid {
    grid-template-columns: 1fr;
  }
  .step5-subsummary {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .on-grid-flow-panel {
    padding: 14px;
  }
  .on-grid-flow-summary,
  .on-grid-result-metrics {
    grid-template-columns: 1fr;
  }
  .on-grid-monthly-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .on-grid-choice-card {
    padding: 12px;
  }
}

/* ── İNVERTER KARTLARI ──────────────────────────────────── */
.inverter-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 4px;
}

@media (max-width: 768px) {
  .inverter-cards {
    grid-template-columns: 1fr;
  }
}

.inverter-card {
  background: var(--surface-glass);
  backdrop-filter: blur(8px);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 18px;
  cursor: pointer;
  transition: all var(--transition-bounce);
  position: relative;
  overflow: hidden;
}

.inverter-card:focus-visible,
.bat-model-btn:focus-visible {
  outline: 3px solid rgba(6,182,212,0.78);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(6,182,212,0.16);
}

.inverter-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}

.inverter-card:hover {
  border-color: rgba(6,182,212,0.4);
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow-accent);
}

.inverter-card.selected {
  border-color: var(--accent);
  background: rgba(6,182,212,0.05);
  box-shadow: var(--shadow-glow-accent);
}

.inverter-check {
  position: absolute;
  top: 8px; right: 8px;
  background: var(--accent);
  border-radius: 50%;
  width: 22px; height: 22px;
  display: none;
  align-items: center; justify-content: center;
  font-size: 12px; color: #fff;
  box-shadow: 0 0 10px rgba(6,182,212,0.5);
}

.inverter-card.selected .inverter-check {
  display: flex;
}

.inverter-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 6px;
  color: var(--text);
}

.inverter-card-eff {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}

.inverter-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.inverter-stat {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
}

.inverter-stat-label { color: var(--text-muted); }
.inverter-stat-val { font-weight: 600; color: var(--text); }

.inverter-card-pros,
.inverter-card-cons {
  font-size: 0.72rem;
  margin-top: 6px;
  line-height: 1.5;
}

.inverter-card-pros { color: var(--success); }
.inverter-card-cons { color: var(--text-muted); }

/* ── FATURA ANALİZİ ────────────────────────────────────── */
.bill-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

@media (max-width: 768px) {
  .bill-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .bill-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bill-month-input label {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 3px;
  text-align: center;
}

.bill-month-input input {
  text-align: center;
}

/* ── KABLO KAYIP ────────────────────────────────────────── */
.cable-loss-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.cable-loss-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cable-loss-label {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.cable-loss-val {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}

/* ── YAPISAN ANALİZ ─────────────────────────────────────── */
.structural-checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}

.structural-check-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.82rem;
}

.structural-check-row > *:first-child {
  flex: 1;
  color: var(--text-muted);
}

.structural-check-row > *:nth-child(2) {
  font-weight: 600;
  color: var(--text);
}

.status-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

/* ── MEVSİM BUTONLARI ────────────────────────────────────── */
.season-btn {
  background: var(--surface-glass);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-family: var(--font-body);
  transition: all var(--transition);
}

.season-btn:hover {
  background: rgba(255,255,255,0.07);
  color: var(--text);
}

.season-btn.active {
  background: rgba(245,158,11,0.12);
  border-color: rgba(245,158,11,0.4);
  color: var(--primary);
  font-weight: 600;
}

/* ── SAATLIK İSTATİSTİKLER ─────────────────────────────── */
.hourly-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
  background: var(--surface-glass);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 6px 12px;
}

/* ── SENARYO KARŞILAŞTIRMA TABLOSU ──────────────────────── */
.scenario-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.scenario-compare-table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 500;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.scenario-compare-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(71,85,105,0.2);
}

.scenario-compare-table tr {
  transition: background var(--transition);
}

.scenario-compare-table tr:hover td {
  background: rgba(255,255,255,0.02);
}

.scenario-compare-table td:first-child {
  font-weight: 600;
}

.scenario-compare-table tr:last-child td {
  border-bottom: none;
}

/* ── KARŞILAŞTIRMA MODAL TABLOSU ────────────────────────── */
.comp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.comp-table th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 500;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
}

.comp-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(71,85,105,0.2);
}

.comp-table tr:nth-child(even) td {
  background: rgba(51,65,85,0.15);
}

.comparison-scenario {
  background: var(--surface-glass);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 16px;
}

/* ── DASHBOARD ───────────────────────────────────────────── */
.dashboard-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dashboard-card {
  background: var(--surface-glass);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 16px;
  transition: border-color var(--transition);
}

.dashboard-card:hover {
  border-color: rgba(245,158,11,0.3);
}

.dashboard-card-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.dashboard-card-metrics span {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
}

/* ── SONUÇ KART BİLEŞENLERİ ─────────────────────────────── */
.result-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 16px;
  color: var(--text);
}

.result-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 480px) {
  .result-metrics-grid {
    grid-template-columns: 1fr;
  }
}

.result-metric {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
}

.result-metric-val {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}

.result-metric-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.3;
}

/* ── GÜNEŞ YOLU DİYAGRAMI ────────────────────────────────── */
#sun-path-svg text {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
}

/* ── TOUCH HEDEF DÜZELTMESİ ─────────────────────────────── */
/* Apple HIG / Material Design: min 44px dokunmatik yüzey */
@media (pointer: coarse) {
  .feature-toggle-header {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* ── OFF-GRID DÜRÜSTLÜK NOTU ─────────────────────────────── */
.off-grid-honesty-note {
  font-size: 0.82rem;
  color: var(--text-muted);
  border-left: 3px solid var(--warning, #f59e0b);
  padding: 6px 10px;
  margin-top: 8px;
  border-radius: 0 6px 6px 0;
  background: rgba(245, 158, 11, 0.07);
  line-height: 1.5;
}

.off-grid-honesty-warn {
  border-left-color: var(--danger, #ef4444);
  background: rgba(239, 68, 68, 0.07);
  color: var(--danger, #ef4444);
}

.audit-offgrid-note {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--warning, #f59e0b);
  margin: 4px 0 10px;
  padding: 6px 10px;
  border-left: 3px solid var(--warning, #f59e0b);
  background: rgba(245, 158, 11, 0.06);
  border-radius: 0 6px 6px 0;
}

/* ── MOBİL UYUMLULUK ─────────────────────────────────────── */
@media (max-width: 600px) {
  .inverter-cards {
    grid-template-columns: 1fr;
  }

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

  .cable-loss-grid {
    grid-template-columns: 1fr;
  }

  .result-metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* ── F1.C.1 utility classes: display toggle ─────────────────
   Inline style="display:none" / "display:block" yerine kullanılır.
   CSP 'unsafe-inline' kalktığında inline style attribute çalışmaz;
   bu utility'ler HTML'den ve JS classList.toggle()'dan erişilebilir. */
.is-hidden  { display: none !important; }
.is-visible { display: block; }

/* ── F1.C.2 utility classes: spacing (8px-based + half-steps)
   Yaygın inline margin/padding değerlerinin yerine geçer. Yarım-step
   (mt-2-5 = 10px) tasarım sapması olmasın diye eklendi; gelecekte
   tasarım pass'ında bu yarım-step'ler tabanlı 8px'e yuvarlanabilir. */
.m-0  { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-2-5 { margin-top: 10px; }
.mt-3   { margin-top: 12px; }
.mt-3-5 { margin-top: 14px; }
.mt-4   { margin-top: 16px; }
.mt-7   { margin-top: 28px; }
.mb-1-5 { margin-bottom: 6px; }
.mb-2   { margin-bottom: 8px; }
.mb-2-5 { margin-bottom: 10px; }
.mb-3   { margin-bottom: 12px; }
.mb-3-5 { margin-bottom: 14px; }
.mb-4   { margin-bottom: 16px; }
.mb-4-5 { margin-bottom: 18px; }
.p-6 { padding: 24px; }
.p-7 { padding: 28px; }
/* Spesifik kompozit padding'ler — tek/iki kullanımlık ama anlamlı bağlam */
.p-button-md { padding: 9px 20px; }
.p-chip-xs   { padding: 4px 6px; }

/* ── F1.C.3 utility classes: font/text ─────────────────────
   Pattern frekansı ≥2 olan kombinasyonlara semantik utility.
   Tekil renkler (×1 hardcoded) F1.C.5 multi-prop'una bırakıldı. */
.text-xs        { font-size: 0.72rem; }
.text-2xs       { font-size: 0.74rem; }
.text-sm-78     { font-size: 0.78rem; }
.text-sm        { font-size: 0.8rem; }
.text-base-82   { font-size: 0.82rem; }
.text-md-85     { font-size: 0.85rem; }
.text-md-strong { font-weight: 700; color: var(--text); font-size: 0.9rem; }
/* color × font combos */
.text-muted-78  { font-size: 0.78rem; color: var(--text-muted); }
.text-muted-85  { font-size: 0.85rem; color: var(--text-muted); }
/* color-only or color+weight */
.text-muted        { color: var(--text-muted); }
.text-primary-bold { color: var(--primary); font-weight: 700; }
.text-success-bold { color: var(--success); font-weight: 700; }
.text-blue   { color: #3B82F6; }
.text-cyan   { color: #06B6D4; }
.text-emerald{ color: #10B981; }
/* kpi/display headings — multi-prop semantic */
.kpi-display-primary    { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--primary); }
.kpi-display-success-lg { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: #10B981; }

/* ── F1.C.4 utility classes: CSS var modifiers ─────────────
   Inline style="--c: X" / --kpi-color / --metric-color örneklerini
   modifier class olarak yazarız. CSP-safe ve isim seçeneği daha açıklayıcı. */
.c-primary { --c: var(--primary); }
.c-success { --c: var(--success); }
.c-amber   { --c: #FCD34D; }
.c-cyan    { --c: #06B6D4; }
.c-orange  { --c: #F59E0B; }
.c-purple  { --c: #8B5CF6; }

.kpi-color-primary       { --kpi-color: var(--primary); }
.kpi-color-success       { --kpi-color: #10B981; }
.kpi-color-success-light { --kpi-color: #34D399; }
.kpi-color-info          { --kpi-color: #06B6D4; }

.metric-color-primary { --metric-color: var(--primary); }
.metric-color-danger  { --metric-color: var(--danger); }

/* ── F1.C.5a semantic classes: high-frequency multi-prop kalıpları ─────
   En sık tekrar eden inline style kombinasyonları için anlamlı isim.
   Pixel-perfect korunmuş; variant'lar (border-radius/padding farkı) ayrı
   class olarak tutuldu — F1.C.5b'de gereken yerde kompozit yapılabilir. */

/* Form helper text */
.text-caption-helper        { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 4px; }
.text-helper-block-7        { font-size: 0.7rem;  color: var(--text-muted); display: block; }
.text-helper-72-mb-3        { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 3px; }
.text-helper-72-mt-3        { font-size: 0.72rem; color: var(--text-muted); margin-top: 3px; }
.text-helper-78-mt-6        { font-size: 0.78rem; color: var(--text-muted); margin-top: 6px; }
.text-helper-75-mb-6        { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 6px; }
.text-helper-68-mb-3        { font-size: 0.68rem; color: var(--text-muted); margin-bottom: 3px; }

/* Surface cards (background + border + radius + padding) */
.surface-card-sm            { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; }
.surface-card-7-10          { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; }
.surface-card-6-7-10        { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; }
.surface-card-6-6-10        { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; }
.surface-card-6-5-8         { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; }
.surface-card-glass         { background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle); border-radius: 8px; }

/* Inputs / chips / cells */
.input-meta-row             { margin-top: 4px; width: 100%; }
.error-msg-hidden-sm        { display: none; margin-top: 4px; font-size: 0.68rem; }
.error-msg-hidden-md        { display: none; margin-top: 16px; }
.error-msg-hidden-mt-14     { display: none; margin-top: 14px; }
.error-msg-hidden-mt-4      { display: none; margin-top: 4px; }
.chip-xs-pad                { font-size: 0.65rem; padding: 1px 5px; }
.chip-sm-pad                { font-size: 0.75rem; padding: 5px 10px; }
.cell-right-tight           { text-align: right; padding: 4px 6px; }
.cell-center-tight          { text-align: center; padding: 4px 6px; }
.flex-row-muted-sm          { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--text-muted); cursor: pointer; }
.flex-row-md                { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; cursor: pointer; }
.subtitle-mb-4              { font-size: 0.9rem; margin-bottom: 14px; }
.success-callout            { text-align: center; background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.2); }

/* ── F1.C.5b semantic classes: form input row + modal + utility ─────
   Form alanlarının full-width input pattern'i (en sık ~62 yerde) + modal
   overlay/header + bazı utility'ler. */

/* Form input row variants (background + border + radius + padding + color + width + font-size) */
.input-form-row        { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; color: var(--text); width: 100%; font-size: 0.9rem; }
.input-form-row-sm     { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; color: var(--text); width: 100%; font-size: 0.78rem; }
.input-form-row-md     { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; color: var(--text); width: 100%; font-size: 0.8rem; }
.input-form-row-85     { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; color: var(--text); width: 100%; font-size: 0.85rem; }
.input-form-row-tight  { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; color: var(--text); width: 100%; font-size: 0.78rem; }
.input-form-row-110    { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; color: var(--text); width: 110px; font-size: 0.85rem; }
.input-form-row-95     { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; color: var(--text); width: 95px; font-size: 0.85rem; }

/* Glass chip toggle (hover-able transparent chip) */
.chip-toggle-glass     { background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 6px 12px; cursor: pointer; color: var(--text-muted); font-size: 0.78rem; font-family: var(--font-body); }
.export-tariff-auto-chip { margin-top: 4px; font-size: 0.72rem; }

/* Success callout (centered translucent green panel) */
.callout-success-tight { text-align: center; background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.2); border-radius: 10px; padding: 14px; }

/* Layout utilities */
.flex-1                { flex: 1; }
.fill-area             { width: 100%; height: 100%; }
.overflow-x-auto       { overflow-x: auto; }
.overflow-x-auto-mb-4  { overflow-x: auto; margin-bottom: 16px; }
.max-h-300             { max-height: 300px; }
.icon-align-middle     { vertical-align: middle; margin-right: 8px; }

/* Modal scaffolding */
.modal-overlay-base    { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 16px; }
.modal-header-base     { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.btn-icon-modal-close  { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.4rem; padding: 4px 8px; }

/* ── F1.C.6 dynamic-pct utilities: CSS var-based percentage helpers ─────
   HTML'de inline style="height:X%" yerine class="dyn-h" data-h="26" kullan.
   app.js init bloğu data-h/w/l attribute'larını --h/--w/--l CSS var'a aktarır
   (el.style.setProperty direct property — CSP style-src'yi tetiklemez). */
.dyn-h { height: var(--h, 0%); }
.dyn-w { width:  var(--w, 0%); }
.dyn-l { left:   var(--l, 0%); }

/* ── F1.C.5c atomic utilities + scenario gradients + tek-tariff badges ────
   141 tek-kullanımlık inline style için atomic utility tabanı + birkaç
   semantic class. Tekil renkler ve gradient'lar component-spesifik. */

/* Display */
.d-inline-flex { display: inline-flex; }

/* Tek-renk hardcoded background (tariff/segment badge) */
.bg-gray500   { background: #6B7280; }
.bg-blue500   { background: #3B82F6; }
.bg-green500  { background: #22C55E; }
.bg-yellow500 { background: #EAB308; }
.bg-orange500 { background: #F97316; }
.bg-red500    { background: #EF4444; }

/* Senaryo gradient kartlar (tek kullanımlık ama kavramsal) */
.scenario-gradient-ongrid  { color: #F59E0B; background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(245,158,11,.04)); border-color: rgba(245,158,11,.45); }
.scenario-gradient-offgrid { color: #8B5CF6; background: linear-gradient(135deg, rgba(139,92,246,.16), rgba(139,92,246,.04)); border-color: rgba(139,92,246,.4); }

/* Helper text + spacing one-off combos */
.text-base-82-muted-mt-2 { font-size: 0.82rem; color: var(--text-muted); margin-top: 8px; }
.text-base-82-muted-mt-3 { font-size: 0.82rem; color: var(--text-muted); margin-top: 12px; }
.text-base-82-muted-mb-3-line { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 12px; line-height: 1.6; }
.text-md-mb-2-5 { font-size: 0.9rem; margin-bottom: 10px; }
.text-md-mb-2 { font-size: 0.9rem; margin-bottom: 8px; }
.text-md-mb-1 { margin-bottom: 4px; font-size: 0.9rem; }
.error-msg-hidden-mt-2-5 { display: none; margin-top: 10px; }
.error-msg-warning-260 { display: none; margin-top: 4px; font-size: 0.75rem; color: #F59E0B; max-width: 260px; }

/* Layout & spacing one-offs */
.input-meta-mt-1 { width: 100%; margin-top: 4px; }
.icon-align-tight { vertical-align: middle; margin-right: 4px; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-col-mt-5-gap-2 { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.flex-row-md-muted { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-muted); cursor: pointer; }
.flex-row-md-bold-gap { font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 6px; }

/* Specific compositions */
.btn-pad-md      { padding: 9px 16px; font-size: 0.82rem; }
.btn-pad-md-thin { font-size: 0.8rem; padding: 7px 14px; }
.btn-pad-thin-gap { flex-shrink: 0; padding: 7px 14px; font-size: 0.82rem; gap: 5px; }
.btn-back-clean  { background: transparent; border: none; padding: 0 28px 0 0; font-size: 0.95rem; }
.btn-label-loose { text-transform: none; letter-spacing: 0; font-size: 0.7rem; margin-bottom: 8px; font-weight: 500; }
.flex-shrink-0-primary { flex-shrink: 0; color: var(--primary); }
.range-accent-primary { width: auto; accent-color: var(--primary); }
.range-accent-purple { width: 100%; accent-color: #8B5CF6; }

/* Layout / structural */
.grid-1-col       { grid-template-columns: 1fr; }
.position-anchor  { border-color: var(--border); position: relative; }
.position-offscreen { position: absolute; left: -9999px; top: -9999px; width: 400px; height: 300px; z-index: -1; }
.eng-report-output-buffer { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.modal-content-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); max-width: 900px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-md); }
.table-tight    { width: 100%; font-size: 0.75rem; border-collapse: collapse; }
.constrained-400-100 { max-width: 400px; width: 100%; }
.error-toast-callout { display: none; background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3); }

/* ── Quote Modal (Step 7 "Teklif Al" iletişim formu) ──────────────────────── */
.quote-modal-card { max-width: 640px; }
.quote-form { padding: 20px 24px 24px; }
.quote-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-bottom: 18px; }
.quote-form-grid--full { grid-column: 1 / -1; }

/* tel/email input'ları global text/number selector'ından düşüyor — burada açıkça stil ver */
.quote-form input,
.quote-form select {
  width: 100%;
  background: var(--surface-light);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  padding: 10px 12px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition);
  box-sizing: border-box;
}
.quote-form input:focus,
.quote-form select:focus { border-color: var(--primary); }
.quote-form input::placeholder { color: var(--text-muted); opacity: 0.7; }

.quote-form input[type="checkbox"] {
  width: auto;
  background: transparent;
  border: 0;
  padding: 0;
}

.quote-form input[aria-invalid="true"],
.quote-form select[aria-invalid="true"] { border-color: var(--danger, #EF4444); }
.form-error { color: var(--danger, #EF4444); font-size: 0.78rem; margin-top: 4px; min-height: 1.1em; }
.form-error:empty { display: none; }
.form-error-consent { margin-left: 28px; margin-top: 0; }

.quote-consent-block { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; margin-top: 6px; border-top: 1px solid var(--border); }
.quote-checkbox-row { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; line-height: 1.5; color: var(--text-muted); cursor: pointer; }
.quote-checkbox-row input[type="checkbox"] { margin-top: 3px; min-width: 18px; min-height: 18px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; }
.quote-checkbox-text { flex: 1; }
.quote-legal-link { background: none; border: none; padding: 0; color: var(--primary); text-decoration: underline; cursor: pointer; font-size: inherit; font-family: inherit; line-height: inherit; }
.quote-legal-link:hover { color: #FCD34D; }
.quote-legal-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; }

.quote-submit-btn { width: 100%; margin-top: 18px; padding: 14px 24px; font-size: 1rem; letter-spacing: 0.05em; justify-content: center; }
.quote-submit-btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* ── Legal text sub-modal (KVKK / Açık Rıza ortak) ────────────────────────── */
.modal-overlay-sub { z-index: 600; }
.legal-modal-card { max-width: 720px; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; }
.legal-modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; font-size: 0.92rem; line-height: 1.65; color: var(--text); }
.legal-modal-body p { margin-bottom: 12px; }
.legal-modal-body p:last-child { margin-bottom: 0; }
.legal-modal-body h3 { font-size: 1rem; margin: 14px 0 8px; color: var(--primary); }
.legal-modal-body h3:first-child { margin-top: 0; }
.legal-modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; }

/* Mobil — tek kolon, daha büyük dokunma hedefleri (iOS 16px font ile zoom önleme) */
@media (max-width: 640px) {
  .quote-modal-card { max-height: 95vh; }
  .quote-form-grid { grid-template-columns: 1fr; }
  .quote-form input,
  .quote-form select { font-size: 16px; min-height: 44px; }
  .quote-checkbox-row input[type="checkbox"] { min-width: 22px; min-height: 22px; }
  .quote-submit-btn { padding: 16px 24px; }
}

/* ── F1.C.5c batch 2 (auto-generated unique classes u-0..u-2u) ─────
   105 tek-kullanımlık inline style pattern bireysel class olarak çıkarıldı.
   F1.D refactoring sırasında mantıklı semantik isimlere yeniden adlandırılabilir;
   şu hâliyle CSP-uyumlu ve grep-bilebilir. */
/* was inline (norm: display:none;background:rgba(239,68,68,0.15);border:1pxsolidrgba(23…) */
.u-0 {
  display:none;
  background:rgba(239,68,68,0.15);
  border:1px solid rgba(239,68,68,0.3);
  border-radius:8px;
  padding:6px 12px;
  font-size:0.8rem;
  color:#EF4444;
}

/* was inline (norm: margin-top:6px;background:var(--surface);border:1pxsolidvar(--borde…) */
.u-1 {
  margin-top:6px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 12px;
  color:var(--text);
  width:220px;
  font-size:0.9rem;
}

/* was inline (norm: display:flex;align-items:center;gap:8px;font-size:0.85rem;color:var…) */
.u-2 {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.85rem;
  color:var(--text-muted);
  cursor:pointer;
  margin-bottom:10px;
}

/* was inline (norm: background:var(--surface);border:1pxsolidvar(--border);border-radiu…) */
.u-3 {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 12px;
  color:var(--text);
  font-size:0.9rem;
  min-width:120px;
}

/* was inline (norm: background:var(--surface);border:1pxsolidvar(--border);border-radiu…) */
.u-4 {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 12px;
  color:var(--text);
  width:220px;
  font-size:0.9rem;
}

/* was inline (norm: grid-column:1/-1) */
.u-5 {
  grid-column:1/-1;
}

/* was inline (norm: margin-top:6px;padding:6px10px;font-size:0.75rem) */
.u-6 {
  margin-top:6px;
  padding:6px 10px;
  font-size:0.75rem;
}

/* was inline (norm: font-size:0.76rem;color:var(--text-muted);margin-top:8px) */
.u-7 {
  font-size:0.76rem;
  color:var(--text-muted);
  margin-top:8px;
}

/* was inline (norm: display:flex;align-items:center;gap:8px;font-size:0.8rem;color:var(…) */
.u-8 {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.8rem;
  color:var(--text-muted);
  margin-top:8px;
  cursor:pointer;
}

/* was inline (norm: background:var(--surface);border:1pxsolidvar(--border);border-radiu…) */
.u-9 {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:7px 10px;
  color:var(--text);
  font-size:0.8rem;
  width:100%;
}

/* was inline (norm: font-size:0.74rem;color:var(--text-muted);margin-top:6px) */
.u-a {
  font-size:0.74rem;
  color:var(--text-muted);
  margin-top:6px;
}

/* was inline (norm: font-weight:700;color:#8B5CF6;margin-left:6px) */
.u-b {
  font-weight:700;
  color:#8B5CF6;
  margin-left:6px;
}

/* was inline (norm: font-size:0.7rem;color:var(--text-muted);margin-top:3px) */
.u-c {
  font-size:0.7rem;
  color:var(--text-muted);
  margin-top:3px;
}

/* was inline (norm: margin-bottom:14px;padding:10px12px;background:rgba(6,182,212,0.05)…) */
.u-d {
  margin-bottom:14px;
  padding:10px 12px;
  background:rgba(6,182,212,0.05);
  border:1px solid rgba(6,182,212,0.18);
  border-radius:8px;
}

/* was inline (norm: font-size:0.75rem;font-weight:600;color:var(--text);margin-bottom:6px) */
.u-e {
  font-size:0.75rem;
  font-weight:600;
  color:var(--text);
  margin-bottom:6px;
}

/* was inline (norm: display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr…) */
.u-f {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;
}

/* was inline (norm: font-size:0.68rem;color:var(--text-muted);margin-top:6px) */
.u-g {
  font-size:0.68rem;
  color:var(--text-muted);
  margin-top:6px;
}

/* was inline (norm: font-size:0.75rem;font-weight:600;color:var(--text);margin-bottom:8px) */
.u-h {
  font-size:0.75rem;
  font-weight:600;
  color:var(--text);
  margin-bottom:8px;
}

/* was inline (norm: display:flex;flex-wrap:wrap;gap:6px;align-items:flex-end;margin-bot…) */
.u-i {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:flex-end;
  margin-bottom:8px;
  padding:8px 10px;
  background:rgba(139,92,246,0.05);
  border:1px solid rgba(139,92,246,0.18);
  border-radius:8px;
}

/* was inline (norm: flex:1;min-width:120px) */
.u-j {
  flex:1;
  min-width:120px;
}

/* was inline (norm: flex:2;min-width:150px) */
.u-k {
  flex:2;
  min-width:150px;
}

/* was inline (norm: width:56px) */
.u-l {
  width:56px;
}

/* was inline (norm: background:var(--surface);border:1pxsolidvar(--border);border-radiu…) */
.u-m {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:6px;
  padding:5px 8px;
  color:var(--text);
  font-size:0.78rem;
  width:100%;
  text-align:center;
}

/* was inline (norm: font-size:0.78rem;background:rgba(139,92,246,0.18);color:#8B5CF6;bo…) */
.u-n {
  font-size:0.78rem;
  background:rgba(139,92,246,0.18);
  color:#8B5CF6;
  border:1px solid rgba(139,92,246,0.35);
  border-radius:6px;
  padding:6px 12px;
  cursor:pointer;
  white-space:nowrap;
}

/* was inline (norm: font-size:0.78rem;background:rgba(100,116,139,0.12);color:var(--tex…) */
.u-o {
  font-size:0.78rem;
  background:rgba(100,116,139,0.12);
  color:var(--text-muted);
  border:1px solid var(--border);
  border-radius:6px;
  padding:6px 12px;
  cursor:pointer;
  white-space:nowrap;
}

/* was inline (norm: display:none;margin-top:6px;padding:8px10px;background:rgba(139,92,…) */
.u-p {
  display:none;
  margin-top:6px;
  padding:8px 10px;
  background:rgba(139,92,246,0.04);
  border:1px solid rgba(139,92,246,0.12);
  border-radius:6px;
  font-size:0.72rem;
  color:var(--text-muted);
}

/* Off-grid cihaz tablosu wrapper'ı — yatay scroll için.
   ESKİ: display:none varsayılan; JS style.display='' atayınca CSS'teki none
   yeniden devreye giriyor ve cihaz tablosu hiç görünmüyordu.
   YENİ: display:block default; gizleme yalnızca JS inline style ile yapılır. */
.u-q {
  display: block;
  overflow-x: auto;
}

/* was inline (norm: color:var(--text-muted);border-bottom:1pxsolidrgba(148,163,184,0.2)) */
.u-r {
  color:var(--text-muted);
  border-bottom:1px solid rgba(148,163,184,0.2);
}

/* was inline (norm: text-align:left;padding:4px6px) */
.u-s {
  text-align:left;
  padding:4px 6px;
}

/* was inline (norm: border-top:1pxsolidrgba(148,163,184,0.2);font-weight:600) */
.u-t {
  border-top:1px solid rgba(148,163,184,0.2);
  font-weight:600;
}

/* was inline (norm: padding:4px6px;color:var(--text-muted)) */
.u-u {
  padding:4px 6px;
  color:var(--text-muted);
}

/* was inline (norm: padding:2px6px;color:#EF4444;font-size:0.72rem) */
.u-v {
  padding:2px 6px;
  color:#EF4444;
  font-size:0.72rem;
}

/* was inline (norm: text-align:right;padding:2px6px;color:#EF4444;font-size:0.72rem) */
.u-w {
  text-align:right;
  padding:2px 6px;
  color:#EF4444;
  font-size:0.72rem;
}

/* was inline (norm: display:none;margin-bottom:14px;padding:10px12px;background:rgba(13…) */
.u-x {
  display:none;
  margin-bottom:14px;
  padding:10px 12px;
  background:rgba(139,92,246,0.05);
  border-radius:8px;
  border:1px solid rgba(139,92,246,0.2);
}

/* was inline (norm: font-size:0.72rem;font-weight:600;color:#8B5CF6;margin-bottom:6px) */
.u-y {
  font-size:0.72rem;
  font-weight:600;
  color:#8B5CF6;
  margin-bottom:6px;
}

/* was inline (norm: display:flex;flex-wrap:wrap;gap:10px;font-size:0.72rem) */
.u-z {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:0.72rem;
}

/* was inline (norm: display:flex;align-items:center;gap:10px;margin-bottom:8px) */
.u-10 {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}

/* was inline (norm: font-size:0.78rem;font-weight:600;color:#F59E0B) */
.u-11 {
  font-size:0.78rem;
  font-weight:600;
  color:#F59E0B;
}

/* was inline (norm: display:flex;align-items:center;gap:6px;margin-left:auto;cursor:poi…) */
.u-12 {
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
  cursor:pointer;
}

/* was inline (norm: display:none;margin-top:6px;font-size:0.75rem;color:#F59E0B;max-wid…) */
.u-13 {
  display:none;
  margin-top:6px;
  font-size:0.75rem;
  color:#F59E0B;
  max-width:300px;
}

/* was inline (norm: display:none;margin-top:8px;padding:10px12px;background:rgba(16,185…) */
.u-14 {
  display:none;
  margin-top:8px;
  padding:10px 12px;
  background:rgba(16,185,129,0.07);
  border-radius:8px;
  border:1px solid rgba(16,185,129,0.25);
}

/* was inline (norm: font-size:0.75rem;font-weight:600;color:#10B981;margin-bottom:8px) */
.u-15 {
  font-size:0.75rem;
  font-weight:600;
  color:#10B981;
  margin-bottom:8px;
}

/* was inline (norm: display:flex;flex-wrap:wrap;gap:10px) */
.u-16 {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* was inline (norm: font-size:0.72rem;color:var(--text-secondary);margin-top:6px) */
.u-17 {
  font-size:0.72rem;
  color:var(--text-secondary);
  margin-top:6px;
}

/* was inline (norm: font-size:0.74rem;color:var(--text-muted);margin-top:12px) */
.u-18 {
  font-size:0.74rem;
  color:var(--text-muted);
  margin-top:12px;
}

/* was inline (norm: font-size:0.72rem;color:#F59E0B;background:rgba(245,158,11,0.08);bo…) */
.u-19 {
  font-size:0.72rem;
  color:#F59E0B;
  background:rgba(245,158,11,0.08);
  border:1px solid rgba(245,158,11,0.25);
  border-radius:6px;
  padding:6px 10px;
  max-width:520px;
  margin-top:8px;
}

/* was inline (norm: font-size:0.78rem;color:var(--text-muted);margin-bottom:10px) */
.u-1a {
  font-size:0.78rem;
  color:var(--text-muted);
  margin-bottom:10px;
}

/* was inline (norm: display:flex;gap:8px;flex-wrap:wrap) */
.u-1b {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* was inline (norm: background:rgba(16,185,129,0.06);border:1pxsolidrgba(16,185,129,0.2…) */
.u-1c {
  background:rgba(16,185,129,0.06);
  border:1px solid rgba(16,185,129,0.2);
  border-radius:8px;
  padding:12px;
  margin-bottom:14px;
  font-size:0.8rem;
}

/* was inline (norm: color:#06B6D4;margin-top:6px;display:block) */
.u-1d {
  color:#06B6D4;
  margin-top:6px;
  display:block;
}

/* was inline (norm: background:var(--surface);border:1pxsolidvar(--border);border-radiu…) */
.u-1e {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 12px;
  color:var(--text);
  width:140px;
  font-size:0.9rem;
}

/* was inline (norm: font-size:0.8rem;color:var(--text-muted);margin-bottom:12px) */
.u-1f {
  font-size:0.8rem;
  color:var(--text-muted);
  margin-bottom:12px;
}

/* was inline (norm: background:rgba(245,158,11,0.06);border:1pxsolidrgba(245,158,11,0.2…) */
.u-1g {
  background:rgba(245,158,11,0.06);
  border:1px solid rgba(245,158,11,0.2);
  border-radius:8px;
  padding:12px;
  margin-bottom:14px;
  font-size:0.8rem;
}

/* was inline (norm: color:var(--primary)) */
.u-1h {
  color:var(--primary);
}

/* was inline (norm: margin-top:12px;font-size:0.8rem;color:var(--text-muted)) */
.u-1i {
  margin-top:12px;
  font-size:0.8rem;
  color:var(--text-muted);
}

/* was inline (norm: margin:0;grid-column:1/-1) */
.u-1j {
  margin:0;
  grid-column:1/-1;
}

/* was inline (norm: background:var(--surface);border:1pxsolidvar(--border);border-radiu…) */
.u-1k {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 12px;
  color:var(--text);
  width:100%;
  font-size:0.85rem;
}

/* was inline (norm: margin:0;display:none) */
.u-1l {
  margin:0;
  display:none;
}

/* was inline (norm: font-size:0.8rem;color:var(--text-muted);margin-top:10px) */
.u-1m {
  font-size:0.8rem;
  color:var(--text-muted);
  margin-top:10px;
}

/* was inline (norm: display:flex;gap:20px;margin-top:12px;flex-wrap:wrap) */
.u-1n {
  display:flex;
  gap:20px;
  margin-top:12px;
  flex-wrap:wrap;
}

/* was inline (norm: transform:rotate(-90deg);transform-origin:60px60px;transition:strok…) */
.u-1o {
  transform:rotate(-90deg);
  transform-origin:60px 60px;
  transition:stroke-dashoffset 0.7s ease;
}

/* was inline (norm: font-size:0.68rem;color:var(--text-secondary);margin-top:2px;displa…) */
.u-1p {
  font-size:0.68rem;
  color:var(--text-secondary);
  margin-top:2px;
  display:none;
}

/* was inline (norm: color:#34D399) */
.u-1q {
  color:#34D399;
}

/* was inline (norm: flex-wrap:wrap;gap:8px) */
.u-1r {
  flex-wrap:wrap;
  gap:8px;
}

/* was inline (norm: display:flex;align-items:center;flex:1;min-width:200px) */
.u-1s {
  display:flex;
  align-items:center;
  flex:1;
  min-width:200px;
}

/* was inline (norm: white-space:nowrap) */
.u-1t {
  white-space:nowrap;
}

/* was inline (norm: display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr…) */
.u-1u {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
}

/* was inline (norm: justify-content:center;margin-bottom:8px) */
.u-1v {
  justify-content:center;
  margin-bottom:8px;
}

/* was inline (norm: font-size:0.7rem;padding:1px6px) */
.u-1w {
  font-size:0.7rem;
  padding:1px 6px;
}

/* was inline (norm: text-align:center;max-width:560px;margin:0auto18px) */
.u-1x {
  text-align:center;
  max-width:560px;
  margin:0 auto 18px;
}

/* was inline (norm: overflow:visible;display:block;margin:0auto) */
.u-1y {
  overflow:visible;
  display:block;
  margin:0 auto;
}

/* was inline (norm: transition:stroke-dashoffset1.2scubic-bezier(0.34,1.56,0.64,1)) */
.u-1z {
  transition:stroke-dashoffset 1.2s cubic-bezier(0.34,1.56,0.64,1);
}

/* was inline (norm: transform-origin:100px100px;transition:transform1.2scubic-bezier(0.…) */
.u-20 {
  transform-origin:100px 100px;
  transition:transform 1.2s cubic-bezier(0.34,1.56,0.64,1);
}

/* was inline (norm: text-align:center;font-size:0.8rem;color:var(--text-muted);margin-t…) */
.u-21 {
  text-align:center;
  font-size:0.8rem;
  color:var(--text-muted);
  margin-top:8px;
}

/* was inline (norm: font-size:0.7rem;font-weight:400;color:var(--text-muted);background…) */
.u-22 {
  font-size:0.7rem;
  font-weight:400;
  color:var(--text-muted);
  background:rgba(245,158,11,0.1);
  border-radius:4px;
  padding:2px 8px;
  border:1px solid rgba(245,158,11,0.2);
}

/* was inline (norm: display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap) */
.u-23 {
  display:flex;
  gap:8px;
  margin-bottom:14px;
  flex-wrap:wrap;
}

/* was inline (norm: display:flex;flex-wrap:wrap;gap:12px;margin-top:12px) */
.u-24 {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:12px;
}

/* was inline (norm: display:flex;justify-content:center) */
.u-25 {
  display:flex;
  justify-content:center;
}

/* was inline (norm: font-size:0.8rem;color:var(--text-muted);text-align:center;margin-t…) */
.u-26 {
  font-size:0.8rem;
  color:var(--text-muted);
  text-align:center;
  margin-top:10px;
}

/* was inline (norm: font-size:0.9rem;color:var(--primary);margin-bottom:10px;font-weigh…) */
.u-27 {
  font-size:0.9rem;
  color:var(--primary);
  margin-bottom:10px;
  font-weight:600;
}

/* was inline (norm: height:360px;border-radius:10px;border:1pxsolidvar(--border)) */
.u-28 {
  height:360px;
  border-radius:10px;
  border:1px solid var(--border);
}

/* was inline (norm: display:flex;justify-content:space-between;align-items:center;margi…) */
.u-29 {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:12px;
  flex-wrap:wrap;
  gap:8px;
}

/* was inline (norm: display:flex;gap:6px;flex-wrap:wrap) */
.u-2a {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

/* was inline (norm: padding:7px16px;font-size:0.82rem) */
.u-2b {
  padding:7px 16px;
  font-size:0.82rem;
}

/* was inline (norm: display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:0.72r…) */
.u-2c {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
  font-size:0.72rem;
  color:var(--text-muted);
}

/* was inline (norm: color:#22C55E) */
.u-2d {
  color:#22C55E;
}

/* was inline (norm: color:#EAB308) */
.u-2e {
  color:#EAB308;
}

/* was inline (norm: color:#F97316) */
.u-2f {
  color:#F97316;
}

/* was inline (norm: color:#EF4444) */
.u-2g {
  color:#EF4444;
}

/* was inline (norm: flex:1;min-width:120px;max-width:240px) */
.u-2h {
  flex:1;
  min-width:120px;
  max-width:240px;
}

/* was inline (norm: font-size:0.85rem;font-weight:600;color:#8B5CF6) */
.u-2i {
  font-size:0.85rem;
  font-weight:600;
  color:#8B5CF6;
}

/* was inline (norm: display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wr…) */
.u-2j {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  flex-wrap:wrap;
}

/* was inline (norm: flex:1;min-width:120px;max-width:200px) */
.u-2k {
  flex:1;
  min-width:120px;
  max-width:200px;
}

/* was inline (norm: font-size:0.85rem;font-weight:600;color:var(--primary)) */
.u-2l {
  font-size:0.85rem;
  font-weight:600;
  color:var(--primary);
}

/* was inline (norm: max-height:280px) */
.u-2m {
  max-height:280px;
}

/* was inline (norm: display:none;margin-top:16px;border-left:3pxsolid#3B82F6) */
.u-2n {
  display:none;
  margin-top:16px;
  border-left:3px solid #3B82F6;
}

/* was inline (norm: display:none;margin-top:16px;border-left:3pxsolid#EC4899) */
.u-2o {
  display:none;
  margin-top:16px;
  border-left:3px solid #EC4899;
}

/* was inline (norm: color:#EC4899) */
.u-2p {
  color:#EC4899;
}

/* was inline (norm: display:none;margin-top:16px;border-left:3pxsolid#F59E0B) */
.u-2q {
  display:none;
  margin-top:16px;
  border-left:3px solid #F59E0B;
}

/* was inline (norm: display:none;margin-top:16px;border-left:3pxsolid#10B981) */
.u-2r {
  display:none;
  margin-top:16px;
  border-left:3px solid #10B981;
}

/* was inline (norm: display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr…) */
.u-2s {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  margin-bottom:20px;
}

/* was inline (norm: background:var(--surface);border:1pxsolidvar(--border);border-radiu…) */
.u-2t {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  max-width:1000px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:var(--shadow-md);
}

/* was inline (norm: display:flex;gap:10px;align-items:center) */
.u-2u {
  display:flex;
  gap:10px;
  align-items:center;
}

/* was inline (norm: font-size:0.78rem;padding:6px12px) */
.u-2v {
  font-size:0.78rem;
  padding:6px 12px;
}

/* was inline (norm: background:rgba(239,68,68,0.1);border:1pxsolidrgba(239,68,68,0.3);c…) */
.u-2w {
  background:rgba(239,68,68,0.1);
  border:1px solid rgba(239,68,68,0.3);
  color:#EF4444;
  border-radius:8px;
  padding:6px 12px;
  cursor:pointer;
  font-size:0.78rem;
}

/* ── F1.C.7 batch 1: JS innerHTML inline style refactor ─────────────
   ui-charts/inverter/satellite-enhance/hourly-profile/sun-path için class set.
   Dinamik renkler için --c CSS var; JS setProperty ile uygulanır. */
.dynamic-color        { color: var(--c); }
.hourly-bullet-self   { color: #10B981; }
.hourly-bullet-export { color: #3B82F6; }
.hourly-bullet-import { color: #EF4444; }
.sun-path-card        { font-size: 0.78rem; color: var(--text-muted); line-height: 1.7; margin-top: 10px; padding: 10px 14px; background: rgba(255,255,255,0.02); border-radius: 8px; border-left: 3px solid rgba(245,158,11,0.4); }
.sun-path-city        { color: var(--text); }
.sun-path-status      { color: var(--primary); }
.sun-path-explainer   { opacity: 0.75; }
.inverter-shade-good { color: #10B981; }
.inverter-shade-warn { color: #F59E0B; }
.inverter-shade-bad  { color: #EF4444; }
.text-primary { color: var(--primary); }
.text-accent  { color: var(--accent); }
.text-danger  { color: var(--danger); }

/* ── F1.C.7 batch 2: scenario-icons SVG animation delays + comparison ── */
.anim-delay-3  { animation-delay: 0.3s; }
.anim-delay-4  { animation-delay: 0.4s; }
.anim-delay-6  { animation-delay: 0.6s; }
.anim-delay-9  { animation-delay: 0.9s; }
.anim-delay-12 { animation-delay: 1.2s; }
.text-helper-75-mt-2  { font-size: 0.75rem; color: var(--text-muted); margin-top: 8px; }
.comparison-cell-best { color: #10B981; font-weight: 700; }

/* ── F1.C.7 batch 2: ui-render + roof-geometry ── */
.text-helper-78-mt-2 { font-size: 0.78rem; color: var(--text-muted); margin-top: 8px; }
.text-color-default  { color: var(--text); }
.text-strong-primary { color: var(--primary); font-weight: 600; }
.cost-amount-helper  { display: block; font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.roof-summary-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 0.82rem; }
.roof-poly-row       { padding: 6px 0; border-top: 1px solid var(--border-subtle); margin-top: 4px; }
.dynamic-metric-color { --metric-color: var(--c); }
.structural-insight-color { color: var(--c); }
/* offgrid-stat-card metric-color modifiers */
.offgrid-stat-card--primary { --metric-color: var(--primary); }
.offgrid-stat-card--danger  { --metric-color: var(--danger); }
.offgrid-stat-card--success { --metric-color: var(--success); }
.offgrid-stat-card--orange  { --metric-color: #F97316; }
.offgrid-stat-card--gray    { --metric-color: #94A3B8; }
.offgrid-stat-card--subtle  { --metric-color: rgba(71,85,105,0.18); }
.structural-insight--ok     { color: #10B981; }
.structural-insight--warn   { color: #F59E0B; }
.structural-insight--danger { color: #EF4444; }
/* ── F1.C.7 batch 2 ek: bill-analysis ── */
.input-form-row-85-tight    { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; color: var(--text); width: 100%; font-size: 0.85rem; }
.input-form-row-85-tight-130{ background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; color: var(--text); width: 130px; font-size: 0.85rem; }
.flex-row-mt-3-gap-10       { display: flex; gap: 10px; margin-top: 12px; align-items: center; }
.btn-primary-md             { background: var(--primary); color: #000; border: none; border-radius: 8px; padding: 6px 14px; cursor: pointer; font-size: 0.82rem; font-weight: 600; }
.btn-surface-light-md       { background: var(--surface-light); color: var(--text-muted); border: none; border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 0.82rem; }
.text-base-82-muted-mt-2-5  { margin-top: 10px; font-size: 0.82rem; color: var(--text-muted); }
.section-divider-mt-3       { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.text-muted-85-block-mb-1-5 { font-size: 0.85rem; color: var(--text-muted); display: block; margin-bottom: 6px; }
.text-sm-muted-fullwidth    { font-size: 0.8rem; color: var(--text-muted); max-width: 100%; }
/* ── F1.C.7 batch 3: eng-report ── */
.loss-bar-fill-dyn  { width: var(--bar-w, 0%); }
.loss-bar-fill-100  { width: 100%; }
.opacity-60         { opacity: 0.6; }
.loss-row-net       { padding: 10px 8px; background: rgba(16,185,129,0.06); border-radius: 6px; }
.text-strong-default{ font-weight: 700; color: var(--text); }
.tr-border-top-2    { border-top: 2px solid var(--border); }
/* ── F1.C.7 batch 3: heat-pump ── */
.hp-stat-grid       { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.hp-stat-card       { background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 10px; text-align: center; }
.hp-stat-value      { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.hp-stat-value--accent  { color: var(--accent); }
.hp-stat-value--success { color: var(--success); }
.hp-stat-value--danger  { color: #EF4444; }
.text-muted-7       { font-size: 0.7rem; color: var(--text-muted); }
.hp-footnote        { font-size: 0.75rem; color: var(--text-muted); margin-top: 8px; padding: 8px; background: rgba(255,255,255,0.02); border-radius: 6px; }
/* ── F1.C.7 batch 3: scenarios ── */
.scenario-row-color   { border-left: 3px solid var(--c); }
.scenario-row-purple  { border-left: 3px solid #8B5CF6; }
.scenario-text-color  { color: var(--c); }
.scenario-text-purple { color: #8B5CF6; }
.mc-card-frame  { margin-top: 12px; padding: 10px 12px; background: rgba(99,102,241,0.08); border-radius: 8px; border: 1px solid rgba(99,102,241,0.25); }
.mc-card-title  { font-size: 0.82rem; font-weight: 700; color: #818CF8; margin-bottom: 6px; }
.mc-card-hint   { font-size: 0.7rem; color: var(--text-muted); font-weight: 400; }
.mc-card-grid   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.mc-percentile-label { font-size: 0.7rem; color: var(--text-muted); }
.mc-percentile-value { font-size: 1rem; font-weight: 700; }
.mc-percentile-value--p90 { color: #EF4444; }
.mc-percentile-value--p50 { color: #F59E0B; }
.mc-percentile-value--p10 { color: #10B981; }
.scenario-section-title  { font-size: 0.9rem; font-weight: 700; color: var(--primary); margin: 12px 0 8px; }
.scenario-delta-positive { color: #10B981; }
.scenario-delta-negative { color: #EF4444; }
/* ── F1.C.7 batch 3b: dashboard ── */
.dashboard-empty            { color: var(--text-muted); text-align: center; padding: 32px; }
.dashboard-header-row       { margin-bottom: 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dashboard-record-checkbox  { margin-right: 8px; accent-color: var(--primary); }
.dashboard-record-row       { display: flex; justify-content: space-between; align-items: flex-start; }
.dashboard-record-timestamp { color: var(--text-muted); font-size: 0.78rem; margin-left: 8px; }
.btn-icon-record-delete     { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; }
.mt-5                       { margin-top: 20px; }
/* ── F1.C.7 batch 3b: ev-charging ── */
.ev-info-row              { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.78rem; color: var(--text-muted); margin-top: 8px; }
.ev-stat-grid             { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-top: 10px; }
.ev-stat-value-1-2        { font-size: 1.2rem; font-weight: 700; color: var(--text); }
.ev-stat-value-1-2--accent  { color: var(--accent); }
.ev-stat-value-1-2--success { color: var(--success); }
.text-muted-72            { font-size: 0.72rem; color: var(--text-muted); }
/* ── F1.C.7 batch 3b: osm-shadow ── */
.osm-row-flex             { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid var(--border-subtle); }
.osm-score-bad            { color: #EF4444; font-weight: 600; }
.osm-score-warn           { color: #F59E0B; font-weight: 600; }
.osm-summary-grid         { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-bottom: 8px; font-size: 0.82rem; }
.osm-strong-color         { color: var(--c); margin-left: 6px; }
.osm-strong-default       { color: var(--text); margin-left: 6px; }
.osm-progress-track       { height: 6px; background: var(--surface-light); border-radius: 3px; margin-bottom: 8px; overflow: hidden; }
.osm-progress-fill        { height: 100%; width: var(--w, 0%); background: var(--c); border-radius: 3px; transition: width 0.6s ease; }
.osm-helper-78-mb-1       { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 4px; }
.osm-helper-72-divider    { font-size: 0.72rem; color: var(--text-muted); margin-top: 8px; border-top: 1px solid var(--border-subtle); padding-top: 6px; }
.osm-loading-row          { display: flex; align-items: center; gap: 8px; color: var(--accent); }
.spin-1s                  { animation: spin 1s linear infinite; }
/* ── F1.C.7 batch 4: glare (Leaflet popup CSP-safe) ── */
.glare-marker-rozet { width: 24px; height: 24px; background: #EF4444; border: 2px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.5); font-family: 'Inter', sans-serif; }
.glare-popup        { font-family: 'Inter', sans-serif; min-width: 150px; }
.glare-popup-coord  { font-size: 0.8rem; color: #666; }
.glare-popup-remove { margin-top: 6px; padding: 3px 8px; font-size: 0.75rem; cursor: pointer; border: 1px solid #ccc; border-radius: 4px; background: #fff; }
.glare-empty        { color: var(--text-muted); font-size: 0.82rem; }
.glare-bar-chart    { display: flex; gap: 3px; align-items: flex-end; height: 50px; margin-bottom: 4px; padding: 0 2px; }
.glare-bar-cell     { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.glare-bar-fill     { width: 14px; height: var(--h, 0px); background: var(--c, #334155); border-radius: 3px 3px 0 0; transition: height 0.3s; }
.glare-bar-hour     { font-size: 0.62rem; color: var(--text-muted); }
.glare-target-row   { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--border-subtle); }
.glare-target-coord { font-size: 0.76rem; color: var(--text-muted); }
.glare-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-bottom: 10px; font-size: 0.82rem; }
.glare-summary-strong-c { color: var(--c); }
.glare-summary-strong-d { color: var(--text); }
.glare-axis-label   { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 8px; }
.glare-risky-line   { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 8px; }
.glare-targets-title{ font-size: 0.78rem; margin-bottom: 4px; }
.glare-footnote     { font-size: 0.72rem; color: var(--text-muted); margin-top: 8px; border-top: 1px solid var(--border-subtle); padding-top: 6px; }
/* ── F1.C.7 batch 5: tax ── */
.tax-table-td         { padding: 5px 10px; border-bottom: 1px solid rgba(71,85,105,0.2); }
.tax-table-td--success{ color: var(--success); }
.tax-callout          { background: rgba(245,158,11,0.05); border: 1px solid rgba(245,158,11,0.2); border-radius: 8px; padding: 12px; margin-bottom: 12px; font-size: 0.78rem; line-height: 1.7; }
.tax-callout-title    { font-weight: 600; color: var(--primary); margin-bottom: 6px; }
.tax-stat-grid        { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-bottom: 14px; }
.tax-stat-value-1-1   { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.tax-stat-value-1-1--success { color: var(--success); }
.tax-stat-value-1-1--accent  { color: var(--accent); }
.tax-stat-value-1-1--primary { color: var(--primary); }
.tax-table-wrap       { overflow-x: auto; }
.tax-table            { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.tax-table-tr-header  { background: var(--surface); }
.tax-table-th         { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-weight: 500; }
/* ── F1.C.7 batch 5: app.js — divIcon, error msg, off-grid device table ── */
.city-marker-rozet  { width: 22px; height: 22px; background: #F59E0B; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.map-load-error     { display: flex; align-items: center; justify-content: center; height: 100%; color: #F59E0B; font-size: 0.85rem; padding: 20px; text-align: center; }
.map-provider-notice{position:absolute;left:14px;right:14px;bottom:14px;z-index:1001;padding:10px 12px;border:1px solid rgba(245,158,11,.35);background:rgba(15,23,42,.92);color:#F8FAFC;border-radius:8px;font-size:.82rem;line-height:1.4;box-shadow:0 10px 28px rgba(0,0,0,.35)}
.map-provider-notice[data-tone="info"]{border-color:rgba(56,189,248,.35)}
.map-manual-fallback{height:100%;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;color:#F8FAFC;background:linear-gradient(180deg,#0B1220 0%,#111827 100%)}
.map-manual-fallback strong{font-family:var(--font-display);font-size:1rem;color:#F59E0B}
.map-manual-fallback span{max-width:520px;font-size:.86rem;color:var(--text-muted);line-height:1.5}
.manual-coordinate-panel{display:grid;grid-template-columns:minmax(86px,110px) minmax(86px,110px) auto;gap:8px;align-items:center}
.manual-coordinate-panel input{height:38px;font-size:.84rem;padding:8px 10px}
@media(max-width:760px){.manual-coordinate-panel{grid-template-columns:1fr 1fr}.manual-coordinate-panel button{grid-column:1/-1;justify-content:center}}
.svg-shrink-mt-1    { flex-shrink: 0; margin-top: 1px; }
.scenario-card-color { --card-color: var(--c); }
.scenario-color-on-grid { --card-color: #F59E0B; }
.scenario-color-off-grid { --card-color: #8B5CF6; }
.scenario-color-agricultural-irrigation { --card-color: #10B981; }
.scenario-color-heat-pump { --card-color: #EC4899; }
.scenario-color-flexible-mobile { --card-color: #06B6D4; }
.scenario-color-ev-charging { --card-color: #3B82F6; }
.solar-map-marker{width:22px;height:22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:rgba(15,23,42,.58);box-shadow:0 6px 16px rgba(0,0,0,.46);transform:translateY(-1px)}
.solar-map-marker-dot{width:16px;height:16px;border-radius:999px;border:4px solid #F8FAFC;background:#EAB308;box-shadow:0 0 0 1px rgba(15,23,42,.68),0 0 14px rgba(255,255,255,.24)}
.solar-map-marker--lt1300 .solar-map-marker-dot{background:#6B7280}
.solar-map-marker--gte1450 .solar-map-marker-dot{background:#3B82F6}
.solar-map-marker--gte1600 .solar-map-marker-dot{background:#22C55E}
.solar-map-marker--gte1700 .solar-map-marker-dot{background:#EAB308}
.solar-map-marker--gte1800 .solar-map-marker-dot{background:#F97316}
.solar-map-marker--gt1800 .solar-map-marker-dot{background:#EF4444}
.solar-map-marker--selected{width:22px;height:22px;background:rgba(245,158,11,.22)}
.solar-map-marker--selected .solar-map-marker-dot{width:13px;height:13px;background:#F59E0B;border-width:4px;box-shadow:0 0 0 5px rgba(245,158,11,.2)}
.solar-map-marker--vertex{width:22px;height:22px;background:rgba(245,158,11,.2);cursor:grab}
.solar-map-marker--vertex .solar-map-marker-dot{width:12px;height:12px;background:#F59E0B;border-width:4px}
.ml-2               { margin-left: 8px; }
.flex-wrap-row-mt-1 { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
/* off-grid device table */
.ogd-input            { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 3px 6px; color: var(--text); font-size: 0.75rem; }
.ogd-input--name      { width: 100px; }
.ogd-input--power     { width: 68px; text-align: right; }
.ogd-input--hours     { width: 55px; text-align: right; }
.ogd-input--night     { width: 50px; text-align: right; }
.ogd-input--cat       { padding: 2px 4px; font-size: 0.72rem; }
.ogd-row              { border-bottom: 1px solid rgba(148,163,184,0.1); }
.ogd-cell-pad         { padding: 3px 6px; }
.ogd-cell-pad-right   { padding: 3px 6px; text-align: right; }
.ogd-cell-pad-center  { padding: 3px 6px; text-align: center; }
.ogd-total-cell       { padding: 3px 6px; text-align: right; font-weight: 600; color: var(--text); font-size: 0.75rem; }
.ogd-checkbox         { accent-color: #EF4444; cursor: pointer; }
.ogd-remove-btn       { background: rgba(239,68,68,0.1); color: #EF4444; border: none; border-radius: 4px; padding: 2px 8px; font-size: 0.72rem; cursor: pointer; }
.dyn-color-strong     { color: var(--c, var(--text)); }

/* ── F1.D: index.html dev <style> bloğundan taşınan kurallar (line 88-645) ──
   FOUC-kritik :root, [data-theme="light"], reset ve body kuralları index.html
   inline'da kaldı; geri kalan UI bileşen kuralları buraya taşındı. */

/* ── HEADER ── */
#app-header{
  background:rgba(28,28,30,0.92);
  backdrop-filter:blur(24px) saturate(1.8);-webkit-backdrop-filter:blur(24px) saturate(1.8);
  border-bottom:1px solid var(--border-subtle);
  box-shadow:0 1px 0 rgba(255,255,255,0.05) inset,0 4px 32px rgba(0,0,0,0.5);
  position:sticky;top:0;z-index:100;
}
[data-theme="light"] #app-header{background:rgba(242,242,247,0.92)}
.header-inner{max-width:1280px;margin:0 auto}
.header-brand>.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}
.header-brand{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:1px solid var(--border-subtle);background:linear-gradient(90deg,rgba(255,255,255,0.045),rgba(255,255,255,0.015))}
.header-steps-row{padding:10px 24px}
.brand-lockup{display:flex;align-items:center;min-width:0}
.logo{display:flex;align-items:center;gap:13px;min-width:0;text-decoration:none;color:inherit}
.logo-icon{height:66px;width:auto;max-width:220px;object-fit:contain;border-radius:0;filter:drop-shadow(0 0 10px rgba(59,130,246,0.28));animation:logoGlow 3s ease-in-out infinite alternate;}
@keyframes logoGlow{0%{filter:drop-shadow(0 0 6px rgba(59,130,246,0.22))}100%{filter:drop-shadow(0 0 18px rgba(59,130,246,0.48))}}
.brand-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.header-icon-btn{display:flex;align-items:center;gap:8px;height:42px;padding:0 15px;border-radius:8px;border:1px solid rgba(245,158,11,0.32);background:rgba(255,255,255,0.055);color:var(--text);cursor:pointer;font-size:0.82rem;font-weight:700;font-family:var(--font-body);transition:all 0.2s;white-space:nowrap;box-shadow:0 1px 0 rgba(255,255,255,0.06) inset}
.header-icon-btn:hover{background:rgba(245,158,11,0.16);color:var(--primary);border-color:var(--primary);transform:translateY(-1px)}
.header-icon-btn:focus-visible{outline:3px solid rgba(6,182,212,0.85);outline-offset:3px}
.header-icon-btn.icon-only{width:42px;padding:0;justify-content:center}
.header-icon-btn svg{flex-shrink:0}
.header-lang-switcher{display:flex;align-items:center;gap:4px}
.header-lang-btn{height:32px;padding:0 8px;border-radius:8px;border:1px solid var(--border);background:var(--surface-light);color:var(--text-muted);cursor:pointer;font-size:0.72rem;font-weight:700;font-family:var(--font-body);transition:all 0.2s}
.header-lang-btn:hover,.header-lang-btn.active{background:var(--primary);border-color:var(--primary);color:#000}

/* Leaflet.Draw pro overrides */
.leaflet-draw-toolbar a{background-color:rgba(15,23,42,0.92)!important;border-color:rgba(71,85,105,0.6)!important;color:#F1F5F9!important;backdrop-filter:blur(8px);}
.leaflet-draw-toolbar a:hover{background-color:rgba(245,158,11,0.15)!important;border-color:#F59E0B!important;}
.leaflet-draw-toolbar{border-radius:10px!important;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.5)!important}
.leaflet-draw-tooltip{background:rgba(15,23,42,0.92);border:1px solid rgba(245,158,11,0.4);border-radius:8px;color:#F1F5F9;font-size:0.78rem;padding:6px 10px;backdrop-filter:blur(8px)}
.leaflet-draw-tooltip:before{display:none}
.leaflet-draw-guide-dash{background:#F59E0B!important}
.leaflet-editing-icon{border-color:#F59E0B!important;background:#0F172A!important;width:10px!important;height:10px!important;border-radius:50%!important;}
.roof-draw-hint{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:999;display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;min-width:min(760px,calc(100% - 28px));max-width:calc(100% - 28px);padding:10px 18px;border-radius:14px;border:1px solid rgba(245,158,11,0.24);background:color-mix(in srgb,var(--secondary) 86%,var(--surface) 14%);box-shadow:0 14px 34px rgba(0,0,0,0.34);font-size:0.78rem;color:var(--text);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);pointer-events:none}
.rdh-step{display:flex;align-items:center;gap:6px}.rdh-num{width:20px;height:20px;border-radius:999px;background:var(--primary);color:#000;font-size:0.7rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 0 4px rgba(245,158,11,0.12)}
.rdh-sep{color:rgba(152,152,158,0.6);margin:0 2px}
.roof-draw-toolbar{position:absolute;bottom:16px;right:16px;z-index:999;display:flex;flex-direction:column;gap:7px}
.roof-tool-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;font-size:0.8rem;font-weight:600;border-radius:9px;border:1px solid rgba(71,85,105,0.5);background:rgba(15,23,42,0.9);color:#F1F5F9;cursor:pointer;backdrop-filter:blur(8px);transition:all 0.2s;white-space:nowrap}
.roof-tool-btn:hover{border-color:#F59E0B;background:rgba(245,158,11,0.12);color:#F59E0B}
.roof-tool-btn.active{border-color:#F59E0B;background:rgba(245,158,11,0.18);color:#F59E0B}
.roof-tool-btn.danger:hover{border-color:#EF4444;background:rgba(239,68,68,0.12);color:#EF4444}
.logo-text{font-family:var(--font-display);font-size:1.82rem;font-weight:800;line-height:1;letter-spacing:0;background:linear-gradient(135deg,var(--primary) 0%,#FCD34D 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;white-space:nowrap}
.logo-tagline{font-size:0.72rem;color:var(--text-muted);margin-left:2px;letter-spacing:0.02em;white-space:nowrap}
.brand-assurance{display:inline-flex;align-items:center;gap:7px;margin-left:18px;padding:7px 10px;border:1px solid var(--border-subtle);border-radius:8px;background:rgba(255,255,255,0.035);color:var(--text-muted);font-size:0.76rem;font-weight:700;white-space:nowrap}
.brand-assurance::before{content:'';width:7px;height:7px;border-radius:999px;background:var(--success);box-shadow:0 0 0 4px rgba(16,185,129,0.12)}

/* ── STEP DOTS ── */
.step-dots-wrap{flex:1}
.step-dots{display:flex;align-items:center;justify-content:center}
.step-dot{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;user-select:none;border:0;background:transparent;color:inherit;font:inherit;padding:0}
.step-dot.locked{cursor:not-allowed;opacity:.58}
.step-dot.locked .step-dot-num{border-style:dashed}
.step-dot.locked .step-dot-label{color:var(--text-muted)}
.step-dot-num{width:32px;height:32px;border-radius:50%;background:var(--surface-light);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:0.8rem;font-weight:700;color:var(--text-muted);transition:all var(--transition);}
.step-dot.active .step-dot-num{background:var(--primary);border-color:var(--primary);color:#000;box-shadow:0 0 16px rgba(245,158,11,0.55);}
.step-dot.done .step-dot-num{background:var(--success);border-color:var(--success);color:#fff}
.step-dot:focus-visible{outline:none}
.step-dot:focus-visible .step-dot-num{outline:3px solid rgba(6,182,212,0.8);outline-offset:3px;box-shadow:0 0 0 6px rgba(6,182,212,0.16)}
.step-dot-label{font-size:0.62rem;color:var(--text-muted);font-weight:500;white-space:nowrap;transition:color var(--transition)}
.step-dot.active .step-dot-label{color:var(--primary);font-weight:700}
.step-dot.done .step-dot-label{color:var(--success)}
.step-connector{height:2px;width:32px;background:var(--border);transition:background 0.5s ease;margin:0 2px;margin-bottom:18px}
.step-connector.filled{background:var(--success)}
@media(max-width:620px){.step-connector{width:12px}.step-dot-label{display:none}.step-dot-num{width:26px;height:26px;font-size:0.7rem}}

.step-hero{min-height:max(0px,calc(100dvh - var(--header-h)));justify-content:flex-start}
.hero-content{position:relative;z-index:1;text-align:center;padding:24px 16px 16px;max-width:760px}
.hero-eyebrow{font-size:0.72rem;color:var(--primary);font-weight:800;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:8px}
.hero-title{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.35rem);line-height:1.02;letter-spacing:-0.03em;margin-bottom:10px}
.hero-sub{font-size:0.98rem;color:var(--text-muted);line-height:1.45}
#step-1 .scenario-card-grid{gap:16px;margin-bottom:14px;max-width:700px}
#step-1 .scenario-select-subline{margin-bottom:16px}
#step-1 .scenario-choice-card{min-height:230px;padding:22px 20px;border-radius:14px}
#step-1 .scenario-choice-card:focus-visible{outline:3px solid rgba(6,182,212,0.85);outline-offset:3px;box-shadow:0 0 0 6px rgba(6,182,212,0.16),0 16px 48px rgba(0,0,0,.42)}
#step-1 .scenario-choice-card .scenario-card-icon{width:108px;height:108px;border-radius:20px;margin-bottom:6px;align-self:center;justify-self:center}
#step-1 .scenario-choice-card .scenario-card-icon .scenario-svg-icon,
#step-1 .scenario-choice-card .scenario-card-icon svg{width:86px;height:86px}
.hero-cta-wrap{position:relative;z-index:1;margin:8px 0 24px;text-align:center}
.hero-cta-btn:focus-visible{outline:3px solid rgba(6,182,212,0.85);outline-offset:3px}
.skip-link{position:fixed;top:10px;left:12px;z-index:10000;transform:translateY(-160%);background:var(--primary);color:#000;border-radius:8px;padding:9px 12px;font-weight:800;font-size:.82rem;text-decoration:none;box-shadow:var(--shadow-md);transition:transform .2s ease}
.skip-link:focus{transform:translateY(0);outline:3px solid rgba(6,182,212,.85);outline-offset:2px}
.ui-scroll-hint{display:none;color:var(--text-muted);font-size:.72rem;line-height:1.45;margin:6px 0 8px}
.panel-card:focus-visible{outline:3px solid rgba(245,158,11,0.72);outline-offset:3px;box-shadow:0 0 0 6px rgba(245,158,11,0.16),var(--shadow-glow-primary)}
.ui-callout{border-radius:12px;padding:14px 16px;font-size:.8rem;line-height:1.58;border:1px solid var(--border-subtle);background:rgba(255,255,255,.03);color:var(--text)}
.ui-callout strong{display:block;margin-bottom:6px}
.ui-callout span{display:block;color:var(--text-muted)}
.ui-callout--warn{border-color:rgba(245,158,11,.28);background:rgba(245,158,11,.08)}
.ui-callout--warn strong{color:var(--primary)}
.ui-callout--danger{border-color:rgba(239,68,68,.28);background:rgba(239,68,68,.08)}
.ui-callout--danger strong{color:#FCA5A5}
.ui-callout--soft{background:rgba(255,255,255,.025)}
.ui-callout--compact{padding:12px 14px;font-size:.78rem}
.result-actions-note{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:flex-start;background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.22);border-radius:10px;padding:12px 14px;margin-top:18px;font-size:.8rem;line-height:1.5;color:var(--text)}
.result-actions-note svg{color:var(--primary);margin-top:2px;flex-shrink:0}
.result-actions-note strong{display:block;color:var(--primary);margin-bottom:2px}
.result-actions-note span{color:var(--text-muted)}
.scenario-summary{background:rgba(255,255,255,0.045);border:1px solid var(--border-subtle);border-radius:10px;padding:12px 14px;text-align:left;line-height:1.45}
.scenario-summary-kicker{font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--primary);margin-bottom:4px}
.scenario-summary strong{display:block;color:var(--text);font-size:.94rem;margin-bottom:8px}
.scenario-summary-grid{display:grid;grid-template-columns:max-content 1fr;gap:5px 10px;font-size:.76rem}
.scenario-summary-grid span{color:var(--text-muted);font-weight:700}
.scenario-summary-grid em{color:var(--text);font-style:normal}
.result-helper{font-size:.78rem;color:var(--text-muted);line-height:1.6;margin-bottom:14px}
.result-trust-note,.audit-purpose-note{background:rgba(245,158,11,0.07);border:1px solid rgba(245,158,11,0.22);border-radius:10px;padding:12px 14px;color:var(--text);font-size:.8rem;line-height:1.55;margin-bottom:16px}
.result-trust-note strong,.audit-purpose-note strong{color:var(--primary)}
.result-trust-note span,.audit-purpose-note span{display:block;color:var(--text-muted);margin-top:4px}
.result-alert-stack{display:grid;gap:12px;margin:18px 0 20px}
.result-alert-banner{border-radius:12px;padding:14px 16px;font-size:.8rem;line-height:1.55;border:1px solid var(--border-subtle);background:rgba(255,255,255,.03);color:var(--text)}
.result-alert-banner strong{display:block;margin-bottom:6px}
.result-alert-banner--warn{border-color:rgba(245,158,11,.28);background:rgba(245,158,11,.08)}
.result-alert-banner--warn strong{color:var(--primary)}
.result-alert-banner--danger{border-color:rgba(239,68,68,.28);background:rgba(239,68,68,.08)}
.result-alert-banner--danger strong{color:#FCA5A5}
.result-alert-list{margin:0;padding-left:18px;color:var(--text-muted)}
.result-alert-list li+li{margin-top:6px}
.step-inline-alert{margin-top:14px;border-radius:12px;padding:12px 14px;border:1px solid rgba(239,68,68,.26);background:rgba(239,68,68,.08);color:var(--text);font-size:.8rem;line-height:1.55}
.step-inline-alert strong{display:block;color:#FCA5A5;margin-bottom:4px}
.advanced-details{border:1px solid var(--border-subtle);border-radius:12px;background:rgba(255,255,255,.02);padding:0}
.advanced-details-summary{cursor:pointer;list-style:none;padding:14px 16px;font-family:var(--font-display);font-size:.88rem;font-weight:700;color:var(--text);display:flex;align-items:center;justify-content:space-between}
.advanced-details-summary::-webkit-details-marker{display:none}
.advanced-details-summary::after{content:'+';color:var(--primary);font-size:1rem}
.advanced-details[open] .advanced-details-summary::after{content:'−'}
.advanced-details > :not(summary){padding:0 16px 16px}
.result-context-main{display:block;color:var(--text)}
.result-context-caution{display:block;color:var(--text-muted);margin-top:4px}
.eng-report-title-text{display:flex;flex-direction:column;gap:2px}
.eng-report-subtitle{font-size:.72rem;font-weight:500;color:var(--text-muted);line-height:1.35}
.audit-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:16px}
.audit-summary-card{background:rgba(255,255,255,.03);border:1px solid var(--border-subtle);border-radius:14px;padding:16px;box-shadow:var(--shadow-card)}
.audit-summary-kicker{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);margin-bottom:8px}
.audit-summary-value{font-family:var(--font-display);font-size:1.35rem;font-weight:800;letter-spacing:-.03em;color:var(--text);line-height:1.05}
.audit-summary-value.good{color:var(--success)}
.audit-summary-value.warn{color:var(--primary)}
.audit-summary-value.bad{color:var(--danger)}
.audit-summary-note{font-size:.76rem;color:var(--text-muted);line-height:1.6;margin-top:8px}
.audit-warning-wrap{background:rgba(255,255,255,.02);border:1px solid var(--border-subtle);border-radius:14px;padding:16px;margin-bottom:16px}
.audit-warning-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.audit-warning-title{font-family:var(--font-display);font-size:.95rem;font-weight:700;color:var(--text)}
.audit-pill{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;border:1px solid rgba(245,158,11,.24);background:rgba(245,158,11,.08);font-size:.72rem;font-weight:600;color:var(--primary)}
.audit-warning-list{margin:0;padding-left:18px;color:var(--text-muted);font-size:.8rem;line-height:1.6}
.audit-warning-list li+li{margin-top:8px}
.audit-next-step{background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.22);border-radius:12px;padding:14px 16px;margin-bottom:16px;font-size:.8rem;line-height:1.65;color:var(--text-muted)}
.audit-next-step strong{display:block;color:var(--text);margin-bottom:6px}
.audit-section-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:16px}
.audit-data-card{background:rgba(255,255,255,.03);border:1px solid var(--border-subtle);border-radius:12px;padding:14px}
.audit-data-label{display:block;font-size:.72rem;color:var(--text-muted);margin-bottom:5px}
.audit-data-value{display:block;font-size:.84rem;font-weight:700;color:var(--text);line-height:1.5}
.audit-data-note{display:block;font-size:.72rem;color:var(--text-muted);line-height:1.55;margin-top:6px}
.audit-raw-wrap{margin-top:14px}
.audit-raw-title{font-family:var(--font-display);font-size:.86rem;font-weight:700;color:var(--text);margin:18px 0 10px}
.audit-offgrid-note{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.22);border-radius:12px;padding:12px 14px;font-size:.78rem;color:var(--text-muted);line-height:1.6;margin-bottom:16px}
.scenario-insight-grid,.structural-insight-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:14px 0 16px}
.scenario-insight-card,.structural-insight-card{background:rgba(255,255,255,.03);border:1px solid var(--border-subtle);border-radius:14px;padding:16px;box-shadow:var(--shadow-card)}
.scenario-insight-value,.structural-insight-value{font-family:var(--font-display);font-size:1.25rem;font-weight:800;letter-spacing:-.03em;color:var(--primary);line-height:1.05}
.structural-insight-value.good{color:var(--success)}
.structural-insight-value.warn{color:var(--primary)}
.structural-insight-value.danger{color:var(--danger)}
.scenario-insight-label,.structural-insight-label{font-size:.74rem;color:var(--text);font-weight:600;margin-top:8px}
.scenario-insight-note,.structural-insight-note{font-size:.72rem;color:var(--text-muted);line-height:1.55;margin-top:6px}
.scenario-explainer{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:16px}
.scenario-explainer-card{background:rgba(255,255,255,.025);border:1px solid var(--border-subtle);border-radius:12px;padding:14px}
.scenario-explainer-card strong{display:block;color:var(--text);margin-bottom:6px;font-size:.82rem}
.scenario-explainer-card span{display:block;color:var(--text-muted);font-size:.76rem;line-height:1.6}
.scenario-control-row{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.structural-recommendation{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);border-radius:12px;padding:14px 16px;font-size:.78rem;color:var(--text-muted);line-height:1.6;margin-top:14px}
.structural-recommendation strong{display:block;color:var(--text);margin-bottom:6px}
.eng-report-body.open{display:block}
.eng-report-body:not(.open){display:none}
.eng-report-body{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01))}
.eng-report-intro{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:14px;margin-bottom:18px}
.eng-intro-card{background:rgba(255,255,255,.03);border:1px solid var(--border-subtle);border-radius:16px;padding:18px;box-shadow:var(--shadow-card)}
.eng-intro-kicker{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);margin-bottom:8px}
.eng-intro-title{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--text);margin-bottom:8px}
.eng-intro-copy{font-size:.8rem;color:var(--text-muted);line-height:1.7}
.eng-intro-list{margin:10px 0 0;padding-left:18px;color:var(--text-muted);font-size:.78rem;line-height:1.6}
.eng-intro-list li+li{margin-top:6px}
.eng-section-header{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:.9rem;font-weight:700;color:var(--primary);margin:20px 0 10px;padding-top:4px}
.formula-card{background:rgba(255,255,255,.03);border:1px solid var(--border-subtle);border-radius:16px;padding:18px;box-shadow:var(--shadow-card);margin-bottom:14px}
.formula-title{font-family:var(--font-display);font-size:.92rem;font-weight:700;color:var(--text);margin-bottom:10px}
.formula-body{font-size:.78rem;color:var(--text-muted);line-height:1.7;white-space:pre-line}
.formula-note{margin-top:12px;padding:10px 12px;border-radius:10px;background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.18);font-size:.74rem;color:var(--text-muted);line-height:1.6}
.formula-result{margin-top:12px;font-size:.82rem;font-weight:700;color:var(--success)}
.perf-badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:14px}
.perf-badge{background:rgba(255,255,255,.03);border:1px solid var(--border-subtle);border-radius:14px;padding:14px;box-shadow:var(--shadow-card)}
.perf-badge-val{font-family:var(--font-display);font-size:1.35rem;font-weight:800;color:var(--primary);line-height:1}
.perf-badge-label{font-size:.74rem;color:var(--text-muted);line-height:1.5;margin-top:8px}
.loss-waterfall{display:grid;gap:10px}
.loss-row{display:grid;grid-template-columns:minmax(180px,1.8fr) minmax(140px,2fr) auto;gap:12px;align-items:center}
.loss-label{font-size:.76rem;color:var(--text-muted);line-height:1.45}
.loss-bar-wrap{height:8px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.loss-bar-fill{height:100%;border-radius:999px}
.loss-bar-fill.neutral{background:linear-gradient(90deg,rgba(245,158,11,.45),rgba(245,158,11,.9))}
.loss-bar-fill.negative{background:linear-gradient(90deg,rgba(239,68,68,.45),rgba(239,68,68,.9))}
.loss-bar-fill.positive{background:linear-gradient(90deg,rgba(16,185,129,.45),rgba(16,185,129,.9))}
.loss-val{font-size:.76rem;font-weight:700}
.loss-val.neutral{color:var(--primary)}
.loss-val.negative{color:var(--danger)}
.loss-val.positive{color:var(--success)}
.cost-breakdown-table{width:100%;border-collapse:collapse;font-size:.8rem}
.cost-breakdown-table th,.cost-breakdown-table td{padding:10px 8px;border-bottom:1px solid var(--border-subtle);text-align:left}
.cost-breakdown-table th{color:var(--text-muted);font-weight:600}
.cost-breakdown-table td{color:var(--text)}
.cost-breakdown-table .total-row td{border-top:1px solid rgba(245,158,11,.2);background:rgba(245,158,11,.04)}
@media(max-width:720px){
  :root{--header-h:118px}
  .logo-icon{height:52px;max-width:168px}
  .header-brand{padding:10px 14px}
  .header-steps-row{padding:8px 12px}
  .brand-assurance{display:none}
  .brand-copy{gap:2px}
  .logo-text{font-size:1.28rem}
  .logo-tagline{font-size:.62rem;max-width:176px;overflow:hidden;text-overflow:ellipsis}
  .header-icon-btn.icon-only{width:42px;height:42px}
  .hero-content{padding:14px 14px 12px}
  .hero-eyebrow{font-size:.62rem;margin-bottom:6px}
  .hero-title{font-size:clamp(1.55rem,7vw,2.05rem);line-height:1.06;margin-bottom:8px}
  .hero-sub{font-size:.86rem}
  #step-1 .scenario-card-grid{grid-template-columns:1fr;gap:8px;margin-bottom:8px}
  #step-1 .scenario-select-subline{margin-bottom:10px}
  #step-1 .scenario-choice-card{min-height:0;padding:12px 14px;display:grid;grid-template-columns:74px 1fr;align-items:center;column-gap:12px;row-gap:3px;border-radius:10px}
  #step-1 .scenario-choice-card .scenario-card-icon{grid-row:span 3;width:74px;height:74px;margin:0;border-radius:16px;align-self:center;justify-self:center}
  #step-1 .scenario-choice-card .scenario-card-icon .scenario-svg-icon,
  #step-1 .scenario-choice-card .scenario-card-icon svg{width:58px;height:58px}
  #step-1 .scenario-card-title{font-size:1rem;line-height:1.18}
  #step-1 .scenario-card-desc{font-size:.76rem;line-height:1.34}
  #step-1 .scenario-card-for-whom{font-size:.72rem!important;line-height:1.3;margin-top:2px;padding-top:6px}
  .scenario-grid-wrap{padding:0 12px}
  .scenario-summary{margin-top:8px;padding:8px 10px;font-size:.74rem}
  .scenario-summary-grid{grid-template-columns:1fr;gap:3px}
  .scenario-summary-grid span{margin-top:4px}
  .hero-cta-wrap{padding:0 12px;margin:8px 0 16px;width:100%}
  .hero-cta-btn{width:100%;justify-content:center;min-height:44px;border-radius:8px}
  .ui-scroll-hint{display:block}
}
html.immersive-screen,body.immersive-screen{overflow:hidden}

/* ── MAIN ── */
#main-content{max-width:1200px;margin:0 auto;padding:24px 16px 80px}
#main-content.immersive-flow{max-width:none;padding:0}

/* ── STEP ── */
.step-pane{display:none}
.step-pane.active{display:block;animation:stepFadeIn 0.32s ease forwards}
@keyframes stepFadeIn{from{opacity:0}to{opacity:1}}
.step-heading{margin-bottom:28px;padding-top:4px}
.step-heading-eyebrow{font-size:0.72rem;font-weight:600;color:var(--primary);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:6px}
.step-heading-title{font-family:var(--font-display);font-size:2rem;font-weight:800;letter-spacing:-0.03em;line-height:1.1;margin-bottom:8px;background:linear-gradient(135deg,#F1F5F9 0%,#94A3B8 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.step-heading-sub{font-size:0.9rem;color:var(--text-muted);line-height:1.55;max-width:560px}
@media(max-width:600px){.step-heading-title{font-size:1.5rem}}

/* ── GLASS CARD ── */
.card{background:var(--surface-glass);backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-card);position:relative;transition:transform var(--transition),box-shadow var(--transition);}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent);pointer-events:none;}
.card:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,0.07) inset,0 14px 44px rgba(0,0,0,0.5),0 4px 12px rgba(0,0,0,0.4)}
.expert-modules-card:hover,.step5-advanced-card:hover{transform:none;}
#map-card{backdrop-filter:none;-webkit-backdrop-filter:none;position:relative;}
#map-card::before{display:none}
.card-title{font-family:var(--font-display);font-size:1rem;font-weight:700;letter-spacing:-0.01em;color:var(--primary);margin-bottom:18px;display:flex;align-items:center;gap:8px}

/* ── TWO COLUMN ── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:768px){.two-col{grid-template-columns:1fr}}

/* ── INPUTS ── */
.form-group{margin-bottom:16px}
label{display:block;font-size:0.8rem;color:var(--text-muted);margin-bottom:6px;font-weight:500}
.input-wrap{position:relative}
input[type=text],input[type=number],select{width:100%;background:var(--surface-light);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:1rem;padding:10px 12px;font-family:inherit;outline:none;transition:border-color var(--transition);touch-action:manipulation;}
input[type=text]:focus,input[type=number]:focus,select:focus{border-color:var(--primary)}
/* Form validation — Faz A: renk + ⚠️ ikon (sadece renk yetersizdi, WCAG 1.4.1) */
input.error,
input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"]{
  border-color:var(--danger)!important;
  padding-right:36px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23EF4444' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='13'/%3E%3Ccircle cx='12' cy='16.5' r='1' fill='%23EF4444'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:18px 18px;
}
.error-msg{font-size:0.78rem;color:var(--danger);margin-top:4px;display:flex;align-items:center;gap:6px}
.error-msg::before{content:"⚠";font-size:0.95rem;line-height:1;flex-shrink:0}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:var(--surface-light);cursor:pointer;outline:none;}
input[type=range].range-filled{background:linear-gradient(90deg,var(--primary) var(--range-pct,0%),var(--surface-light) var(--range-pct,0%));}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--primary);border:2px solid rgba(255,255,255,0.2);cursor:pointer;box-shadow:0 0 10px rgba(245,158,11,0.45);transition:transform var(--transition),box-shadow var(--transition);}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.18);box-shadow:0 0 18px rgba(245,158,11,0.7)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--primary);border:2px solid rgba(255,255,255,0.2);cursor:pointer;box-shadow:0 0 10px rgba(245,158,11,0.45);}
.range-wrap{position:relative;padding-bottom:20px}
.range-labels{display:flex;justify-content:space-between;font-size:0.7rem;color:var(--text-muted);margin-top:4px;}
.range-value{position:absolute;top:-28px;left:50%;transform:translateX(-50%);background:var(--primary);color:#000;font-size:0.75rem;font-weight:700;padding:2px 7px;border-radius:4px;pointer-events:none;white-space:nowrap;}

/* ── AUTOCOMPLETE ── */
.autocomplete-list{position:absolute;top:calc(100% + 8px);left:0;right:0;background:color-mix(in srgb,var(--secondary) 82%,var(--surface) 18%);border:1px solid var(--border-subtle);border-radius:14px;max-height:320px;overflow-y:auto;z-index:520;display:none;box-shadow:0 16px 40px rgba(0,0,0,.32);padding:6px;backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2)}
.autocomplete-list.open{display:block}
.autocomplete-item{padding:10px 12px;cursor:pointer;font-size:0.85rem;transition:background var(--transition),border-color var(--transition),transform var(--transition);display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border:1px solid transparent;border-radius:10px}
.autocomplete-item:hover,.autocomplete-item.selected{background:rgba(255,255,255,.04);border-color:rgba(245,158,11,.22);transform:translateY(-1px)}
.autocomplete-copy{display:grid;gap:3px;min-width:0}
.autocomplete-copy strong{font-size:.83rem;line-height:1.3;color:var(--text);font-weight:700}
.autocomplete-copy span{font-size:.73rem;line-height:1.45;color:var(--text-muted);overflow-wrap:anywhere}
.autocomplete-ghi{font-size:0.68rem;color:var(--primary);white-space:nowrap;flex-shrink:0;padding:4px 8px;border-radius:999px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.16)}

/* ── LOCATION (hidden helper) ── */
#selected-location{background:var(--surface-light);border-radius:8px;padding:10px 12px;font-size:0.85rem;display:none;align-items:center;gap:8px;margin-top:8px;}
.loc-dot{width:10px;height:10px;border-radius:50%;background:var(--success);flex-shrink:0}

/* ── MAP ── */
#map{height:100%;border-radius:0;border:none;background:linear-gradient(180deg,#0B1220 0%,#111827 100%);min-height:300px;}
#map-card{border-radius:0;overflow:hidden;border:none;padding:0!important}
#map-card:hover{transform:none;box-shadow:none}
.leaflet-draw-toolbar a{background-color:#1E293B!important;color:#F1F5F9!important;border-color:#475569!important}
.leaflet-draw-toolbar a:hover{background-color:#334155!important;color:#F59E0B!important}
.leaflet-draw-toolbar .leaflet-draw-draw-polygon{background-image:none!important;font-size:18px!important;display:flex!important;align-items:center!important;justify-content:center!important}
.leaflet-draw-toolbar .leaflet-draw-draw-polygon::after{content:'⬡';font-size:16px}
.leaflet-draw-tooltip{background:#1E293B;color:#F59E0B;border:1px solid #F59E0B;font-family:'Inter',sans-serif;font-size:0.78rem;padding:4px 8px;border-radius:6px}
.leaflet-draw-guide-dash{border-color:#F59E0B!important}
.leaflet-control-layers{background:#1E293B!important;border:1px solid #475569!important;border-radius:8px!important;color:#F1F5F9!important}
.leaflet-control-layers-toggle{background-color:#1E293B!important}
.leaflet-control-layers label{color:#F1F5F9!important;font-family:'Inter',sans-serif;font-size:0.8rem}
#map-draw-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:rgba(9,14,25,0.92);color:#F59E0B;font-family:'Inter',sans-serif;font-size:0.8rem;font-weight:600;padding:8px 16px;border-radius:8px;border:1px solid rgba(245,158,11,0.4);z-index:1000;pointer-events:none;display:none;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,0.5);}
#map-draw-hint.is-visible{display:block}
.google-roof-tools{position:absolute;left:18px;right:auto;bottom:42px;z-index:1002;display:flex;gap:6px;flex-wrap:wrap;max-width:min(460px,calc(100% - 300px));padding:6px;border:1px solid rgba(245,158,11,.24);border-radius:10px;background:rgba(15,23,42,.9);box-shadow:0 12px 28px rgba(0,0,0,.34);backdrop-filter:blur(10px)}
.google-roof-tool-btn{border:1px solid rgba(245,158,11,.3);border-radius:8px;background:rgba(245,158,11,.1);color:#F8FAFC;font-size:.74rem;font-weight:800;padding:7px 10px;cursor:pointer;font-family:var(--font-display);line-height:1;transition:background .18s,border-color .18s,color .18s}
.google-roof-tool-btn:hover{background:rgba(245,158,11,.2);border-color:#F59E0B;color:#F59E0B}
.google-roof-tool-btn.active{background:rgba(245,158,11,.24);border-color:#F59E0B;color:#FBBF24}
.google-roof-tool-btn:disabled{cursor:not-allowed;opacity:.44;background:rgba(148,163,184,.08);border-color:rgba(148,163,184,.18);color:#94A3B8}
.google-roof-tool-btn.danger{border-color:rgba(239,68,68,.34);background:rgba(239,68,68,.12)}
.google-roof-tool-btn.danger:hover{border-color:#EF4444;color:#FCA5A5;background:rgba(239,68,68,.2)}
#map.google-roof-drawing-active{cursor:crosshair}
@media (max-width: 720px){
  .google-roof-tools{left:10px;right:10px;bottom:46px;max-width:none;justify-content:center}
  .google-roof-tool-btn{font-size:.68rem;padding:7px 8px}
}
#roof-area-badge{display:none;background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.35);border-radius:8px;padding:8px 14px;font-size:0.82rem;color:var(--primary);margin-top:10px;}
.map-layer-btn{position:absolute;top:10px;right:50px;z-index:999;background:rgba(9,14,25,0.9);border:1px solid rgba(245,158,11,0.28);border-radius:8px;color:#F1F5F9;font-size:0.75rem;font-weight:700;cursor:pointer;padding:7px 12px;font-family:'Inter',sans-serif;transition:all 0.2s;display:flex;align-items:center;gap:6px;box-shadow:0 8px 22px rgba(0,0,0,0.32)}
.map-layer-btn:hover{background:rgba(245,158,11,0.12);border-color:#F59E0B;color:#F59E0B}
.map-layer-btn.active{background:rgba(245,158,11,0.15);border-color:#F59E0B;color:#F59E0B}
.roof-vertex-icon{background:#F59E0B!important;border:2px solid #fff!important;border-radius:50%!important;width:10px!important;height:10px!important}

/* ── BTN ── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:10px;font-family:var(--font-display);font-size:0.875rem;font-weight:600;cursor:pointer;border:none;transition:all var(--transition);position:relative;overflow:hidden;letter-spacing:0.01em;}
.btn::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);transform:skewX(-20deg);transition:left 0.5s ease;pointer-events:none;}
.btn:hover::before{left:140%}
.btn:active{transform:scale(0.97)!important}
.btn:disabled{opacity:0.45;cursor:not-allowed;transform:none!important}
.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);color:#000;font-weight:700;box-shadow:var(--shadow-md);}
.btn-primary:hover{background:linear-gradient(135deg,#FCD34D 0%,var(--primary) 100%);box-shadow:var(--shadow-glow-primary);transform:translateY(-1px);}
.btn-secondary{background:rgba(255,255,255,0.04);color:var(--text);border:1px solid var(--border-subtle);backdrop-filter:blur(8px);}
.btn-secondary:hover{background:rgba(255,255,255,0.09);border-color:rgba(255,255,255,0.15);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--primary);border:1px solid rgba(245,158,11,0.4)}
.btn-outline:hover{background:rgba(245,158,11,0.08);border-color:var(--primary);box-shadow:0 0 16px rgba(245,158,11,0.18)}
.btn-success{background:linear-gradient(135deg,var(--success) 0%,#059669 100%);color:#fff;font-weight:700}
.btn-full{width:100%;justify-content:center}
.nav-btns{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}
@media(max-width:768px){.sticky-nav{position:fixed;bottom:0;left:0;right:0;padding:12px 16px;background:rgba(15,23,42,0.95);backdrop-filter:blur(16px);border-top:1px solid var(--border-subtle);box-shadow:0 -4px 24px rgba(0,0,0,0.4);z-index:90;}.sticky-nav .btn{min-height:48px;font-size:1rem}.btn{min-height:44px}}

/* ── TILT SVG ── */
.roof-geometry-grid{display:grid;grid-template-columns:1fr;gap:18px}
.roof-geometry-panel{display:grid;gap:12px;min-width:0}
.roof-control-head{display:grid;gap:6px}
.roof-control-label{display:flex;align-items:center;gap:6px;font-size:0.92rem;font-weight:700;color:var(--text)}
.roof-control-help{font-size:0.78rem;line-height:1.5;color:var(--text-muted)}
.roof-control-shell{display:grid;gap:14px;padding:0;border:none;background:none;box-shadow:none}
.roof-control-shell .range-wrap{margin-top:2px}
#tilt-diagram-wrap{margin-top:0}
#tilt-diagram-wrap svg,#compass-wrap svg{display:block;max-width:100%;margin:0 auto}
#tilt-info{margin:0}
.roof-control-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto;gap:10px;align-items:center}
.roof-control-kpi{display:grid;gap:4px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,0.035);border:1px solid var(--border-subtle)}
.roof-control-kpi span{font-size:0.72rem;color:var(--text-muted)}
.roof-control-kpi strong{font-size:0.92rem;font-weight:700;color:var(--text);font-family:var(--font-display)}
.tilt-status-pill{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border-radius:999px;font-size:0.74rem;font-weight:700;text-align:center;border:1px solid transparent;white-space:nowrap}
.tilt-status-pill.is-good{background:rgba(16,185,129,0.12);border-color:rgba(16,185,129,0.28);color:var(--success)}
.tilt-status-pill.is-warn{background:rgba(245,158,11,0.1);border-color:rgba(245,158,11,0.28);color:var(--primary)}
.tilt-status-pill.is-bad{background:rgba(239,68,68,0.1);border-color:rgba(239,68,68,0.28);color:var(--danger)}

/* ── COMPASS ── */
#compass-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.compass-svg-container{cursor:pointer;user-select:none}
.compass-dir-btn{cursor:pointer;transition:opacity 0.2s}
.compass-dir-btn:hover{opacity:0.8}
#azimuth-info{font-size:inherit;color:inherit;text-align:left}
.optimal-badge{background:rgba(245,158,11,0.15);color:var(--primary);font-size:0.7rem;font-weight:700;padding:2px 6px;border-radius:4px;border:1px solid rgba(245,158,11,0.3);}
.step2-search-icon{position:absolute;top:50%;right:0;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--text-muted);pointer-events:none}

@media(max-width:720px){
  .roof-control-summary{grid-template-columns:1fr}
  .tilt-status-pill,.optimal-badge{justify-self:start}
}

/* ── PANEL CARDS ── */
.panel-catalog-toolbar{display:grid;grid-template-columns:1.2fr 1fr auto;gap:12px;align-items:end;margin:18px 0 12px}
.panel-catalog-filter{display:flex;flex-direction:column;gap:6px}
.panel-catalog-filter label{font-size:.75rem;color:var(--text-muted);font-weight:700}
.panel-catalog-filter select{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--text);width:100%}
.panel-catalog-meta{font-size:.76rem;color:var(--text-muted);line-height:1.6;padding:10px 14px;border:1px solid var(--border-subtle);border-radius:12px;background:rgba(255,255,255,.03)}
.panel-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:980px){.panel-cards{grid-template-columns:1fr}}
@media(max-width:820px){.panel-catalog-toolbar{grid-template-columns:1fr}}
.panel-card{background:var(--surface-glass);backdrop-filter:blur(8px);border:2px solid var(--border-subtle);border-radius:var(--radius);padding:20px;cursor:pointer;transition:all var(--transition-bounce);position:relative;overflow:hidden;}
.panel-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);}
.panel-card:hover{border-color:rgba(245,158,11,0.4);transform:translateY(-3px);box-shadow:var(--shadow-glow-primary)}
.panel-card.selected{border-color:var(--primary);background:rgba(245,158,11,0.05);box-shadow:var(--shadow-glow-primary)}
.panel-catalog-card{background:linear-gradient(180deg,rgba(245,158,11,.06),rgba(15,23,42,.08) 80px),var(--surface-glass)}
.panel-catalog-topline,.panel-catalog-brandline,.panel-catalog-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}
.panel-catalog-topline{margin-bottom:12px}
.panel-catalog-brandline{margin-bottom:8px}
.panel-catalog-brand{font-size:.75rem;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.04em}
.panel-catalog-tier,.panel-catalog-verified{font-size:.72rem;color:var(--text-muted)}
.panel-catalog-tier{padding:6px 10px;border:1px solid rgba(245,158,11,.18);border-radius:999px;background:rgba(245,158,11,.08);color:var(--primary);font-weight:700}
.panel-card-title{font-family:var(--font-display);font-weight:700;font-size:0.9rem;margin-bottom:8px}
.panel-card-eff{font-family:var(--font-display);font-size:2.2rem;font-weight:800;color:var(--primary);line-height:1;letter-spacing:-0.03em;}
.panel-card-stats{margin-top:12px;display:flex;flex-direction:column;gap:5px}
.panel-stat{display:flex;justify-content:space-between;font-size:0.78rem}
.panel-stat-label{color:var(--text-muted)}
.panel-card-scenario{margin-top:12px;padding:12px 14px;border:1px solid rgba(245,158,11,.16);border-radius:12px;background:rgba(245,158,11,.06);font-size:.78rem;line-height:1.55;color:var(--text)}
.panel-check{position:absolute;top:8px;right:8px;background:var(--primary);border-radius:50%;width:22px;height:22px;display:none;align-items:center;justify-content:center;font-size:12px;color:#000;box-shadow:0 0 10px rgba(245,158,11,0.5);}
.panel-card.selected .panel-check{display:flex}
.panel-catalog-footer{margin-top:12px;padding-top:12px;border-top:1px solid var(--border-subtle)}
.panel-catalog-source{font-size:.72rem;color:var(--text-muted);line-height:1.5}
.panel-catalog-link{font-size:.76rem;font-weight:700;color:var(--primary);text-decoration:none}
.panel-preview{background:var(--surface);border-radius:8px;padding:14px;margin-top:16px;display:flex;gap:20px;flex-wrap:wrap;}
.panel-preview-stat{text-align:center}
.panel-preview-val{font-size:1.5rem;font-weight:700;color:var(--primary)}
.panel-preview-label{font-size:0.72rem;color:var(--text-muted);margin-top:2px}

/* ── LOADING ── */
@keyframes spinSun{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ── KPI CARDS ── */
.kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:600px){.kpi-grid{grid-template-columns:1fr}}
.kpi-card{background:var(--surface-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:24px;position:relative;overflow:hidden;transition:transform var(--transition);box-shadow:var(--shadow-card);}
.kpi-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--kpi-color,var(--primary));opacity:0.6}
.kpi-card:hover{transform:translateY(-3px)}
.kpi-icon-wrap{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,0.04);border:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--kpi-color,var(--primary));}
.kpi-value{font-family:var(--font-display);font-size:2.4rem;font-weight:800;letter-spacing:-0.04em;color:var(--kpi-color,var(--primary));line-height:1;margin-bottom:4px;}
.kpi-unit{font-size:0.75rem;color:var(--text-muted);margin-bottom:6px}
.kpi-label{font-size:0.8rem;color:var(--text-muted);font-weight:500}
.kpi-sub{font-size:0.7rem;color:var(--text-muted);margin-top:4px}

/* ── FIN BOX ── */
.fin-box{background:var(--surface-glass);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:24px;margin-top:16px;box-shadow:var(--shadow-card);}
.fin-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border-subtle);}
.fin-row:last-child{border-bottom:none}
.fin-label{font-size:0.85rem;color:var(--text-muted)}
.fin-val{font-family:var(--font-display);font-size:1rem;font-weight:700}
.fin-val.highlight{color:var(--primary);font-size:1.2rem}
.fin-val.positive{color:var(--success)}
.fin-val.negative{color:var(--danger)}
.payback-bar-wrap{flex:1;height:6px;background:var(--surface-light);border-radius:3px;margin-right:12px;overflow:hidden;}
.payback-bar-fill{height:100%;background:linear-gradient(90deg,var(--success),var(--primary));border-radius:3px;transition:width 1s ease;}

/* BESS / NM result wrappers */
.bess-result-wrap,.nm-result-wrap,.offgrid-result-card{background:var(--surface-glass);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:20px;margin-top:16px;box-shadow:var(--shadow-card);position:relative;overflow:hidden}
.bess-result-wrap{background:linear-gradient(180deg, rgba(56,189,248,0.045) 0%, var(--surface-glass) 35%);}
.bess-result-wrap::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,rgba(56,189,248,0.7),rgba(16,185,129,0.45),transparent)}
.nm-result-wrap::before,.offgrid-result-card::before{content:'';position:absolute;left:18px;right:18px;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--offgrid-accent,rgba(245,158,11,0.55)),transparent)}
.bess-result-title{color:rgb(56,189,248) !important;}
.bess-result-title,.nm-result-title,.offgrid-result-title{font-family:var(--font-display);font-size:0.95rem;font-weight:700;display:flex;align-items:center;gap:8px;color:var(--text)}
.result-badge-neutral{font-size:0.72rem;background:rgba(245,158,11,0.12);color:var(--primary);border:1px solid rgba(245,158,11,0.26);border-radius:999px;padding:2px 10px;font-weight:600}
.bess-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bess-metric{text-align:center;background:rgba(255,255,255,0.03);border:1px solid var(--border-subtle);border-radius:12px;padding:16px;position:relative;overflow:hidden}
.bess-metric::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--metric-color,var(--primary));opacity:.6}
.bess-metric--primary{--metric-color:var(--primary)}
.bess-metric--success{--metric-color:var(--success)}
.bess-metric-val{font-family:var(--font-display);font-size:1.9rem;font-weight:800;color:var(--metric-color,var(--primary))}
.bess-metric-label{font-size:0.72rem;color:var(--text-muted);margin-top:3px}
.bess-metric-note{font-size:0.72rem;color:var(--text-muted);margin-top:6px;line-height:1.45}
.bess-detail-grid{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:12px;margin-top:14px}
@media (max-width: 900px){ .bess-detail-grid{grid-template-columns:repeat(2, minmax(0, 1fr));} }
@media (max-width: 480px){ .bess-detail-grid{grid-template-columns:1fr;} }
.bess-detail-card{
  background:linear-gradient(180deg, rgba(56,189,248,0.06) 0%, rgba(255,255,255,0.02) 60%);
  border:1px solid var(--border-subtle);
  border-radius:12px;
  padding:14px 16px;
  position:relative;
  overflow:hidden;
  min-height:108px;
}
.bess-detail-card::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg, rgba(56,189,248,0.6), rgba(16,185,129,0.4));
}
.bess-detail-label{display:block;font-size:0.72rem;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.04em;font-weight:700}
.bess-detail-value{display:block;font-family:var(--font-display);font-size:1.05rem;font-weight:800;color:rgb(56,189,248);line-height:1.2}
.bess-detail-note{display:block;font-size:0.72rem;color:var(--text-muted);margin-top:6px;line-height:1.5}
.offgrid-note-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:14px}
.offgrid-note{padding:12px 14px;border-radius:12px;border:1px solid var(--border-subtle);background:rgba(255,255,255,0.03);font-size:0.78rem;color:var(--text-muted);line-height:1.6}
.offgrid-note strong{color:var(--text)}
.offgrid-note--warn{background:rgba(245,158,11,0.08);border-color:rgba(245,158,11,0.24)}
.offgrid-note--danger{background:rgba(239,68,68,0.08);border-color:rgba(239,68,68,0.24);color:#FCA5A5}
.nm-badge{font-size:0.72rem;background:rgba(16,185,129,0.15);color:#10B981;border:1px solid rgba(16,185,129,0.3);border-radius:4px;padding:2px 8px;font-weight:500}
.offgrid-result-stack{display:grid;gap:12px;margin-top:16px}
.offgrid-result-card{margin-top:0;--offgrid-accent:rgba(245,158,11,0.55);--offgrid-kicker:var(--primary)}
.offgrid-result-card--accent{--offgrid-accent:rgba(245,158,11,0.55);--offgrid-kicker:var(--primary)}
.offgrid-result-card--success{--offgrid-accent:rgba(16,185,129,0.5);--offgrid-kicker:var(--success)}
.offgrid-result-card--danger{--offgrid-accent:rgba(239,68,68,0.5);--offgrid-kicker:var(--danger)}
.offgrid-result-card--slate{--offgrid-accent:rgba(148,163,184,0.45);--offgrid-kicker:#CBD5E1}
.offgrid-result-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.offgrid-result-kicker{font-size:0.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--offgrid-kicker,var(--primary));margin-bottom:6px}
.offgrid-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:12px}
.offgrid-stat-card{background:rgba(255,255,255,0.03);border:1px solid var(--border-subtle);border-radius:12px;padding:16px;min-height:114px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.offgrid-stat-card::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--metric-color,var(--primary));opacity:.65}
.offgrid-stat-value{font-family:var(--font-display);font-size:1.55rem;font-weight:800;letter-spacing:-0.03em;color:var(--metric-color,var(--primary));line-height:1.05}
.offgrid-stat-label{font-size:0.76rem;color:var(--text);font-weight:600;margin-top:8px}
.offgrid-stat-note{font-size:0.72rem;color:var(--text-muted);line-height:1.5;margin-top:4px}
.offgrid-chip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:12px}
.offgrid-chip-card{background:rgba(255,255,255,0.025);border:1px solid var(--border-subtle);border-radius:12px;padding:12px 14px}
.offgrid-chip-label{display:block;font-size:0.72rem;color:var(--text-muted);margin-bottom:4px}
.offgrid-chip-value{display:block;font-size:0.85rem;font-weight:700;color:var(--text);line-height:1.45}
.offgrid-body-copy{font-size:0.8rem;color:var(--text-muted);line-height:1.7;margin-top:8px}
.offgrid-list-title{font-family:var(--font-display);font-size:0.84rem;font-weight:700;color:var(--text);margin-top:14px}
.offgrid-list{margin:10px 0 0;padding-left:18px;color:var(--text-muted);font-size:0.78rem;line-height:1.6}
.offgrid-list li+li{margin-top:6px}
.offgrid-inline-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.offgrid-inline-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,0.035);border:1px solid var(--border-subtle);font-size:0.74rem;color:var(--text-muted)}
.offgrid-inline-badge strong{color:var(--text)}
.offgrid-method-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;font-size:0.72rem;color:var(--text-muted)}

/* section breakdown */
.section-table{width:100%;border-collapse:collapse;font-size:0.82rem}
.section-table th{padding:8px;border-bottom:1px solid var(--border);color:var(--text-muted);font-weight:600;text-align:left}
.section-table td{padding:8px;border-bottom:1px solid var(--border-subtle);color:var(--text)}

/* chart */
.chart-wrap{
  background:linear-gradient(180deg,rgba(245,158,11,0.05) 0%,var(--surface-glass) 60%);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
  padding:24px;
  margin-top:16px;
  box-shadow:var(--shadow-card);
  position:relative;
  overflow:hidden;
}
.chart-wrap::before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,rgba(245,158,11,0.7),rgba(56,189,248,0.7));
}
.chart-wrap canvas{
  /* Sabit yüksek alan; responsive maintainAspectRatio kapalı olduğu için */
  min-height:360px;
  max-height:420px;
}
.chart-title{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--primary);margin-bottom:18px}

/* tech table */
.tech-table{width:100%;border-collapse:collapse;font-size:0.82rem}
.tech-table th{padding:8px;border-bottom:1px solid var(--border);color:var(--text-muted);font-weight:600;text-align:left}
.tech-table td{padding:8px;border-bottom:1px solid var(--border-subtle);color:var(--text)}

/* Proposal result layer — Step 7 professional feasibility screen */
.proposal-results-root{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin:18px 0 22px;
}
.proposal-section{
  --proposal-accent: 245,158,11;     /* default: amber */
  --proposal-accent-soft: 245,158,11;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
  background:
    linear-gradient(180deg, rgba(var(--proposal-accent-soft), 0.045) 0%, rgba(15,23,42,0) 35%),
    var(--surface-glass);
  box-shadow:var(--shadow-card);
  padding:20px;
  position:relative;
  overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
}
.proposal-section::before{
  content:'';
  position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,
    rgba(var(--proposal-accent), 0.85) 0%,
    rgba(var(--proposal-accent), 0.30) 70%,
    transparent 100%);
}
.proposal-section:hover{ box-shadow:0 14px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04); }
.proposal-section .proposal-section-head h3{
  color: rgb(var(--proposal-accent-text, 241,245,249));
}
.proposal-section--amber{
  --proposal-accent: 245,158,11;
  --proposal-accent-soft: 251,191,36;
  --proposal-accent-text: 251,191,36;
}
.proposal-section--cyan{
  --proposal-accent: 14,165,233;
  --proposal-accent-soft: 56,189,248;
  --proposal-accent-text: 56,189,248;
}
.proposal-section--violet{
  --proposal-accent: 139,92,246;
  --proposal-accent-soft: 167,139,250;
  --proposal-accent-text: 167,139,250;
}
.proposal-section--emerald{
  --proposal-accent: 16,185,129;
  --proposal-accent-soft: 52,211,153;
  --proposal-accent-text: 52,211,153;
}
.proposal-section.proposal-accordion{ padding:0; }
.proposal-section.proposal-accordion::before{ z-index:1; }
.proposal-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.proposal-section-head h3{
  margin:0;
  color:var(--text);
  font-family:var(--font-display);
  font-size:1.08rem;
  letter-spacing:0;
}
.proposal-section-head p{
  margin:6px 0 0;
  color:var(--text-muted);
  font-size:.86rem;
  line-height:1.45;
}
.proposal-summary-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}
.proposal-summary-card{
  min-height:118px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:8px;
  background:rgba(15,23,42,.48);
  padding:14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:8px;
}
.proposal-summary-label{
  color:var(--text-muted);
  font-size:.74rem;
  font-weight:700;
  text-transform:uppercase;
}
.proposal-summary-value{
  color:var(--text);
  font-family:var(--font-display);
  font-size:1.15rem;
  line-height:1.15;
}
.proposal-summary-note{
  color:var(--text-muted);
  font-size:.76rem;
  line-height:1.35;
}
.proposal-summary-card--accent{border-color:rgba(245,158,11,.35)}
.proposal-summary-card--good{border-color:rgba(16,185,129,.35)}
.proposal-summary-card--warn{border-color:rgba(245,158,11,.45)}
.proposal-summary-card--strong{background:rgba(15,23,42,.70);border-color:rgba(14,165,233,.35)}
.proposal-table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.proposal-table-wrap--narrow{max-width:980px}
.proposal-table{
  width:100%;
  min-width:920px;
  border-collapse:collapse;
  font-size:.8rem;
}
.proposal-table th,
.proposal-table td{
  padding:10px;
  border-bottom:1px solid var(--border-subtle);
  color:var(--text);
  vertical-align:top;
  text-align:left;
}
.proposal-table th{
  color:var(--text-muted);
  font-weight:800;
  white-space:nowrap;
  background:rgba(15,23,42,.35);
}
.proposal-table td small{
  display:block;
  color:var(--text-muted);
  margin-top:4px;
  line-height:1.35;
}
.proposal-table tfoot td{
  background:rgba(15,23,42,.42);
  font-weight:700;
}
.proposal-cost-group-head th{
  background:rgba(245,158,11,.08);
  color:var(--primary);
  font-size:.78rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:10px 12px;
  border-top:1px solid rgba(245,158,11,.22);
}
.proposal-cost-group-subtotal td{
  background:rgba(15,23,42,.28);
  color:var(--text);
  font-weight:700;
  border-top:1px dashed rgba(148,163,184,.25);
}

.proposal-cost-action-cell{
  text-align:center;
  width:44px;
}
.proposal-cost-remove-btn{
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(239,68,68,.42);
  background:rgba(239,68,68,.12);
  color:#FCA5A5;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.proposal-cost-remove-btn:hover,
.proposal-cost-remove-btn:focus-visible{
  border-color:#EF4444;
  background:rgba(239,68,68,.24);
  transform:translateY(-1px);
  outline:none;
}
.proposal-cost-exclusion-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
  padding:10px 12px;
  border:1px solid rgba(239,68,68,.24);
  border-radius:10px;
  background:rgba(239,68,68,.08);
  color:var(--text-muted);
  font-size:.8rem;
}
.proposal-cost-restore-btn{
  border:1px solid rgba(245,158,11,.34);
  background:rgba(245,158,11,.10);
  color:var(--primary);
  border-radius:999px;
  padding:7px 10px;
  font-weight:800;
  font-size:.72rem;
  cursor:pointer;
}
.proposal-cost-restore-btn:hover,
.proposal-cost-restore-btn:focus-visible{
  border-color:var(--primary);
  background:rgba(245,158,11,.18);
  outline:none;
}

/* Tema-bazlı tablo başlık renkleri (proposal-section--{theme} altındaki tablolar) */
.proposal-section--amber .proposal-table thead th{
  background:rgba(245,158,11,0.10); color:rgb(251,191,36);
  border-bottom:2px solid rgba(245,158,11,0.30);
}
.proposal-section--cyan .proposal-table thead th{
  background:rgba(14,165,233,0.10); color:rgb(56,189,248);
  border-bottom:2px solid rgba(14,165,233,0.30);
}
.proposal-section--violet .proposal-table thead th{
  background:rgba(139,92,246,0.10); color:rgb(167,139,250);
  border-bottom:2px solid rgba(139,92,246,0.30);
}
.proposal-section--emerald .proposal-table thead th{
  background:rgba(16,185,129,0.10); color:rgb(52,211,153);
  border-bottom:2px solid rgba(16,185,129,0.30);
}
/* Alternating row background + hover */
.proposal-section .proposal-table tbody tr:nth-child(even) td{
  background:rgba(15,23,42,0.22);
}
.proposal-section .proposal-table tbody tr:hover td{
  background:rgba(255,255,255,0.03);
}

/* Aylık mahsuplaşma tablosu — Ay sütunu vurgu */
.proposal-table--monthly tbody td:first-child{
  font-weight:800; color:rgb(56,189,248); width:54px;
}
.proposal-table--monthly{ min-width:760px; }

/* 25 yıllık projeksiyon tablosu — sade ve renkli */
.proposal-table--projection{ min-width:auto; }
.proposal-table--projection .proposal-cell-year{
  font-weight:800; color:rgb(52,211,153); width:46px;
}
.proposal-table--projection .proposal-cell-money{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
  white-space:nowrap;
}
.proposal-table--projection .proposal-cell-savings{
  color:rgb(52,211,153); font-weight:700;
}
.proposal-table--projection .proposal-cell-after{
  color:rgb(241,245,249); font-weight:600;
}
.proposal-table--projection .proposal-cell-cumulative{
  font-weight:800;
}
.proposal-table--projection .proposal-cell-cumulative.is-positive{ color:rgb(52,211,153); }
.proposal-table--projection .proposal-cell-cumulative.is-negative{ color:rgb(248,113,113); }
/* Yıllık üretim — info tonu (panel degradasyonu hikayesi) */
.proposal-table--projection .proposal-cell-production{
  color:rgb(56,189,248); font-weight:600;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
/* 3. sütun (GES olmadan fatura) referans değer, mutedlandırıldı */
.proposal-table--projection tbody tr td:nth-child(3){ color:var(--text-muted); }

/* Monthly bill simulation summary — 2x2 grid. Compound selector ile
   .proposal-projection-summary base rule'undan daha yüksek specificity. */
.proposal-projection-summary.proposal-projection-summary--2col{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
@media (max-width: 600px){
  .proposal-projection-summary.proposal-projection-summary--2col{ grid-template-columns: 1fr; }
}
.proposal-addon-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
.proposal-addon-grid h4{
  margin:0 0 10px;
  color:var(--text);
  font-size:.94rem;
  font-family:var(--font-display);
}
.proposal-accordion{
  padding:0;
}
.proposal-accordion-summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:18px 20px;
}
.proposal-accordion-summary::-webkit-details-marker{display:none}
.proposal-accordion-summary strong{
  display:block;
  color: rgb(var(--proposal-accent-text, 241,245,249));
  font-family:var(--font-display);
  font-size:1.08rem;
}
.proposal-accordion-summary em{
  display:block;
  margin-top:5px;
  color:var(--text-muted);
  font-size:.84rem;
  font-style:normal;
}
.proposal-accordion[open] .proposal-accordion-indicator{transform:rotate(45deg)}
.proposal-accordion > :not(summary){
  margin:0 20px 18px;
}
.proposal-projection-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.proposal-warning-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}
.proposal-warning{
  border:1px solid rgba(148,163,184,.20);
  border-radius:8px;
  padding:12px;
  background:rgba(15,23,42,.42);
}
.proposal-warning strong{
  display:block;
  color:var(--text);
  font-size:.86rem;
  margin-bottom:5px;
}
.proposal-warning span{
  display:block;
  color:var(--text-muted);
  font-size:.78rem;
  line-height:1.4;
}
.proposal-warning--critical{border-color:rgba(239,68,68,.55)}
.proposal-warning--warning{border-color:rgba(245,158,11,.55)}
.proposal-warning--success{border-color:rgba(16,185,129,.45)}
.proposal-warning--info{border-color:rgba(14,165,233,.38)}
.proposal-muted-panel{
  border:1px dashed rgba(148,163,184,.28);
  border-radius:8px;
  background:rgba(15,23,42,.28);
  padding:10px;
}
.proposal-inline-warning{
  margin-top:10px;
  border:1px solid rgba(245,158,11,.45);
  border-radius:8px;
  padding:10px 12px;
  color:#FCD34D;
  background:rgba(245,158,11,.10);
  font-size:.82rem;
}
.proposal-assumption-notes{
  margin:12px 0 0;
  padding-left:18px;
  color:var(--text-muted);
  font-size:.8rem;
  line-height:1.5;
}

/* turkey map */
#turkey-map-wrap{margin-top:16px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border-subtle);}

/* eng report */
.eng-report-wrap{background:var(--surface-glass);border:1px solid var(--border-subtle);border-radius:var(--radius);margin-top:16px;overflow:hidden}
.eng-report-header{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;cursor:pointer;border-bottom:1px solid var(--border-subtle);}
.eng-report-title{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:0.95rem;font-weight:700}
.eng-chevron{transition:transform 0.3s ease}
.eng-report-body{padding:20px 24px}

/* action-btns */
.action-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}

/* Ek Teknik Detaylar — collapsible kart */
.step7-extras{
  background:var(--surface-glass);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  margin-top:16px;
  overflow:hidden;
  position:relative;
}
.step7-extras::before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,rgba(245,158,11,0.7),rgba(56,189,248,0.5),transparent);
}
.step7-extras-summary{
  cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 24px;
  transition:background .15s ease;
}
.step7-extras-summary:hover{ background:rgba(255,255,255,0.02); }
.step7-extras-summary::-webkit-details-marker{display:none}
.step7-extras-summary-text strong{
  display:block;font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--primary);
}
.step7-extras-summary-text em{
  display:block;margin-top:4px;font-style:normal;color:var(--text-muted);font-size:.84rem;line-height:1.45;
}
.step7-extras-indicator{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:8px;
  background:rgba(245,158,11,0.10);border:1px solid rgba(245,158,11,0.30);
  color:var(--primary);font-size:1.1rem;font-weight:700;
  transition:transform .25s ease;
}
.step7-extras[open] .step7-extras-indicator{ transform:rotate(45deg); }
.step7-extras-body{
  padding:0 18px 18px;
  display:flex;flex-direction:column;gap:16px;
}
.step7-extras-body > .card{ margin-top:0; }

/* Teklif Al — Inline panel (eski modal yerine action-group-card içinde) */
.quote-inline-panel{
  margin-top:18px;
  border-top:1px solid var(--border-subtle);
  padding-top:18px;
}
.quote-inline-panel-card{
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border-subtle);
  border-radius:14px;
  padding:20px 22px;
  position:relative;
  overflow:hidden;
}
.quote-inline-panel-card::before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,rgba(245,158,11,0.7),rgba(245,158,11,0.20),transparent);
}
.quote-inline-panel-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;
}
.quote-inline-panel-title{
  margin:0;display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--primary);
}

/* season-btn */
.season-btn{background:rgba(255,255,255,0.04);border:1px solid var(--border-subtle);border-radius:8px;padding:6px 14px;cursor:pointer;color:var(--text-muted);font-size:0.82rem;font-family:var(--font-body);transition:all 0.2s}
.season-btn.active{background:rgba(245,158,11,0.12);border-color:var(--primary);color:var(--primary)}

/* result extras */
.results-hero{position:relative;height:4px;margin-bottom:20px;overflow:hidden;border-radius:2px;background:linear-gradient(90deg,var(--primary),var(--accent))}
.results-glow{position:absolute;inset:-20px;background:radial-gradient(ellipse at 50% 50%,rgba(245,158,11,0.3),transparent 70%)}
.result-context-strip{background:rgba(255,255,255,0.03);border:1px solid var(--border-subtle);border-radius:10px;padding:10px 16px;display:flex;gap:16px;flex-wrap:wrap;margin-bottom:16px;font-size:0.8rem}
.result-metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:12px}

/* tooltip */
.tooltip-wrap{position:relative;display:inline-block}
.tooltip-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:rgba(148,163,184,0.15);border:1px solid rgba(148,163,184,0.3);font-size:0.7rem;color:var(--text-muted);cursor:help;margin-left:4px}
.tooltip-box{visibility:hidden;opacity:0;position:absolute;z-index:200;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#1E293B;border:1px solid var(--border);border-radius:8px;padding:10px 14px;font-size:0.76rem;line-height:1.5;color:var(--text-muted);width:260px;white-space:normal;box-shadow:var(--shadow-md);transition:opacity 0.2s}
.tooltip-wrap:hover .tooltip-box,.tooltip-wrap:focus-within .tooltip-box{visibility:visible;opacity:1}
.tooltip-icon:focus-visible{outline:2px solid var(--primary);outline-offset:2px;box-shadow:0 0 0 3px rgba(245,158,11,0.18)}

/* toast */
#toast-container{position:fixed;right:16px;bottom:16px;z-index:1200;display:flex;flex-direction:column;gap:10px;max-width:min(380px,calc(100vw - 24px));pointer-events:none}
.toast{pointer-events:auto;padding:12px 14px;border-radius:12px;border:1px solid var(--border-subtle);background:rgba(15,23,42,0.94);color:var(--text);box-shadow:var(--shadow-lg);font-size:0.84rem;line-height:1.45;backdrop-filter:blur(10px);animation:toastIn .24s ease both}
.toast.info{border-color:rgba(59,130,246,0.28)}
.toast.success{border-color:rgba(16,185,129,0.28)}
.toast.warning{border-color:rgba(245,158,11,0.34)}
.toast.error{border-color:rgba(239,68,68,0.34)}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(8px)}}

/* ghi-legend */
.ghi-legend{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.ghi-leg-item{display:flex;align-items:center;gap:4px;font-size:0.72rem;color:var(--text-muted)}
.ghi-leg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* location warning */
#location-warning{display:none;color:var(--danger);font-size:0.8rem;margin-top:6px;padding:8px 12px;background:rgba(239,68,68,0.08);border-radius:6px;border:1px solid rgba(239,68,68,0.2)}
#location-warning.location-warning-visible{display:block}