/* Tek sütun başvuru kâğıdı; renkler Teklif Masası ile aynı, yazılar Apple sistem fontları (SF Pro). */
:root {
  --bg: #F3F4F8; --kagit: #FFFFFF; --cukur: #ECEEF4; --yazi: #151827; --soluk: #5C6277; --cizgi: #DADDE8;
  --vurgu: #2A40AE; --vurgu-acik: #E4E8FA; --vurgu-ustu: #FFFFFF;
  --hata: #AF372D; --hata-acik: #F8E2DF; --uyari: #935C08; --uyari-acik: #F9EDD8; --iyi: #1D7748;
  --golge: rgba(21, 24, 39, .06);
  --f-baslik: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-govde: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1017; --kagit: #171A24; --cukur: #1F2330; --yazi: #E7E9F1; --soluk: #9A9FB4; --cizgi: #2B3042;
    --vurgu: #93A5FF; --vurgu-acik: #242C50; --vurgu-ustu: #0B1030;
    --hata: #F07A6E; --hata-acik: #3D1C19; --uyari: #E9B04F; --uyari-acik: #3A2B12; --iyi: #5CCB92;
    --golge: rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--yazi);
  font: 17px/1.47 var(--f-govde); letter-spacing: -.022em; -webkit-font-smoothing: antialiased;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
[hidden] { display: none !important; }

.test-serit {
  background: var(--uyari-acik); color: var(--uyari); font: 600 14px/1.4 var(--f-govde); letter-spacing: -.01em;
  text-align: center; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
}
.sayfa {
  max-width: 720px; margin: 0 auto;
  padding: 40px max(16px, env(safe-area-inset-right, 0px)) 72px max(16px, env(safe-area-inset-left, 0px));
  display: grid; gap: 24px;
}
.bas { display: grid; gap: 10px; padding: 0 4px; }
.ust { margin: 0; font: 600 13px/1.3 var(--f-govde); letter-spacing: .06em; text-transform: uppercase; color: var(--vurgu); }
h1 { margin: 0; font: 700 clamp(28px, 6vw, 40px)/1.1 var(--f-baslik); letter-spacing: -.025em; text-wrap: balance; }
.giris { margin: 0; color: var(--soluk); max-width: 56ch; }

.kagit { background: var(--kagit); border: 1px solid var(--cizgi); border-radius: 18px; box-shadow: 0 1px 2px var(--golge); }
.bolum { border: 0; margin: 0; padding: 24px 24px 26px; border-top: 1px solid var(--cizgi); display: grid; gap: 14px; min-width: 0; }
.bolum:first-child { border-top: 0; }
legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; font: 600 20px/1.25 var(--f-baslik); letter-spacing: -.02em; }
legend + * { clear: both; }
i { font-style: normal; color: var(--hata); }
.not { margin: 0; font-size: 14px; color: var(--soluk); letter-spacing: -.01em; }

.izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.alan { display: grid; gap: 6px; min-width: 0; }
.alan > span { font-size: 14px; font-weight: 500; color: var(--soluk); letter-spacing: -.01em; }
input[type=text], input[type=email], input[type=tel], input[type=date], select, textarea {
  width: 100%; min-width: 0; font: 16px/1.35 var(--f-govde); letter-spacing: -.01em; color: var(--yazi);
  background: var(--kagit); border: 1px solid var(--cizgi); border-radius: 10px; padding: 11px 12px;
  -webkit-appearance: none; appearance: none;
}
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--soluk) 50%), linear-gradient(135deg, var(--soluk) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px;
}
input[type=date] { min-height: 46px; }
textarea { resize: vertical; min-height: 140px; line-height: 1.45; }
::placeholder { color: var(--soluk); opacity: .75; }
:is(input, select, textarea):focus-visible { outline: none; border-color: var(--vurgu); box-shadow: 0 0 0 3px var(--vurgu-acik); }
[aria-invalid="true"] { border-color: var(--hata) !important; }
button:focus-visible, summary:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }

.secim { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 16px; letter-spacing: -.015em; }
.secim input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--vurgu); }
.secim small { display: block; font-size: 14px; color: var(--soluk); letter-spacing: -.01em; }

.icerikler { display: grid; }
.icerik { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cizgi); }
.icerik:last-child { border-bottom: 0; }
.icerik b { font-weight: 600; display: block; }
.icerik small { font-size: 14px; color: var(--soluk); }
.sayac { display: inline-flex; align-items: center; background: var(--cukur); border-radius: 10px; padding: 3px; }
.sayac button {
  width: 36px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--vurgu);
  font: 500 22px/1 var(--f-govde); cursor: pointer;
}
.sayac button:disabled { color: var(--soluk); opacity: .4; cursor: default; }
.sayac output { min-width: 34px; text-align: center; font: 600 16px var(--f-govde); font-variant-numeric: tabular-nums; }
.icerik.secili .sayac { background: var(--vurgu-acik); }
.toplam { margin: 0; font-size: 14px; color: var(--soluk); font-variant-numeric: tabular-nums; }

.kvkk { background: var(--cukur); border-radius: 12px; padding: 12px 16px; font-size: 14px; letter-spacing: -.01em; }
.kvkk summary { cursor: pointer; font-weight: 600; color: var(--vurgu); }
.kvkk p { margin: 10px 0 0; color: var(--soluk); }
.kvkk b { color: var(--yazi); font-weight: 600; }
.kvkk .eksik { color: var(--uyari); font-weight: 600; }

.hata { margin: -4px 0 0; font-size: 14px; color: var(--hata); font-weight: 500; letter-spacing: -.01em; }
.hata.genel { margin: 0; background: var(--hata-acik); border-radius: 10px; padding: 10px 14px; }
.tuzak { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.gonder { padding: 0 24px 24px; display: grid; gap: 12px; }
.dugme {
  appearance: none; border: 0; border-radius: 12px; background: var(--vurgu); color: var(--vurgu-ustu);
  font: 600 17px/1 var(--f-govde); letter-spacing: -.02em; padding: 16px 22px; cursor: pointer; width: 100%;
}
.dugme:disabled { opacity: .55; cursor: progress; }
.dugme.ikincil { background: var(--cukur); color: var(--vurgu); width: auto; justify-self: center; }

.tamam { padding: 40px 24px; text-align: center; display: grid; gap: 14px; justify-items: center; }
.tamam:focus { outline: none; }
.tamam h2 { margin: 0; font: 700 28px/1.15 var(--f-baslik); letter-spacing: -.025em; }
.tamam p { margin: 0; color: var(--soluk); max-width: 46ch; }
.tamam p b { color: var(--yazi); font-weight: 600; overflow-wrap: anywhere; }
.isaret { width: 56px; height: 56px; border-radius: 50%; background: var(--iyi); position: relative; }
.isaret::after {
  content: ""; position: absolute; left: 19px; top: 14px; width: 12px; height: 22px;
  border: solid var(--kagit); border-width: 0 4px 4px 0; transform: rotate(45deg);
}

@media (max-width: 520px) {
  .sayfa { padding-top: 28px; }
  .bolum { padding: 20px 18px 22px; }
  .gonder { padding: 0 18px 20px; }
}