/* azatech – GÜNLÜK İŞ EKRANLARI YENİDEN TASARIM (6 Kasım)
 * Kapsam: Bugün · Özet · Potansiyel müşteriler · Teklifler · Teklif oluştur · Satışlar.
 * Bu ekranların JS çıktısı (bugun.js, ozet.js, basvuru.js, teklifler.js, satis.js listesi) yeni yerleşime göre yeniden yazıldı; veri, alan, düğme ve metinler aynıdır.
 * Renk TANIMLAMAZ: yalnız tema değişkenleri (--navy, --line, --panel, --ink, --mut, --red, --green, --amber). 9 tema ve RTL çalışır (mantıksal özellikler).
 * Ölçek: aralık 4·8·12·16·24·32 · yazı 12·13·14·16·22·28 · köşe 8 (denetim) / 12 (kutu). satis-tasarim.css'ten SONRA yüklenir.
 * Kapsayıcı: <main data-v="bugun|ozet|basvuru|teklifler|satislar|plan"> (kabuk yazar); aşağıda GT = bu altı ekranın birleşimi. */

/* ================= ORTAK: sayfa ritmi, kutu, denetim ================= */
:is(#app main[data-v="bugun"], #app main[data-v="ozet"], #app main[data-v="basvuru"], #app main[data-v="teklifler"], #app main[data-v="satislar"]) {
  --gt-zemin: color-mix(in srgb, var(--navy) 4%, var(--panel, #fff));
  --gt-vurgu: color-mix(in srgb, var(--navy) 7%, var(--panel, #fff));
  --gt-cizgi: color-mix(in srgb, var(--navy) 9%, var(--line));
  --gt-amber: var(--amber, #a86a00);
  --gt-green: var(--green, #1a7f4b);
  --gt-kutu: var(--r-lg, 12px);
}
/* kutu başlığı: küçük, sakin; sayı rozeti sağda */
:is(#app main[data-v="bugun"], #app main[data-v="ozet"]) :is(.dt-b, .box) > h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; font-size: 14px; font-weight: 650; letter-spacing: 0; color: var(--ink); }
:is(#app main[data-v="bugun"], #app main[data-v="ozet"]) :is(.dt-b, .box) > h3 small { margin: 0; font-size: 12px; font-weight: 400; color: var(--mut); }

/* ================= BUGÜN ================= */
#app main[data-v="bugun"] .dt-sayfa { display: grid; gap: 16px; padding: 0; max-width: none; }
#app main[data-v="bugun"] .dt-sayfa > * { margin: 0; min-width: 0; }
#app main[data-v="bugun"] .gt-bas { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; padding: 4px 0 0; }
#app main[data-v="bugun"] .gt-bas-m { display: grid; gap: 2px; }
#app main[data-v="bugun"] .gt-gun { font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
#app main[data-v="bugun"] .gt-bas h2 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 650; letter-spacing: -.02em; color: var(--ink); }
#app main[data-v="bugun"] .gt-kisi { font-size: 13px; color: var(--mut); }
#app main[data-v="bugun"] .gt-dug { display: flex; flex-wrap: wrap; gap: 8px; }
#app main[data-v="bugun"] .gt-dug .btn-k { min-height: 36px; padding: 0 14px; border-radius: 8px; font-size: 13px; }
#app main[data-v="bugun"] .gt-dug .btn-k-ana:hover { filter: brightness(1.12); }
/* bekleyenler şeridi: tek satır, sakin */
#app main[data-v="bugun"] .bg-ozet { margin: 0; padding: 10px 14px; border-radius: var(--gt-kutu); background: var(--gt-zemin); border-color: var(--gt-cizgi); }
#app main[data-v="bugun"] .bg-oz-b { font-size: 12px; letter-spacing: .06em; }
#app main[data-v="bugun"] .bg-oz-c { min-height: 32px; align-items: center; border-radius: 999px; transition: border-color var(--hrk), background var(--hrk); }
#app main[data-v="bugun"] .bg-oz-c:hover { background: var(--gt-vurgu); }
/* KPI şeridi: tıklanır karolar */
#app main[data-v="bugun"] .gt-kpi-s { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; }
#app main[data-v="bugun"] .gt-kpi-s:empty { display: none; }
#app main[data-v="bugun"] .gt-kpi { display: grid; gap: 4px; align-content: start; padding: 14px 16px; background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--gt-kutu); box-shadow: var(--g-1); color: var(--ink); text-decoration: none; transition: border-color var(--hrk), box-shadow var(--hrk), transform var(--hrk); }
#app main[data-v="bugun"] .gt-kpi:hover { border-color: color-mix(in srgb, var(--navy) 35%, var(--line)); box-shadow: var(--g-2); }
#app main[data-v="bugun"] .gt-kpi:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
#app main[data-v="bugun"] .gt-kpi span { font-size: 12px; font-weight: 600; color: var(--mut); line-height: 1.3; }
#app main[data-v="bugun"] .gt-kpi b { font-size: 28px; line-height: 1.1; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
#app main[data-v="bugun"] .gt-kpi.is-kotu b { color: var(--red); }
#app main[data-v="bugun"] .gt-kpi.is-uyari b { color: var(--gt-amber); }
#app main[data-v="bugun"] .gt-kpi.is-iyi b { color: var(--gt-green); }
/* karar bekleyenler: yatay şerit */
#app main[data-v="bugun"] .bg-karar { padding: 14px 16px; border: 1px solid var(--line); border-inline-start: 3px solid var(--navy); border-radius: var(--gt-kutu); background: var(--panel, #fff); box-shadow: var(--g-1); }
#app main[data-v="bugun"] .bg-karar > h3 { margin-bottom: 10px; }
#app main[data-v="bugun"] .bg-karar-l { display: flex; flex-wrap: wrap; gap: 8px; }
#app main[data-v="bugun"] .bg-kk { min-height: 40px; padding: 6px 14px; gap: 8px; border-radius: 10px; background: var(--gt-zemin); border-color: var(--gt-cizgi); transition: border-color var(--hrk), background var(--hrk); }
#app main[data-v="bugun"] .bg-kk:hover { background: var(--gt-vurgu); border-color: color-mix(in srgb, var(--navy) 35%, var(--line)); }
#app main[data-v="bugun"] .bg-kk b { font-size: 18px; }
/* iki sütun: işler (geniş) + kenar (dar); tek sütuna iner */
#app main[data-v="bugun"] .gt-iki { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
#app main[data-v="bugun"] .gt-ana, #app main[data-v="bugun"] .gt-yan { display: grid; gap: 16px; min-width: 0; }
#app main[data-v="bugun"] .gt-iki .dt-b { margin: 0; padding: 16px 20px; background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--gt-kutu); box-shadow: var(--g-1); }
@media (max-width: 1020px) { #app main[data-v="bugun"] .gt-iki { grid-template-columns: minmax(0, 1fr); } }
/* iş satırı: saat · başlık · eylem */
#app main[data-v="bugun"] .bg-l li { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gt-cizgi); }
#app main[data-v="bugun"] .bg-l li:first-child { padding-top: 0; }
#app main[data-v="bugun"] .bg-l li:last-child { padding-bottom: 0; border-bottom: 0; }
#app main[data-v="bugun"] .bg-saat { display: grid; gap: 1px; justify-items: start; align-self: start; padding-top: 2px; font-size: 13px; font-weight: 650; color: var(--navy); font-variant-numeric: tabular-nums; }
#app main[data-v="bugun"] .bg-saat em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--mut); }
#app main[data-v="bugun"] #bgGec .bg-saat { color: var(--red); }
#app main[data-v="bugun"] .bg-l b { font-size: 14px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
#app main[data-v="bugun"] .bg-l small { display: block; margin-top: 2px; font-size: 12px; color: var(--mut); overflow-wrap: anywhere; }
#app main[data-v="bugun"] .bg-l .link { font-size: 13px; text-decoration: none; }
#app main[data-v="bugun"] .bg-act { gap: 4px; align-self: start; }
#app main[data-v="bugun"] .bg-act .link[data-hizli] { min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel, #fff); color: var(--ink); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
#app main[data-v="bugun"] .bg-act .link[data-hizli]:hover { background: var(--gt-vurgu); border-color: color-mix(in srgb, var(--navy) 30%, var(--line)); }
/* boş / yükleniyor / hata durumu */
#app main[data-v="bugun"] .dt-b > .bg-ic > p.help, #app main[data-v="bugun"] .dt-b > p.help { margin: 0; padding: 12px; border-radius: 8px; background: var(--gt-zemin); color: var(--mut); font-size: 13px; text-align: center; }
#app main[data-v="bugun"] .bg-ic > p.help:not(:only-child) { margin-top: 10px; padding: 0; background: none; text-align: start; }
#app main[data-v="bugun"] .bg-l + p.help { padding: 0; background: none; text-align: start; margin-top: 10px; }
/* hedef çubukları */
#app main[data-v="bugun"] .kk-bar { grid-template-columns: minmax(0, 1fr) 64px; gap: 4px 12px; margin: 0 0 12px; }
#app main[data-v="bugun"] .kk-bar > span { grid-column: 1 / -1; font-size: 13px; font-weight: 600; }
#app main[data-v="bugun"] .kk-bar > i { height: 6px; }
#app main[data-v="bugun"] .kk-bar > em { font-style: normal; font-size: 12px; color: var(--mut); text-align: end; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  #app main[data-v="bugun"] .gt-bas h2 { font-size: 24px; }
  #app main[data-v="bugun"] .gt-dug { width: 100%; }
  #app main[data-v="bugun"] .gt-dug .btn-k { flex: 1 1 0; justify-content: center; min-height: 40px; }
  #app main[data-v="bugun"] .gt-kpi-s { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #app main[data-v="bugun"] .gt-kpi { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; min-height: 48px; }
  #app main[data-v="bugun"] .gt-kpi b { font-size: 20px; }
  #app main[data-v="bugun"] .gt-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  #app main[data-v="bugun"] .gt-iki .dt-b { padding: 14px 16px; }
  #app main[data-v="bugun"] .bg-l li { grid-template-columns: 52px minmax(0, 1fr); }
  #app main[data-v="bugun"] .bg-l .bg-act { grid-column: 2; }
}

/* ================= LİSTE EKRANLARI (Potansiyel müşteriler · Teklifler · Satışlar) ================= */
/* kişi hücresi: avatar + ad + ince satırlar */
:is(#app main[data-v="basvuru"], #app main[data-v="teklifler"], #app main[data-v="satislar"]) .bv-k { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
:is(#app main[data-v="basvuru"], #app main[data-v="teklifler"], #app main[data-v="satislar"]) .gt-av { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--navy) 10%, var(--panel, #fff)); color: var(--navy); font-size: 12px; font-weight: 650; font-style: normal; letter-spacing: .02em; }
:is(#app main[data-v="basvuru"], #app main[data-v="teklifler"], #app main[data-v="satislar"]) .bv-k-m { display: grid; gap: 2px; min-width: 0; }
:is(#app main[data-v="basvuru"], #app main[data-v="teklifler"], #app main[data-v="satislar"]) .bv-k-m > b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 650; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
:is(#app main[data-v="teklifler"], #app main[data-v="satislar"]) .gt-no { font-size: 12px; color: var(--mut); }
:is(#app main[data-v="teklifler"], #app main[data-v="satislar"]) .gt-no b { display: inline; color: var(--ink); font-weight: 650; -webkit-line-clamp: unset; }
:is(#app main[data-v="basvuru"], #app main[data-v="teklifler"], #app main[data-v="satislar"]) table.tk td > small, :is(#app main[data-v="basvuru"], #app main[data-v="teklifler"], #app main[data-v="satislar"]) table.tk .bv-k-m > small { display: block; font-size: 12px; line-height: 1.4; color: var(--mut); }
:is(#app main[data-v="basvuru"], #app main[data-v="teklifler"], #app main[data-v="satislar"]) table.tk td { vertical-align: top; padding: 14px 12px; }
:is(#app main[data-v="basvuru"], #app main[data-v="teklifler"], #app main[data-v="satislar"]) table.tk td.n { padding-top: 16px; }
:is(#app main[data-v="basvuru"], #app main[data-v="teklifler"], #app main[data-v="satislar"]) table.tk td.dst { white-space: normal; padding-top: 16px; }
:is(#app main[data-v="basvuru"], #app main[data-v="teklifler"], #app main[data-v="satislar"]) table.tk td.dst > small { margin-top: 4px; }
:is(#app main[data-v="basvuru"], #app main[data-v="teklifler"], #app main[data-v="satislar"]) table.tk td.acts { padding-top: 12px; }
:is(#app main[data-v="teklifler"], #app main[data-v="satislar"]) table.tk td.gt-mus { min-width: 280px; }
:is(#app main[data-v="teklifler"], #app main[data-v="satislar"]) table.tk tr.bekliyor td:first-child { box-shadow: inset 3px 0 0 var(--gt-amber); }
:is(#app main[data-v="teklifler"], #app main[data-v="satislar"]) table.tk tr.bekliyor td { background: color-mix(in srgb, var(--gt-amber) 4%, var(--panel, #fff)); }
:is(#app main[data-v="teklifler"], #app main[data-v="satislar"]) table.tk tr.bekliyor:hover td { background: color-mix(in srgb, var(--gt-amber) 8%, var(--panel, #fff)); }
/* ince satırlar kısaltılmaz: ikinci satıra iner */
:is(#app main[data-v="basvuru"], #app main[data-v="teklifler"], #app main[data-v="satislar"]) table.tk td .by, :is(#app main[data-v="basvuru"], #app main[data-v="teklifler"], #app main[data-v="satislar"]) table.tk td .by.tek { display: block; max-width: none; white-space: normal; overflow: visible; text-overflow: clip; -webkit-line-clamp: unset; }
/* teklif / satış tutarı: ana satır koyu, ikinci para birimi gri */
:is(#app main[data-v="teklifler"], #app main[data-v="satislar"]) table.tk td.n { white-space: nowrap; font-weight: 600; color: var(--ink); }
:is(#app main[data-v="teklifler"], #app main[data-v="satislar"]) table.tk td.n .ap-ikinci, :is(#app main[data-v="teklifler"], #app main[data-v="satislar"]) table.tk td.n small { font-weight: 400; color: var(--mut); }

/* potansiyel müşteri: iletişim kapsülleri, dil/proje, kapanış notu */
#app main[data-v="basvuru"] .bv-pills { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#app main[data-v="basvuru"] .bv-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel, #fff); color: var(--ink); font-size: 13px; font-weight: 550; text-decoration: none; white-space: nowrap; transition: background var(--hrk), border-color var(--hrk); }
#app main[data-v="basvuru"] .bv-pill:hover { background: var(--gt-vurgu); border-color: color-mix(in srgb, var(--navy) 35%, var(--line)); }
#app main[data-v="basvuru"] .bv-pill .gt-ik { color: var(--navy); flex: none; }
#app main[data-v="basvuru"] .bv-wa { font-size: 12px; color: var(--mut); }
#app main[data-v="basvuru"] .bv-d1 { display: block; font-size: 14px; font-weight: 550; }
#app main[data-v="basvuru"] .bv-kisi { min-width: 280px; }
#app main[data-v="basvuru"] .bv-kisi > small { margin-top: 2px; }
#app main[data-v="basvuru"] .bv-kisi > small:first-of-type { margin-top: 8px; }
#app main[data-v="basvuru"] .bv-kvkk { opacity: .85; }
#app main[data-v="basvuru"] .bv-not { padding: 6px 10px; margin-top: 6px; border-inline-start: 2px solid color-mix(in srgb, var(--navy) 25%, var(--line)); background: var(--gt-zemin); border-radius: 0 6px 6px 0; color: var(--ink); }
[dir="rtl"] #app main[data-v="basvuru"] .bv-not { border-radius: 6px 0 0 6px; }
#app main[data-v="basvuru"] .bv-soguk { color: var(--gt-amber); font-weight: 600; }
#app main[data-v="basvuru"] .bv-gec { color: var(--red); font-weight: 600; }
#app main[data-v="basvuru"] table.tk tr.late td:first-child { box-shadow: inset 3px 0 0 var(--red); }
#app main[data-v="basvuru"] table.tk td.bv-ac select[data-neden] { min-width: 112px; }
/* araç çubuğu: arama + süzgeç tek ritim */
:is(#app main[data-v="basvuru"], #app main[data-v="teklifler"], #app main[data-v="satislar"]) .tk-bar { margin-bottom: 16px; }
:is(#app main[data-v="basvuru"], #app main[data-v="teklifler"], #app main[data-v="satislar"]) .tk-bar input[type=search] { flex: 1 1 280px; max-width: 360px; }

/* ================= TELEFON: tablo satırı = kart (uzun etiket/değer listesi yerine ana bilgi öne) ================= */
@media (max-width: 640px) {
  :is(#main[data-v="basvuru"], #main[data-v="teklifler"], #main[data-v="satislar"]) table.mt-kart.tk tr { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 14px; margin: 0 0 12px; border-radius: var(--gt-kutu); }
  :is(#main[data-v="basvuru"], #main[data-v="teklifler"], #main[data-v="satislar"]) table.mt-kart.tk td { display: block; grid-column: 1 / -1; padding: 0; border: 0; text-align: start; width: auto; background: transparent; }
  :is(#main[data-v="basvuru"], #main[data-v="teklifler"], #main[data-v="satislar"]) table.mt-kart.tk td::before { display: none; }
  :is(#main[data-v="basvuru"], #main[data-v="teklifler"], #main[data-v="satislar"]) table.mt-kart.tk td > .mt-v { display: block; text-align: start; }
  :is(#main[data-v="teklifler"], #main[data-v="satislar"]) table.mt-kart.tk td.n { grid-column: auto; display: grid; gap: 2px; align-content: start; }
  :is(#main[data-v="teklifler"], #main[data-v="satislar"]) table.mt-kart.tk td.n::before { display: block; content: attr(data-et); max-width: none; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); }
  :is(#main[data-v="basvuru"], #main[data-v="teklifler"], #main[data-v="satislar"]) table.mt-kart.tk td.dst { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; grid-column: auto; width: auto; max-width: 46%; text-align: end; padding: 0; }
  :is(#main[data-v="basvuru"], #main[data-v="teklifler"], #main[data-v="satislar"]) table.mt-kart.tk td.dst > .mt-v { text-align: end; }
  :is(#main[data-v="basvuru"], #main[data-v="teklifler"], #main[data-v="satislar"]) table.mt-kart.tk td:is(.gt-mus, .bv-kisi) { padding-inline-end: 112px; min-width: 0; }
  :is(#main[data-v="basvuru"], #main[data-v="teklifler"], #main[data-v="satislar"]) table.mt-kart.tk td.acts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--gt-cizgi); }
  #main[data-v="basvuru"] table.mt-kart.tk td.bv-dil { font-size: 13px; }
}

/* ================= KPI ŞERİDİ: bitişik hücreler, ince ayraç (Satışlar · Özet) ================= */
:is(#app main[data-v="satislar"] .sl-k, #app main[data-v="ozet"] .oz-kpi) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0; margin: 0 0 16px; background: var(--panel, #fff); border: 1px solid var(--gt-cizgi); border-radius: var(--gt-kutu); overflow: hidden; box-shadow: var(--g-1); }
:is(#app main[data-v="satislar"] .sl-k, #app main[data-v="ozet"] .oz-kpi) > .kpi { border: 0; border-radius: 0; box-shadow: 1px 0 0 0 var(--gt-cizgi), 0 1px 0 0 var(--gt-cizgi); background: transparent; padding: 14px 18px; gap: 2px; }
#app main[data-v="satislar"] .sl-k > .kpi > b { font-size: clamp(18px, 12cqi, 22px); }
#app main[data-v="ozet"] .oz-kpi > .kpi > b { font-size: clamp(20px, 14cqi, 28px); letter-spacing: -.02em; }
#app main[data-v="ozet"] .oz-durum.oz-kpi.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { #app main[data-v="ozet"] .oz-durum.oz-kpi.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================= ÖZET ================= */
#app main[data-v="ozet"].oz-app { padding: 0 18px 32px; }
#app main[data-v="ozet"] .oz-durum { position: relative; padding-bottom: 8px; }
/* stok dağılımı: tek şerit (satışta · opsiyon · rezerve · satıldı) */
#app main[data-v="ozet"] .oz-dagilim { grid-column: 1 / -1; display: flex; gap: 2px; height: 14px; padding: 6px 18px 0; }
#app main[data-v="ozet"] .oz-dagilim i { display: block; height: 8px; min-width: 0; border-radius: 99px; }
#app main[data-v="ozet"] .od-SATILIK { background: var(--gt-green); }
#app main[data-v="ozet"] .od-OPS { background: var(--gt-amber); }
#app main[data-v="ozet"] .od-RESERVED { background: color-mix(in srgb, var(--gt-amber) 45%, var(--navy)); }
#app main[data-v="ozet"] .od-SATILDI { background: var(--navy); }
#app main[data-v="ozet"] .oz-durum > .kpi { position: relative; }
#app main[data-v="ozet"] .oz-durum > .kpi::before { content: ""; position: absolute; inset-block-start: 16px; inset-inline-end: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--gt-green); }
#app main[data-v="ozet"] .oz-durum > .kpi.oz-OPS::before { background: var(--gt-amber); }
#app main[data-v="ozet"] .oz-durum > .kpi.oz-RESERVED::before { background: color-mix(in srgb, var(--gt-amber) 45%, var(--navy)); }
#app main[data-v="ozet"] .oz-durum > .kpi.oz-SATILDI::before { background: var(--navy); }
#app main[data-v="ozet"] .oz-para { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
#app main[data-v="ozet"] .pendbar { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 0 16px; padding: 0 16px; border-radius: var(--gt-kutu); border: 1px solid color-mix(in srgb, var(--gt-amber) 45%, var(--line)); background: color-mix(in srgb, var(--gt-amber) 8%, var(--panel, #fff)); color: var(--ink); font-size: 14px; font-weight: 650; cursor: pointer; }
#app main[data-v="ozet"] .pendbar:hover { background: color-mix(in srgb, var(--gt-amber) 13%, var(--panel, #fff)); }
#app main[data-v="ozet"] .box { margin: 0 0 16px; padding: 18px 20px; border-radius: var(--gt-kutu); }
#app main[data-v="ozet"] .box > .stat-grid { margin-bottom: 12px; }
#app main[data-v="ozet"] .box > .stat-grid + .link, #app main[data-v="ozet"] .box > .link { font-size: 13px; font-weight: 600; color: var(--navy); text-decoration: none; padding: 4px 0; }
#app main[data-v="ozet"] .box > .link:hover { text-decoration: underline; }
#app main[data-v="ozet"] .box > p.help { padding: 12px 14px; border-radius: 8px; background: var(--gt-zemin); color: var(--mut); font-size: 13px; max-width: none; }
#app main[data-v="ozet"] .stat-grid > .stat { background: var(--gt-zemin); box-shadow: none; border-color: var(--gt-cizgi); }
#app main[data-v="ozet"] .stat-grid > .stat.is-vurgu { background: color-mix(in srgb, var(--navy) 8%, var(--panel, #fff)); border-color: color-mix(in srgb, var(--navy) 22%, var(--line)); }
/* tablolar: sığar, taşmaz (kaydırma çubuğu yok) */
#app main[data-v="ozet"] table.mx { width: 100%; table-layout: auto; border-collapse: collapse; font-size: 13px; }
#app main[data-v="ozet"] table.mx th { padding: 8px 10px; border-bottom: 1px solid var(--gt-cizgi); font-size: 12px; font-weight: 600; color: var(--mut); white-space: normal; vertical-align: bottom; background: transparent; }
#app main[data-v="ozet"] table.mx td { padding: 10px; border-bottom: 1px solid var(--gt-cizgi); font-variant-numeric: tabular-nums; max-width: none; }
#app main[data-v="ozet"] table.mx tbody tr:last-child td { border-bottom: 0; }
#app main[data-v="ozet"] table.mx tbody tr:hover td { background: var(--gt-zemin); }
#app main[data-v="ozet"] table.mx .n { text-align: end; }
#app main[data-v="ozet"] .oz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
#app main[data-v="ozet"] .oz-grid > .box { margin: 0; min-width: 0; }
#app main[data-v="ozet"] .oz-grid > .oz-genis { grid-column: 1 / -1; }
@media (max-width: 900px) { #app main[data-v="ozet"] .oz-grid { grid-template-columns: minmax(0, 1fr); } }
/* kat doluluk çubukları */
#app main[data-v="ozet"] .bars { display: grid; gap: 8px; }
#app main[data-v="ozet"] .bar { display: grid; grid-template-columns: 84px minmax(0, 1fr) 92px; gap: 12px; align-items: center; font-size: 13px; }
#app main[data-v="ozet"] .bar .track { height: 8px; border-radius: 99px; background: var(--gt-vurgu); overflow: hidden; display: flex; }
#app main[data-v="ozet"] .bars + p.help { margin-top: 12px; padding: 0; background: none; text-align: start; font-size: 12px; }
#app main[data-v="ozet"] .lg-s, #app main[data-v="ozet"] .lg-r { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline: 8px 4px; }
#app main[data-v="ozet"] .lg-s { background: var(--navy); } #app main[data-v="ozet"] .lg-r { background: var(--gt-amber); }
#app main[data-v="ozet"] .bar small { text-align: end; color: var(--mut); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#app main[data-v="ozet"] .bar .b-s { background: var(--navy); } #app main[data-v="ozet"] .bar .b-r { background: var(--gt-amber); }
@media (max-width: 640px) {
  #app main[data-v="ozet"] .box { padding: 14px 16px; }
  #app main[data-v="ozet"] .oz-box-tablo, #app main[data-v="ozet"] .oz-genis { overflow-x: auto; }
  #app main[data-v="ozet"] .bar { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px; }
}

/* ================= TEKLİF OLUŞTUR (sihirbaz): form kartı + önizleme sahnesi ================= */
@media (min-width: 861px) {
  #app main[data-v="plan"].plan-view { grid-template-columns: 380px minmax(0, 1fr); gap: 24px; align-items: start; padding: 12px 18px 32px; }
  #app main[data-v="plan"] > aside.ctl { position: sticky; top: 12px; background: var(--panel, #fff); border: 1px solid var(--line); border-radius: var(--r-lg, 12px); box-shadow: var(--g-1); padding: 20px; }
  #app main[data-v="plan"] > .stage { background: color-mix(in srgb, var(--navy) 5%, var(--bg, #f4f2ef)); border: 1px dashed var(--line); border-radius: var(--r-lg, 12px); min-height: 420px; padding: 24px; }
}
#app main[data-v="plan"] .sbz-adimlar { margin-bottom: 16px; }
#app main[data-v="plan"] fieldset.grp, #app main[data-v="plan"] fieldset.plans { border: 0; padding: 0; margin: 0 0 20px; }
#app main[data-v="plan"] fieldset legend { padding: 0; margin-bottom: 8px; font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
#app main[data-v="plan"] aside.ctl :is(input, select, textarea):not([type=checkbox]):not([type=radio]) { min-height: 40px; border-radius: 8px; border: 1px solid var(--line); font-size: 14px; }
#app main[data-v="plan"] aside.ctl :is(input, select):focus-visible { outline: 0; border-color: var(--navy); box-shadow: 0 0 0 3px color-mix(in srgb, var(--navy) 16%, transparent); }
#app main[data-v="plan"] aside.ctl fieldset.cust > * + * { margin-top: 8px; }
#app main[data-v="plan"] label.bb input { font-size: 18px; font-weight: 650; }
#app main[data-v="plan"] .stage .page { box-shadow: var(--g-2); border-radius: 4px; }