/* Ortak ekran takımı. Değişken adları Hızlı Teklif ile aynı (--zemin, --kart, --yazi, --soluk, --cizgi, --ana);
   tema Yönetim'den değiştirilecekse yalnızca bu değişkenler değişir. Tasarım önce telefona göre. */
:root {
  --zemin: #f2f4f8; --kart: #ffffff; --yazi: #16202d; --soluk: #5b6878; --cizgi: #d5dbe4;
  --ana: #1d4f91; --ana-yazi: #ffffff; --secili: #e4edf9;
  --iyi: #1f7a44; --kotu: #b3261e; --uyari-zemin: #fff4d6; --uyari-yazi: #6b4a00;
  --r: 10px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --zemin: #0f141b; --kart: #18202a; --yazi: #e7ecf2; --soluk: #9aa6b5; --cizgi: #2b3644;
    --ana: #74a7ea; --ana-yazi: #0b1420; --secili: #1e3250;
    --iyi: #6fcf97; --kotu: #f28b82; --uyari-zemin: #3a2f10; --uyari-yazi: #f3d98a;
    color-scheme: dark;
  }
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--zemin); color: var(--yazi); font: 16px/1.4 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif }
[hidden] { display: none !important }
h1 { font-size: 20px; margin: 0 } h2 { font-size: 17px; margin: 0 0 10px } p { margin: 0 0 10px }
a { color: var(--ana) }

.ust { position: sticky; top: 0; z-index: 5; background: var(--kart); border-bottom: 1px solid var(--cizgi);
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; display: flex; align-items: center; gap: 8px; min-height: 56px }
.ust h1 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ust .kim { color: var(--soluk); font-size: 13px; text-align: right; line-height: 1.2 }
.govde { max-width: 1000px; margin: 0 auto; padding: 14px 16px calc(40px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px }
.serit { background: var(--uyari-zemin); color: var(--uyari-yazi); padding: 8px 16px; display: flex; gap: 10px; align-items: center; justify-content: space-between; font-size: 14px }

.btn { background: var(--ana); color: var(--ana-yazi); border: 0; border-radius: var(--r); padding: 12px 16px; font: inherit; font-weight: 600; cursor: pointer; min-height: 46px }
.btn.ikincil { background: transparent; color: var(--ana); border: 1.5px solid var(--ana) }
.btn.sade { background: transparent; color: var(--ana); padding: 10px; min-height: 44px }
.btn.kucuk { min-height: 38px; padding: 8px 12px; font-size: 14px }
.btn:disabled { opacity: .5; cursor: default }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--ana); outline-offset: 2px }

.kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 14px }
.dar { max-width: 420px; margin: 8vh auto 0; width: 100% }
.alan { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--soluk); margin-bottom: 10px }
.alan input, .alan select, .alan textarea { font: inherit; color: var(--yazi); background: var(--kart); border: 1.5px solid var(--cizgi); border-radius: var(--r);
  padding: 11px 12px; min-height: 46px; width: 100% }
.alan textarea { min-height: 90px; resize: vertical }
.ikili { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 12px }
.dugmeler { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px }
.hata { color: var(--kotu); font-size: 14px; margin: 4px 0 }
.soluk { color: var(--soluk) } .kucuk-yazi { font-size: 13px }

/* Ana menü: büyük dokunma alanlı modül kutuları */
.moduller { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px }
.modul { display: flex; flex-direction: column; gap: 4px; text-align: left; background: var(--kart); color: var(--yazi); border: 1px solid var(--cizgi);
  border-radius: var(--r); padding: 16px 14px; min-height: 104px; font: inherit; cursor: pointer; text-decoration: none }
.modul b { font-size: 17px } .modul span { color: var(--soluk); font-size: 13px }
.modul em { font-style: normal; font-size: 12px; color: var(--uyari-yazi); background: var(--uyari-zemin); border-radius: 999px; padding: 2px 8px; align-self: flex-start; margin-top: auto }
.modul.yakinda { opacity: .75 }

/* Liste satırları (telefonda kart gibi) */
.liste { display: flex; flex-direction: column; gap: 8px }
.satir { display: flex; align-items: center; gap: 10px; background: var(--kart); color: var(--yazi); border: 1px solid var(--cizgi); border-radius: var(--r);
  padding: 12px 14px; min-height: 56px; width: 100%; text-align: left; font: inherit; cursor: pointer }
