/* Teklif talep formları — ortak stil */

.form-hero { padding: 52px 0 30px; }
.form-hero h1 { font-size: clamp(26px, 5vw, 38px); letter-spacing: -.02em; margin: 0 0 12px; }
.form-hero p  { color: var(--muted); font-size: 16px; max-width: 62ch; margin: 0; }
.form-hero .geri { font-size: 14px; color: var(--muted); display: inline-flex; align-items: center; min-height: 34px; margin-bottom: 12px; }   /* dokunma hedefi */

form { padding-bottom: 80px; }

fieldset {
  min-inline-size: 0;                            /* tarayıcı varsayılanı min-content: geniş içerik ekranı taşırmasın */
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 22px 24px 24px; margin: 0 0 18px;
  box-shadow: var(--shadow);
}
legend {
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--line); border-radius: 20px;
  padding: 5px 14px; margin-left: -2px;
}
fieldset > .aciklama {
  color: var(--muted); font-size: 14px; margin: 10px 0 18px;
}

/* alan ızgarası */
.alanlar { display: grid; gap: 16px 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.alan.genis { grid-column: 1 / -1; }
/* bölüm numarası sayaçla: yalnız görünen bölüm sayılır, gizlenen bölüm sırayı bozmaz (teklif-pcb) */
form.sirali { counter-reset: bolum; }
form.sirali fieldset.sirali > legend::before { counter-increment: bolum; content: counter(bolum) " · "; }

label.ust {
  display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px;
}
label.ust .zorunlu { color: var(--accent); }
label.ust .ipucu { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
/* yan yana alanlarda ipucu girdinin altında: girdiler aynı hizada başlar */
.alan > p.ipucu { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 6px 0 0; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="date"], input[type="password"], input[type="search"], select, textarea {
  width: 100%; padding: 9px 12px; font: inherit; font-size: 14.5px;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px;
}
@media (max-width: 760px) {                      /* iPhone 16 px altındaki alana dokununca sayfayı büyütür */
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="date"], input[type="password"], input[type="search"], select, textarea { font-size: 16px; }
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { min-height: 92px; resize: vertical; line-height: 1.6; }
input[type="file"] {
  width: 100%; font-size: 13.5px; color: var(--muted);
  padding: 14px; border: 1.5px dashed var(--line); border-radius: 8px; background: var(--bg);
}

/* fotoğraf alanı: seçilenler birikir, küçük önizlemeyle tek tek kaldırılır (teklif-form.js) */
input.gorsel-girdi {                             /* gizli; genel input[type=file] genişliğini ezer (taşmasın) */
  position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; border: 0;
  opacity: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none;
}
.gorsel-dugme {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--ink); background: var(--bg);
  border: 1.5px dashed var(--line); border-radius: 8px;
}
.gorsel-dugme:hover { border-color: var(--accent); color: var(--accent); }
input.gorsel-girdi:focus-visible + .gorsel-dugme { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.gorsel-liste {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
}
.gorsel-liste:empty { display: none; }
.gorsel-liste li {
  position: relative; aspect-ratio: 1; overflow: hidden;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
}
.gorsel-liste img { display: block; width: 100%; height: 100%; object-fit: cover; }
button.gorsel-kaldir {                           /* fotoğrafın üstünde: her temada koyu zemin + beyaz */
  position: absolute; top: 4px; right: 4px; width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; line-height: 1; border-radius: 50%;
  background: rgba(0, 0, 0, .62); color: #fff; border: 1px solid rgba(255, 255, 255, .5);
}
button.gorsel-kaldir:hover { background: var(--bad); filter: none; }

/* seçenek düğmeleri */
.secenekler { display: flex; flex-wrap: wrap; gap: 8px; }
.secenekler input { position: absolute; opacity: 0; pointer-events: none; }
.secenekler label {
  display: inline-flex; align-items: center; min-height: 34px; cursor: pointer; user-select: none;
  padding: 6px 14px; font-size: 14px; line-height: 1.35; border-radius: 7px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
}
.secenekler label:hover { border-color: var(--accent); }
.secenekler input:checked + label {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600;
}
.secenekler input:focus-visible + label { box-shadow: 0 0 0 3px var(--accent-soft); }
.secenekler label.bilmiyorum { font-style: italic; color: var(--muted); }
.secenekler input:checked + label.bilmiyorum { color: var(--accent-ink); font-style: normal; }

/* katlanır detay bölümü */
details.detay {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); margin: 0 0 18px; box-shadow: var(--shadow);
}
details.detay > summary {
  cursor: pointer; padding: 18px 24px; font-weight: 600; font-size: 15px;
  list-style: none; display: flex; align-items: center; gap: 10px;
}
details.detay > summary::-webkit-details-marker { display: none; }
details.detay > summary::before {
  content: "+"; flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1;
}
details.detay[open] > summary::before { content: "−"; }
details.detay > summary .ipucu { font-weight: 400; color: var(--muted); font-size: 13px; }
details.detay .icerik { padding: 0 24px 24px; }

/* canlı özet — formun sonunda, akışta (ekrana yapışıp alanları kapatmaz) */
.ozet-sar { padding-top: 8px; }
.ozet {
  background: var(--panel); border: 1px solid var(--accent);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow);
}
.ozet h3 {
  margin: 0; padding: 14px 20px; font-size: 14px; letter-spacing: .04em;
  background: var(--accent-soft); color: var(--accent);
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.ozet h3 span { font-weight: 400; font-size: 12.5px; color: var(--muted); }
.ozet .govde { }                                 /* iç kaydırma yok: satırlar düğmelerin altına sarkmaz */
.ozet table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ozet td { padding: 7px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ozet tr:last-child td { border-bottom: none; }
.ozet td:first-child { color: var(--muted); width: 42%; }
.ozet td:last-child { font-weight: 600; }
.ozet .bos { padding: 22px 20px; color: var(--muted); font-size: 14px; text-align: center; }
@media (max-width: 760px) {                      /* dar ekranda tablo yok: "etiket: değer" satırları */
  .ozet table, .ozet tbody, .ozet tr, .ozet td { display: block; width: auto; }
  .ozet tr { padding: 7px 16px; border-bottom: 1px solid var(--line); }
  .ozet tr:last-child { border-bottom: 0; }
  .ozet td, .ozet td:first-child { width: auto; padding: 0; border: 0; overflow-wrap: anywhere; }
  .ozet td:first-child { font-size: 12.5px; }
}

.gonder-satir {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 16px 20px; border-top: 1px solid var(--line); background: var(--bg-alt);
}
.gonder-satir .not { font-size: 12.5px; color: var(--muted); flex: 1 1 200px; }
@media (max-width: 480px) {                      /* dar ekranda düğmeler eşit, tam genişlik */
  .gonder-satir button { flex: 1 1 100%; }
}
@media (max-width: 760px) {                      /* katlanır başlık: ipucu alt satırda, sıkışmasın */
  details.detay > summary { flex-wrap: wrap; row-gap: 2px; }
  details.detay > summary .ipucu { flex-basis: 100%; padding-left: 32px; }
}
.gonder-satir .not.hata { color: var(--bad); font-weight: 600; }

/* aydınlatma metni onayı */
.onay-satir { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; line-height: 1.5; }
.onay-satir input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: var(--accent); }
button:disabled { opacity: .55; cursor: progress; filter: none; }

button {
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  padding: 11px 24px; border-radius: 8px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-ink);
}
button:hover { filter: brightness(1.08); }
button.ikincil { background: var(--panel); color: var(--ink); border-color: var(--line); }
button.ikincil:hover { border-color: var(--accent); color: var(--accent); filter: none; }

