:root{
    --paper:#f2f3ef;
    --surface:#ffffff;
    --surface-2:#eceee8;
    --ink:#16233a;
    --ink-soft:#55617a;
    --muted:#8b93a0;
    --line:#d8dbd1;
    --line-strong:#c3c7bb;
    --accent:#2f6fb0;
    --accent-ink:#0d2a4a;
    --accent-2:#1f6f63;
    /* Kullanıcı isteği: "en sonraki kapak fotoğrafı arkaplanını mavi renk yap" — kapak
       (kapak sayfası) rengi artık genel amber --accent temasından ayrı, kendi mavi
       değişkenlerini kullanıyor; böylece uygulamanın geri kalanındaki (butonlar, ilerleme
       çubuğu vb.) amber renk temasına dokunulmuyor. Tema (açık/koyu) fark etmeksizin aynı
       mavi kapak görünümü korunsun diye bilerek sadece burada, tek yerde tanımlandı. */
    --kapak-bg:#1c4f7c;
    --kapak-ink:#eef5fc;
    --shadow: 0 1px 2px rgba(22,35,58,.06), 0 8px 24px -12px rgba(22,35,58,.18);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#0f1720;
      --surface:#16202c;
      --surface-2:#1c2733;
      --ink:#eef1f6;
      --ink-soft:#b7c0cf;
      --muted:#7c8798;
      --line:#2a3646;
      --line-strong:#37455a;
      --accent:#5b9be0;
      --accent-ink:#04162a;
      --accent-2:#4fb3a0;
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px -14px rgba(0,0,0,.6);
    }
  }
  :root[data-theme="dark"]{
    --paper:#0f1720;
    --surface:#16202c;
    --surface-2:#1c2733;
    --ink:#eef1f6;
    --ink-soft:#b7c0cf;
    --muted:#7c8798;
    --line:#2a3646;
    --line-strong:#37455a;
    --accent:#5b9be0;
    --accent-ink:#04162a;
    --accent-2:#4fb3a0;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px -14px rgba(0,0,0,.6);
  }

  *{box-sizing:border-box;}
  body{
    background:
      linear-gradient(var(--paper),var(--paper)),
      repeating-linear-gradient(0deg, transparent 0 39px, var(--line) 39px 40px),
      repeating-linear-gradient(90deg, transparent 0 39px, var(--line) 39px 40px);
    background-blend-mode:normal, multiply, multiply;
    opacity:1;
    color:var(--ink);
    font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) body{ background-blend-mode:normal, screen, screen; }
  }
  :root[data-theme="dark"] body{ background-blend-mode:normal, screen, screen; }

  h1,h2,h3,.display{
    font-family:"Archivo", ui-sans-serif, system-ui, sans-serif;
    text-wrap:balance;
    letter-spacing:-0.01em;
  }
  .mono{ font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; font-variant-numeric:tabular-nums; }

  .wrap{ max-width:1440px; margin:0 auto; padding:28px 24px 64px; }   /* 108. parti: 1180 → 1440 px (Ticarethane fatura tablosu kaydırmadan sığsın) */

  /* header */
  .masthead{
    display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
    padding-bottom:20px; margin-bottom:24px; border-bottom:2px solid var(--line-strong);
    flex-wrap:wrap;
  }
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand-mark{
    width:40px; height:40px; border-radius:9px;
    background: linear-gradient(155deg, var(--accent), var(--accent-2));
    display:flex; align-items:center; justify-content:center;
    box-shadow: var(--shadow);
    flex:none;
  }
  .brand-mark svg{ width:22px; height:22px; }
  .brand-name{ font-family:"Archivo", ui-sans-serif, system-ui, sans-serif; font-weight:800; font-size:20px; letter-spacing:0.01em; }
  .brand-sub{ font-size:12.5px; color:var(--ink-soft); margin-top:1px; }
  .masthead-right{ text-align:right; }
  .eyebrow{
    font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--accent-2); margin:0 0 4px;
  }
  .masthead-right h1{ font-size:22px; font-weight:700; margin:0; }

  /* layout */
  /* Kullanıcı bildirimi: "yazdırma seçeneğinde ... tablonun yarısı bir sayfada diğer yarısı
     sonraki sayfada çıkıyor. tüm adımlar ayrı ayrı sayfa olsun" — CSS Grid/Flexbox içindeki
     elemanların sayfa/kolon bölünmesi (fragmentation) bazı tarayıcı/PDF yazdırma motorlarında
     güvenilir değildir. Bu yüzden .grid, görsel sonucu birebir aynı kalacak şekilde normal
     blok akışına (display:block) çevrildi; aralardaki 22px boşluk artık "gap" yerine, yalnızca
     ardışık kardeşler arasına uygulanan margin-top ile sağlanıyor (ilk/son elemanı etkilemez,
     "gap" ile aynı davranış). */
  .grid{ display:block; }
  .grid > * + *{ margin-top:22px; }
  .input-panel .panel-body{
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 20px; align-items:start;
  }
  .input-panel .panel-body .divider-label,
  .input-panel .panel-body .two-col,
  .input-panel .panel-body .span-full{
    grid-column:1 / -1;
  }
  /* 36. parti (madde 8): Konut + Ticarethane (sınıf adı ges-konut her ikisinde) — Müşteri Bilgileri, Sistem Bilgileri, Mahsuplaşma ve Ekipman Parametreleri 5 sütun, sıkı satır aralığı */
  #gesCalcRoot.ges-konut #parametrePanel .panel-body, #gesCalcRoot.ges-konut #mahsuplasmaPanel .panel-body{ grid-template-columns:repeat(5, minmax(0,1fr)); gap:0 14px; }
  #gesCalcRoot.ges-konut #parametrePanel .field, #gesCalcRoot.ges-konut #mahsuplasmaPanel .field, #gesCalcRoot.ges-konut #musteriPanel .field{ margin-bottom:8px; }
  #gesCalcRoot.ges-konut #musteriPanel .two-col{ grid-template-columns:repeat(5, minmax(0,1fr)) !important; gap:6px 14px; }
  #gesCalcRoot.ges-konut #sistemBilgiIcerik{ grid-template-columns:repeat(5, minmax(0,1fr)) !important; gap:8px 14px !important; }
  @media (max-width:1000px){
    #gesCalcRoot.ges-konut #parametrePanel .panel-body, #gesCalcRoot.ges-konut #mahsuplasmaPanel .panel-body{ grid-template-columns:repeat(3, minmax(0,1fr)); }
    #gesCalcRoot.ges-konut #musteriPanel .two-col, #gesCalcRoot.ges-konut #sistemBilgiIcerik{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
  }
  /* 37. parti: Panel Yerleşim Bilgileri 5 sütun; Ekipman Parametreleri: 1. sütun panel, 2. sütun invertör, 3. sütun batarya */
  #gesCalcRoot.ges-konut #panelYerlesimBilgiPanel .panel-body{ grid-template-columns:repeat(5, minmax(0,1fr)); gap:0 14px; }
  #gesCalcRoot.ges-konut #panelYerlesimBilgiPanel .field{ margin-bottom:8px; }
  #gesCalcRoot.ges-konut #parametrePanel .panel-body{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  #gesCalcRoot.ges-konut #parametrePanel .field:has(#panelGucu){ grid-column:1; grid-row:1; }
  #gesCalcRoot.ges-konut #parametrePanel .field:has(#ticPanelSayisi){ grid-column:1; grid-row:2; }
  #gesCalcRoot.ges-konut #parametrePanel .field:has(#toplamPanelGucu){ grid-column:1; grid-row:3; }
  #gesCalcRoot.ges-konut #parametrePanel .field:has(#invertorGucu){ grid-column:2; grid-row:1; }
  #gesCalcRoot.ges-konut #parametrePanel .field:has(#invertorSayisi){ grid-column:2; grid-row:2; }
  #gesCalcRoot.ges-konut #parametrePanel .field:has(#toplamInvertorGucu){ grid-column:2; grid-row:3; }
  #gesCalcRoot.ges-konut #parametrePanel .field:has(#villaBataryaGucu){ grid-column:3; grid-row:1; }
  #gesCalcRoot.ges-konut #parametrePanel .field:has(#villaBataryaSayisi){ grid-column:3; grid-row:2; }
  #gesCalcRoot.ges-konut #parametrePanel .field:has(#depolamaGucu){ grid-column:3; grid-row:3; }
  #gesCalcRoot.ges-konut.ges-tic #parametrePanel .field:has(#depolamaGucu){ grid-row:1; }
  #gesCalcRoot.ges-konut #parametrePanel .field:has(#villaOffgridYillikTuketim){ grid-column:1; grid-row:4; }
  /* 66. parti: Müşteri Bilgileri, Sistem Bilgileri, Mahsuplaşma Parametreleri, Ekipman Parametreleri ve Konut fatura
     bilgileri (Abone Bilgileri + Tarife / Kademe) — Mevzuat Uygunluğu tablosuyla aynı "etiket | değer" satır görünümü
     (teklif ekranında, son halde ve müşteri çıktısında). Yalnız sunum; alanlar ve hesap aynı. Gizli alanlar (inline
     display:none) gizli kalır — satır kuralı display'i !important olmadan verir. */
  /* 70. parti: 68. partideki 3 sütun geri alındı (kullanıcı isteği) — tek sütun satır görünümü (v97). */
  #musteriPanel .two-col, #sistemBilgiIcerik, #mahsuplasmaPanel > .panel-body, #parametrePanel > .panel-body,
  #aboneBilgileriBlok > div[style*="grid"], #villaKademeBlok > div[style*="flex"], #panelYerlesimBilgiPanel > .panel-body,
  #gesCalcRoot.ges-konut #musteriPanel .two-col, #gesCalcRoot.ges-konut #sistemBilgiIcerik, #gesCalcRoot.ges-konut #mahsuplasmaPanel > .panel-body, #gesCalcRoot.ges-konut #parametrePanel > .panel-body{ display:block !important; }
  #musteriPanel .field, #sistemBilgiIcerik .field, #mahsuplasmaPanel > .panel-body .field, #parametrePanel > .panel-body .field, #aboneBilgileriBlok .field, #villaKademeBlok .field, #ticKademeBlok .field, #panelYerlesimBilgiPanel > .panel-body > .field{
    display:grid; grid-template-columns:minmax(150px,34%) minmax(0,1fr); align-items:center; column-gap:14px;
    margin:0 !important; padding:4px 8px; border-top:1px solid #e6ebef; grid-column:auto !important; grid-row:auto !important; min-width:0 !important; }
  #musteriPanel .field > label, #sistemBilgiIcerik .field > label, #mahsuplasmaPanel > .panel-body .field > label, #parametrePanel > .panel-body .field > label, #aboneBilgileriBlok .field > label, #villaKademeBlok .field > label, #ticKademeBlok .field > label, #panelYerlesimBilgiPanel > .panel-body > .field > label{ margin:0 !important; font-size:12.5px !important; font-weight:400 !important; color:#4a5a66 !important; }
  #musteriPanel .field .input-row, #sistemBilgiIcerik .field .input-row, #mahsuplasmaPanel > .panel-body .field .input-row, #parametrePanel > .panel-body .field .input-row, #aboneBilgileriBlok .field .input-row, #villaKademeBlok .field .input-row, #ticKademeBlok .field .input-row, #panelYerlesimBilgiPanel > .panel-body > .field .input-row{ max-width:440px; }
  #musteriPanel .field input:not([type=checkbox]):not([type=radio]), #sistemBilgiIcerik .field input:not([type=checkbox]):not([type=radio]), #mahsuplasmaPanel > .panel-body .field input:not([type=checkbox]):not([type=radio]), #parametrePanel > .panel-body .field input:not([type=checkbox]):not([type=radio]), #aboneBilgileriBlok .field input:not([type=checkbox]):not([type=radio]), #villaKademeBlok .field input:not([type=checkbox]):not([type=radio]), #ticKademeBlok .field input:not([type=checkbox]):not([type=radio]), #panelYerlesimBilgiPanel > .panel-body > .field input:not([type=checkbox]):not([type=radio]), #musteriPanel .field select, #sistemBilgiIcerik .field select, #mahsuplasmaPanel > .panel-body .field select, #parametrePanel > .panel-body .field select, #aboneBilgileriBlok .field select, #villaKademeBlok .field select, #ticKademeBlok .field select, #panelYerlesimBilgiPanel > .panel-body > .field select, #musteriPanel .field textarea, #sistemBilgiIcerik .field textarea, #mahsuplasmaPanel > .panel-body .field textarea, #parametrePanel > .panel-body .field textarea, #aboneBilgileriBlok .field textarea, #villaKademeBlok .field textarea, #ticKademeBlok .field textarea, #panelYerlesimBilgiPanel > .panel-body > .field textarea{ font-size:13px !important; padding-top:5px !important; padding-bottom:5px !important; min-height:0 !important; }
  #musteriPanel .field > .help, #sistemBilgiIcerik .field > .help, #mahsuplasmaPanel > .panel-body .field > .help, #parametrePanel > .panel-body .field > .help, #aboneBilgileriBlok .field > .help, #villaKademeBlok .field > .help, #ticKademeBlok .field > .help, #panelYerlesimBilgiPanel > .panel-body > .field > .help, #musteriPanel .field > p, #sistemBilgiIcerik .field > p, #mahsuplasmaPanel > .panel-body .field > p, #parametrePanel > .panel-body .field > p, #aboneBilgileriBlok .field > p, #villaKademeBlok .field > p, #ticKademeBlok .field > p, #panelYerlesimBilgiPanel > .panel-body > .field > p{ grid-column:1 / -1; margin:2px 0 0 !important; }
  #sistemBilgiIcerik .field > div{ padding:0 !important; font-size:12.5px !important; color:var(--ink); }
  #aboneBilgileriBlok > .divider-label, #villaKademeBlok > .divider-label, #ticKademeBlok > .divider-label{ margin:14px 0 6px !important; }
  /* Son hal (Konut salt-okunur) ve müşteri çıktısı (devre dışı alanlar): değer düz metin, birimler sağda aynı hizada (71. parti) */
  #gesCalcRoot.ges-salt-okunur #musteriPanel .field .input-row, #gesCalcRoot.ges-salt-okunur #sistemBilgiIcerik .field .input-row, #gesCalcRoot.ges-salt-okunur #mahsuplasmaPanel > .panel-body .field .input-row, #gesCalcRoot.ges-salt-okunur #parametrePanel > .panel-body .field .input-row, #gesCalcRoot.ges-salt-okunur #aboneBilgileriBlok .field .input-row, #gesCalcRoot.ges-salt-okunur #villaKademeBlok .field .input-row, #gesCalcRoot.ges-salt-okunur #ticKademeBlok .field .input-row, #gesCalcRoot.ges-salt-okunur #panelYerlesimBilgiPanel > .panel-body > .field .input-row, #musteriPanel .field .input-row:has(> [disabled]), #sistemBilgiIcerik .field .input-row:has(> [disabled]), #mahsuplasmaPanel > .panel-body .field .input-row:has(> [disabled]), #parametrePanel > .panel-body .field .input-row:has(> [disabled]), #aboneBilgileriBlok .field .input-row:has(> [disabled]), #villaKademeBlok .field .input-row:has(> [disabled]), #ticKademeBlok .field .input-row:has(> [disabled]), #panelYerlesimBilgiPanel > .panel-body > .field .input-row:has(> [disabled]){ display:block; max-width:440px; }
  #gesCalcRoot.ges-salt-okunur #musteriPanel .field .input-row > :is(input,select,textarea), #gesCalcRoot.ges-salt-okunur #sistemBilgiIcerik .field .input-row > :is(input,select,textarea), #gesCalcRoot.ges-salt-okunur #mahsuplasmaPanel > .panel-body .field .input-row > :is(input,select,textarea), #gesCalcRoot.ges-salt-okunur #parametrePanel > .panel-body .field .input-row > :is(input,select,textarea), #gesCalcRoot.ges-salt-okunur #aboneBilgileriBlok .field .input-row > :is(input,select,textarea), #gesCalcRoot.ges-salt-okunur #villaKademeBlok .field .input-row > :is(input,select,textarea), #gesCalcRoot.ges-salt-okunur #ticKademeBlok .field .input-row > :is(input,select,textarea), #gesCalcRoot.ges-salt-okunur #panelYerlesimBilgiPanel > .panel-body > .field .input-row > :is(input,select,textarea), #musteriPanel .field .input-row > [disabled], #sistemBilgiIcerik .field .input-row > [disabled], #mahsuplasmaPanel > .panel-body .field .input-row > [disabled], #parametrePanel > .panel-body .field .input-row > [disabled], #aboneBilgileriBlok .field .input-row > [disabled], #villaKademeBlok .field .input-row > [disabled], #ticKademeBlok .field .input-row > [disabled], #panelYerlesimBilgiPanel > .panel-body > .field .input-row > [disabled]{
    border-color:transparent !important; background:transparent !important; box-shadow:none !important; padding-left:0 !important; padding-right:0 !important;
    width:100% !important; appearance:none; -webkit-appearance:none; color:var(--ink) !important; opacity:1 !important; -webkit-text-fill-color:var(--ink);
    font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif !important; font-size:12.5px !important; }
  #gesCalcRoot.ges-salt-okunur #musteriPanel .field .unit, #gesCalcRoot.ges-salt-okunur #sistemBilgiIcerik .field .unit, #gesCalcRoot.ges-salt-okunur #mahsuplasmaPanel > .panel-body .field .unit, #gesCalcRoot.ges-salt-okunur #parametrePanel > .panel-body .field .unit, #gesCalcRoot.ges-salt-okunur #aboneBilgileriBlok .field .unit, #gesCalcRoot.ges-salt-okunur #villaKademeBlok .field .unit, #gesCalcRoot.ges-salt-okunur #ticKademeBlok .field .unit, #gesCalcRoot.ges-salt-okunur #panelYerlesimBilgiPanel > .panel-body > .field .unit, #musteriPanel .field .input-row:has(> [disabled]) .unit, #sistemBilgiIcerik .field .input-row:has(> [disabled]) .unit, #mahsuplasmaPanel > .panel-body .field .input-row:has(> [disabled]) .unit, #parametrePanel > .panel-body .field .input-row:has(> [disabled]) .unit, #aboneBilgileriBlok .field .input-row:has(> [disabled]) .unit, #villaKademeBlok .field .input-row:has(> [disabled]) .unit, #ticKademeBlok .field .input-row:has(> [disabled]) .unit, #panelYerlesimBilgiPanel > .panel-body > .field .input-row:has(> [disabled]) .unit{ position:absolute !important; right:11px !important; top:50% !important; transform:translateY(-50%) !important; }
  @media (max-width:560px){ #musteriPanel .field, #sistemBilgiIcerik .field, #mahsuplasmaPanel > .panel-body .field, #parametrePanel > .panel-body .field, #aboneBilgileriBlok .field, #villaKademeBlok .field, #ticKademeBlok .field, #panelYerlesimBilgiPanel > .panel-body > .field{ grid-template-columns:1fr; row-gap:3px; } }
  /* 124. parti: Abone Bilgileri ve Tarife Parametreleri satırları Mahsuplaşma Parametreleri ile aynı tam genişlik / sütun oranında */
  #aboneGovde, #tarifeGovde,
  #aboneBilgileriBlok > div[style*="grid"], #villaKademeBlok > .kademe-satir, #ticKademeBlok > .kademe-satir{ display:block !important; width:100% !important; max-width:none !important; margin-top:0 !important; }
  #aboneBilgileriBlok .field, #villaKademeBlok .field, #ticKademeBlok .field{ min-width:0 !important; width:auto !important; }
  /* 67. parti: bu bölümlerde (ve Panel Yerleşim Bilgileri / Mevzuat Uygunluğu'nda) tüm satırlar eşit yükseklikte — teklif ekranında
     giriş kutulu satır, son halde düz metin satırı aynı 34 px. */
  #musteriPanel .field, #sistemBilgiIcerik .field, #mahsuplasmaPanel > .panel-body .field, #parametrePanel > .panel-body .field, #aboneBilgileriBlok .field, #villaKademeBlok .field, #ticKademeBlok .field, #panelYerlesimBilgiPanel > .panel-body > .field, .ges-satir-row{ min-height:34px; box-sizing:border-box; padding-top:3px !important; padding-bottom:3px !important; }
  #musteriPanel .field input:not([type=checkbox]):not([type=radio]), #sistemBilgiIcerik .field input:not([type=checkbox]):not([type=radio]), #mahsuplasmaPanel > .panel-body .field input:not([type=checkbox]):not([type=radio]), #parametrePanel > .panel-body .field input:not([type=checkbox]):not([type=radio]), #aboneBilgileriBlok .field input:not([type=checkbox]):not([type=radio]), #villaKademeBlok .field input:not([type=checkbox]):not([type=radio]), #ticKademeBlok .field input:not([type=checkbox]):not([type=radio]), #panelYerlesimBilgiPanel > .panel-body > .field input:not([type=checkbox]):not([type=radio]), .ges-satir-row input:not([type=checkbox]):not([type=radio]), #musteriPanel .field select, #sistemBilgiIcerik .field select, #mahsuplasmaPanel > .panel-body .field select, #parametrePanel > .panel-body .field select, #aboneBilgileriBlok .field select, #villaKademeBlok .field select, #ticKademeBlok .field select, #panelYerlesimBilgiPanel > .panel-body > .field select, .ges-satir-row select{ height:27px !important; box-sizing:border-box !important; padding-top:0 !important; padding-bottom:0 !important; line-height:25px; }
  #musteriPanel .field textarea, #sistemBilgiIcerik .field textarea, #mahsuplasmaPanel > .panel-body .field textarea, #parametrePanel > .panel-body .field textarea, #aboneBilgileriBlok .field textarea, #villaKademeBlok .field textarea, #ticKademeBlok .field textarea, #panelYerlesimBilgiPanel > .panel-body > .field textarea, .ges-satir-row textarea{ min-height:27px !important; box-sizing:border-box !important; padding-top:4px !important; padding-bottom:4px !important; line-height:1.3 !important; }
  /* Üretilen etiket | değer satırları (Panel Yerleşim Bilgileri özeti / plan bilgileri) */
  .ges-satir-row{ display:grid; grid-template-columns:minmax(150px,34%) minmax(0,1fr); align-items:center; column-gap:14px; padding-left:8px; padding-right:8px; border-top:1px solid #e6ebef; font-size:12.5px; color:var(--ink); }
  .ges-satir-row > :first-child{ color:#4a5a66; }
  .ges-satir-row .table-toggle{ justify-self:start; }
  /* 192. parti: plan bilgilerinde ara başlık (ör. Statik yük hesabı) */
  .ges-satir-baslik{ margin-top:10px; padding:7px 8px; border-top:1px solid #c9d3db; background:#eef3f8; font-weight:700; font-size:12.5px; color:#1c4f7c; letter-spacing:.02em; text-transform:uppercase; }
  @media (max-width:560px){ .ges-satir-row{ grid-template-columns:1fr; row-gap:3px; } }
  #mevzuatUyumKart table.mvz-ozet td{ height:34px; box-sizing:border-box; padding:3px 8px !important; vertical-align:middle !important; }
  #mevzuatUyumKart table.mvz-ozet td:first-child{ width:34%; min-width:150px; }
  /* 68. parti: son halde / çıktıda boş alanların yer tutucu metni görünmesin */
  #gesCalcRoot.ges-salt-okunur .panel input::placeholder, #gesCalcRoot.ges-salt-okunur .panel textarea::placeholder, .panel input[disabled]::placeholder, .panel textarea[disabled]::placeholder{ color:transparent !important; -webkit-text-fill-color:transparent !important; }
  /* 71. parti: Mevzuat Parametreleri ekranında alanlar 5'li sütun */
  #ykpRoot #ykpMvzKart .ykp-param-grid{ grid-template-columns:repeat(5, minmax(0,1fr)) !important; align-items:end; }
  @media (max-width:1100px){ #ykpRoot #ykpMvzKart .ykp-param-grid{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; } }
  @media (max-width:640px){ #ykpRoot #ykpMvzKart .ykp-param-grid{ grid-template-columns:1fr !important; } }
  /* 71. parti: Elektrik Tüketen Cihazlar özet tablosu — Güç … Aylık sütunları eşit genişlikte, değerler ortalı */
  table.cihaz-ozet-tablo{ table-layout:fixed; width:100%; }
  table.cihaz-ozet-tablo th, table.cihaz-ozet-tablo td{ overflow-wrap:anywhere; }
  table.cihaz-ozet-tablo th:nth-child(n+3), table.cihaz-ozet-tablo td:nth-child(n+3), table.cihaz-ozet-tablo tfoot td{ text-align:center !important; }
  /* 71. parti: Birim Fiyat, Enerji ve Nakit Akışı Bileşenleri — aylık tablo sütunları eşit genişlikte, değerler ortalı */
  #villaMonthlyRecTable, #monthlyRecTable{ table-layout:fixed; width:100%; min-width:0 !important; }
  #villaMonthlyRecTable th, #villaMonthlyRecTable td, #monthlyRecTable th, #monthlyRecTable td{ text-align:center !important; overflow-wrap:anywhere; }
  #villaMonthlyRecTable td input, #monthlyRecTable td input{ text-align:center !important; width:100%; box-sizing:border-box; }
  /* 72. parti: Cihaz listesi — Kategori tek satır (geniş sütun) */
  table.cihaz-ozet-tablo td:first-child{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* 72. parti: Elektrik Tüketen Cihazlar, Tahmini / Gerçek aylık fatura, Birim Fiyat-Enerji-Nakit Akışı, Tahmini Üretim ve Tüketim,
     Amortisman Analizi, Malzeme ve Hizmetler, Hizmet Kapsamı — tablo satırları eşit yükseklikte (32 px); tablolar ve grafikler
     bölüm genişliğinin tamamında. Uzun metin içeren hücreler (ör. hizmet açıklaması) gerekirse alt satıra iner. */
  #cihazListesiPanel table tbody td, #cihazListesiPanel table tbody th, #cihazListesiPanel table tfoot td, #cihazListesiPanel table tfoot th, #villaInvoicePanel table tbody td, #villaInvoicePanel table tbody th, #villaInvoicePanel table tfoot td, #villaInvoicePanel table tfoot th, #ticInvoicePanel table tbody td, #ticInvoicePanel table tbody th, #ticInvoicePanel table tfoot td, #ticInvoicePanel table tfoot th, #ledgerPanel table tbody td, #ledgerPanel table tbody th, #ledgerPanel table tfoot td, #ledgerPanel table tfoot th, #uretimTuketimPanel table tbody td, #uretimTuketimPanel table tbody th, #uretimTuketimPanel table tfoot td, #uretimTuketimPanel table tfoot th, #financePanel table tbody td, #financePanel table tbody th, #financePanel table tfoot td, #financePanel table tfoot th, #malzemePanel table tbody td, #malzemePanel table tbody th, #malzemePanel table tfoot td, #malzemePanel table tfoot th, #hizmetKapsamiPanel table tbody td, #hizmetKapsamiPanel table tbody th, #hizmetKapsamiPanel table tfoot td, #hizmetKapsamiPanel table tfoot th{ height:32px; padding-top:2px !important; padding-bottom:2px !important; vertical-align:middle !important; box-sizing:border-box; line-height:1.3; }
  #cihazListesiPanel table td input, #cihazListesiPanel table td select, #villaInvoicePanel table td input, #villaInvoicePanel table td select, #ticInvoicePanel table td input, #ticInvoicePanel table td select, #ledgerPanel table td input, #ledgerPanel table td select, #uretimTuketimPanel table td input, #uretimTuketimPanel table td select, #financePanel table td input, #financePanel table td select, #malzemePanel table td input, #malzemePanel table td select, #hizmetKapsamiPanel table td input, #hizmetKapsamiPanel table td select{ height:26px; padding-top:0 !important; padding-bottom:0 !important; box-sizing:border-box; }
  #cihazListesiPanel table, #villaInvoicePanel table, #ticInvoicePanel table, #ledgerPanel table, #uretimTuketimPanel table, #financePanel table, #malzemePanel table, #hizmetKapsamiPanel table{ width:100%; }
  #uretimTuketimPanel .chart-wrap, #uretimTuketimPanel svg, #financePanel .chart-wrap, #financePanel svg{ width:100%; max-width:100%; }
  #ledgerPanel table.invoice td.num input.ledger-uretim-input{ min-height:0 !important; height:26px !important; padding-top:0 !important; padding-bottom:0 !important; }
  #villaInvoicePanel table tfoot th:first-child, #ticInvoicePanel table tfoot th:first-child, #villaInvoicePanel table tfoot td:first-child, #ticInvoicePanel table tfoot td:first-child{ white-space:nowrap; }
  /* 61. parti: Mevzuat Uygunluğu kartı (Ekipman Parametreleri altında, tam genişlik) */
  #mevzuatUyumKart{ margin:0; }
  #mevzuatPanel .panel-body{ display:block !important; }
  #mevzuatUyumKart .mvz-h{ font-weight:700; font-size:13px; letter-spacing:.02em; margin-bottom:8px; color:#1f3a4d; }
  #mevzuatUyumKart .mvz-girdi{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px 14px; margin-bottom:10px; }
  @media (max-width:700px){ #mevzuatUyumKart .mvz-girdi{ grid-template-columns:1fr; } }
  #mevzuatUyumKart table.mvz-ozet{ width:100%; border-collapse:collapse; font-size:12.5px; }
  #mevzuatUyumKart table.mvz-ozet td{ padding:4px 6px; border-top:1px solid #e6ebef; vertical-align:top; }
  #mevzuatUyumKart table.mvz-ozet td:first-child{ width:34%; color:#4a5a66; }
  #mevzuatUyumKart table.mvz-ozet tr.mvz-vurgu td{ background:#fff6e5; font-weight:600; }
  #mevzuatUyumKart ul.mvz-uyari{ margin:8px 0 0; padding-left:18px; font-size:12px; }
  #mevzuatUyumKart ul.mvz-uyari li{ margin:3px 0; }
  #mevzuatUyumKart ul.mvz-uyari li.hata{ color:#c0392b; font-weight:600; }
  #mevzuatUyumKart ul.mvz-uyari li.dikkat{ color:#b45f06; }
  #mevzuatUyumKart ul.mvz-uyari li.bilgi{ color:#4a5a66; }
  #mevzuatUyumKart ul.mvz-uyari:empty{ display:none; }
  /* 118. parti (madde 4): 10 yıl alım garantisi notu / sütunu yalnız Konut + Ticarethane'de (Tarım 11(4)'te fazla enerji zaten bedelsiz) */
  #gesCalcRoot:not(.ges-konut) #savingsProjAgNot, #gesCalcRoot:not(.ges-konut) #savingsProjTable .ag-disi, #gesCalcRoot:not(.ges-konut) #savingsProjTable td:nth-child(4){ display:none !important; }
  /* 118. parti (madde 11): başvuru için gerekli belgeler (müşteri çıktısında da görünür) */
  #mevzuatUyumKart .mvz-belgeler:empty{ display:none; }
  #mevzuatUyumKart .mvz-belgeler{ margin-top:10px; font-size:12px; color:var(--ink-soft); }
  #mevzuatUyumKart .mvz-belgeler b{ display:block; color:var(--ink); font-size:12.5px; margin-bottom:3px; }
  #mevzuatUyumKart .mvz-belgeler ol{ margin:0; padding-left:20px; columns:2; column-gap:28px; }
  #mevzuatUyumKart .mvz-belgeler li{ margin:2px 0; break-inside:avoid; }
  @media (max-width:700px){ #mevzuatUyumKart .mvz-belgeler ol{ columns:1; } }
  #gesCalcRoot.ges-konut #cati-turu-field{ display:none !important; }   /* 37. parti (madde 13): çatı türü müşteri kaydından gelir */
  /* 37. parti (madde 9): Birim Fiyat, Enerji ve Nakit Akışı Bileşenleri — sıkı satırlar */
  #gesCalcRoot.ges-konut #ledgerPanel table.ledger td{ padding:3px 0; line-height:1.25; }
  #gesCalcRoot.ges-konut #ledgerPanel table.ledger tr.emph td{ padding-top:6px; }
  #gesCalcRoot.ges-konut #ledgerPanel table.invoice td, #gesCalcRoot.ges-konut #ledgerPanel table.invoice th{ padding-top:3px; padding-bottom:3px; }
  /* 36. parti (madde 7): Konut adımlarında açıklama notları panelin sonundaki "Notlar" kutusunda */
  /* 54. parti: panel yerleşimine bağlı teklifte yön dağılımı alanları gizli (değerler simülatörden yazılır); son halde hep gizli */
  #panelYerlesimBilgiPanel.pys-yon-gizli #villa-yon-dagilimi-field, #panelYerlesimBilgiPanel.pys-yon-gizli #tic-yon-dagilimi-field{ display:none !important; }
  #panelYerlesimBilgiPanel.pys-yon-final #pysYonUyari, #panelYerlesimBilgiPanel.pys-yon-final #pysYonElleBtn{ display:none !important; }
  /* 60. parti: Ticarethane Off-Grid — aylık mutabakat tablosunda şebeke sütunları (verilen / çekilen / çekilen bedeli / satış geliri) gizli */
  #monthlyRecTable.tic-offgrid th:nth-child(7), #monthlyRecTable.tic-offgrid th:nth-child(8), #monthlyRecTable.tic-offgrid th:nth-child(9), #monthlyRecTable.tic-offgrid th:nth-child(11),
  #monthlyRecTable.tic-offgrid td:nth-child(7), #monthlyRecTable.tic-offgrid td:nth-child(8), #monthlyRecTable.tic-offgrid td:nth-child(9), #monthlyRecTable.tic-offgrid td:nth-child(11){ display:none; }
  .ges-notlar-kutu{ grid-column:1 / -1; margin-top:14px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); padding:10px 14px; }
  .ges-notlar-kutu .ges-notlar-h{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-2); margin-bottom:4px; }
  .ges-notlar-kutu > .help, .ges-notlar-kutu > .invoice-legend{ display:block; margin:4px 0 0 !important; font-size:11.5px !important; line-height:1.5 !important; flex:none !important; }
  .ges-notlar-kutu:not(:has(> .help:not([style*="display: none"]):not([style*="display:none"]):not([hidden]), > .invoice-legend:not([style*="display: none"]):not([style*="display:none"]))){ display:none; }

  .panel{
    background:var(--surface); border:1px solid var(--line); border-radius:14px;
    box-shadow:var(--shadow);
    /* Kullanıcı isteği: "Tam Rapor" görünümünde TÜM adım panelleri arasında (bazı panellerde
       eksik olan inline margin yüzünden bitişik/boşluksuz görünüyorlardı — bkz. Müşteri
       Bilgileri↔Fatura Geçmişi arasındaki gibi bir boşluk her yerde olsun) tutarlı bir boşluk
       bırakılsın; her panelin kendi margin-bottom'u burada TEK bir yerden garanti ediliyor,
       bazı panellerdeki (varsa) fazladan margin-top ile bitişik panel sınırında çakışsa da
       normal blok akışında komşu dikey margin'ler çakışıp (collapse) büyük olanı uygulanır. */
    margin-bottom:22px;
  }
  .panel-head{
    padding:16px 20px 14px; border-bottom:1px solid var(--line);
    /* Kullanıcı isteği: "tüm adım başlıklarını da ortala" — tüm .panel-head başlıkları
       (ve varsa yanındaki .tag rozeti, bkz. AMORTİSMAN ANALİZİ) artık sola/sağa değil,
       ortaya hizalı bir grup olarak gösteriliyor. */
    display:flex; align-items:baseline; justify-content:center; gap:10px;
  }
  .panel-head h2{ font-size:15px; font-weight:700; margin:0; }
  .panel-head .tag{ font-size:11px; color:var(--muted); }
  .panel-body{ padding:18px 20px 20px; }

  /* segment toggle */
  .segment-row{
    display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center;
    gap:14px; margin-bottom:22px;
  }
  .segment{
    display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
    background:var(--surface-2); border:1px solid var(--line); border-radius:11px; padding:4px;
    margin:0 auto; max-width:640px;
  }
  .segment-row .segment{ margin:0; }
  /* Kullanıcı bildirimi: "Yeni Yapı / Eski Yapı" iki seçenek ama üçüncü bir seçenek varmış gibi
     boşluk kalıyordu — .segment sabit 3 kolonlu grid olduğu için. İki düğmeli segmentler kendi
     içeriklerine göre daralır. */
  .segment-yapi{ grid-template-columns:repeat(2,auto); max-width:none; }
  .segment-gridtype{ max-width:320px; }
  /* Abone grupları (4 mod): geniş ekranda tek sıra, dar ekranda 2×2 — tek düğme alt satırda kalmasın. */
  #modeSegment{ grid-template-columns:repeat(4,1fr); max-width:760px; }
  @media (max-width:640px){ #modeSegment{ grid-template-columns:repeat(2,1fr); } }
  .segment button{
    appearance:none; border:none; background:transparent; color:var(--ink-soft);
    font:inherit; font-weight:600; font-size:12px; padding:9px 6px; border-radius:8px;
    cursor:pointer; transition:background .15s ease, color .15s ease, box-shadow .15s ease;
    font-family:"IBM Plex Sans"; line-height:1.25;
  }
  .segment button.active{
    background:var(--surface); color:var(--ink); box-shadow:var(--shadow);
  }
  .segment button:focus-visible{ outline:2px solid var(--accent-2); outline-offset:2px; }
  /* 6. parti, madde 4: müşteri kaydından tesisat/şebeke/yapı türü otomatik geldiğinde bu 3 seçim kilitlenir */
  .segment button:disabled{ opacity:.55; cursor:not-allowed; }

  .field{ margin-bottom:16px; }
  .field label{
    display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft);
    margin-bottom:6px;
  }
  .field .help{ font-size:11.5px; color:var(--muted); margin-top:5px; line-height:1.4; }
  .field .help.note{ color:var(--accent-ink); background:color-mix(in srgb, var(--accent) 18%, transparent); display:inline-block; padding:2px 7px; border-radius:5px; font-weight:500; }

  .input-row{ position:relative; }
  input[type=number], input[type=text], input[type=email], select{
    width:100%; font:inherit; font-size:14.5px; color:var(--ink);
    background:var(--paper); border:1px solid var(--line-strong); border-radius:8px;
    padding:9px 34px 9px 11px; font-family:"IBM Plex Mono"; font-variant-numeric:tabular-nums;
  }
  select{ font-family:"IBM Plex Sans"; padding-right:30px; }
  input[type=text], input[type=email]{ font-family:"IBM Plex Sans"; }
  input[type=number]:focus, input[type=text]:focus, input[type=email]:focus, select:focus{
    outline:2px solid var(--accent-2); outline-offset:1px; border-color:var(--accent-2);
  }
  /* Ad Soyad / Adres gibi uzunluğu değişken serbest metin alanları — tek satırlık bir
     input kutusu uzun bir firma unvanını/tam adresi kırpardı (metin kaybı, "yarım görünme").
     Bunun yerine, gerektiğinde otomatik olarak birden fazla satıra kayan ve boyu içeriğe göre
     büyüyen (bkz. autosizeField()) bir textarea kullanılır; görünüm normal input ile aynıdır. */
  textarea.autosize-field{
    width:100%; font:inherit; font-size:14.5px; color:var(--ink); font-family:"IBM Plex Sans";
    background:var(--paper); border:1px solid var(--line-strong); border-radius:8px;
    padding:9px 11px; line-height:1.4; resize:none; overflow:hidden;
    white-space:pre-wrap; word-break:break-word; display:block;
    /* field-sizing:content, JS'siz ve her render bağlamında (ekran, önizleme, GERÇEK
       YAZDIRMA — A4 sayfa genişliği ekrandan farklı olduğundan metin farklı satırlara
       kırılır) doğru şekilde yeniden hesaplanan bir yükseklik sağlar. Bunu desteklemeyen
       eski tarayıcılarda autosizeField() JS yedeği devreye girer (bkz. aşağı). */
    field-sizing: content; min-height: 38px;
  }
  textarea.autosize-field:focus{
    outline:2px solid var(--accent-2); outline-offset:1px; border-color:var(--accent-2);
  }
  .unit{
    position:absolute; right:11px; top:50%; transform:translateY(-50%);
    font-size:12px; color:var(--muted); pointer-events:none; font-family:"IBM Plex Mono";
  }
  .two-col{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  /* Müşteri Bilgileri: Ad Soyad ve Adres uzun değerler içerebilir (firma unvanı, tam tesisat
     adresi) — 3 sütunlu ızgarada 1/3 genişlik yeterli olmadığından (ekranda kısaltma, A4
     yazdırma/PDF genişliğinde ise daha da dar bir sütun) bu iki alan satırın tamamını kaplar.
     id değil CLASS ile hedefleniyor: Önizleme ve Gönder adımında panel klonlanırken id'ler
     (çakışmayı önlemek için) kaldırılıyor, ama class'lar kalıyor — id tabanlı bir seçici
     yalnızca önizlemede genişlik düzeltmesini sessizce kaybederdi. */
  .field-span-full{ grid-column: 1 / -1; }

  .divider-label{
    font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
    color:var(--muted); margin:22px 0 12px; padding-top:14px; border-top:1px dashed var(--line-strong);
  }
  .divider-label.section-title{
    font-family:"Archivo", ui-sans-serif, system-ui, sans-serif;
    font-size:15px; font-weight:700; letter-spacing:0.01em; color:var(--ink);
    border-top:1px solid var(--line); padding-top:18px; margin-top:26px;
  }

  /* Kullanıcı isteği: Elektrik Tüketen Cihazlar Listesi satırlarındaki Adet/Gün-hafta/Süre
     kutuları boşken placeholder metni ("adet","gün/hf","süre") dar sütuna sığmayıp yarım
     görünüyordu. Bu kutularda bir unit-overlay olmadığından genel input kuralının 34px'lik
     sağ boşluğuna ihtiyaç yok — daraltıldı; kutu BOŞKEN (placeholder gösterilirken) yazı da
     küçültüldü, kullanıcı bir değer yazınca normal boyuta döner. */
  .cihaz-satir input[type=number]{ padding-right:8px; }
  .cihaz-satir input[type=number]:placeholder-shown{ font-size:11px; }

  /* results */
  .hero-stat{
    display:flex; align-items:center; gap:20px; flex-wrap:wrap;
    padding:18px 20px; border-bottom:1px solid var(--line);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent);
  }
  .hero-dial{
    width:84px; height:84px; border-radius:50%; flex:none;
    background: conic-gradient(var(--accent) calc(var(--dial,55)*1%), var(--line) 0);
    display:flex; align-items:center; justify-content:center; position:relative;
  }
  .hero-dial::before{
    content:""; position:absolute; inset:7px; border-radius:50%; background:var(--surface);
  }
  .hero-dial span{ position:relative; font-family:"IBM Plex Mono"; font-weight:600; font-size:12px; color:var(--ink-soft); }
  .hero-num{ font-family:"Archivo", ui-sans-serif, system-ui, sans-serif; font-weight:800; font-size:40px; line-height:1; }
  .hero-num .unit{ position:static; transform:none; font-size:16px; font-weight:600; color:var(--ink-soft); margin-left:6px; }
  .hero-label{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; }

  .stat-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:var(--line);
  }
  @media (max-width:640px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
  .stat{
    background:var(--surface); padding:15px 16px;
  }
  .stat .k{ font-size:11.5px; color:var(--muted); margin-bottom:6px; line-height:1.3; min-height:2.4em; }
  .stat .v{ font-family:"IBM Plex Mono"; font-weight:600; font-size:19px; }
  .stat .v .u{ font-size:12px; color:var(--ink-soft); font-weight:500; margin-left:3px; }
  .stat.muted-tile{ color:var(--muted); }
  .stat.muted-tile .v{ color:var(--muted); font-size:13px; font-weight:500; font-family:"IBM Plex Sans"; }

  /* Çevresel Katkı (Adım 7) — kullanıcı isteği: 4 istatistiğin (Yıllık CO₂ azaltımı, yıllık/
     25 yıllık eşdeğer ağaç sayısı, 25 yıllık toplam CO₂ azaltımı) HEPSİ aynı büyük/vurgulu
     görünümde olsun — eskiden yalnızca ilki (co2) .hero-num ile büyük, diğer üçü küçük
     .stat .v (19px) ile gösteriliyordu. .hero-num'un aynısını (Archivo, 800 ağırlık) 4'lü bir
     ızgarada sığacak şekilde biraz küçültülmüş boyutta (32px) tekrar kullanıyoruz.  */
  .env-stat-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:var(--line);
    border-radius:0 0 13px 13px; overflow:hidden;   /* 178. parti: panelin alt köşeleri de oval */
  }
  @media (max-width:640px){ .env-stat-grid{ grid-template-columns:repeat(2,1fr); } }
  .env-stat{
    background:var(--surface); padding:20px 18px;
  }
  .env-num{ font-family:"Archivo", ui-sans-serif, system-ui, sans-serif; font-weight:800; font-size:32px; line-height:1.05; }
  .env-num .unit{ position:static; transform:none; font-size:13px; font-weight:600; color:var(--ink-soft); margin-left:5px; }
  .env-label{ font-size:12.5px; color:var(--ink-soft); margin-top:6px; }

  /* chart */
  .chart-section{ padding:20px; border-top:1px solid var(--line); }
  .chart-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap;}
  .chart-head h3{ font-size:14px; font-weight:700; margin:0; }
  .table-toggle{
    appearance:none; background:none; border:1px solid var(--line-strong); color:var(--ink-soft);
    font:inherit; font-size:11.5px; padding:5px 10px; border-radius:7px; cursor:pointer;
    font-family:"IBM Plex Sans"; font-weight:500;
  }
  .table-toggle:hover{ border-color:var(--accent-2); color:var(--accent-2); }
  /* Kullanıcı isteği #8: Tek Sayfa Görünümü açıkken düğme "aktif" görünsün. */
  #singlePageToggleBtn.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
  #finalizeBtn{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; }
  #finalizeBtn:hover{ opacity:.9; color:#fff; }
  .chart-wrap{ position:relative; }
  #barchart{ width:100%; height:auto; overflow:visible; }
  .bar-rect{ fill:var(--accent); transition:fill .1s ease; cursor:pointer; }
  .bar-rect:hover, .bar-rect.hover{ fill:var(--accent-2); }
  .axis-text{ fill:var(--muted); font-family:"IBM Plex Mono"; font-size:10.5px; }
  .grid-line{ stroke:var(--line); stroke-width:1; }
  .peak-label{ fill:var(--ink-soft); font-family:"IBM Plex Mono"; font-size:11px; font-weight:600; }
  .tooltip{
    position:absolute; pointer-events:none; background:var(--ink); color:var(--paper);
    font-family:"IBM Plex Mono"; font-size:11.5px; padding:6px 9px; border-radius:7px;
    transform:translate(-50%,-115%); white-space:nowrap; opacity:0; transition:opacity .1s ease;
    box-shadow:var(--shadow); z-index:5;
  }
  :root[data-theme="dark"] .tooltip, @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .tooltip{ color:var(--ink); background:var(--surface-2); border:1px solid var(--line-strong);} }
  .tooltip.show{ opacity:1; }

  .month-table{ width:100%; border-collapse:collapse; font-size:12.5px; margin-top:10px; }
  .month-table th, .month-table td{ text-align:right; padding:6px 8px; border-bottom:1px solid var(--line); font-family:"IBM Plex Sans"; }
  .month-table th:first-child, .month-table td:first-child{ text-align:left; font-family:"IBM Plex Sans"; color:var(--ink-soft); }
  .month-table thead th{ color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em; }
  .month-table tr.hl td{ background: color-mix(in srgb, var(--accent) 16%, transparent); font-weight:700; color:var(--ink); }

  /* cost strip */
  .cost-strip{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
    border-top:1px solid var(--line);
  }
  @media (max-width:640px){ .cost-strip{ grid-template-columns:1fr; } }
  .cost-strip .cell{ background:var(--surface-2); padding:16px 18px; }
  .cost-strip .cell label{ display:block; font-size:11.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
  .cost-strip .cell .row{ position:relative; }
  .cost-strip input{ background:var(--surface); }
  .cost-strip .result{ margin-top:10px; }
  .cost-strip .result .v{ font-family:"IBM Plex Mono"; font-weight:700; font-size:20px; }
  .cost-strip .result .k{ font-size:11px; color:var(--muted); }

  .payback-duo{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:22px; }
  @media (max-width:560px){ .payback-duo{ grid-template-columns:1fr; } }
  .payback-card{
    border:1px solid var(--line); border-radius:11px; padding:16px 18px; background:var(--surface-2);
  }
  .payback-card.accent{ background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
  .payback-card .k{ font-size:12px; color:var(--ink-soft); font-weight:600; margin-bottom:8px; line-height:1.35; }
  .payback-card .v{ font-family:"IBM Plex Mono"; font-weight:700; font-size:28px; }
  .payback-card .v .u{ font-size:14px; color:var(--ink-soft); font-weight:500; margin-left:5px; }
  .payback-card .cap{ font-size:11.5px; color:var(--muted); margin-top:4px; }

  /* Kullanıcı isteği: aylık mutabakat tablosu ile hemen altındaki üç sütunlu analiz bloğu
     (Birim fiyat bileşenleri / Yıllık enerji dengesi / Yıllık nakit akışı) birbirine çok
     yapışık duruyordu — araya belirgin bir boşluk ve ince bir ayırıcı çizgi eklendi.
     Hem Konut hem Ticarethane aynı DOM'u kullandığı için tek yerden ikisini de kapsar. */
  .segment-yapi{ margin-left:8px; }
  .ledger-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px 20px;
                margin-top:30px; padding-top:26px; border-top:1px solid var(--line); }
  @media (max-width:880px){ .ledger-grid{ grid-template-columns:1fr; } }
  .ledger-group h4{
    font-family:"IBM Plex Sans"; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    color:var(--ink-soft); margin:0 0 8px; display:flex; justify-content:space-between; align-items:baseline;
  }
  .ledger-group h4 span{ font-weight:500; color:var(--muted); text-transform:none; letter-spacing:0; font-size:11px; }
  table.ledger{ width:100%; border-collapse:collapse; font-size:12.5px; }
  table.ledger td{ padding:6px 0; border-bottom:1px solid var(--line); line-height:1.35; }
  table.ledger td:first-child{ color:var(--ink-soft); }
  table.ledger td.v{ text-align:right; font-family:"IBM Plex Sans"; font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; padding-left:10px; }
  table.ledger tr.emph td{ font-weight:700; color:var(--ink); border-bottom:none; padding-top:10px; }
  table.ledger tr.emph td.v{ font-size:14.5px; }

  /* Enerji Akışı diyagramı */
  .energy-flow-wrap{ max-width:640px; margin:8px auto 4px; }
  .energy-flow-wrap svg{ width:100%; height:auto; display:block; }
  table.flow-legend{ width:100%; border-collapse:collapse; font-size:12px; margin-top:16px; }
  table.flow-legend th{
    text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); color:var(--muted);
    font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; font-family:"IBM Plex Sans";
  }
  table.flow-legend td{ padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:top; font-family:"IBM Plex Sans"; }
  table.flow-legend td.flow-name{ white-space:nowrap; font-weight:600; color:var(--ink); }
  table.flow-legend td.flow-val{ font-family:"IBM Plex Sans"; font-weight:700; color:var(--ink); white-space:nowrap; }
  table.flow-legend td.flow-desc{ color:var(--ink-soft); line-height:1.5; }
  .flow-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; vertical-align:middle; }

  /* TAHMİNİ ÜRETİM VE TÜKETİM — kullanıcı isteği: Konut/Ticarethane/Tarımsal Sulama'nın
     üçünde de, Enerji Akışı adımından hemen önce gösterilen yeni bir adım: 3 yıllık özet
     istatistik kartı + aylık Üretim/Tüketim/Öz Tüketim tablosu + çift-bar/çizgi grafiği.
     Kullanıcı isteği üzerine renkler: Tüketim=kırmızı (#c0392b), Üretim=mavi (#3f7cc4, şebeke
     rengiyle aynı), Öz Tüketim=yeşil (#2e9e5b, uygulamada zaten "olumlu/batarya" rengi olarak
     kullanılan ton — bkz. Enerji Akışı'ndaki batarya ikonları) — üç seri de birbirinden net
     ayrılsın diye. Grafik ve tablo, kullanıcı isteği üzerine yan yana değil ALT ALTA: tablo
     üstte, grafik altında TAM PANEL GENİŞLİĞİNDE (bkz. .ut-body-grid) — grafik dar bir yarı
     sütuna sıkışmasın, Ocak'tan Aralık'a kadar tüm ay grupları geniş ve okunaklı olsun. */
  .ut-stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px; }
  @media (max-width:760px){ .ut-stat-grid{ grid-template-columns:1fr; } }
  .ut-stat-card{
    display:flex; align-items:center; gap:14px; padding:16px 18px;
    border:1px solid var(--line); border-radius:12px; background:var(--surface, #fff);
  }
  .ut-stat-icon{
    flex:none; width:44px; height:44px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    background: color-mix(in srgb, var(--ut-icon-color, var(--accent)) 16%, var(--surface));
    color: var(--ut-icon-color, var(--accent));
  }
  .ut-stat-icon svg{ width:22px; height:22px; }
  .ut-stat-label{ font-size:12px; color:var(--ink-soft); font-weight:600; margin-bottom:4px; line-height:1.3; }
  .ut-stat-value{ font-family:"IBM Plex Mono"; font-weight:700; font-size:22px; color:var(--ink); }
  .ut-stat-value .unit{ font-size:12px; font-weight:600; color:var(--ink-soft); margin-left:5px; position:static !important; transform:none !important; }   /* 49. parti: genel .unit (giriş kutusu birimi) kuralı bunu sağ kenara uçuruyordu */

  .ut-body-grid{ display:flex; flex-direction:column; gap:20px; }
  /* 126. parti (madde 6) */
  #ykpRoot tr.mlz-kat-bas > td{ background:var(--ykp-bg-soft,#eef2f5) !important; font-weight:700; font-size:12px; letter-spacing:.3px; color:var(--ykp-ink-soft,#4a5a66); }
  /* 126. parti (madde 34) */
  .lo-grid{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px; }
  @media (max-width:900px){ .lo-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
  .lo-kart{ border:1px solid var(--line); border-radius:10px; padding:12px 12px 10px; background:var(--surface, #fff); }
  .lo-kart.vurgu{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--surface, #fff)); }
  .lo-baslik{ font-size:11.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; line-height:1.3; }
  .lo-deger{ font-family:"IBM Plex Mono"; font-size:20px; font-weight:700; color:var(--ink); }
  .lo-deger small, .lo-satir2 small{ font-size:11px; font-weight:600; color:var(--ink-soft); margin-left:4px; font-family:inherit; }
  .lo-satir2{ font-family:"IBM Plex Mono"; font-size:13.5px; font-weight:600; color:var(--ink); margin-top:4px; }
  /* 199. parti: sayfaya sığmayan bölüm satır ortasından bölünmesin */
  @media print{ tr, .field, .ges-satir-row, .ges-satir-baslik{ break-inside:avoid; page-break-inside:avoid; } }
  @media print{ .lo-grid{ grid-template-columns:repeat(5, minmax(0,1fr)) !important; } .lo-deger{ font-size:15px; } }
  /* 126. parti (madde 35): mahsuplaşma — birim fiyat kaynakları yok (EPDK), alış KDV tarife parametrelerinde */
  .field:has(> .input-row > #birimFiyatKaynak), #birimFiyatAyField, #tic-satisAktif-kaynak-field, #alisKdvField{ display:none !important; }
  #gesCalcRoot.ges-villa .field:has(#kdvOrani) > .input-row, #gesCalcRoot.ges-villa .field:has(#kdvOrani) > p.help{ display:none !important; }
  .kdv-odenmez{ display:none; font-weight:400; color:var(--ink, #1a1f24); margin-top:4px; }
  #gesCalcRoot.ges-villa .kdv-odenmez{ display:block; }

  /* 126. parti (madde 21 / 22): amortisman ve proje süreci tablolarında zebra yok; amortisman sütunları eşit; vurgulu satır belirgin */
  #savingsProjTable{ table-layout:fixed; width:100%; }
  #savingsProjTable > thead > tr > th:not(:first-child), #savingsProjTable > tbody > tr > :is(td, th):not(:first-child){ text-align:center !important; }
  #savingsProjTable > thead > tr > th:first-child, #savingsProjTable > tbody > tr > td:first-child{ width:16%; }
  #savingsProjTable > tbody > tr > :is(td, th), #projeSureciTable > tbody > tr > :is(td, th){ background-color:transparent !important; }
  #savingsProjTable > tbody > tr.hl > td{ background-color:color-mix(in srgb, var(--accent) 16%, transparent) !important; font-weight:700; }
  /* 126. parti (madde 23): müşteriler listesi hücreleri ortalı */
  #ykpRoot table.ykp-table.tb-musteri th, #ykpRoot table.ykp-table.tb-musteri td{ text-align:center; vertical-align:middle; }
  #ykpRoot table.ykp-table.tb-musteri th:first-child, #ykpRoot table.ykp-table.tb-musteri td.td-ad{ text-align:left; }
  #ykpRoot table.ykp-table.tb-musteri.tb-liste td{ padding-top:6px !important; padding-bottom:6px !important; }   /* 135. parti (madde 24): daha dar satır */
  #ykpRoot .hiz-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:6px 14px; }
  #ykpRoot .hiz-sat{ display:flex; align-items:center; gap:8px; padding:3px 0 3px 8px; border-left:3px solid var(--ykp-line); }
  #ykpRoot .hiz-ad{ flex:0 0 150px; font-size:12.5px; font-weight:600; }
  #ykpRoot .hiz-sat select{ flex:1; min-width:0; padding:4px 6px; font-size:12.5px; height:30px; }
  #ykpRoot .ykp-say{ display:inline-block; margin-left:10px; padding:2px 10px; border-radius:999px; background:var(--ykp-brand-soft, #e8f0fb); color:var(--ykp-brand, #1f5aa6); font-size:13px; font-weight:700; vertical-align:middle; }
  .ut-table td.ut-col-tuketim, .ut-table th.ut-col-tuketim{ color:#c0392b; }
  .ut-table td.ut-col-uretim, .ut-table th.ut-col-uretim{ color:#3f7cc4; }
  .ut-table td.ut-col-oz, .ut-table th.ut-col-oz{ color:#2e9e5b; }
  #utBarchart{ width:100%; height:auto; overflow:visible; }
  .ut-bar-uretim{ fill:#3f7cc4; }
  .ut-bar-tuketim{ fill:#c0392b; }
  .ut-line-oz{ fill:none; stroke:#2e9e5b; stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
  .ut-dot{ fill:#2e9e5b; stroke:var(--surface); stroke-width:1.5; }
  .ut-chart-legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; font-size:12px; color:var(--ink-soft); }
  .ut-chart-legend span{ display:inline-flex; align-items:center; }

  /* Kullanıcı isteği: yıllık 3 kartın altında İlkbahar/Yaz/Sonbahar/Kış mevsim kırılımı,
     her kartın altında da o mevsimin ayları not olarak. Renkler yukarıdaki ut-table/legend
     ile aynı (Üretim mavi, Tüketim kırmızı, Öz Tüketim yeşil). */
  .ut-season-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
  @media (max-width:760px){ .ut-season-grid{ grid-template-columns:repeat(2,1fr); } }
  .ut-season-card{ border:1px solid var(--line); border-radius:12px; background:#fff; padding:13px 14px 11px; }
  .ut-season-title{ font-size:12px; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:.02em; margin-bottom:8px; }
  .ut-season-row{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; font-size:12px; margin-bottom:3px; }
  .ut-season-metric{ color:var(--ink-soft); }
  .ut-season-val{ font-family:"IBM Plex Mono"; font-weight:700; white-space:nowrap; }
  .ut-season-uretim .ut-season-val{ color:#3f7cc4; }
  .ut-season-tuketim .ut-season-val{ color:#c0392b; }
  .ut-season-oz .ut-season-val{ color:#2e9e5b; }
  .ut-season-months{ font-size:10.5px; color:var(--ink-soft); margin-top:7px; padding-top:7px; border-top:1px dashed var(--line); }

  .invoice-wrap{ overflow-x:auto; margin:4px 0 6px; border:1px solid var(--line); border-radius:10px; }
  table.invoice{ border-collapse:collapse; font-size:11.5px; width:100%; min-width:760px; }
  /* Kullanıcı isteği: "Hizmet Kapsamı"nda tüm yazılar sığdığı halde gereksiz bir yatay
     kaydırma çubuğu çıkıyordu — sebebi table.invoice'un TÜM tablolar için paylaşılan
     min-width:760px kuralıydı (çok sütunlu fatura/malzeme tabloları için gerekli, ama
     hizmetTable'ın sadece 5 dar sütunu var ve panel genişliği 760px'in altında olduğunda
     tablo panelden taşıp .invoice-wrap'ın overflow-x:auto'sunu tetikliyordu). Bu tabloya özel
     olarak min-width kaldırıldı, width:100% ile panel genişliğine doğal olarak oturuyor. */
  #hizmetTable{ min-width:0; }
  table.invoice th, table.invoice td{ border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:0; }
  table.invoice th:last-child, table.invoice td:last-child{ border-right:none; }
  table.invoice thead th{
    background:var(--surface-2); color:var(--ink-soft); font-family:"IBM Plex Sans"; font-weight:700;
    font-size:10px; text-transform:uppercase; letter-spacing:.03em; text-align:center; padding:7px 4px;
    line-height:1.25; white-space:normal;
  }
  table.invoice tbody th{
    background:var(--surface-2); color:var(--ink-soft); font-family:"IBM Plex Sans"; font-weight:600;
    font-size:11.5px; text-align:left; padding:0 8px; white-space:nowrap;
  }
  table.invoice td input, table.invoice td select{
    width:100%; border:none; border-radius:0; background:transparent; padding:6px 5px;
    font-family:"IBM Plex Sans"; font-size:11.5px; text-align:right; color:var(--ink);
  }
  table.invoice td select{ font-family:"IBM Plex Sans"; text-align:left; font-size:11px; }
  table.invoice td input:focus, table.invoice td select:focus{ outline:2px solid var(--accent-2); outline-offset:-2px; position:relative; z-index:1; }
  table.invoice tr.tot td, table.invoice tr.tot th{ background:var(--surface-2); font-weight:700; color:var(--ink); }
  table.invoice tr.tot td{ text-align:right; padding:7px 5px; font-family:"IBM Plex Sans"; font-size:11.5px; }
  table.invoice td.num{ text-align:right; font-family:"IBM Plex Sans"; padding:6px 5px; }
  table.invoice td.lbl{ text-align:left; font-family:"IBM Plex Sans"; color:var(--ink-soft); padding:6px 8px; white-space:nowrap; }
  table.invoice td.emph{ font-weight:700; color:var(--ink); }
  .invoice-legend{ font-size:11px; color:var(--muted); line-height:1.5; margin:6px 0 0; }

  /* Kullanıcı isteği: Adım 3 (Gerçek Fatura Geçmişi), Adım 7 (Saatlik Mahsuplaşma Analizi),
     Adım 8 (Birim Fiyat, Enerji ve Nakit Akışı Bileşenleri) ve Adım 9 (Tahmini Üretim ve
     Tüketim) tablolarındaki sütun genişlikleri eşitlendi. Eskiden tarayıcı, tabloyu içeriğe
     göre otomatik boyutlandırıyordu (table-layout:auto) — bu yüzden aynı tabloda bazı sütunlar
     (ör. "Ay") dar, bazıları (uzun ₺ değerleri olanlar) geniş kalıyordu. Şimdi bu 4 tabloda
     table-layout:fixed + her sütun 100%/sütun-sayısı genişliğinde: tablodaki TÜM sütunlar
     birbiriyle eşit genişlikte. Adım 3/8'de sütun sayısı fazla (11/12) olduğundan, eşit
     genişlikte sütunlarda ₺ değerleri sıkışıp alt satıra kaymasın diye min-width bir miktar
     artırıldı (paylaşılan table.invoice min-width:760px yerine, bkz. aşağıda). Adım 7'nin
     saatlik tabloları (özet + 12 aylık detay, hepsi 6 sütunlu) ve Adım 9'un ut-table'ı zaten
     paylaşılan min-width/genişlikleriyle rahat sığıyor, o yüzden ek min-width gerekmedi. */
  /* NOT: başlık (th) hücrelerine white-space:nowrap UYGULANMIYOR — bazı başlıklar zaten <br>
     ile 2 satıra bölünüyor (ör. "Şebekeden Çekilen<br>Bedeli (₺)") ve sabit dar sütunda nowrap
     verilirse metin sütun sınırını taşıp komşu başlıkla ÇAKIŞIYOR (görsel test sırasında
     yakalandı). th'ler normal (gerekirse kendiliğinden 2. bir kez daha sarılabilen) white-space
     ile bırakıldı; veri hücrelerinde (td) zaten boşluk içermeyen sayılar olduğundan ayrıca
     nowrap'a gerek yok — tarayıcı boşluksuz metni sarmaz. */
  /* 34. parti: Ticarethane fatura tablosu 15 sütun (Kademe 1/2, BTV, KDV eklendi). */
  #invoiceTable{ table-layout:fixed; min-width:1150px; }
  #invoiceTable th, #invoiceTable td{ width:calc(100% / 15); }
  /* 34. parti: Konut fatura tablosu 12 sütun (Aktif Enerji / Dağıtım birim fiyatları eklendi). */
  #villaInvoiceTable{ min-width:1170px; table-layout:fixed; }
  /* 192. parti (madde 10): 13 sütun eşit genişlik; BTV / KDV oranı başlıkta */
  #villaInvoiceTable th, #villaInvoiceTable td{ width:calc(100% / 13); }
  #villaInvoiceTable .inv-oran{ font-weight:600; opacity:.8; }

  #monthlyRecTable{ table-layout:fixed; min-width:980px; }
  #monthlyRecTable th, #monthlyRecTable td{ width:calc(100% / 12); }

  #saatlikMahsuplasmaBody table.invoice{ table-layout:fixed; }
  #saatlikMahsuplasmaBody table.invoice th, #saatlikMahsuplasmaBody table.invoice td{ width:calc(100% / 6); }

  .ut-table{ table-layout:fixed; }
  .ut-table th, .ut-table td{ width:25%; }
  /* Kullanıcı isteği: Tahmini Üretim ve Tüketim tablosunda (sütun genişlikleri zaten yukarıda
     eşit — width:25%) yazılar ortalansın — eskiden paylaşılan .month-table kuralı yüzünden
     "Ay" sütunu sola, diğer 3 sütun sağa yaslıydı. */
  .ut-table th, .ut-table td{ text-align:center; }
  .ut-table th:first-child, .ut-table td:first-child{ text-align:center; }

  /* Kullanıcı isteği: Adım 3 (Gerçek Fatura Geçmişi), Adım 7 (Saatlik Mahsuplaşma Analizi) ve
     Adım 8 (Birim Fiyat, Enerji ve Nakit Akışı Bileşenleri) tablolarındaki DEĞERLER hücre
     içinde ORTALI gösterilsin — eskiden sayısal hücreler (.num) sağa, "Ay" etiketi (.lbl) sola
     yaslıydı. ID/kapsayıcı ile kapsamlı seçiciler kullanıldığı için (ör. #monthlyRecTable td),
     bu 3 tabloya özel olarak table.invoice td.num{text-align:right} / td.lbl{text-align:left}
     gibi genel kuralları geçersiz kılıyor (ID her zaman sınıf seçicisinden daha özgül) — başlık
     satırı (thead th) zaten ortalıydı, değişmedi. Adım 8'in düzenlenebilir 2 hücresi (Tipik
     Aylık Üretim Payı %, Tahmini Üretim kWh input'ları) de dahil, tüm girdi kutuları da ortalandı. */
  #invoiceTable td{ text-align:center; }
  #invoiceTable tfoot th{ white-space:normal !important; line-height:1.25; }   /* 108. parti: "12 Ay Toplam / Ort." dar sütunda taşmasın */
  #invoiceTable td input, #invoiceTable td select{ text-align:center; }

  #monthlyRecTable td{ text-align:center; }
  #monthlyRecTable td input{ text-align:center; }

  #saatlikMahsuplasmaBody table.invoice td{ text-align:center; }

  /* Hizmet Kapsamı tablosu: sıra no, sola yaslı hizmet açıklaması, ortalanmış Dahil/Hariç kutucukları */
  #hizmetTable td.num-col{ text-align:center; font-family:"IBM Plex Sans"; color:var(--ink-soft); padding:6px 4px; }
  table.invoice td.hizmet-cell input{ text-align:left; font-family:"IBM Plex Sans"; }
  #hizmetTable td.chk{ text-align:center; padding:6px 4px; }
  #hizmetTable td.chk input[type=checkbox]{ width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }

  /* Proje Süreci tablosu: ortalanmış/kalın Zaman hücresi, çok satırlı Süreç metni */
  #projeSureciTable td.zaman-cell{ vertical-align:top; text-align:center; padding-top:10px; }
  #projeSureciTable td.zaman-cell input{
    text-align:center; font-family:"IBM Plex Sans"; font-weight:700; color:var(--ink); padding:6px 4px;
  }
  #projeSureciTable td.surec-cell{ vertical-align:top; padding:0; }
  #projeSureciTable td.surec-cell textarea{
    display:block; width:100%; min-height:92px; border:none; background:transparent;
    resize:none!important; overflow:hidden!important; field-sizing:content!important;
    font-family:"IBM Plex Sans"; font-size:12px; line-height:1.8; color:var(--ink); padding:8px;
  }
  #projeSureciTable td.surec-cell textarea:focus{ outline:2px solid var(--accent-2); outline-offset:-2px; }
  /* Müşteriye giden salt-okunur raporda surec-cell <textarea> yerine kullanılan düz <div> —
     bkz. freezeCloneForView(): form kontrolü olmadığı için kaydırma çubuğu/yeniden boyutlandırma
     tutamacı gibi tarayıcıya özgü bir davranışa asla girmez, her zaman içeriğin tam yüksekliğinde
     görünür. */
  #projeSureciTable td.surec-cell .surec-frozen{
    width:100%; box-sizing:border-box; white-space:pre-wrap; word-break:break-word;
    font-family:"IBM Plex Sans"; font-size:12px; line-height:1.8; color:var(--ink); padding:8px;
  }

  .wide-panel{ grid-column:1 / -1; }
  .full-grid{ grid-template-columns:1fr; }

  .conn-note{
    font-size:11.5px; color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--line);
    border-radius:8px; padding:8px 10px; margin-top:6px; line-height:1.45;
  }

  /* Notlar metni artık elle düzenlenebilir (kullanıcı isteği) — bir <textarea>; kullanıcı
     isteği üzerine #disclaimerBlock artık diğer adım panelleriyle AYNI .panel/.panel-head/
     .panel-body kartını kullandığından (eski ayrı/kesikli-çerçeveli .disclaimer kutusu
     kaldırıldı), bu alan da panel-body'nin normal metniyle aynı görünsün diye çerçeve/arkaplan
     kaldırılıp kendi font/renk değerleri burada açıkça veriliyor. field-sizing:content,
     desteklendiğinde JS'siz otomatik yükseklik sağlar (musteriAdSoyad/musteriAdres
     alanlarındaki aynı desen); desteklemeyen eski tarayıcılarda autosizeField() JS yedeği
     devreye girer. */
  .disclaimer-edit{
    display:block; width:100%; margin:0; border:none; background:transparent; padding:0;
    font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; font-size:12.5px; line-height:1.55; color:var(--ink-soft);
    white-space:pre-wrap; word-break:break-word; resize:none; overflow:hidden;
    field-sizing:content; min-height:60px;
  }
  .disclaimer-edit:focus{ outline:1px solid var(--accent-2); outline-offset:2px; background:var(--surface-2); }

  footer{ margin-top:22px; text-align:center; font-size:11.5px; color:var(--muted); }

  /* Yazdır / E-posta Gönder — sihirbaz araç çubuğunun (wizard-nav) kendi satırı olarak görünür,
     SADECE nihai adımda (JS: printToolbar.style.display). wizard-nav artık iki (üst: aktif
     proje + adım gezinme; alt: geri al/ileri al/kaydet + kayıtlı teklifler/yeni teklif) satırlı
     bir dikey (column) düzen olduğundan, bu araç çubuğu görünür olduğunda üçüncü bir satır
     olarak eklenir — kullanıcı isteği üzerine yapılan bu satır yeniden düzenlemesinden önce
     display:contents ile üstteki tek satıra katılıyordu, artık kendi flex satırı. Uyarı/yedek-
     bağlantı metinleri görününce kendi satırına sarar (flex-wrap:wrap). */
  .print-toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; width:100%; }
  .print-toolbar .email-fallback, .print-toolbar #emailSendWarning{
    flex-basis:100%; margin-top:4px;
  }

  /* Raporu gönder modalı: yazdır butonuna basınca kaydet / e-posta seçimi */
  .modal-backdrop{
    position:fixed; inset:0; z-index:120; background:rgba(22,35,58,.45);
    display:flex; align-items:center; justify-content:center; padding:20px;
  }
  .modal-card{
    width:100%; max-width:480px; max-height:90vh; overflow-y:auto;
    background:var(--surface); border:1px solid var(--line-strong);
    border-radius:14px; box-shadow:var(--shadow); padding:18px 20px 20px;
  }
  .modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
  .modal-head h3{ font-size:15px; margin:0; color:var(--ink); }
  .modal-close{
    border:none; background:none; color:var(--muted); cursor:pointer; font-size:15px; padding:4px 6px; line-height:1;
  }
  .modal-close:hover{ color:var(--ink); }
  .modal-body{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
  .print-options-head{ font-weight:700; font-size:12.5px; color:var(--ink); margin-bottom:8px; }
  .print-options-grid{ display:grid; grid-template-columns:1fr 1fr; gap:5px 16px; }
  .print-options-grid label{
    display:flex; align-items:center; gap:7px; cursor:pointer;
    font-size:11.5px; color:var(--ink-soft); line-height:1.3;
  }
  .print-options-grid input[type=checkbox]{ width:14px; height:14px; flex:none; accent-color:var(--accent); }

  /* Bölümlerin müşteri raporunda hangi SIRAYLA görüneceğini seçmek için — her satır bir
     bölüm; ▲▼ düğmeleri reportOrder dizisindeki komşu iki öğeyi yer değiştirir, liste ilk
     sıradaki bölüm en üstte olacak şekilde yeniden çizilir. */
  /* Kapak Sayfası — rapor/yazdırma/e-posta çıktısının en başındaki özet sayfa; markanın kendi
     vurgu (accent) rengini arkaplan, accent-ink'i de üzerindeki metinler için kullanır. */
  .kapak-panel{
    background:var(--kapak-bg); color:var(--kapak-ink); border-radius:14px; padding:52px 44px; margin-bottom:22px;
    min-height:480px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:space-between;
    /* Kullanıcı isteği: kW bilgileri (kapak-head) ile altındaki bilgi bloğu (kapak-fields /
       kapak-contact) arasında HER ZAMAN en az bu kadar boşluk olsun — içerik min-height'ı
       doldurup justify-content:space-between'in dağıtacağı boş alan neredeyse kalmadığında bile
       (bkz. ekran görüntüsündeki bitişik görünüm) gap, space-between'in hesabından bağımsız bir
       ASGARİ aralık garantisi verir. */
    gap:32px;
    break-inside:avoid; -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  /* Kullanıcı isteği: "GES Teklifi" ve "Teklif Bedeli" başlık blokları da (aşağıdaki
     .kapak-fields ile aynı şekilde) ortaya hizalı olsun — kapak-title ve kapak-stats'ı
     saran üst <div> bu sınıfı alıyor (bkz. #kapakPanel/#teklifBedeliPanel HTML). */
  .kapak-head{ text-align:center; }
  .kapak-title{
    font-family:"Archivo", ui-sans-serif, system-ui, sans-serif; font-weight:800; font-size:42px;
    margin:0 0 26px; color:var(--kapak-ink);
  }
  .kapak-stats{ display:flex; gap:40px; justify-content:center; }
  .kapak-stat{ display:flex; align-items:center; gap:12px; }
  .kapak-stat-icon{
    flex:none; width:40px; height:40px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    background: color-mix(in srgb, var(--kapak-ink) 16%, var(--kapak-bg));
    color: var(--kapak-ink);
  }
  .kapak-stat-icon svg{ width:22px; height:22px; }
  .kapak-stat-v{ font-family:"IBM Plex Mono", ui-monospace, monospace; font-weight:800; font-size:28px; color:var(--kapak-ink); }
  .kapak-stat-u{ font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; font-size:14px; color:color-mix(in srgb, var(--kapak-ink) 65%, var(--kapak-bg)); }
  /* Kullanıcı isteği: Kapak Sayfası ve Teklif Bedeli adımındaki (adım 14) tüm bilgiler artık
     sağa değil ORTAYA hizalı, alt alta (bkz. .kapak-field'ların zaten dikey/column dizilişi) —
     align-self:center ile blok kendi içeriği kadar daralıp panelin ortasına yerleşiyor,
     text-align:center ile de her satırın metni o bloğun içinde ortalanıyor. */
  .kapak-fields{
    display:flex; flex-direction:column; align-items:center; gap:16px; align-self:center; text-align:center; max-width:360px;
  }
  .kapak-field{ display:flex; flex-direction:column; gap:2px; }
  /* Kullanıcı isteği: Teklif Bedeli adımında, fiyatın altında (ortalı) irtibat kişisi notu —
     .kapak-fields ile aynı ortalanmış bloğun içinde, diğer alanlardan biraz daha küçük/soluk
     bir yazı tipiyle ayrışsın diye kendi sınıfı var. */
  .kapak-contact{
    font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; font-size:12.5px; line-height:1.6;
    color:color-mix(in srgb, var(--kapak-ink) 78%, var(--kapak-bg));
  }
  /* 192. parti: "Sorularınız, revizyon talepleriniz…" cümlesi tek satır — blok 360 px sütundan taşabilir, ortalı kalır. */
  .kapak-contact{ width:max-content; max-width:none; }
  .kapak-contact .kapak-tek{ white-space:nowrap; }
  .kapak-label{
    font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; font-weight:700; font-size:13px; color:var(--kapak-ink);
  }
  .kapak-value{
    font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; font-size:14px; color:color-mix(in srgb, var(--kapak-ink) 78%, var(--kapak-bg)); line-height:1.35;
  }
  /* Teklif Bedeli panelindeki USD tutarı — kullanıcı isteği üzerine artık elle girilebilen bir
     alan DEĞİL, diğer .kapak-value alanları gibi salt metin; Mahsuplaşma Parametreleri'ndeki
     ilgili "Yatırım maliyeti" alanından otomatik gelir (bkz. updateTeklifBedeliPanel()). Rakamı
     biraz vurgulamak için IBM Plex Mono kullanan hafif bir stil. */
  .kapak-price-value{
    font-family:"IBM Plex Mono", ui-monospace, monospace; font-weight:800; font-size:20px; color:var(--kapak-ink);
  }
  /* 32. parti (madde 5): Teklif Bedeli tutarı kWp/kWe değerlerinden (28px) daha büyük. */
  #tbTeklifBedeli.kapak-price-value{ font-size:60px; line-height:1.1; letter-spacing:-.01em; }
  /* 32. parti (madde 1): Teklif Bedeli ile Teşekkür Ederiz tek sayfa/tek kart — art arda geldiklerinde
     aradaki sayfa sonu ve boşluk kalkar, iki blok tek mavi kart gibi birleşir. */
  #teklifBedeliPanel.kapak-panel{ min-height:0; padding-bottom:18px; }
  /* 32. parti: Sistem Bilgileri raporda Müşteri Bilgileri'yle aynı sayfada, hemen altında. */
  #musteriPanel:has(+ #sistemBilgiPanel){ break-after:auto !important; page-break-after:auto !important; }
  #sistemBilgiPanel{ break-inside:avoid; break-after:page; page-break-after:always; }
  /* 64. parti: Mevzuat Uygunluğu, Sistem Bilgileri'nin altında aynı sayfada. */
  #sistemBilgiPanel:has(+ #mevzuatPanel){ break-after:auto !important; page-break-after:auto !important; }
  #mevzuatPanel{ break-inside:avoid; }
  /* 64. parti: girdiler müşteri sayfasında — bu bölümde seçim satırı hiç gösterilmez */
  #mevzuatPanel .mvz-girdi{ display:none !important; }
  #teklifBedeliPanel:has(+ #sonKapakPanel){ position:relative; box-shadow:0 3px 0 0 var(--kapak-bg) !important; z-index:1; }   /* 153. parti: iki kapak kartı arasındaki ek yeri çizgisini örter */
  #teklifBedeliPanel + #sonKapakPanel{ break-before:avoid !important; page-break-before:avoid !important; margin-top:-1px !important;
    border-top-left-radius:0 !important; border-top-right-radius:0 !important; min-height:0 !important; padding-top:18px; }
  #teklifBedeliPanel:has(+ #sonKapakPanel){ border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important; margin-bottom:0 !important;
    break-before:page; page-break-before:always; break-after:avoid !important; page-break-after:avoid !important; }
  /* 32. parti (madde 15): Teklif Bedeli ve Teşekkür Ederiz sayfalarında başlık bloğu ile bilgi
     bloğu arasındaki büyük boşluk (space-between'in min-height'ı dağıtması) kaldırıldı — içerik
     dikeyde ortalı ve bloklar arası sabit 28px. */
  #teklifBedeliPanel.kapak-panel, #sonKapakPanel.kapak-panel{ justify-content:center; gap:28px; }
  #teklifBedeliPanel .kapak-title, #sonKapakPanel .kapak-title{ margin-bottom:18px; }
  .print-options-list{ display:flex; flex-direction:column; gap:4px; }
  .reorder-row{
    display:flex; align-items:center; gap:8px; padding:4px 6px; border-radius:6px;
    cursor:grab; border-top:2px solid transparent; border-bottom:2px solid transparent;
  }
  .reorder-row:nth-child(odd){ background:var(--surface-2); }
  .reorder-row.dragging{ opacity:.4; }
  .reorder-row.drag-over-top{ border-top-color:var(--accent-2); }
  .reorder-row.drag-over-bottom{ border-bottom-color:var(--accent-2); }
  .reorder-handle{
    flex:none; width:18px; text-align:center; font-size:13px; line-height:1; color:var(--ink-soft);
    user-select:none;
  }
  .reorder-row label{
    display:flex; align-items:center; gap:7px; cursor:pointer; font-size:11.5px; color:var(--ink-soft); line-height:1.3;
  }
  .reorder-row input[type=checkbox]{ width:14px; height:14px; flex:none; accent-color:var(--accent); }
  @media (max-width:420px){ .print-options-grid{ grid-template-columns:1fr; } }
  .modal-divider{ height:1px; background:var(--line); margin:2px 0; }
  .modal-hint{ font-size:11px; color:var(--muted); line-height:1.5; margin-top:2px; }
  .email-fallback{ margin-top:-2px; }
  .email-fallback label{ display:block; font-size:11px; color:var(--ink-soft); margin-bottom:5px; line-height:1.4; }
  .email-fallback-row{ display:flex; gap:8px; }
  .email-fallback-row input{
    flex:1; min-width:0; font-size:11px; padding:7px 9px; border:1px solid var(--line); border-radius:8px;
    background:var(--surface-2); color:var(--ink-soft);
  }
  .email-fallback-row .table-toggle{ flex:none; padding:7px 12px; font-size:11.5px; }

  /* Kayıtlı Teklifler listesi */
  .saved-quote-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    border:1px solid var(--line); border-radius:9px; padding:9px 12px; background:var(--surface-2);
  }
  .saved-quote-info strong{ display:block; font-size:13px; color:var(--ink); }
  .saved-quote-info span{ font-size:11px; color:var(--muted); }
  .saved-quote-actions{ display:flex; align-items:center; gap:6px; flex:none; }
  .saved-quote-actions .table-toggle{ white-space:nowrap; }

  /* Malzeme listesi satır silme butonu */
  .row-del{ border:none; background:none; color:var(--muted); cursor:pointer; font-size:14px; padding:4px 6px; }
  .row-del:hover{ color:var(--ink); }

  /* Kullanıcı isteği: "Ürün ve Hizmetler" (malzeme) tablosunda satırlar sürükleyerek
     yeniden sıralanabilsin — sürükleme tutamacı (⠿) ve sürükleme sırasındaki görsel geri
     bildirim (kaynak satır soluklaşır, hedef satırın üstü/altı kesikli çizgiyle vurgulanır). */
  .drag-handle{ cursor:grab; text-align:center; color:var(--muted); font-size:16px; user-select:none; }
  .drag-handle:active{ cursor:grabbing; }
  table.invoice tr.dragging{ opacity:.4; }
  table.invoice tr.drag-over{ outline:2px dashed var(--accent-2, #2d7ff9); outline-offset:-2px; }

  /* Kullanıcı isteği: "Saha ve Proje Görselleri" — Google Haritalar bina fotoğrafı ve AutoCAD
     panel yerleşim çizimi için yükleme/önizleme alanları. */
  .gorsel-upload{ flex:1 1 320px; min-width:260px; }
  .chz-ic{ position:relative; display:block; min-width:0; }
  .chz-ic > input{ width:100%; box-sizing:border-box; padding-right:var(--chz-pr,40px) !important; -moz-appearance:textfield; }
  .chz-ic > input::-webkit-outer-spin-button, .chz-ic > input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
  .chz-ic > em{ position:absolute; right:9px; top:50%; transform:translateY(-50%); font-style:normal; font-size:11px; color:#a3abb3; pointer-events:none; white-space:nowrap; }
  .gorsel-upload-label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
  .gorsel-preview-wrap{ margin-top:4px; }
  #pysBilgiGorselYeri .gorsel-preview{ max-height:none !important; }
  .gorsel-preview{ display:block; width:100%; max-height:420px; border:1px solid var(--line); border-radius:10px; object-fit:contain; background:var(--surface-2); }

  /* İş Takip Sistemi — adım adım sihirbaz: aktif olmayan adımların panelleri gizlenir.
     !important, panel görünürlüğünü zaten yöneten satır-içi display stilinin üzerine biner;
     "final" (tam rapor) adımında bu sınıf kaldırılır ve mevcut yazdırma/görünürlük mantığı
     (applyVisibility / printPrefs) değişmeden devraldığı için önceki davranış korunur. */
  .wizard-hide{ display:none !important; }
  .ykp-edit-hide{ display:none !important; }
  /* 33. parti (madde 3): teklifteki cihaz özeti — müşteri sayfasındaki KPI kartlarıyla aynı düzen. */
  .chz-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
  .chz-kpi{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:14px 16px; break-inside:avoid; }
  .chz-kpi-val{ font-family:"Archivo",sans-serif; font-weight:800; font-size:19px; line-height:1; color:var(--ink); }
  .chz-kpi-val span{ font-family:"IBM Plex Sans",sans-serif; font-size:11px; font-weight:400; color:var(--muted); margin-left:3px; }
  .chz-kpi-lbl{ font-size:12px; font-weight:700; margin-top:6px; color:var(--ink-soft); }
  /* Seçili cihaz listesi (salt-okunur tablo) — hücreler input içermediğinden boşluk ayrıca verilir. */
  #cihazRaporOzeti table.invoice tbody td{ padding:7px 10px; font-size:12.5px; }
  #cihazRaporOzeti table.invoice tbody tr + tr td{ border-top:1px solid var(--line); }
  /* 33. parti (madde 5): SON HAL (Konut) = müşterinin göreceği teklif, salt-okunur. Ekranda da
     müşteri çıktısındaki gibi .no-print öğeler (satır ekle/sil, yükleme düğmeleri vb.) gizlenir ve
     form alanları düz metin gibi görünür; düzenleme ayrıca panellere konan "inert" ile engellenir. */
  #gesCalcRoot.ges-salt-okunur .panel .no-print,
  #gesCalcRoot.ges-salt-okunur .kapak-panel .no-print{ display:none !important; }
  #gesCalcRoot.ges-salt-okunur .panel input:not([type="checkbox"]):not([type="radio"]),
  #gesCalcRoot.ges-salt-okunur .panel select,
  #gesCalcRoot.ges-salt-okunur .panel textarea{ border-color:transparent !important; background:transparent !important; box-shadow:none !important; resize:none; }
  #gesCalcRoot.ges-salt-okunur .panel select{ appearance:none; -webkit-appearance:none; }

  .wizard-nav{
    display:flex; flex-direction:column; gap:10px;
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    padding:12px 16px; margin-bottom:22px; position:sticky; top:8px; z-index:60; box-shadow:var(--shadow);
  }
  /* Kullanıcı isteği: araç çubuğu iki satıra bölündü — üst satır (aktif proje + adım gezinme:
     Geri/İlerleme/İleri), alt satır (solda Geri Al/İleri Al/Kaydet, sağda Kayıtlı Teklifler/
     Yeni Teklif). wizard-nav-row-bottom iki grubu (sol/sağ) uçlara yaslar. */
  .wizard-nav-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; width:100%; }
  .wizard-nav-row-bottom{ justify-content:space-between; }
  .wizard-nav-group{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .wizard-nav .wizard-progress{ text-align:center; flex:1; min-width:160px; }
  .wizard-nav .wizard-progress-text{ font-size:12.5px; font-weight:700; color:var(--ink); }
  .wizard-nav .wizard-progress-track{ height:4px; background:var(--line); border-radius:2px; margin-top:6px; overflow:hidden; }
  .wizard-nav .wizard-progress-fill{ height:100%; background:var(--accent); width:0%; transition:width .2s ease; }
  .wizard-nav .table-toggle:disabled{ opacity:.4; cursor:not-allowed; }
  /* 130. parti (madde 11-12): aktif proje, Geri Al / İleri Al / Kaydet / Teklifi Oluştur (son halde Kaydet / Önizle /
     İndir) TEK satırda. İki satır kapsayıcısı display:contents ile tek esnek satıra katılır; açıklama ve durum
     metinleri (finalizeToolbar / printToolbar) alt satıra sarar. */
  .wizard-nav{ flex-direction:row !important; flex-wrap:wrap; align-items:center; column-gap:10px; }
  .wizard-nav > .wizard-nav-row-top, .wizard-nav > .wizard-nav-row-bottom{ display:contents; }
  .wizard-nav #wizardActiveProject{ margin-right:6px !important; }
  .wizard-nav .wizard-progress{ min-width:60px; }
  .wizard-nav > .print-toolbar{ flex-basis:100%; }

  /* Fatura yükleme adımı — yüklenen görsellerin durum listesi */
  .fatura-upload-item{
    display:flex; align-items:center; gap:10px; font-size:12px;
  }
  .fatura-upload-item .name{ flex:1; word-break:break-all; }
  .fatura-upload-item .status{ font-family:"IBM Plex Mono"; white-space:nowrap; }
  .fatura-upload-item .status.ok{ color:var(--accent-2); }
  .fatura-upload-item .status.err{ color:#b8452f; }

  /* Fatura tablosu satır etiketleri: yüklenen gerçek fatura mı, yoksa eksik ay için otomatik
     tahmin mi olduğunu gösterir (yalnızca ekranda — yazdırmada görünmez). */
  .row-tag{ font-size:9px; font-weight:600; margin-left:5px; white-space:nowrap; font-family:"IBM Plex Sans"; }
  .row-tag.up{ color:var(--accent-2); }
  .row-tag.est{ color:var(--accent); }

  /* Ledger tablosundaki hücreler düzenlenebilir hale getirildi (rapor anlık görüntüsü için
     manuel düzeltme) — görünüm normal metinle aynı kalsın diye kenarlık/arkaplan kaldırıldı. */
  table.ledger td.v input{
    width:100%; border:none; background:transparent; text-align:right; padding:0;
    font:inherit; font-family:"IBM Plex Sans"; font-weight:inherit; font-size:inherit; color:inherit;
  }
  table.ledger td.v input:focus{ outline:1px solid var(--accent-2); outline-offset:2px; background:var(--surface-2); }
  /* "Dağıtım bedeli (satıştan düşülen)" tek başına anlamlı, elle düzeltilecek bir değer değil —
     tamamen 5. adımdaki "Tüketim dağıtım bedeli" girdisinden türeyen bir ARA hesap. Diğer ledger
     hücreleri (gerçek faturayla eşleştirmek için) bilinçli olarak elle düzenlenebilir bırakıldı,
     ama bu hücre editable kaldığı sürece bir kez dokunulduğunda kalıcı olarak donuyor ve bir daha
     5. adımdaki değişikliği yansıtmıyordu — kullanıcının "adım 6'daki dağıtım bedeli, adım 5'ten
     bilgi almıyor" şeklinde bildirdiği sorun buydu. readonly yapılarak her zaman canlı hesaplanan
     değeri göstermesi garanti ediliyor; odak/hover görünümü de düzenlenemeyen bir alan olduğunu
     belli etsin diye kaldırılıyor. */
  table.ledger td.v input[readonly]{ cursor:default; }
  table.ledger td.v input[readonly]:focus{ outline:none; background:transparent; }
  table.invoice td.num input.ledger-uretim-input{
    /* Bu sütun, tablodaki TEK elle düzenlenebilir sütun — diğer 9 sütun salt-okunur
       hesaplanmış değer. padding:0 ile tanımlandığında (önceki hâli) dokunma alanı ~12px
       yüksekliğe iniyor ve görünüşte diğer salt-okunur hücrelerden hiç ayırt edilemiyordu —
       bu yüzden kullanıcı alanı "düzenlenemiyor" sanıyordu. Standart fatura tablosu
       input'larıyla aynı dolgu (6px 5px) + hafif bir zemin rengi ile hem dokunma alanı
       büyütüldü hem de "burası elle değiştirilebilir" görsel ipucu eklendi.
    */
    text-align:right; font-family:"IBM Plex Sans"; border:none;
    background:color-mix(in srgb, var(--accent) 10%, transparent);
    width:100%; padding:6px 5px; box-sizing:border-box; min-height:30px;
    font-size:inherit; color:inherit; cursor:text;
  }
  table.invoice td.num input.ledger-uretim-input:focus{ outline:1px solid var(--accent-2); background:var(--surface-2); }
  table.invoice td.num input.ledger-uretim-input:hover{ background:color-mix(in srgb, var(--accent) 18%, transparent); }

  /* Önizleme ve Gönder (adım 14) — seçilen rapor bölümlerinin, 13. adımdaki (Tam Rapor)
     görünümüyle birebir aynı, tam genişlikte ve salt-okunur (disabled) bir kopyası;
     sayfa kartlarına bölünmez, tek parça olarak gösterilir. Sadece ekran içindir
     (no-print); gerçek yazdırma/PDF hâlâ "final" adımındaki asıl panellerden ve
     @media print kurallarından yapılır. */

  @media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

  /* Her ana bölüm yazdırmada/PDF'te kendi sayfasından başlar:
     1) Müşteri Bilgileri (ilk sayfa, zaten sayfa başında)  2) Ekipman Parametreleri
     3) Mahsuplaşma Parametreleri  4) Gerçek Fatura Geçmişi  5) Birim Fiyat/Enerji/Nakit Akışı
     6) Tahmini Üretim ve Tüketim  7) Enerji Akışı  8) Çevresel Katkı (CO₂ azaltımı ve
     eşdeğerleri)  9) Amortisman Analizi  10) Malzeme ve Hizmetler  11) Hizmet Kapsamı
     12) Proje Süreci (en sonda)
     (Görünürlüğü kapatılan bir bölüm sayfa boşluğu bırakmaz, sıradaki bölüm devralır.)
     Bu kural bilerek @media print dışında, her zaman etkin tutulur: break-before /
     page-break-before özellikleri yalnızca sayfalı ortamlarda (yazdırma/PDF) etkilidir,
     normal ekran görünümünde hiçbir görsel etkisi yoktur — bazı tarayıcı/PDF motorlarının
     yazdırma anında @media print'i güvenilir şekilde tetiklememesine karşı önlemdir. */
  #musteriPanel, #parametrePanel, #gorselPanel, #mahsuplasmaPanel, #malzemePanel, #hizmetKapsamiPanel, #projeSureciPanel, #teklifBedeliPanel, #villaInvoicePanel, #ticInvoicePanel,
  #simulasyonPanel, #ledgerPanel, #uretimTuketimPanel, #enerjiAkisiPanel, #sonucPanel, #financePanel,
  /* Kapak Sayfası açıksa (aşağıda applyVisibility() ile eklenen .force-break sınıfı) hemen
     ardından gelen bölüm de yeni bir sayfadan başlar — kapak kapalıyken bu sınıf hiçbir
     panelde olmadığından boş bir ilk sayfa oluşmaz. #musteriPanel zaten normalde bu sınıfı
     JS ile (applyReportOrderToDom) dinamik olarak alıyor; burada ayrıca statik olarak da
     tanımlanması sadece ek güvence — herhangi bir durumda dinamik sınıf eklenmese bile
     Müşteri Bilgileri panelinin kapaktan sonra kendi sayfasında başlamasını garantiler. */
  .force-break{
    break-before:page; page-break-before:always;
  }

  /* Kullanıcı bildirimi: "tüm adımlar ayrı ayrı sayfa olsun" — yukarıdaki break-before
     kuralına ek olarak, her bölümün SONUNA da (kendisinden sonraki bölümün sayfasına
     taşmasın diye) bir sayfa sonu ekleniyor; böylece bölüm sınırları hem "öncesinde" hem
     "sonrasında" çift taraflı korunmuş oluyor. #projeSureciPanel bilerek listede YOK —
     kullanıcı isteği üzerine artık Not (açıklama) bölümü Proje Süreci'nin hemen ardından
     gelir ve notun kendi sayfa sonu yok, önceki bölümün devamı gibi akar; #teklifBedeliPanel
     de (varsayılan sırada artık en sonda, Not'tan sonra) listede YOK — ondan sonra boş bir
     sayfa açılmasın diye. Kapak sayfasının kendi break-after kuralı daha önce yalnızca
     @media print içindeydi (aşağıdaki diğer break-before/after kurallarıyla tutarsızdı);
     artık o da buraya, her zaman etkin bölüme taşındı. */
  #kapakPanel, #musteriPanel, #mevzuatPanel, #parametrePanel, #gorselPanel, #mahsuplasmaPanel, #villaInvoicePanel, #ticInvoicePanel,
  #simulasyonPanel, #ledgerPanel, #uretimTuketimPanel, #enerjiAkisiPanel, #sonucPanel, #financePanel, #malzemePanel, #hizmetKapsamiPanel{
    break-after:page; page-break-after:always;
  }

  @media print{
    .no-print{ display:none !important; }
    body{ background:#fff; }
    @page{ margin:12mm; }

    /* Panelin kendisi gerekirse sayfalar arasında akabilir (çok uzunsa tamamı bir
       sonraki sayfaya sığmayabilir), ama içindeki alt bloklar asla ortasından kesilmez:
       bir blok sayfa sonuna kadar bitmiyorsa bütün halinde bir sonraki sayfaya geçer. */
    .panel, .disclaimer{ box-shadow:none; break-inside:auto; }
    .panel-head{ break-after:avoid; break-inside:avoid; }
    .hero-stat, .stat-grid, .env-stat-grid, .chart-section, .cost-strip,
    .payback-duo, .ledger-grid, .ledger-group,
    .divider-label, .two-col, .invoice-legend, .stat, .env-stat, .ut-stat-grid, .ut-stat-card{
      break-inside:avoid;
    }
    .divider-label{ break-after:avoid; }
    /* 32. parti (madde 5): panel içindeki üst düzey bloklar (alan grupları, yön dağılımı, kart
       grafikler, küçük tablolar) sayfa sonunda ortasından bölünmez; sığmıyorsa bütün halinde
       sonraki sayfaya geçer. Sayfadan uzun bloklarda tarayıcı yine böler (başlık satırı tekrarlanır). */
    .panel-body > *, .field, .span-full, .grid > *, .kapak-panel, .chart-section, svg{ break-inside:avoid; page-break-inside:avoid; }
    .panel-body > .invoice-wrap, .panel-body > table{ break-inside:auto; }
    #teklifBedeliPanel, #sonKapakPanel{ break-inside:avoid; }

    /* Tablolar gerekirse sayfalar arasında bölünebilir, başlık satırı her sayfada
       tekrarlanır; ama tek bir satır asla ikiye bölünmez. */
    table.invoice, table.ledger, table.month-table{ break-inside:auto; }
    table.invoice thead, table.ledger thead, table.month-table thead{ display:table-header-group; }
    table.invoice tfoot, table.ledger tfoot{ display:table-footer-group; }
    table.invoice tr, table.ledger tr, table.month-table tr{ break-inside:avoid; }

    table.invoice td input, table.invoice td select, table.invoice td textarea,
    .field input, .field select, .field textarea, table.ledger td.v input{
      border-color:transparent; background:transparent; padding-left:0;
    }
    .wizard-nav{ display:none !important; }
    #projeSureciTable td.surec-cell textarea{ resize:none; overflow:visible; }

    /* Geniş fatura/mutabakat tabloları yatay kaydırma olmadan sayfa genişliğine sığsın */
    .invoice-wrap{ overflow:visible; }
    table.invoice{ min-width:0 !important; font-size:8.5px; }
    table.invoice thead th{ font-size:7.5px; padding:4px 2px; }
    table.invoice tbody th{ font-size:8.5px; padding:0 4px; }
    table.invoice td input, table.invoice td select{ font-size:8.5px; padding:4px 2px; }
    table.invoice td select{ appearance:none; -webkit-appearance:none; }
    table.invoice tr.tot td{ font-size:8.5px; padding:4px 2px; }
    table.invoice td.num, table.invoice td.lbl{ padding:4px 3px; }
  }
  /* 107. parti: Konut — Yatırım maliyeti (Malzeme ve Fiyat Listesi'nden) ve Döviz kuru (Ayarlar → Genel Parametreler)
     Mahsuplaşma Parametreleri'nde gösterilmez; Konstrüksiyon sayısı teklifte gösterilmez. Alanlar hesap için gizli durur. */
  #gesCalcRoot.ges-villa #villa-yatirim-field{ display:none !important; }
  #gesCalcRoot .field:has(> .input-row > #konstruksiyonSayisi), .field:has(#konstruksiyonSayisi), .field:has([data-rp="konstruksiyonSayisi"]){ display:none !important; }   /* 126. parti (madde 7): tüm modlar ve rapor */
  #genelParamPanel > .panel-body{ display:block !important; }
  #genelParamPanel > .panel-body > .field{ display:grid !important; grid-template-columns:minmax(150px,34%) minmax(0,1fr); align-items:center; column-gap:14px;
    margin:0 !important; padding:4px 8px; border-top:1px solid #e6ebef; min-height:34px; box-sizing:border-box; }
  #genelParamPanel > .panel-body > .field > label{ margin:0; color:#4a5a66; }
  #genelParamPanel > .panel-body > .field .input-row{ max-width:440px; position:relative; }
  #genelParamPanel > .panel-body > .field input{ height:27px !important; box-sizing:border-box !important; padding-top:0 !important; padding-bottom:0 !important; }
  #gesCalcRoot.ges-salt-okunur #genelParamPanel .field .input-row, #genelParamPanel .field .input-row:has(> [disabled]){ display:block; }
  #gesCalcRoot.ges-salt-okunur #genelParamPanel .field .input-row > input, #genelParamPanel .field .input-row > [disabled]{ border-color:transparent !important; background:transparent !important; box-shadow:none !important; padding-left:0 !important;
    width:100% !important; color:var(--ink) !important; -webkit-text-fill-color:var(--ink); font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif !important; font-size:12.5px !important; }
  #gesCalcRoot.ges-salt-okunur #genelParamPanel .field .unit, #genelParamPanel .field .input-row:has(> [disabled]) .unit{ position:absolute !important; right:11px !important; top:50% !important; transform:translateY(-50%) !important; }
  /* 107. parti: teklifte Müşteri / Sistem Bilgileri adımları salt okunur (bilgiler müşteri kaydından gelir) */
  .ges-adim-salt .field :is(input,select,textarea){ pointer-events:none; }
  /* ===== 109. parti: ORTAK TABLO STİLİ (hesaplayıcı + rapor tabloları) =====
     Tek ortak stil; month-table, ledger, invoice, flow-legend, sim-tbl, mvz-ozet bu değişkenlere bağlı.
     Renk paleti mevcut tema değişkenlerinden türetilir (açık/koyu tema uyumlu). */
  :root{
    --tb-fs:12.5px; --tb-head-fs:12.5px;
    --tb-head-bg:var(--surface-2); --tb-head-ink:var(--ink-soft); --tb-head-line:var(--line-strong);
    --tb-line:var(--line);
    --tb-zebra:color-mix(in srgb, var(--ink) 4.5%, transparent);
    --tb-hover:color-mix(in srgb, var(--accent-2) 8%, transparent);
    --tb-vurgu-bg:color-mix(in srgb, var(--ink) 8%, var(--surface));
    --tb-vurgu-line:var(--line-strong);
  }
  @media screen{
    table.month-table thead th, table.invoice thead th, table.flow-legend th, #simulasyonPanel table.sim-tbl th{
      font-size:var(--tb-head-fs); font-weight:600; text-transform:none; letter-spacing:0;
      color:var(--tb-head-ink); background:var(--tb-head-bg); border-bottom:1px solid var(--tb-head-line); line-height:1.3;
    }
    table.month-table thead th, table.flow-legend th{ padding-top:8px; padding-bottom:8px; }
    #mevzuatUyumKart table.mvz-ozet td{ border-top-color:var(--tb-line); }
    #mevzuatUyumKart table.mvz-ozet td:first-child{ color:var(--ink-soft); }
  }
  /* Zebra + üzerine gelince vurgu */
  /* 177. parti: tablolarda zebra satır rengi yok — tüm satırlar beyaz */
  /* 178. parti: Panel Yerleşim Bilgileri, Konstrüksiyon Malzeme Listesi ve Malzeme ve Hizmetler — başlıklar ortalı, Miktar / Birim hücreleri ortalı */
  :is(#panelYerlesimBilgiPanel, [data-rp="panelYerlesimBilgiPanel"], #demirMalzemePanel, [data-rp="demirMalzemePanel"], #malzemePanel, [data-rp="malzemePanel"]) table > thead > tr > th{ text-align:center !important; }
  :is(#panelYerlesimBilgiPanel, [data-rp="panelYerlesimBilgiPanel"]) table > tbody > tr > td{ text-align:center !important; }   /* 179. parti: yerleşim tablosunda tüm sütunlar ortalı */
  table.invoice td.mz-miktar, table.invoice td.mz-birim, table.invoice td.mz-miktar :is(input, div, span), table.invoice td.mz-birim :is(input, div, span){ text-align:center !important; }
  /* 177. parti: Malzeme ve Hizmetler — Miktar / Birim sütunları dar */
  :is(#malzemeTable, [data-rp="malzemeTable"]){ table-layout:fixed; width:100%; }
  table.invoice th.mz-kalem{ width:30%; } :is(#malzemeTable, [data-rp="malzemeTable"]) th.no-print{ width:30px; } table.invoice th.mz-miktar, table.invoice th.mz-birim{ width:76px; }
  :is(table.month-table, table.invoice, table.flow-legend, table.sim-tbl) > tbody > tr:hover > :is(td, th){ background-color:var(--tb-hover); }
  /* 110. parti: Birim fiyat/enerji/nakit akışı listeleri (ledger) ve Mevzuat Uygunluğu (mvz-ozet) zebrasız */
  /* Toplam / önemli satırlar — her tabloda aynı vurgu */
  :is(table.month-table, table.ledger, table.invoice, table.flow-legend, table.sim-tbl, table.mvz-ozet) tr:is(.tot, .emph, .hl, .mvz-vurgu, .tb-toplam) > :is(td, th),
  :is(table.month-table, table.ledger, table.invoice, table.flow-legend, table.sim-tbl, table.mvz-ozet) > tfoot > tr > :is(td, th){
    background-color:var(--tb-vurgu-bg) !important; font-weight:700; color:var(--ink);
    border-top:1.5px solid var(--tb-vurgu-line);
  }
  table.ledger tr.emph > td{ padding-left:8px; padding-right:8px; }
  /* 112. parti: ledger'daki emph satırlar (Net şebekeye satış birim fiyatı, Hesaplanan toplam yıllık tasarruf) diğer satırlarla aynı görünsün */
  table.ledger tr.emph > td{ background-color:transparent !important; border-top:none; border-bottom:1px solid var(--line); padding-top:6px; font-weight:400; color:var(--ink-soft); }
  table.ledger tr.emph > td.v{ font-weight:600; font-size:inherit; color:inherit; }
  table.ledger tr.emph > td.v input{ font-weight:inherit !important; font-size:inherit !important; }
  table.ledger > tbody > tr > td:first-child{ padding-left:8px; } table.ledger > tbody > tr > td:last-child{ padding-right:8px; }
  /* Telefonda geniş tablolar taşmasın: kaydırılabilir kutu */
  .tb-kaydir{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
  @media (max-width:760px){
    .invoice-wrap, .sim-tblwrap, .tb-kaydir{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
    table.flow-legend td.flow-name, table.flow-legend td.flow-val{ white-space:normal; }
    table.flow-legend th, table.flow-legend td{ padding-left:5px; padding-right:5px; }
    table.flow-legend td.flow-desc{ overflow-wrap:anywhere; }
  }
  /* Baskı / PDF: tablo bölünmesin (sayfadan uzunsa bölünür, başlık tekrar eder), satır asla bölünmez */
  @media print{
    :is(table.month-table, table.ledger, table.invoice, table.flow-legend, table.sim-tbl, table.mvz-ozet){ break-inside:avoid; page-break-inside:avoid; }
    :is(table.month-table, table.ledger, table.invoice, table.flow-legend, table.sim-tbl, table.mvz-ozet) > thead{ display:table-header-group; }
    :is(table.month-table, table.ledger, table.invoice, table.flow-legend, table.sim-tbl, table.mvz-ozet) > tfoot{ display:table-footer-group; }
    :is(table.month-table, table.ledger, table.invoice, table.flow-legend, table.sim-tbl, table.mvz-ozet) tr{ break-inside:avoid; page-break-inside:avoid; }
    :is(table.month-table, table.ledger, table.invoice, table.flow-legend, table.sim-tbl, table.mvz-ozet) > tbody > tr:hover > :is(td, th){ background-color:transparent; }
    *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  }