.satir .orta { flex: 1; min-width: 0 } .satir .orta b { display: block; overflow-wrap: anywhere } .satir .orta span { color: var(--soluk); font-size: 13px }
.rozet { font-size: 12px; border-radius: 999px; padding: 3px 9px; background: var(--secili); color: var(--yazi); white-space: nowrap }
.rozet.kapali { background: var(--cizgi); color: var(--soluk) }
.sekmeler { display: flex; gap: 8px; flex-wrap: wrap }
.sekmeler .btn[aria-pressed="true"] { background: var(--ana); color: var(--ana-yazi) }

/* Yetki tablosu: modül başına üç seviye */
.yetki { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: center }
.uclu { display: inline-flex; border: 1.5px solid var(--cizgi); border-radius: var(--r); overflow: hidden }
.uclu button { border: 0; background: var(--kart); color: var(--yazi); font: inherit; font-size: 13px; padding: 9px 10px; min-height: 40px; cursor: pointer }
.uclu button + button { border-left: 1px solid var(--cizgi) }
.uclu button[aria-pressed="true"] { background: var(--ana); color: var(--ana-yazi) }

.not { border-left: 3px solid var(--cizgi); padding: 2px 0 2px 10px; margin-bottom: 10px }
.not.ozel { border-color: var(--kotu) }
.not .ust-bilgi { color: var(--soluk); font-size: 12.5px }
.not p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere }

#bildirim { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--yazi); color: var(--zemin);
  padding: 10px 16px; border-radius: 999px; font-size: 14px; max-width: calc(100% - 32px); z-index: 20 }

/* Adım adım hesap ekranı (RawPivot ve sonraki hesap modülleri) */
.rp { display: grid; gap: 12px }
.rp-on { display: flex; gap: 12px; align-items: center }
.rp-on svg { height: 130px; width: auto; max-width: 45%; flex: none }
.adim { background: var(--kart); border: 2px solid var(--ana); border-radius: var(--r); padding: 14px }
.adim h3 { margin: 14px 0 8px; font-size: 14px; color: var(--soluk); font-weight: 600 }
.secimler { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px }
.secim { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; background: var(--kart); color: var(--yazi);
  border: 1.5px solid var(--cizgi); border-radius: var(--r); padding: 12px; min-height: 56px; font: inherit; cursor: pointer }
.secim small { color: var(--soluk); font-size: 12.5px } .secim svg { width: 46px; height: 46px }
.secim[aria-pressed="true"], .renk[aria-pressed="true"] { border-color: var(--ana); background: var(--secili) }
.renkler { display: flex; flex-wrap: wrap; gap: 8px }
.renk { display: flex; align-items: center; gap: 8px; background: var(--kart); color: var(--yazi); border: 1.5px solid var(--cizgi); border-radius: 999px;
  padding: 6px 12px 6px 6px; font: inherit; font-size: 14px; cursor: pointer; min-height: 44px }
.renk i { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--cizgi); flex: none }
.sayac { display: flex; align-items: stretch; border: 1.5px solid var(--cizgi); border-radius: var(--r); overflow: hidden }
.sayac button { width: 48px; border: 0; background: var(--secili); color: var(--yazi); font-size: 22px; cursor: pointer }
.alan .sayac input { border: 0; border-radius: 0; text-align: center; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 0 }
.alt-fiyat { position: sticky; bottom: 0; background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 4 }
.alt-fiyat b { font-size: 24px; font-variant-numeric: tabular-nums; display: block; line-height: 1.15 }
@media (min-width: 900px) {
  .rp { grid-template-columns: 300px minmax(0, 1fr); align-items: start }
  .rp-on { flex-direction: column; align-items: stretch; position: sticky; top: 70px }
  .rp-on svg { height: 280px; max-width: 100%; align-self: center }
}

