/* Aylen Vinç Takip — telefonda sahada kullanım öncelikli */
:root {
  /* 16.10: sade açık tema — lacivert-gri yazı ve düğmeler, sarı yalnız küçük vurgularda (eski mor: #1d0645) */
  --sari: #f5a700; --sari-koyu: #a86f00; --sari-acik: #efefec; --mor: #1e293b; --mor2: #475569; --zemin: #f4f6f9; --yazi: #1e293b; --soluk: #64748b; --cizgi: #e5e8ee; --kart: #fff; --yazi: #1d1d2b; --soluk: #66667a;
  --cizgi: #e2e3ea; --kirmizi: #c62828; --yesil: #2e7d32; --turuncu: #b86e00; --wa: #1fa855; --yaricap: 8px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.45 'Titillium Web', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--yazi); background: var(--zemin); }
a { color: var(--mor2); }
h1 { font-size: 1.45rem; line-height: 1.2; margin: 0 0 .4rem; color: var(--mor); }
h2 { font-size: 1.1rem; margin: 0 0 .7rem; color: var(--mor); }
img { max-width: 100%; }

.ust { background: var(--mor); color: #fff; padding: 10px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; position: sticky; top: 0; z-index: 5; }
.ust-logo img { display: block; height: 34px; width: auto; }
.ust-menu { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.ust-menu a { color: #fff; text-decoration: none; padding: 6px 10px; border-radius: 8px; font-weight: 600; }
.ust-menu a.on, .ust-menu a:hover { background: rgba(255, 255, 255, .14); }
.rozet { background: var(--sari); color: var(--mor); border-radius: 6px; padding: 0 7px; font-size: .8rem; }
.herkese .ust { justify-content: center; }

.sayfa { max-width: 860px; margin: 0 auto; padding: 14px 16px 30px; }
.alt { text-align: center; color: var(--soluk); font-size: .9rem; padding: 10px 16px 30px; }
.alt a, .bag { color: var(--soluk); }
.bag { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }
.satir-ici { display: inline; margin: 0; }

.kart { background: var(--kart); border-radius: var(--yaricap); padding: 16px; margin: 0 0 14px; box-shadow: 0 1px 3px rgba(20, 10, 60, .07); }
.kart.dar { max-width: 420px; margin: 30px auto; }
.ortala { text-align: center; }
.soluk { color: var(--soluk); }
.ust-yazi { margin: 0 0 2px; color: var(--soluk); font-weight: 600; font-size: .95rem; }
.gizli { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.not { background: #efefec; border-left: 4px solid var(--sari); padding: 8px 12px; border-radius: 6px; margin-top: 10px; }

.kutu { padding: 10px 14px; border-radius: 8px; margin: 0 0 14px; font-weight: 600; }
.kutu.iyi { background: #efefec; color: var(--yesil); }
.kutu.kotu { background: #efefec; color: var(--kirmizi); }

/* düğmeler */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 16px; border-radius: 6px; border: 0;
  background: var(--mor); color: #fff; font: 600 1rem 'Titillium Web', system-ui, sans-serif; text-decoration: none; cursor: pointer; text-align: center; }
.dugme:hover { filter: brightness(1.12); }
.dugme.ikincil { background: #ecebf4; color: var(--mor); }
.dugme small { display: block; font-size: .8rem; font-weight: 400; opacity: .85; }
.dugme:has(small) { flex-direction: column; gap: 0; line-height: 1.2; }
.dugme.kirmizi { background: var(--kirmizi); }
.dugme.wa { background: var(--wa); }
.dugme.yesil { background: var(--yesil); }
.dugme.buyuk { min-height: 56px; font-size: 1.15rem; }
.dugme.kucuk { min-height: 36px; padding: 4px 12px; font-size: .92rem; }
.dugme.tam { width: 100%; }
.dugme[disabled] { opacity: .6; cursor: wait; }
.dugmeler { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.dugmeler.iki > * { flex: 1 1 140px; }
.izgara-dugme > * { flex: 1 1 160px; }

/* listeler */
.liste-satir { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 2px; border-top: 1px solid var(--cizgi); color: var(--yazi); text-decoration: none; }
.liste-satir:first-of-type { border-top: 0; }
a.liste-satir:hover, .liste-satir > a:hover { background: #fafafe; }
.liste-satir > a { color: var(--yazi); text-decoration: none; flex: 1; }
.durum { display: inline-block; padding: 2px 10px; border-radius: 6px; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.durum.yesil { background: #ebebe9; color: var(--yesil); }
.durum.turuncu { background: #ebebe9; color: #ef2c0b; }
.durum.kirmizi { background: #ebebe9; color: var(--kirmizi); }
.durum.gri { background: #ebebe9; color: var(--soluk); }
.durumlar { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ariza { border-top: 1px solid var(--cizgi); padding: 12px 0; }
.ariza:first-of-type { border-top: 0; padding-top: 0; }
.ariza p { margin: 6px 0; }
.kucuk-foto { width: 90px; height: 90px; object-fit: cover; border-radius: 8px; margin: 4px 6px 0 0; }

.ara { display: flex; gap: 8px; margin-bottom: 4px; }
.ara input { flex: 1; min-height: 44px; padding: 8px 12px; border: 1px solid var(--cizgi); border-radius: 6px; font: inherit; }
.sekmeler { display: flex; gap: 6px; margin-bottom: 12px; }
.sekmeler a { padding: 8px 14px; border-radius: 6px; background: #fff; text-decoration: none; font-weight: 600; }
.sekmeler a.on { background: var(--mor); color: #fff; }

/* vinç kartı */
.vinc-bas h1 { font-size: 1.6rem; }
.bilgi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 16px; margin: 12px 0 0; }
.bilgi dt { color: var(--soluk); font-size: .85rem; }
.bilgi dd { margin: 0; font-weight: 600; }
.tablo-kap { overflow-x: auto; }
.tablo { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tablo th, .tablo td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--cizgi); }
.belge { border-top: 1px solid var(--cizgi); }
.belge:first-of-type { border-top: 0; }
.belge .liste-satir { border-top: 0; }
.belge-degistir { padding: 0 2px 10px; }
.belge-degistir summary { cursor: pointer; color: var(--mor2); font-size: .92rem; }
.belge-degistir form { margin-top: 8px; }
.belge-yukle { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--cizgi); }

/* form alanları */
.izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 14px; }
.alan { display: block; margin: 0 0 12px; }
.alan > span { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 3px; color: #3a3a50; }
.alan input, .alan select, .alan textarea, .madde-not { width: 100%; min-height: 44px; padding: 8px 11px; border: 1px solid #cfd0dc; border-radius: 8px; font: inherit; background: #fff; color: inherit; }
.alan textarea { min-height: 90px; resize: vertical; }
.alan input:focus, .alan select:focus, .alan textarea:focus, .madde-not:focus { outline: 2px solid var(--sari); border-color: var(--sari); }
.genis { grid-column: 1 / -1; }
.secim-kutu { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 12px; }
.secim-kutu input { width: 20px; height: 20px; margin-top: 3px; }
details.yeni-musteri { margin-bottom: 10px; }
details.yeni-musteri summary { cursor: pointer; font-weight: 600; margin-bottom: 10px; color: var(--mor2); }
.secenekler { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.secenekler legend { font-weight: 600; margin-bottom: 6px; }
.secenekler label { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid #cfd0dc; border-radius: 8px; cursor: pointer; }
.secenekler input { width: 20px; height: 20px; }
.secenekler label:has(input:checked) { border-color: var(--mor); background: #f4f2fb; }
.taslak-uyari { background: #efefec; border: 1px solid var(--sari); border-radius: 8px; padding: 10px 12px; margin: 10px 0; }

/* bakım maddeleri: telefonda tek elle seçilecek büyüklükte */
.bolum-bas { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.bolum-bas h2 { margin: 0; }
.madde { border-top: 1px solid var(--cizgi); padding: 10px 0; display: grid; gap: 6px; }
.madde-ad { font-weight: 600; }
.madde-sec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.madde-sec label { position: relative; }
.madde-sec input { position: absolute; opacity: 0; }
.madde-sec span { display: block; text-align: center; padding: 9px 4px; border: 1px solid #cfd0dc; border-radius: 8px; font-weight: 600; cursor: pointer; user-select: none; }
.madde-sec input:focus-visible + span { outline: 2px solid var(--sari); }
.sec-uygun input:checked + span { background: var(--yesil); border-color: var(--yesil); color: #fff; }
.sec-hasarli input:checked + span { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }
.sec-yok input:checked + span { background: #6b6b80; border-color: #6b6b80; color: #fff; }
.madde-not { min-height: 38px; font-size: .95rem; }
.madde.eksik .madde-ad::after { content: ' — seçilmedi'; color: var(--turuncu); font-weight: 400; }
@media (min-width: 700px) {
  .madde { grid-template-columns: 1fr 260px; align-items: center; }
  .madde-not { grid-column: 1 / -1; }
}

/* parçalar */
.parca { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 0; border-top: 1px solid var(--cizgi); }
.parca input, .parca select { min-height: 42px; padding: 6px 9px; border: 1px solid #cfd0dc; border-radius: 8px; font: inherit; width: 100%; }
.parca .p-ad, .parca .p-sec { grid-column: 1 / -1; }
.parca .p-ad[hidden] { display: none; }
@media (min-width: 760px) {
  .parca { grid-template-columns: 1fr 2fr 1.4fr 1fr .7fr .9fr auto; align-items: center; }
  .parca .p-sec { grid-column: auto; }
  .parca .p-ad { grid-column: 2 / 4; grid-row: 2; }
}

/* fotoğraf ve imza */
.foto-alani { margin: 6px 0 14px; }
.foto-liste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.foto-oge { position: relative; }
.foto-oge img { width: 92px; height: 92px; object-fit: cover; border-radius: 8px; display: block; }
.foto-oge button { position: absolute; top: -6px; right: -6px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--kirmizi); color: #fff; font-weight: 700; cursor: pointer; }
.imzalar { display: grid; gap: 16px; margin: 10px 0 16px; }
@media (min-width: 700px) { .imzalar { grid-template-columns: 1fr 1fr; } }
canvas.imza { width: 100%; height: 230px; border: 1px dashed #b8b9c8; border-radius: 8px; background: #fff; touch-action: none; display: block; margin-bottom: 6px; }

/* QR etiketi */
.etiketler { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.etiket { width: 70mm; border: 2px solid #111; border-radius: 4mm; padding: 4mm; text-align: center; background: #fff; color: #111; }
.etiket-ust img { height: 11mm; width: auto; }
.etiket-baslik { font-weight: 700; font-size: 11pt; margin: 2mm 0; letter-spacing: .3px; }
.etiket .qr svg { width: 52mm; height: 52mm; display: block; margin: 0 auto; }
.etiket-yazi { font-size: 9pt; margin: 1mm 0 2mm; }
.etiket-alt { font-size: 8.5pt; border-top: 1px solid #111; padding-top: 2mm; line-height: 1.35; }
@media print {
  .ust, .alt, .ekranda { display: none !important; }
  body { background: #fff; }
  .sayfa { padding: 0; max-width: none; }
  .etiket { break-inside: avoid; }
}

/* ---- sürüm 2: sahiplik, devreye alma, izolasyon, teklif/teslim, silme ---- */
.durum.mor { background: #ebebe9; color: var(--mor2); margin: 2px 0 4px; }
.madde-sec.iki { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .madde:has(.madde-sec.iki) { grid-template-columns: 1fr 260px; } }
.motor { border: 1px solid var(--cizgi); border-radius: 8px; padding: 12px; margin-bottom: 12px; background: #fcfcfe; }
.motor h3 { margin: 0; font-size: 1.05rem; color: var(--mor); }
.motor h4 { margin: 12px 0 6px; font-size: .98rem; color: var(--mor2); }
.olcumler { display: grid; gap: 6px; }
@media (min-width: 700px) { .olcumler { grid-template-columns: 1fr 1fr; } }
.olcum { display: grid; grid-template-columns: 1fr 96px 112px; align-items: center; gap: 8px; }
.olcum span { font-weight: 600; font-size: .95rem; }
.olcum input { min-height: 42px; padding: 6px 9px; border: 1px solid #cfd0dc; border-radius: 8px; font: inherit; width: 100%; }
.izo-sonuc { font-size: .88rem; }
.izo-sonuc.iyi { color: var(--yesil); } .izo-sonuc.takip { color: var(--turuncu); } .izo-sonuc.kotu { color: var(--kirmizi); }
.kalem { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 0; border-top: 1px solid var(--cizgi); align-items: center; }
.kalem:first-child { border-top: 0; }
.kalem input, .kalem select { min-height: 42px; padding: 6px 9px; border: 1px solid #cfd0dc; border-radius: 8px; font: inherit; width: 100%; }
.kalem .k-ad { grid-column: 1 / -1; }
.k-tutar { font-weight: 600; text-align: right; }
@media (min-width: 760px) {
  .kalem { grid-template-columns: 2.4fr 1.3fr .7fr 1fr auto; }
  .kalem.fiyatli { grid-template-columns: 2.4fr .6fr .9fr 1fr .75fr 1.1fr auto; }
  .kalem .k-ad { grid-column: auto; }
}
.teklif-toplam { text-align: right; font-size: 1.15rem; margin: 12px 0 0; }
details.tehlike { border: 1px solid #f3c7c4; }
details.tehlike summary { cursor: pointer; color: var(--kirmizi); font-weight: 600; }
details.tehlike[open] summary { margin-bottom: 10px; }
.adet-sec { margin: 6px 0; }
.adet-sec select { min-height: 38px; padding: 4px 8px; border-radius: 8px; border: 1px solid #cfd0dc; font: inherit; margin-left: 6px; }

/* ---- sürüm 3: müşteri girişi ve iç not ---- */
.ozet { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
@media (min-width: 640px) { .ozet { grid-template-columns: repeat(4, 1fr); } }
.ozet > div { background: #f4f3f9; border-radius: 8px; padding: 10px; text-align: center; }
.ozet b { display: block; font-size: 1.6rem; color: var(--mor); line-height: 1.1; }
.ozet span { font-size: .85rem; color: var(--soluk); }
.ozet .kirmizi { background: #efefec; } .ozet .kirmizi b { color: var(--kirmizi); }
.ozet .turuncu { background: #efefec; } .ozet .turuncu b { color: #ef2c0b; }
.gecici-sifre { background: #efefec; border: 1px solid var(--sari); border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.sifre-yazi { font-family: ui-monospace, Consolas, monospace; font-size: 1.15rem; letter-spacing: 1px; }
.ic-not-alan span small { font-weight: 400; color: var(--soluk); }
.ic-not-alan textarea { background: #efefec; }
.ic-not-isaret { background: #efefec; color: #475569; border-radius: 6px; padding: 0 6px; }
/* uzun durum etiketi satırı taşırmasın: sol metin daralabilir, içindeki etiket alt satıra geçebilir */
.liste-satir > span, .liste-satir > a { min-width: 0; }
.liste-satir > span .durum, .liste-satir > a .durum { white-space: normal; }
.liste-satir > .durum { flex-shrink: 0; }

/* ---- sürüm 4: matbaa QR etiketleri ---- */
.etiket-kodu { font-family: ui-monospace, Consolas, monospace; letter-spacing: 2px; font-size: 1.05rem; }
.etiket-ekle { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--cizgi); }
.etiket-ekle input, input[name=etiket_kod] { text-transform: uppercase; font-family: ui-monospace, Consolas, monospace; letter-spacing: 2px; }

/* ---- sürüm 5: parça geçmişi ve istatistik ---- */
.parca-gecmis { border-top: 1px solid var(--cizgi); padding: 10px 0; }
.parca-gecmis:first-of-type { border-top: 0; }
.pg-tarihler { margin: 3px 0; font-size: .95rem; }
.pg-tahmin { font-size: .9rem; }
.pg-uyari, .pg-uyari-yazi { color: var(--turuncu); font-size: .9rem; font-weight: 600; }
.pg-alt { font-size: 1rem; margin: 14px 0 4px; color: var(--mor); }
.kucuk-not { font-size: .85rem; margin-top: 10px; }
.suzgec { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.suzgec select { min-height: 40px; padding: 4px 10px; border: 1px solid #cfd0dc; border-radius: 8px; font: inherit; background: #fff; }
.cubuklar { display: grid; gap: 10px; }
.cubuk-satir { display: grid; grid-template-columns: 1fr 34px; grid-template-areas: "ad deger" "iz iz"; gap: 3px 8px; align-items: center; }
.cubuk-ad { grid-area: ad; font-size: .95rem; min-width: 0; }
.cubuk-deger { grid-area: deger; text-align: right; font-weight: 700; color: var(--yazi); }
.cubuk-iz { grid-area: iz; height: 10px; }
.cubuk { display: block; height: 10px; background: var(--mor2); border-radius: 0 4px 4px 0; }
@media (min-width: 760px) { .cubuk-satir { grid-template-columns: minmax(0, 1.3fr) 1fr 40px; grid-template-areas: "ad iz deger"; } }
.katalog-satir { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--cizgi); }
.katalog-satir:first-of-type { border-top: 0; }
.katalog-satir input[type=text] { flex: 1 1 200px; min-height: 40px; padding: 6px 10px; border: 1px solid #cfd0dc; border-radius: 8px; font: inherit; }
.katalog-satir .secim-kutu { margin: 0; }
.katalog-satir.pasif input[type=text] { color: var(--soluk); background: #f4f4f7; }

/* telefonda üst menü tek satıra sığsın */
@media (max-width: 480px) { .ust { gap: 8px; } .ust-logo img { height: 28px; } .ust-menu { gap: 0; } .ust-menu a { padding: 6px 7px; font-size: .92rem; } }

/* ---- vinç başına olası sebep (teşhis) kutuları ---- */
.teshis { border: 1px solid #f1d39a; background: #efefec; border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
.teshis-bas { font-weight: 700; color: var(--turuncu); }
.teshis ul { margin: 4px 0 8px 20px; padding: 0; }
.teshis li { margin: 2px 0; }
.teshis-kanit { color: var(--yazi); font-size: .92rem; }
.teshis-alt { font-size: .95rem; }
.ozet span small { color: var(--soluk); }

/* ---- sürüm 6: sade açık tema (16.10, kullanıcı renk seçimini bıraktı) ---- */
body { background: var(--zemin); color: var(--yazi); }
a { color: #1d4ed8; }

/* Üst çubuk beyaz, renkli logo */
.ust { background: #fff; color: var(--yazi); border-bottom: 1px solid var(--cizgi); box-shadow: 0 1px 8px rgba(15, 23, 42, .05); padding: 10px 20px; }
.ust-menu a { color: var(--mor2); border-radius: 6px; padding: 8px 12px; display: inline-flex; align-items: center; gap: 7px; position: relative; }
.ust-menu a:hover { color: var(--mor); background: #f1f4f8; }
.ust-menu a.on { color: var(--mor); background: #e0e6ef; }
.ust-menu a.on .menu-ikon { color: var(--sari); }
.menu-ikon { width: 18px; height: 18px; flex-shrink: 0; }
.rozet { background: #dc2626; color: #fff; }
.sayfa { padding-top: 22px; }

/* Kartlar ve başlıklar */
.kart { border-radius: 8px; padding: 18px; margin-bottom: 16px; border: 1px solid var(--cizgi); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
h1 { color: var(--mor); font-weight: 700; letter-spacing: .1px; }
h2 { color: var(--mor); font-size: 1.08rem; display: flex; align-items: center; gap: 9px; }
.kart > h2::before, .bolum-bas h2::before { content: ''; width: 4px; height: 1.05em; border-radius: 2px; background: var(--sari); flex-shrink: 0; }
.ust-yazi { color: var(--soluk); }
.motor h3, .motor h4, .pg-alt { color: var(--mor); }

/* Düğmeler */
.dugme { background: var(--mor); color: #fff; border-radius: 6px; transition: background .15s, box-shadow .15s; }
.dugme:hover { filter: none; background: #0f172a; }
.dugme.ikincil { background: #fff; color: var(--mor); border: 1px solid #d6dbe3; }
.dugme.ikincil:hover { background: #f6f8fb; border-color: #c3cad5; }
.dugme.kirmizi:hover, .dugme.wa:hover, .dugme.yesil:hover { filter: brightness(1.07); }
.dugme.kirmizi:hover { background: var(--kirmizi); } .dugme.wa:hover { background: var(--wa); } .dugme.yesil:hover { background: var(--yesil); }

/* Hızlı form kutucukları */
.hizli { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 12px; }
.hizli-oge { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--cizgi); border-radius: 8px; background: #fff; color: var(--yazi); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.hizli-oge:hover { border-color: var(--sari); box-shadow: 0 6px 18px rgba(15, 23, 42, .08); transform: translateY(-1px); }
.hizli-ikon { flex: 0 0 44px; height: 44px; border-radius: 8px; background: #fdba01; color: #f1f0ee; display: grid; place-items: center; }
.hizli-oge b { display: block; font-size: 1rem; line-height: 1.2; }
.hizli-oge small { display: block; color: var(--soluk); font-size: .85rem; }

/* Diğer öğeler */
.sekmeler a { color: var(--mor2); border: 1px solid #d6dbe3; border-radius: 6px; background: #fff; }
.sekmeler a.on { background: #007bff; color: #fff; border-color: #007bff; }
.ara input { border-radius: 6px; border-color: #d6dbe3; }
a.liste-satir:hover, .liste-satir > a:hover { background: #f8fafc; }
.alan > span { color: #334155; }
.alan input, .alan select, .alan textarea, .madde-not { border-color: #d6dbe3; border-radius: 6px; }
.alan input:focus, .alan select:focus, .alan textarea:focus, .madde-not:focus { outline: 2px solid var(--sari); outline-offset: 0; border-color: var(--sari); }
.secenekler label:has(input:checked) { border-color: var(--mor); background: #f6f8fb; }
.ozet > div { background: #f6f8fb; border-radius: 8px; box-shadow: 0 1px 3px rgba(15, 23, 42, .12), 0 3px 10px rgba(15, 23, 42, .07); }
.ozet b { color: var(--mor); }
.durum.mor { background: #ebebe9; color: var(--mor2); }
.cubuk { background: var(--sari); }
.alt, .alt a, .bag { color: var(--soluk); }
.logo-ayar { display: grid; gap: 14px; align-items: start; }
@media (min-width: 640px) { .logo-ayar { grid-template-columns: 220px 1fr; } }
.logo-onizleme { border: 1px dashed #cbd2dc; border-radius: 8px; padding: 14px; background: #fff; display: grid; place-items: center; min-height: 100px; }
.logo-onizleme img { max-height: 80px; width: auto; }

/* ---- telefon: uygulama gibi — üstte logo, ana menü altta sabit sekme çubuğu ---- */
@media (max-width: 700px) {
  .ust { padding: 10px 14px; justify-content: center; }
  .ust-logo img { height: 30px; }
  body.menulu { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .menulu .ust-menu { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
    background: #fff; border-top: 1px solid var(--cizgi); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(15, 23, 42, .06); }
  .menulu .ust-menu a { flex-direction: column; gap: 3px; padding: 6px 2px; font-size: .74rem; font-weight: 600; border-radius: 6px; }
  .menulu .ust-menu .menu-ikon { width: 22px; height: 22px; }
  .menulu .ust-menu .rozet { position: absolute; top: 2px; left: calc(50% + 6px); font-size: .7rem; padding: 0 6px; }
  .alt { padding-bottom: 16px; }
  .sayfa { padding: 14px 12px 24px; }
  .kart { padding: 15px; margin-bottom: 12px; }
  h1 { font-size: 1.32rem; }
  .sayfa > .dugmeler, .izgara-dugme { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .sayfa > .dugmeler > *, .izgara-dugme > * { min-width: 0; padding-left: 8px; padding-right: 8px; }
  .hizli { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hizli-oge { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
  .hizli-ikon { flex-basis: auto; width: 40px; height: 40px; }
  .hizli-oge b { font-size: .95rem; }
  .hizli-oge small { font-size: .8rem; }
  .liste-satir { padding: 12px 0; }
  .ara input { min-height: 46px; }
}

/* ---- tam ekran imza (17.10): formdaki kutu önizleme, dokununca tüm ekran imza alanı ---- */
canvas.imza { height: 150px; cursor: pointer; touch-action: manipulation; }
canvas.imza:hover, canvas.imza:focus-visible { border-color: var(--sari); outline: none; background: #efefec; }
html.imza-acik, html.imza-acik body { overflow: hidden; }
.imza-ekran { position: fixed; inset: 0; z-index: 1000; background: #fff; display: flex; flex-direction: column; height: 100vh; height: 100dvh;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: contain; }
.imza-ekran[hidden] { display: none; }
.imza-ust { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--cizgi); }
.imza-baslik { font-size: 1.05rem; color: var(--mor); }
.imza-ipucu { display: none; font-size: .88rem; color: var(--sari-koyu); }
@media (orientation: portrait) and (max-width: 700px) { .imza-ipucu { display: inline; } }
.imza-alan { position: relative; flex: 1; min-height: 0; background: #fdfdfb; }
.imza-alan canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.imza-cizgi { position: absolute; left: 6%; right: 6%; bottom: 26%; border-bottom: 2px solid #cbd5e1; pointer-events: none; }
.imza-cizgi span { position: absolute; left: 0; bottom: 4px; font-size: 1.6rem; line-height: 1; color: #94a3b8; }
.imza-ad { position: absolute; left: 6%; right: 6%; bottom: calc(26% - 30px); text-align: center; color: var(--soluk); font-size: .95rem; pointer-events: none; }
.imza-alt { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--cizgi); background: #fff; }
.imza-alt .dugme { min-height: 46px; padding: 8px 14px; }
.imza-alt .dugme:disabled { opacity: .45; }
.imza-alt [data-i=tamam] { min-width: 110px; }
.imza-bosluk { flex: 1; }
@media (max-width: 420px) { .imza-alt { gap: 6px; } .imza-alt .dugme { padding: 8px 10px; font-size: .95rem; } .imza-alt [data-i=tamam] { min-width: 84px; } }
@media (max-height: 420px) { .imza-ust { padding: 6px 14px; } .imza-alt { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); } .imza-alt .dugme { min-height: 40px; } }


/* ---- ana sayfa özet kutuları (18.10, VinçKart'tan): her biri kendi renginde ---- */
.ana-ozet { margin: 0 0 12px; }
@media (min-width: 640px) { .ana-ozet { grid-template-columns: repeat(5, 1fr); } }
.ana-ozet > a, .ana-ozet > div { display: block; padding: 10px; text-align: center; border-radius: 8px; text-decoration: none; color: var(--yazi); }
@media (max-width: 639px) { .ana-ozet > :last-child { grid-column: span 2; } }
.ana-ozet > .oz { position: relative; overflow: hidden; border: 1px solid transparent; transition: transform .15s, box-shadow .15s; }
.ana-ozet > .oz::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--oz); }
.ana-ozet > .oz b { color: var(--oz); }
.ana-ozet > .oz span { color: #334155; }
.ana-ozet > a.oz:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 23, 42, .08); border-color: var(--oz); }
.oz-ariza  { --oz: #dc2626; background: #efefec !important; }
.oz-gecik  { --oz: #9f1239; background: #efefec !important; }
.oz-yakin  { --oz: #b45309; background: #efefec !important; }
.oz-form   { --oz: #15803d; background: #efefec !important; }
.oz-teklif { --oz: #0f766e; background: #efefec !important; }

/* listede bağlantının yanındaki düğme (ör. WhatsApp) genişlemesin (18.10) */
.liste-satir > a.dugme { flex: 0 0 auto; }

/* ---- 18.10: bölüm başlıkları VakıfBank sarısı (kullanıcı isteği); yanındaki çizgi koyu, iki sarı birbirine karışmasın ---- */
body:not(.vitrin) .kart > h2, body:not(.vitrin) .bolum-bas h2 { color: var(--sari); }
body:not(.vitrin) .kart > h2::before, body:not(.vitrin) .bolum-bas h2::before { background: #1e293b; }

/* ---- 18.10: telefonda dokunma ---- */
a, button, label, summary { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.dugme:active { transform: scale(.98); }
@media (max-width: 700px) {
  .dugme { min-height: 46px; }
  .dugme.kucuk { min-height: 42px; padding: 6px 14px; }
  .sayfa > .dugmeler > :last-child:nth-child(odd), .izgara-dugme > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .alt form .bag, .alt .bag { display: inline-block; padding: 12px 18px; }
  .kart > h2 { font-size: 1.08rem; margin-bottom: .8rem; }
  .liste-satir > a.dugme { align-self: center; }
}

/* ---- 18.10: koyu düğmeler VakıfBank sarısı (kullanıcı isteği); yazı koyu kalır, okunur ---- */
.dugme { background: var(--sari); color: #1e293b; }
.dugme:hover { background: #e39c00; color: #1e293b; }
.dugme:disabled { opacity: .6; }
.vt-fiyat-bant .dugme { background: var(--sari); color: #1e293b; box-shadow: 0 6px 16px -8px rgba(120, 80, 0, .55); }
.vt-fiyat-bant .dugme:hover { background: #e39c00; color: #1e293b; }

/* ---- 18.10: QR etiketi baskısı — A4'e 2 sütun, en az 6 etiket (kullanıcı: "en az 4 tane sığsın") ---- */
@media print {
  @page { size: A4; margin: 8mm; }
  .etiket-sayfa .etiketler { display: grid; grid-template-columns: repeat(2, 70mm); gap: 5mm 12mm; justify-content: center; }
  html, body, .etiket-sayfa { background: #fff !important; }
  .etiket-sayfa .etiket { padding: 3mm; border-radius: 2mm; }
  .etiket-sayfa .etiket-ust img, .etiket-sayfa .etiket img { height: 9mm; max-height: 9mm; }
  .etiket-sayfa .etiket-baslik { margin: 1.2mm 0; font-size: 10pt; }
  .etiket-sayfa .etiket .qr svg { width: 44mm; height: 44mm; }
  .etiket-sayfa .etiket-yazi { margin: .5mm 0 1.5mm; }
}

/* ---- 18.10: düğme rengi mavi #007bff (kullanıcının seçtiği iki renkten; sarı başlıklarla karışmasın diye mavi tercih edildi) ---- */
.dugme { background: #007bff; color: #fff; }
.dugme:hover { background: #0069d9; color: #fff; }
.dugme:focus-visible { outline: 3px solid rgba(0, 123, 255, .35); outline-offset: 2px; }
.vt-fiyat-bant .dugme { background: #007bff; color: #fff; box-shadow: 0 6px 16px -8px rgba(0, 80, 180, .55); }
.vt-fiyat-bant .dugme:hover { background: #0069d9; color: #fff; }
/* beyaz zeminli düğmeler üzerine gelince yazı koyu kalır (mavi düğme kuralı yazıyı beyaz yapıyordu) */
.dugme.ikincil:hover { color: var(--mor); }

/* vinç kartında 'Vinci sil' (18.10): beyaz zemin, kırmızı yazı; üzerine gelince açık kırmızı zemin */
.vinc-sil { margin: 4px 0 10px; }
.dugme.sil-dugme { background: #fff; color: var(--kirmizi); border: 1px solid #f3c7c4; }
.dugme.sil-dugme:hover { background: #efefec; color: var(--kirmizi); border-color: var(--kirmizi); }

/* etiket partisi satırı (18.10): telefonda düğmeler yazının altında, ilk düğme (A4 6lı) tam genişlik */
@media (max-width: 700px) {
  .parti-satir { flex-direction: column; align-items: stretch; gap: 10px; }
  .parti-satir > .dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
  .parti-satir > .dugmeler > :first-child { grid-column: 1 / -1; }
  .parti-satir > .dugmeler form, .parti-satir > .dugmeler form .dugme { width: 100%; }
}

/* Excel'den vinç aktarma önizlemesi (18.10) */
.tablo-kap { overflow-x: auto; margin: 10px 0 14px; border: 1px solid var(--cizgi); border-radius: 8px; }
.aktar-tablo { border-collapse: collapse; width: 100%; font-size: .9rem; }
.aktar-tablo th, .aktar-tablo td { padding: 7px 10px; border-bottom: 1px solid var(--cizgi); text-align: left; white-space: nowrap; }
.aktar-tablo th { background: #f6f8fb; color: var(--mor2); font-weight: 600; position: sticky; top: 0; }
.aktar-tablo tr.atla td { color: var(--soluk); text-decoration: line-through; }
.aktar-tablo tr.atla td:last-child { text-decoration: none; }

/* ziyaret imzası (18.10): isteğe bağlı seçim ve 'bugünkü imza kullanıldı' notu */
.ziyaret-sec { margin: 8px 0 0; font-size: .92rem; color: var(--mor2); }
.ziyaret-not { margin: 0 0 6px; padding: 7px 10px; border-radius: 6px; background: #efefec; color: #14532d; font-size: .9rem; }
.ziyaret-not .bag { color: #14532d; margin-left: 4px; }
.ziyaret-sec { display: flex; gap: 8px; align-items: flex-start; width: 100%; margin: 10px 0 0; cursor: pointer; }
.ziyaret-sec input { width: 20px; height: 20px; flex: 0 0 auto; margin: 1px 0 0; accent-color: #007bff; }

/* QR kartı: arıza düğmesinin altında bakım talebi (22.10) */
.bakim-talep { margin-top: 10px; }

/* Portal: arıza / bakım talebi düğmeleri, vinç başına düğmeler, servisten gelen not; vinç seçimi (22.10) */
.portal-eylem .dugme + .dugme { margin-top: 10px; }
.portal-vinc { border-bottom: 1px solid var(--cizgi); padding-bottom: 10px; }
.portal-vinc:last-child { border-bottom: 0; }
.portal-vinc .liste-satir { border-bottom: 0; }
.portal-vinc-dugme { margin: 0; gap: 8px; }
.portal-not { border: 1px solid #f1d58a; background: #efefec; }
.portal-not-vinc { margin: 0 0 12px; padding-left: 18px; }
.portal-not-vinc li { margin-bottom: 4px; }
.portal-tek-vinc { background: var(--zemin); border-radius: 6px; padding: 10px 12px; }
.kucuk-bag { font-size: .85rem; font-weight: 400; margin-left: 6px; }
.vinc-sec label { align-items: flex-start; }
.vinc-sec label span { line-height: 1.45; }

/* Talepler sayfası (22.10): arıza kırmızı, bakım sarı, parça mavi */
.talep-kart { border-top: 4px solid var(--cizgi); }
.talep-ariza { border-top-color: #dc2626; } .talep-ariza h2 { color: #dc2626 !important; }
.talep-bakim { border-top-color: #f5a700; } .talep-bakim h2 { color: #b77900 !important; }
.talep-parca { border-top-color: #2563eb; } .talep-parca h2 { color: #2563eb !important; }
.talep-sayi { display: inline-block; min-width: 24px; padding: 0 7px; margin-left: 6px; border-radius: 12px; background: currentColor; font-size: .82rem; line-height: 22px; text-align: center; vertical-align: middle; }
.talep-sayi { color: #fff; } .talep-ariza .talep-sayi { background: #dc2626; } .talep-bakim .talep-sayi { background: #f5a700; } .talep-parca .talep-sayi { background: #2563eb; }
.talep-bekleyen { margin: -6px 0 16px; text-align: right; font-weight: 600; }
.portal-eylem .dugme.tam:last-child:not(.buyuk) { margin-top: 10px; }

/* Portal temizliği (22.10): notu kapat, tamamlanan talebi kaldır */
.portal-not { position: relative; }
.not-kapat { position: absolute; top: 12px; right: 12px; margin: 0; }
.portal-not h2 { padding-right: 90px; }
.talep-sag { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.talep-temizle { margin: 12px 0 0; text-align: right; }

/* Bugün > vinç formu aç: müşteri + vinç tek ekranda (22.10) */
.fb-yeni-musteri, .fb-yeni-vinc { background: var(--zemin); border-radius: 6px; padding: 12px; margin: 0 0 14px; }
[data-form-baslat] [hidden] { display: none !important; }
.kur-bilgi { margin: 0; font-size: .9rem; }
/* Kalan ömür ve iş planı (26.10.2026) */
.omur-cubuk { height: 12px; border-radius: 6px; background: #e5e7eb; overflow: hidden; margin: 10px 0 8px; }
.omur-cubuk span { display: block; height: 100%; background: #16a34a; }
.omur-cubuk.turuncu span { background: #f59e0b; }
.omur-cubuk.kirmizi span { background: #dc2626; }
.kucuk-not { font-size: .85rem; margin-top: 10px; }
.ziyaret-duzen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 10px; }
.ziyaret-duzen input, .ziyaret-duzen select { min-height: 36px; padding: 4px 8px; border: 1px solid #cfd0dc; border-radius: 8px; font: inherit; }
/* Kalan ömür: vinç kartı içinde (26.10.2026) */
.omur-ozet { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e5e7eb; }
.omur-ozet .omur-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.omur-ozet p { margin: 4px 0; }
.omur-ozet .omur-cubuk { margin: 8px 0 6px; }

/* Kalan ömür göstergesi — Durum kartının parçası (26.10.2026) */
.durumlar li.omur-li { display: block; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--cizgi); }
.og-ust { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.og-sol { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.og-ad { font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--soluk); }
.og-yuzde { font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--yazi); white-space: nowrap; }
.og-cubuk { height: 12px; border-radius: 6px; background: #e5e7eb; overflow: hidden; margin: 10px 0 8px; }
.og-cubuk span { display: block; height: 100%; border-radius: 6px; background: #16a34a; }
.omur-gosterge.turuncu .og-cubuk span { background: #f59e0b; }
.omur-gosterge.kirmizi .og-cubuk span { background: #dc2626; }
.omur-gosterge.kirmizi .og-yuzde { color: #b91c1c; }
.og-alt { display: flex; justify-content: space-between; gap: 4px 14px; flex-wrap: wrap; font-size: .88rem; color: var(--soluk); }
.og-alt b { color: var(--yazi); font-weight: 600; }
.og-not { margin-top: 10px; font-size: .8rem; color: var(--soluk); line-height: 1.55; }
@media (max-width: 480px) { .og-alt { flex-direction: column; } .og-yuzde { font-size: 1.4rem; } }