.gizli { display: none !important; }

/* ---------- yetenek / bilgi kutuları ---------- */

.kutu {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  background: var(--panel); border-radius: 0 12px 12px 0;
  padding: 20px 22px; margin: 0 0 18px; box-shadow: var(--shadow);
}
.kutu > h3 {
  margin: 0 0 6px; font-size: 15.5px; letter-spacing: -.01em;
}
.kutu > p { margin: 0 0 14px; color: var(--muted); font-size: 14px; }

.yetenek { display: grid; gap: 8px 26px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.yetenek ul { list-style: none; margin: 0; padding: 0; }
.yetenek li { font-size: 14px; padding: 3px 0 3px 24px; position: relative; line-height: 1.5; }
.yetenek li::before {
  position: absolute; left: 0; top: 3px; font-weight: 700; font-size: 13px;
}
.yetenek .basligi {
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.yapilir  li::before { content: "✓"; color: var(--ok); }
.yapilmaz li::before { content: "✕"; color: var(--bad); }
.yapilmaz li { color: var(--muted); }
.dikkat   li::before { content: "!"; color: var(--uyari); }

/* koşullu uyarı şeridi */
.uyari-serit {
  border: 1px solid var(--uyari); border-left-width: 3px;
  background: var(--accent-soft); border-radius: 0 10px 10px 0;
  padding: 14px 18px; margin: 4px 0 0; font-size: 14px; line-height: 1.6;
}
.uyari-serit b { color: var(--uyari); }

/* alan içi küçük not */
.alan-not {
  font-size: 12.5px; color: var(--muted); margin: 6px 0 0; line-height: 1.5;
}