/* Saha / CRM */
.rozet.kotu { background: var(--kotu); color: var(--zemin) }
.rozet.uyari { background: var(--uyari-zemin); color: var(--uyari-yazi) }
.bolum h2 { margin: 6px 0 8px }
.secili-musteri { display: flex; gap: 10px; align-items: center; justify-content: space-between; border: 1.5px solid var(--ana); background: var(--secili); border-radius: var(--r); padding: 10px 12px; margin-bottom: 10px }
.kart h3 { margin: 4px 0 8px; font-size: 14px; color: var(--soluk); font-weight: 600 }
.sayilar { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-top: 12px }
.sayi { border: 1px solid var(--cizgi); border-radius: var(--r); padding: 8px 10px }
.sayi b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.2 } .sayi span { color: var(--soluk); font-size: 12.5px }
.sayi.kotu b { color: var(--kotu) }
.cubuk { display: grid; grid-template-columns: minmax(110px, 34%) 1fr auto; gap: 8px; align-items: center; font-size: 14px; margin-bottom: 6px }
.cubuk i { height: 10px; background: var(--ana); border-radius: 999px; min-width: 4px }

/* RawPivot önizleme: dış ve iç yüz yan yana */
.rp-yuzler { display: flex; gap: 10px; align-items: flex-end }
.rp-yuzler figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px }
.rp-yuzler svg { max-width: 100% } .rp-yuzler figcaption { font-size: 12px; color: var(--soluk) }
.rp-on svg { filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .25)) }

/* Hesap ekranı alt çubuğu: fiyat + adet + teklife ekle */
.alt-fiyat { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap }
.alt-eylem { display: flex; gap: 8px; align-items: stretch }
.alt-eylem .sayac b { min-width: 34px; display: grid; place-items: center; font-variant-numeric: tabular-nums }
.alt-eylem .sayac button { width: 40px }
/* Pencere (müşteri seçimi gibi kısa sorular) */
dialog.pencere { border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--kart); color: var(--yazi); padding: 16px; width: min(520px, calc(100% - 24px)); max-height: 86vh }
dialog.pencere::backdrop { background: rgba(0, 0, 0, .5) }
/* Teklif */
.tutarlar { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; font-variant-numeric: tabular-nums }
.tutarlar .toplam { font-size: 20px; font-weight: 700; border-top: 1px solid var(--cizgi); padding-top: 8px }
.tutarlar span:nth-child(even) { text-align: right }
.kalem { border: 1px solid var(--cizgi); border-radius: var(--r); padding: 12px; display: grid; gap: 8px }
.kalem .ust { display: flex; gap: 6px 12px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap }
.kalem .ust > div:first-child { flex: 1 1 190px; min-width: 0 }
.kalem .ust b { overflow-wrap: anywhere } .kalem .fiyat { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums }
details.kart > summary { cursor: pointer; font-weight: 600 }

.rozet.iyi { background: var(--iyi); color: var(--zemin) }

/* Takvim */
.takvim { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 10px }
.takvim .tbas { text-align: center; font-size: 12px; color: var(--soluk) }
.tgun { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; padding: 4px 0; border: 1px solid var(--cizgi); border-radius: 8px; background: var(--kart); color: var(--yazi); font: inherit; font-size: 14px; cursor: pointer }
.tgun.bugun { border-color: var(--ana); border-width: 2px } .tgun[aria-pressed="true"] { background: var(--secili) }
.tgun b { font-weight: 600 } .tgun i { display: flex; gap: 2px; font-style: normal }
u.z, u.t, u.i { text-decoration: none; font-size: 11px; border-radius: 999px; padding: 0 5px; color: #fff; line-height: 16px }
u.z { background: var(--ana); color: var(--ana-yazi) } u.t { background: #b26a00 } u.i { background: #5b6878 }
/* Dosyalar */
.dosyalar { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px }
.dosya { display: flex; flex-direction: column; gap: 2px; align-items: stretch }
.dosya img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--cizgi); display: block }
.dosya .belge { display: grid; place-items: center; text-align: center; aspect-ratio: 1; border: 1px solid var(--cizgi); border-radius: 8px; font-weight: 700; text-decoration: none; padding: 6px; overflow: hidden }
.dosya .belge span { font-weight: 400; font-size: 11px; color: var(--soluk); overflow-wrap: anywhere }

