/* Servis formu müşteri sayfası — telefon öncelikli. Kimlik: petrol + mor (nVR). */
:root {
  --petrol: #14857c;
  --petrol-koyu: #0e5f59;
  --mor: #9a83f0;
  --zemin: #f3f6f6;
  --yuzey: #ffffff;
  --metin: #17232a;
  --metin-2: #52636a;
  --metin-3: #85959b;
  --cizgi: #d5dedb;
  --tehlike: #c0392b;
  --tehlike-zemin: #fdf1ef;
  --basari: #1e8e5a;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}
.sayfa { max-width: 720px; margin: 0 auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); }
.form { display: flex; flex-direction: column; gap: 12px; }

.ust {
  display: flex; gap: 14px; align-items: center;
  background: linear-gradient(135deg, var(--petrol-koyu), #0b3f46);
  color: #fff; border-radius: 16px; padding: 18px;
}
.ust-ikon { flex: none; width: 46px; height: 46px; border-radius: 12px; background: rgba(255, 255, 255, .14); display: grid; place-items: center; font-size: 22px; }
.ust-etiket { margin: 0 0 2px; font-size: 11px; letter-spacing: .08em; opacity: .75; font-weight: 600; }
.ust h1 { margin: 0; font-size: 20px; line-height: 1.2; }
.ust-firma { margin: 4px 0 0; font-size: 13px; opacity: .85; }

.kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 14px; padding: 16px; }
.kart h2 { margin: 0 0 10px; font-size: 15px; }
.bilgi { margin: 0; white-space: pre-wrap; color: var(--metin-2); }
.ipucu { margin: -4px 0 12px; font-size: 12.5px; color: var(--metin-3); }
.rozetler { display: flex; flex-wrap: wrap; gap: 8px; }
.rozet { background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; color: var(--metin-2); font-weight: 500; }

.soru { border: 1px solid var(--cizgi); border-radius: 12px; padding: 12px; background: var(--zemin); margin-bottom: 10px; }
.soru.eksik { border-color: var(--tehlike); background: var(--tehlike-zemin); }
.soru-metin { margin: 0 0 10px; }
.zorunlu { color: var(--tehlike); font-weight: 700; }
.secenekler { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.secenek {
  min-height: 46px; border-radius: 10px; border: 1.5px solid var(--cizgi); background: var(--yuzey); color: var(--metin);
  font: inherit; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.secenek[aria-pressed="true"]:first-child { border-color: var(--basari); background: #e8f6ef; color: var(--basari); }
.secenek[aria-pressed="true"]:last-child { border-color: var(--tehlike); background: var(--tehlike-zemin); color: var(--tehlike); }
.secenek:focus-visible, input:focus-visible, button:focus-visible { outline: 3px solid color-mix(in srgb, var(--petrol) 45%, transparent); outline-offset: 2px; }

input[type="text"] {
  width: 100%; min-height: 46px; border-radius: 10px; border: 1.5px solid var(--cizgi); padding: 0 14px; font: inherit; background: var(--yuzey); color: var(--metin);
}
.imza-tuval {
  display: block; width: 100%; height: 190px; border: 1.5px dashed var(--cizgi); border-radius: 12px; background: var(--yuzey);
  touch-action: none; /* parmakla çizerken sayfa kaymasın */ cursor: crosshair;
}
.sag { display: flex; justify-content: flex-end; margin-top: 6px; }
.yazi-dugme { background: none; border: 0; color: var(--petrol); font: inherit; font-weight: 600; padding: 8px 4px; cursor: pointer; }

.uyari { margin: 4px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--tehlike-zemin); color: var(--tehlike); font-weight: 600; font-size: 13.5px; }
.uyari[hidden], .hata-satiri[hidden] { display: none; }
.alt { display: flex; flex-direction: column; gap: 10px; position: sticky; bottom: 0; padding: 10px 0 4px; background: linear-gradient(to top, var(--zemin) 70%, transparent); }
.hata-satiri { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--tehlike-zemin); color: var(--tehlike); font-weight: 600; font-size: 13.5px; }
.ana-dugme {
  min-height: 52px; border: 0; border-radius: 12px; font: inherit; font-weight: 700; font-size: 16px; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, var(--petrol), var(--petrol-koyu));
}
.ana-dugme:disabled { opacity: .55; cursor: not-allowed; }

.mesaj { text-align: center; padding: 18px 8px; }
.mesaj h1 { margin: 0 0 8px; font-size: 20px; }
.mesaj p { margin: 0; color: var(--metin-2); }
.mesaj.hata h1 { color: var(--tehlike); }
.mesaj.basari h1 { color: var(--basari); }
.buyuk-tik { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; background: #e8f6ef; color: var(--basari); display: grid; place-items: center; font-size: 34px; font-weight: 700; }
.yukleniyor { margin: 0; text-align: center; color: var(--metin-3); padding: 18px; }

@media (prefers-color-scheme: dark) {
  :root { --zemin: #0f1a1c; --yuzey: #16252a; --metin: #e8efee; --metin-2: #a9b9bc; --metin-3: #7d9094; --cizgi: #2b3f44; --tehlike-zemin: #3a1d1a; }
  .secenek[aria-pressed="true"]:first-child { background: #12382a; }
  .buyuk-tik { background: #12382a; }
  .imza-tuval { background: #f8fafa; } /* imza koyu mürekkep: açık zeminde kalmalı */
}

.marka { margin-top: 18px; text-align: center; font-size: 12px; color: var(--metin-3); }
.marka a { color: var(--petrol); font-weight: 600; text-decoration: none; }
.marka a:hover { text-decoration: underline; }