:root {
  --ana: #1f4e8c; --ana-koyu: #163a69; --ana-acik: #e8eff9;
  --zemin: #eef1f5; --kart: #fff; --yazi: #1d2433; --soluk: #5b6577; --cizgi: #d5dbe5;
  --yesil: #1e7a46; --yesil-acik: #e4f4ea; --kirmizi: #b42318; --kirmizi-acik: #fdecea;
  --sari: #8a5a00; --sari-acik: #fff4d6;
  --golge: 0 1px 3px #0000001a, 0 4px 14px #0000000d;
  --yaricap: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Firma temaları: 300 fornax (fornax.com.tr), 305 İTO KİLİT (itokilit.com.tr). Seçili firma body[data-firma]'da. */
body[data-firma="300"] { --kapi-renk: #1b5aa6; --onizleme-zemin: #cfe2f5; --ana: #013b75; --ana-koyu: #012a55; --ana-acik: #e8f0f8; --vurgu: #1e73be; --bant: #f1f2f3; }
body[data-firma="305"] { --kapi-renk: #1f7a4d; --onizleme-zemin: #d2eadf; --ana: #004433; --ana-koyu: #002e22; --ana-acik: #e6f1ed; --vurgu: #e50020; --bant: #f2f4f3; }
body { margin: 0; font: 16px/1.45 Urbanist, "Work Sans", system-ui, "Segoe UI", Roboto, Arial, sans-serif; color: var(--yazi); background: var(--zemin);
  --vurgu: #1e73be; --bant: #f1f2f3; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* üst çubuk: firmanın web sitesindeki gibi ince gri bant + beyaz ana çubuk */
#ust { position: sticky; top: 0; z-index: 20; background: #fff; box-shadow: 0 1px 0 #e6e8ec, 0 4px 14px #0000000d; }
#ust .ic { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 12px; }
.ust-bant { background: var(--bant); font-size: 13px; color: #555; }
.ust-bant .ic { min-height: 40px; }
.bant-ad { font-weight: 700; letter-spacing: .3px; color: var(--ana); }
.firma-sec { display: flex; align-items: center; gap: 6px; }
.firma-sec select { font-size: 14px; background: #fff; color: var(--yazi); border: 1px solid #dcdfe4; border-radius: 35px; padding: 4px 30px 4px 12px; font-weight: 700; min-height: 32px; width: auto; }
#yonetim { margin-left: auto; display: flex; gap: 2px; flex-wrap: wrap; }
#yonetim a { color: #444; text-decoration: none; padding: 5px 10px; border-radius: 35px; font-weight: 600; white-space: nowrap; }
#yonetim a:hover { background: #0000000d; color: var(--ana); }
#yonetim a.secili { background: var(--ana-acik); color: var(--ana); }
#yonetim:not(:empty) + #kullanici-dugme { margin-left: 4px; border-left: 1px solid #0000001f; border-radius: 0 35px 35px 0; }
#kullanici-dugme { margin-left: auto; background: transparent; color: #444; border: 0; min-height: 32px; padding: 4px 8px; font-size: 13px; font-weight: 600; border-radius: 35px; }
#kullanici-dugme:hover { background: #0000000d; }
.ust-ana .ic { min-height: 68px; flex-wrap: wrap; }
.firma-logo { display: flex; align-items: center; height: 68px; flex: none; }
.firma-logo img { max-height: 52px; max-width: 170px; }
#menu { display: flex; gap: 2px; flex: 1; justify-content: flex-end; align-items: center; overflow-x: auto; scrollbar-width: none; }
#menu a { color: #222; text-decoration: none; padding: 10px 14px; border-radius: 35px; white-space: nowrap; font-weight: 600; font-size: 15px; }
#menu a:hover { color: var(--ana); }
#menu a.secili { color: var(--ana); background: var(--ana-acik); }
#menu a.menu-dugme { background: var(--ana); color: #fff; margin-left: 6px; padding: 10px 20px; }
#menu a.menu-dugme:hover, #menu a.menu-dugme.secili { background: var(--ana-koyu); color: #fff; }
@media (max-width: 1000px) { #menu { flex-basis: 100%; justify-content: flex-start; padding-bottom: 8px; } .ust-ana .ic { min-height: 0; } }

main { max-width: 1200px; margin: 0 auto; padding: 16px 16px 120px; }
h1 { font-size: 22px; margin: 4px 0 14px; }
h2 { font-size: 17px; margin: 0 0 10px; }
.kart { background: var(--kart); border-radius: var(--yaricap); box-shadow: var(--golge); padding: 16px; margin-bottom: 14px; }
.satir { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.satir.arala { justify-content: space-between; }
.izgara { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.soluk { color: var(--soluk); font-size: 14px; }
.kucuk { font-size: 13px; }
.sag { text-align: right; }
.bos { text-align: center; color: var(--soluk); padding: 28px 10px; }

/* form */
label.alan { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--soluk); font-weight: 600; }
input, select, textarea { border: 1px solid var(--cizgi); border-radius: 8px; padding: 10px 12px; background: #fff; min-height: 44px; width: 100%; }
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ana); outline-offset: -1px; border-color: var(--ana); }
input:disabled, select:disabled { background: #f3f5f8; color: var(--soluk); }
input[type=checkbox] { width: 22px; height: 22px; min-height: 0; accent-color: var(--ana); }
.onay { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; }
.onay span { padding-top: 1px; }

button { min-height: 44px; padding: 10px 20px; border-radius: 35px; border: 1px solid var(--ana); background: var(--ana); color: #fff;
  font-weight: 600; cursor: pointer; white-space: nowrap; }
button:hover { background: var(--ana-koyu); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.ikincil { background: #fff; color: var(--ana); }
button.ikincil:hover { background: var(--ana-acik); }
button.hayalet { background: transparent; border-color: transparent; color: var(--ana); }
button.tehlike { background: #fff; color: var(--kirmizi); border-color: var(--kirmizi); }
button.yesil { background: var(--yesil); border-color: var(--yesil); }
button.kucuk { min-height: 36px; padding: 6px 10px; font-size: 14px; }

/* rozetler */
.cari-tablo tbody tr { cursor: pointer; }
.cari-tablo tbody tr:hover { background: var(--ana-acik); }
.cari-tablo td.kod { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rozet { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.rozet.taslak { background: var(--sari-acik); color: var(--sari); }
.rozet.logoda { background: var(--yesil-acik); color: var(--yesil); }
.rozet.hata { background: var(--kirmizi-acik); color: var(--kirmizi); }
.rozet.gri { background: #eceff3; color: var(--soluk); }
.uyari { background: var(--sari-acik); color: var(--sari); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.hata-kutu { background: var(--kirmizi-acik); color: var(--kirmizi); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; white-space: pre-wrap; }

/* liste */
.liste { display: flex; flex-direction: column; }
.liste-oge { display: flex; gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid #edf0f4; cursor: pointer; }
.liste-oge:last-child { border-bottom: 0; }
.liste-oge:hover { background: #f7f9fc; }
.liste-oge .ana { flex: 1; min-width: 0; }
.liste-oge .baslik { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
table.tablo { width: 100%; border-collapse: collapse; }
table.tablo th { text-align: left; font-size: 12px; color: var(--soluk); text-transform: uppercase; padding: 8px 6px; border-bottom: 2px solid var(--cizgi); }
table.tablo th.sag { text-align: right; }
table.tablo td { padding: 8px 6px; border-bottom: 1px solid #edf0f4; vertical-align: middle; }
.kaydir { overflow-x: auto; }

/* teklif ekranı */
.musteri-kutu { border: 2px dashed var(--cizgi); border-radius: var(--yaricap); padding: 14px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.musteri-kutu.secili { border-style: solid; border-color: var(--ana); background: var(--ana-acik); }
.sekme { display: inline-flex; border: 1px solid var(--ana); border-radius: 35px; overflow: hidden; }
.sekme button { border: 0; border-radius: 0; background: #fff; color: var(--ana); }
.sekme button.secili { background: var(--ana); color: #fff; }

.kalem { display: grid; grid-template-columns: 1fr 110px 130px 120px 130px 44px; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid #edf0f4; }
.kalem.baslik-satir { font-size: 12px; color: var(--soluk); text-transform: uppercase; font-weight: 700; padding-top: 0; }
.kalem .urun b { display: block; }
.kalem .varyant { display: inline-block; margin-top: 3px; background: var(--ana-acik); color: var(--ana); border-radius: 6px; padding: 1px 8px; font-size: 13px; font-weight: 600; }
.kalem input { text-align: right; }
.kalem .sil { background: transparent; border: 0; color: var(--kirmizi); font-size: 22px; padding: 0; min-height: 44px; }
.etiket-mobil { display: none; }

.toplamlar { margin-left: auto; min-width: 280px; }
.toplamlar div { display: flex; justify-content: space-between; padding: 4px 0; }
.toplamlar .genel { border-top: 2px solid var(--ana); margin-top: 6px; padding-top: 8px; font-size: 20px; font-weight: 800; color: var(--ana); }

.alt-cubuk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: #fff; box-shadow: 0 -2px 12px #0000001f;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.alt-cubuk .ic { max-width: 1200px; margin: 0 auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.alt-cubuk .tutar { font-size: 20px; font-weight: 800; color: var(--ana); margin-right: auto; }

/* ürün seçici */
.urun-sonuc { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 12px; max-height: 60vh; overflow-y: auto; }
.urun-kart { border: 1px solid var(--cizgi); border-radius: 10px; padding: 12px; cursor: pointer; background: #fff; text-align: left; color: var(--yazi); font-weight: 400; white-space: normal; }
.urun-kart:hover { border-color: var(--ana); background: var(--ana-acik); }
.urun-kart .fiyat { font-weight: 700; color: var(--ana); }
.varyant-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* pencere */
dialog { border: 0; border-radius: 14px; padding: 0; width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 40px); box-shadow: 0 20px 60px #0005; }
dialog::backdrop { background: #0f172a80; }
#pencere-ic { padding: 18px; }
.pencere-baslik { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.pencere-baslik h2 { margin: 0; }

/* giriş */
.giris { max-width: 400px; margin: 10vh auto; }
.giris h1 { text-align: center; color: var(--ana); }
.giris-logolar { display: flex; justify-content: center; align-items: center; gap: 28px; margin: 4px 0 18px; }
.giris-logolar img { max-height: 46px; max-width: 150px; }
.giris form { display: flex; flex-direction: column; gap: 12px; }

#bildirim { position: fixed; right: 16px; top: 120px; z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.tost { background: #1d2433; color: #fff; padding: 12px 18px; border-radius: 10px; box-shadow: var(--golge); max-width: 90vw; }
.tost.hata { background: var(--kirmizi); }
.tost.basari { background: var(--yesil); }

.yetki-grup h3 { font-size: 13px; text-transform: uppercase; color: var(--soluk); margin: 12px 0 2px; }
.sifre-kutu { font: 700 22px/1.3 ui-monospace, Consolas, monospace; background: var(--ana-acik); padding: 12px; border-radius: 8px; text-align: center; user-select: all; }

@media (max-width: 760px) {
  .kalem { grid-template-columns: 1fr 1fr; gap: 6px 10px; }
  .kalem.baslik-satir { display: none; }
  .kalem .urun { grid-column: 1 / -1; }
  .kalem .sil { position: absolute; right: 0; }
  .kalem { position: relative; }
  .etiket-mobil { display: block; font-size: 12px; color: var(--soluk); }
  .toplamlar { min-width: 0; width: 100%; }
  .firma-sec { font-size: 0; }
  .bant-ad { display: none; }
}

/* ürün resimleri */
.urun-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.urun-izgara .urun-kart { display: flex; flex-direction: column; }
.urun-ust { display: flex; gap: 10px; align-items: flex-start; }
.urun-ust .resim-kutu { width: 72px; flex: none; }
.resim-kutu { aspect-ratio: 1; width: 100%; border-radius: 8px; background: #f3f5f8; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.resim-kutu img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.resim-kutu span { font-size: 11px; color: var(--soluk); }
.galeri-buyuk { background: #f3f5f8; border-radius: 10px; display: flex; justify-content: center; align-items: center; min-height: 200px; max-height: 50vh; overflow: hidden; }
.galeri-buyuk img { max-width: 100%; max-height: 50vh; object-fit: contain; cursor: zoom-in; background: #fff; }
.galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 8px; }
.galeri-oge { position: relative; border: 2px solid transparent; border-radius: 8px; padding: 2px; cursor: pointer; }
.galeri-oge.secili { border-color: var(--ana); }
.galeri-oge img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 6px; display: block; }
.galeri-oge .rozet { position: absolute; top: 4px; left: 4px; font-size: 10px; }
.galeri-arac { display: flex; gap: 4px; margin-top: 4px; }
.galeri-arac button { flex: 1; min-height: 30px; padding: 2px 4px; font-size: 12px; }
.dugme-etiket { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border-radius: 35px; background: var(--ana); color: #fff; font-weight: 600; cursor: pointer; }
.dugme-etiket.ikincil { background: #fff; color: var(--ana); border: 1px solid var(--ana); }

/* 3D model */
.resim-kutu { position: relative; }
.rozet.uc-d { position: absolute; top: 6px; right: 6px; background: var(--ana); color: #fff; font-size: 11px; }
.galeri-oge .rozet.uc-d { top: 4px; right: 4px; left: auto; }
.galeri-oge .rozet.alt { top: auto; bottom: 38px; }
.model-simge { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--ana-acik); color: var(--ana); font-weight: 800; font-size: 22px; border-radius: 6px; }
.galeri-buyuk.model-kap { height: min(56vh, 520px); max-height: none; position: relative; touch-action: none; }
.galeri-buyuk.model-kap canvas { width: 100% !important; height: 100% !important; display: block; border-radius: 10px; cursor: grab; }
.galeri-buyuk.model-kap:fullscreen { border-radius: 0; height: 100vh; }
.galeri-buyuk[data-durum]::after { content: attr(data-durum); position: absolute; inset: auto 0 12px; text-align: center; color: var(--soluk); font-size: 14px; }
.galeri-ad { font-size: 11px; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

/* varyant renkleri */
.renk-cubugu { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin-top: 8px; }
.renk-cip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px 4px 6px; font-size: 14px;
  background: #fff; color: var(--yazi); border: 1px solid var(--cizgi); }
.renk-cip:hover { background: var(--ana-acik); }
.renk-cip.secili { border: 2px solid var(--ana); background: var(--ana-acik); color: var(--ana); }
.renk-nokta { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 1px solid #0003; vertical-align: -4px; margin-right: 4px; flex: none; }
.renk-cip .renk-nokta { margin-right: 0; width: 24px; height: 24px; }
.renk-nokta.orijinal { background: conic-gradient(#c9ccd1, #8a8f99, #e6e8eb, #c9ccd1); }
.renk-duzen-satir { padding: 6px 0; border-bottom: 1px solid #edf0f4; }

/* set seçici */
dialog.genis { width: min(1100px, calc(100vw - 24px)); }
tr.sorunlu td { background: var(--kirmizi-acik) !important; }
pre.rapor { white-space: pre-wrap; background: #f6f7f9; border-radius: 8px; padding: 10px 12px; font: 13px/1.5 ui-monospace, Consolas, monospace; max-height: 320px; overflow: auto; }
.varyant { display: inline-block; margin-top: 3px; background: var(--ana-acik); color: var(--ana); border-radius: 6px; padding: 1px 8px; font-weight: 600; }

.set-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 16px; align-items: start; }
.set-onizleme { position: sticky; top: 130px; }
.pencere-3d { height: 440px; border-radius: 10px; overflow: hidden; background: #eef1f5; touch-action: none; }
.pencere-3d canvas { width: 100% !important; height: 100% !important; display: block; }
@media (max-width: 900px) { .set-izgara { grid-template-columns: 1fr; } .set-onizleme { position: static; order: -1; } .pencere-3d { height: 300px; } }

.secici-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.secici-kart { display: flex; flex-direction: column; gap: 4px; }
.olcu-dal { border-top: 1px solid #edf0f4; padding-top: 8px; margin-top: 8px; }
.olcu-dal code { background: #f3f5f8; padding: 1px 6px; border-radius: 4px; font-size: 12px; }
.kucuk-tablo td, .kucuk-tablo th { padding: 4px; font-size: 13px; }
.kucuk-tablo input { min-height: 32px; padding: 4px 6px; font-size: 13px; min-width: 80px; }
.formul { color: var(--soluk); font-size: 12px; cursor: help; white-space: nowrap; }

/* SAHA / Donanım Sihirbazı */
.marka-buyuk { font-size: 44px !important; letter-spacing: 6px; font-weight: 800; margin-bottom: 4px !important; }
.bant-ad { letter-spacing: 2px; }
.sihirbaz-baslik h1 { margin-bottom: 2px; }
.sihirbaz-baslik p { margin: 0 0 16px; }
.sihirbaz-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.sihirbaz-kart { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left; background: #fff; color: var(--yazi);
  border: 1px solid var(--cizgi); border-radius: 14px; box-shadow: var(--golge); font-weight: 400; white-space: normal; transition: transform .15s, box-shadow .15s; }
.sihirbaz-kart:hover { background: #fff; transform: translateY(-3px); box-shadow: 0 6px 24px #0000001f; border-color: var(--ana); }
.sihirbaz-gorsel { height: 290px; background: var(--onizleme-zemin, #eef1f5); position: relative; }
.sihirbaz-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kart-3d { position: absolute; inset: 0; pointer-events: none; }
.kart-3d canvas { width: 100% !important; height: 100% !important; display: block; }
.kart-simge { display: flex; height: 100%; align-items: center; justify-content: center; font-size: 64px; color: var(--ana); opacity: .4; }
.sihirbaz-alt { padding: 12px 14px 14px; border-top: 3px solid var(--ana); }
.sihirbaz-alt b { font-size: 18px; }

/* Ana Sayfa */
.ana-baslik h1 { margin-bottom: 2px; }
.ana-baslik p { margin: 0 0 18px; }
.ana-setler { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.ana-set { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cizgi, #dde2e8); border-radius: 14px; overflow: hidden;
  text-decoration: none; color: var(--yazi); transition: transform .15s, box-shadow .15s, border-color .15s; }
.ana-set:hover { transform: translateY(-3px); box-shadow: 0 6px 20px #0000001a; border-color: var(--ana); }
.ana-set-gorsel { display: block; height: 190px; position: relative; background: var(--onizleme-zemin, #eef1f5); }
.ana-set-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ana-set b { padding: 10px 12px; border-top: 3px solid var(--ana); font-size: 15px; line-height: 1.25; }
.ana-moduller { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ana-modul { display: flex; gap: 14px; align-items: center; padding: 16px; background: #fff; border: 1px solid var(--cizgi, #dde2e8); border-radius: 14px;
  text-decoration: none; color: var(--yazi); min-height: 76px; transition: border-color .15s, box-shadow .15s; }
.ana-modul:hover { border-color: var(--ana); box-shadow: 0 4px 16px #00000014; }
.ana-modul b { display: block; font-size: 17px; margin-bottom: 2px; }
.ana-simge { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--ana-acik); color: var(--ana); }
.ana-simge svg { width: 26px; height: 26px; }
.ana-modul.vurgu { background: var(--ana); border-color: var(--ana); color: #fff; }
.ana-modul.vurgu .soluk { color: #ffffffcc; }
.ana-modul.vurgu .ana-simge { background: #ffffff26; color: #fff; }
@media (max-width: 520px) { .ana-setler { grid-template-columns: repeat(2, 1fr); gap: 10px; } .ana-set-gorsel { height: 150px; } }
/* Telefonda yönetim bağlantıları üst bantta ikinci satıra iner */
@media (max-width: 760px) {
  .ust-bant .ic { flex-wrap: wrap; row-gap: 0; padding-top: 4px; padding-bottom: 4px; }
  #yonetim { order: 3; flex-basis: 100%; margin-left: -10px; }
  #yonetim:not(:empty) + #kullanici-dugme { margin-left: auto; border-left: 0; border-radius: 35px; }
}

/* Ana Sayfa istatistikleri, teklif listeleri ve ziyaretler (CRM) */
.ana-istatistik { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 14px; }
.ana-sayi { background: #fff; border: 1px solid var(--cizgi); border-left: 4px solid var(--ana); border-radius: 12px; padding: 12px 14px; }
.ana-sayi.sari { border-left-color: var(--sari); }
.ana-sayi.yesil { border-left-color: var(--yesil); }
.ana-sayi-deger { font-size: 26px; font-weight: 800; line-height: 1.25; margin: 2px 0; }
.ana-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ana-iki .kart { min-width: 0; }
@media (max-width: 800px) { .ana-iki { grid-template-columns: 1fr; gap: 0; } }
.ana-alt-baslik { font-size: 15px; margin: 16px 0 4px; color: var(--soluk); }
.hizli-onay { justify-content: flex-end; gap: 6px; margin-top: 4px; flex-wrap: nowrap; }
.hizli-onay button { min-height: 32px; padding: 4px 10px; }
.ziyaret { display: flex; gap: 12px; padding: 12px 4px; border-bottom: 1px solid #edf0f4; cursor: pointer; }
.ziyaret:last-child { border-bottom: 0; }
.ziyaret:hover { background: #f7f9fc; }
.ziyaret .ana { flex: 1; min-width: 0; }
.ziyaret .baslik { font-weight: 600; }
.ziyaret-saat { flex: none; width: 50px; font-weight: 800; color: var(--ana); font-size: 17px; }
.ziyaret-not { font-size: 14px; margin-top: 4px; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ziyaret-teklif, .ziyaret-teklifler { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.teklif-cip { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--cizgi); border-radius: 999px; padding: 3px 4px 3px 10px;
  font-size: 13px; color: var(--yazi); text-decoration: none; background: #fff; }
.teklif-cip:hover { border-color: var(--ana); }
.onay-kutu { border-left: 4px solid var(--ana); }
.ana-setler > .bos { grid-column: 1 / -1; }
@media (max-width: 520px) {
  .ana-istatistik { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ana-sayi { padding: 10px; }
  .ana-sayi-deger { font-size: 22px; }
  .ana-sayi:last-child { grid-column: 1 / -1; }
  .teklif-cip { width: 100%; justify-content: space-between; flex-wrap: wrap; border-radius: 10px; }
  .ziyaret-saat { width: 42px; font-size: 15px; }
}

/* Excel'i henüz yüklenmemiş sistem kartları */
.sihirbaz-kart.bekliyor .sihirbaz-alt, .ana-set.bekliyor b { opacity: .75; }
.ana-set { position: relative; }
.bekliyor-rozet { position: absolute; top: 8px; left: 8px; }

/* Ziyaret konumu, ekler, seyahat raporu */
.konum-kutu { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--yazi); font-weight: 400; }
.dosya-dugme { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--ana);
  border-radius: 35px; color: var(--ana); background: #fff; font-weight: 600; font-size: 14px; cursor: pointer; }
.dosya-dugme:hover { background: var(--ana-acik); }
a.dugme { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 18px; border-radius: 35px;
  background: var(--ana); color: #fff; text-decoration: none; font-weight: 600; border: 1px solid var(--ana); }
a.dugme.ikincil { background: #fff; color: var(--ana); }
a.dugme.kucuk { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.ek-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 8px; }
.ek { position: relative; border: 1px solid var(--cizgi); border-radius: 10px; overflow: hidden; background: #f7f9fc; min-height: 90px; }
.ek img, .ek video { width: 100%; height: 100px; object-fit: cover; display: block; background: #000; }
.ek-dosya { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100px; padding: 6px;
  font-size: 26px; text-decoration: none; color: var(--yazi); text-align: center; }
.ek-dosya span, .ek-dosya small { font-size: 12px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; }
.ek.bekliyor { border-style: dashed; }
.ek-sil { position: absolute; top: 4px; right: 4px; min-height: 26px; width: 26px; padding: 0; border-radius: 50%; background: #000a; color: #fff; border: 0; font-size: 13px; }
.ziyaret-ek { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: 13px; }
.ziyaret-ek img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; display: block; }
.gider-dagilim { display: grid; gap: 6px; margin: 10px 0 6px; }
.gider-cubuk { display: grid; grid-template-columns: minmax(110px, 200px) 1fr auto; gap: 10px; align-items: center; font-size: 14px; }
.gider-cubuk div { background: #eef1f5; border-radius: 6px; height: 12px; overflow: hidden; }
.gider-cubuk i { display: block; height: 100%; background: var(--sari); border-radius: 6px; }
@media print {
  #ust, .alt-cubuk, .yazdirma, #bildirim { display: none !important; }
  body { background: #fff; }
  .kart, .ana-sayi { box-shadow: none; break-inside: avoid; }
}
div.alan { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--soluk); font-weight: 600; }

/* Teklif revizyonları */
.rev-rozet { vertical-align: middle; font-size: 13px; }
.rev-guncel td { background: var(--ana-acik); }
.tablo-kaydir { overflow-x: auto; margin-top: 10px; }
.rev-tablo td { vertical-align: top; }
.rev-cikarildi td { color: var(--soluk); }
.rev-cikarildi td b { text-decoration: line-through; }
.rev-eklendi td { background: var(--yesil-acik); }
.rev-degisen { background: var(--sari-acik); }
.rev-degisen s, .rev-tablo s { color: var(--soluk); }
.rev-artti, .rev-azaldi { font-weight: 700; }
.rev-genel td { font-weight: 700; }

/* Teklif satırında ürün resmi */
.urun-resimli { display: flex; gap: 12px; align-items: center; }
.kalem-resim { flex: none; width: 64px; height: 64px; min-height: 0; padding: 0; border: 1px solid var(--cizgi); border-radius: 10px;
  background: #fff; overflow: hidden; display: grid; place-items: center; cursor: pointer; }
.kalem-resim:hover { border-color: var(--ana); background: #fff; }
.kalem-resim img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kalem-resim .resim-yok { color: #c3cad3; display: grid; place-items: center; }
.kalem-resim .resim-yok svg { width: 30px; height: 30px; }
@media (max-width: 760px) { .kalem-resim { width: 52px; height: 52px; } }

/* Modül alt menüsü */
.ust-alt { background: var(--ana-acik); border-top: 1px solid #0000000f; }
.ust-alt .ic { min-height: 44px; }
#altmenu { display: flex; gap: 2px; align-items: center; overflow-x: auto; scrollbar-width: none; }
#altmenu .altmenu-baslik { font-weight: 800; color: var(--ana); margin-right: 10px; white-space: nowrap; font-size: 14px; }
#altmenu a { color: #333; text-decoration: none; padding: 7px 12px; border-radius: 35px; font-weight: 600; font-size: 14px; white-space: nowrap; }
#altmenu a:hover { color: var(--ana); }
#altmenu a.secili { background: #fff; color: var(--ana); box-shadow: 0 1px 4px #0000001a; }

/* Proje takibi */
.proje-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.proje-kart { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--cizgi); border-radius: 12px; background: #fff;
  text-decoration: none; color: var(--yazi); transition: border-color .15s, box-shadow .15s; }
.proje-kart:hover { border-color: var(--ana); box-shadow: 0 4px 16px #00000014; }
.proje-ad { font-size: 17px; line-height: 1.3; }
.ilerleme { display: inline-block; width: 110px; height: 8px; border-radius: 6px; background: #e6eaf0; overflow: hidden; vertical-align: middle; margin-right: 6px; }
.ilerleme i { display: block; height: 100%; background: var(--ana); border-radius: 6px; }
.ilerleme.gecikmis i { background: var(--kirmizi); }
.kirmizi-yazi { color: var(--kirmizi); }
tr.tik { cursor: pointer; }
tr.tik:hover td { background: #f7f9fc; }
.tl-sonuc { max-height: 220px; overflow-y: auto; margin: 6px 0 10px; }
.is-dugmeler { gap: 6px; flex-wrap: nowrap; }
details.is-yuku { border-bottom: 1px solid #edf0f4; padding: 10px 2px; }
details.is-yuku summary { cursor: pointer; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gantt-araclar { margin-bottom: 8px; gap: 8px; flex-wrap: wrap; }
.gantt-kap { display: flex; border: 1px solid var(--cizgi); border-radius: 10px; background: #fff; overflow: hidden; }
.gantt-sol { flex: none; border-right: 1px solid #d5dbe3; box-shadow: 2px 0 4px rgba(0, 0, 0, .04); position: relative; z-index: 1; }
.gantt-kaydir { flex: 1; min-width: 0; overflow-x: auto; }
.gantt { display: block; font-family: inherit; }
.gantt .g-ince-cizgi { stroke: #e8ecf1; }
.gantt .g-ac { cursor: pointer; }
.gantt .g-ac rect { fill: #eef2f6; stroke: #d5dbe3; }
.gantt .g-ac:hover rect { fill: #dfe6ee; }
.gantt .g-ac path { fill: var(--ana); }
.gantt .g-proje-zemin { fill: #34404d; opacity: .22; }
.gantt .g-proje-dolu { fill: #34404d; }
.gantt .g-proje-zemin.gecikmis { fill: var(--kirmizi); }
.gantt .g-proje-dolu.gecikmis { fill: var(--kirmizi); }
.gantt .g-ozet-kisi { fill: var(--ana); }
.gantt .gs-proje .g-ad, .gantt .gs-kisi .g-ad { font-size: 13.5px; }
#pr-gorunum button { white-space: nowrap; }
.gantt .g-gun.g-hs { fill: #a6b0bc; }
.gantt .g-baslik { fill: #f3f5f8; }
.gantt .g-ay { font-size: 12px; font-weight: 700; fill: var(--yazi); }
.gantt .g-gun { font-size: 10px; fill: var(--soluk); }
.gantt .g-ay-cizgi { stroke: #d5dbe3; }
.gantt .g-hafta-sonu { fill: #f6f7f9; }
.gantt .g-ayrac { stroke: #d5dbe3; }
.gantt .g-zebra { fill: #fafbfc; }
.gantt .g-bos { fill: transparent; }
.gantt .g-satir { cursor: pointer; }
.gantt .g-satir.uzerinde > rect:first-child { fill: var(--ana-acik); fill-opacity: .55; }
.gantt .g-ad { font-size: 13px; fill: var(--yazi); }
.gantt .g-ust { font-weight: 700; }
.gantt .g-kisi { font-size: 11px; fill: var(--soluk); }
.gantt .g-yuzde { font-size: 11px; fill: #fff; font-weight: 700; }
.gantt .g-ozet { fill: #34404d; }
.gantt .g-ok { fill: none; stroke: #6b7785; stroke-width: 1.4; }
.gantt .g-ok-ucu { fill: #6b7785; }
.gantt .g-bugun { stroke: var(--kirmizi); stroke-width: 1.5; stroke-dasharray: 4 3; }
.gantt .g-bugun-yazi { font-size: 10px; fill: var(--kirmizi); font-weight: 700; }
.g-lejant { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin: 0 4px 0 10px; }
.gantt .g-yuzde.koyu { fill: var(--yazi); }
button.sil { background: transparent; border: 0; color: var(--kirmizi); font-size: 20px; min-height: 36px; padding: 0 6px; }
button.sil:hover { background: var(--kirmizi-acik); }

/* Malzeme kart tipleri */
#altmenu .altmenu-grup { color: var(--soluk); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin: 0 2px 0 12px; white-space: nowrap; }
.kart-bilgi { border: 1px solid var(--cizgi); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.kart-ozellik { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 14px; margin-top: 8px; font-size: 14px; }
.liste-not { grid-column: 1 / -1; text-align: center; padding: 8px; }
tr.secili-satir td { background: var(--ana-acik); }
/* Donanım Sihirbazı: Donanım Sistemi kendi satırında (ölçü alanlarının aralık satırı yüzünden kaymasın) */
.izgara > .sistem-satiri { grid-column: 1 / -1; max-width: 360px; }
/* Donanım Sihirbazı: ölçü kutusunda birim (mm) sağda */
.birimli { position: relative; display: block; }
.birimli input { padding-right: 48px; -moz-appearance: textfield; }
.birimli input::-webkit-outer-spin-button, .birimli input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.birimli .birim { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--soluk); font-weight: 600; pointer-events: none; }
.olcu-araligi { white-space: nowrap; font-size: .92em; }
.alan-baslik { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Donanım Sihirbazı üst satırı: Donanım Sistemi solda, Miktar sağda (alttaki ızgaranın son sütunu), altında çizgi */
.izgara.ust-satir { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 2px solid var(--cizgi); align-items: end; }
.ust-satir > .sistem-satiri { grid-column: 1; max-width: none; }
.ust-satir > .miktar-alani { grid-column: -2 / -1; }
#set-girdi .miktar-alani .alan-baslik { color: var(--ana); font-size: 15px; font-weight: 800; }
#set-girdi .alan.miktar-alani input { border: 2px solid var(--ana); background: var(--ana-acik); color: var(--yazi); font-size: 18px; font-weight: 800; }
#set-girdi .miktar-alani .birim { color: var(--ana); font-weight: 700; }
/* Donanım Sistemi: Miktar ile aynı belirginlikte (tüm sistemlerde) */
#set-girdi .alan.sistem-satiri { color: var(--ana); font-size: 15px; font-weight: 800; }
#set-girdi .alan.sistem-satiri select { border: 2px solid var(--ana); background-color: var(--ana-acik); color: var(--yazi);
  font-size: 18px; font-weight: 800; }
@media (min-width: 700px) { .ust-satir > .sistem-satiri { grid-column: 1 / span 2; } }  /* uzun sistem adı kesilmesin */
/* ölçü seçim kutusu: "mm" açılır okun solunda */
.birimli-secim select { padding-right: 72px; }
.birimli-secim .birim { right: 40px; }
/* Logo grup kodu / alt grup süzgeci */
.grup-suzgec { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 12px; margin-top: 10px; }
.grup-suzgec[hidden] { display: none; }
.grup-etiket { color: var(--ana); font-weight: 600; }
/* Donanım Sihirbazı: alan başlıkları koyu; kutu içindeki yazılar eskisi gibi (başlıktan miras almasın) */
#set-girdi .alan { color: var(--yazi); font-weight: 700; }
#set-girdi .alan :is(input, select) { color: var(--soluk); font-weight: 600; }
#set-girdi .alan .olcu-araligi { color: var(--soluk); font-weight: 600; }