/* RawPivot: müşteri fotoğrafı, ilave / opsiyon satırları, maliyet tabloları */
.rp-foto { display: flex; gap: 10px; align-items: center; margin: 8px 0 }
.rp-foto img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--r); border: 1px solid var(--cizgi) }
.rp-ek { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: 8px; align-items: end; margin-bottom: 8px }
@media (max-width: 520px) { .rp-ek { grid-template-columns: minmax(0, 1fr) auto } .rp-ek > label:first-child { grid-column: 1 / -1 } }
.tablo-sar { overflow-x: auto }
.tablo { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums }
.tablo th, .tablo td { padding: 6px 8px; border-bottom: 1px solid var(--cizgi); text-align: right; white-space: nowrap }
.tablo th:first-child, .tablo td:first-child { text-align: left; white-space: normal; min-width: 150px }
.tablo th { color: var(--soluk); font-weight: 600 }
.tablo .grup td { font-weight: 700; background: var(--zemin) }
details.kart > summary { cursor: pointer }

/* Kapı hesabı: eski sayfa masaüstü genişliğinde gizli çalışır; kutuda yalnızca kapı önizlemesi görünür (konum ve ölçek modul/kapi.js onizlemeKonum) */
.kp-cerceve { width: 170px; height: 250px; flex: none; overflow: hidden; border-radius: var(--r); background: #fff; position: relative }
.kp-cerceve.kp-disari { position: absolute; left: -4000px }
.kp-cerceve iframe { position: absolute; left: 0; top: 0; width: 1280px; height: 2600px; border: 0; transform-origin: 0 0; pointer-events: none }
.kp-on { flex-direction: column; align-items: center; text-align: center }
.kp-on .sekmeler { justify-content: center }

/* Teklif: kalem başına iskonto kutusu */
.kalem-isk { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--soluk); margin-left: auto }
.kalem-isk input { width: 72px; min-height: 40px; text-align: right }
/* Kapı hesabı: görselin altındaki fiyat dökümü */
.kp-dokum { width: 100%; text-align: left; border-top: 1px solid var(--cizgi); margin-top: 10px; padding-top: 10px; font-size: 14px }
.kp-dokum h3 { font-size: 15px; margin: 0 0 8px }
.kp-dokum .tutarlar { gap: 4px 12px }
.kp-birim { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0; padding: 8px 10px; background: var(--secili); border-radius: var(--r) }
.kp-birim > span { flex: 1; min-width: 120px }
.kp-birim > b { font-size: 18px; font-variant-numeric: tabular-nums }
.kp-isk { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600 }
.kp-isk input { width: 64px; padding: 6px 8px; font: inherit; text-align: right; border: 1px solid var(--cizgi); border-radius: 8px; background: var(--kart); color: var(--yazi) }
.kp-kirmizi { color: var(--kotu); font-weight: 600 }
@media (min-width: 900px) { .kp-on, .rp-on { max-height: calc(100vh - 90px); overflow-y: auto } }

/* Saha işleri: ölçü satırları (keşif, üretim ölçüsü) ve teslim imzası */
.olcu-satir { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px 8px; align-items: end; padding: 10px 0; border-bottom: 1px solid var(--cizgi) }
.olcu-satir .alan { margin: 0 }
.olcu-satir > .btn { justify-self: start }
canvas.imza { width: 100%; height: 170px; background: #fff; border: 1px dashed var(--cizgi); border-radius: var(--r); touch-action: none; display: block }
.arsiv-sip { border: 1px solid var(--cizgi); border-radius: var(--r); padding: 10px 12px; margin-bottom: 10px }
.arsiv-sip > summary { cursor: pointer; display: flex; gap: 8px; justify-content: space-between; align-items: center; list-style: none }
.arsiv-sip > summary::-webkit-details-marker { display: none }
.arsiv-blok { margin-top: 10px }
.arsiv-blok h3 { font-size: 13px; color: var(--soluk); margin: 0 0 6px }

/* Mobilya tasarım ekranı: geniş sayfa, solda kütüphane / ortada çizim / sağda seçili modül (dar ekranda alt alta) */
.govde:has(.mob-genis) { max-width: 1680px }
.mob-tasarim { display: grid; grid-template-columns: minmax(220px, 270px) minmax(0, 1fr) minmax(270px, 340px); gap: 12px; align-items: start }
.mob-tasarim > div { display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.mob-sol .secimler { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.mob-sol .secim small { font-size: 11px }
@media (max-width: 1150px) { .mob-tasarim { grid-template-columns: minmax(0, 1fr) } .mob-orta { order: -1 } .mob-sol .secimler { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) } }
.ayar-bag { border: 1px solid var(--cizgi); border-radius: var(--r); padding: 10px 12px; margin-bottom: 10px }