:root{
  --bg:#0e0f12;
  --card:#151820;
  --text:#e7ecf3;
  --muted:#9aa3af;
  --primary:#4f8cff;
  --danger:#ff5d5d;
  --ring:rgba(79,140,255,0.35);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }

html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size:17px; /* genel metni de hafif büyüttük */
  line-height:1.5;
}
body{ min-height:100vh; }

#app{
  max-width:640px;
  margin:0 auto;
  padding:16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
  padding-bottom:max(16px, env(safe-area-inset-bottom));
  animation: appFade .3s ease both;
}

@keyframes appFade{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Başlıklar biraz daha iri */
h1{ font-size:1.75rem; margin:8px 0 6px; }
h2{ font-size:1.35rem; margin:12px 0; }
h3{ font-size:1.15rem; margin:8px 0; }

.note{
  background:var(--card);
  padding:14px; border-radius:14px;
  color:var(--muted); border:1px solid #1e2230;
}

/* Basit geçiş animasyonu */
.screen{
  display:block;
  opacity:0; transform:translateY(6px);
  transition:opacity .22s ease, transform .22s ease;
}
.screen:not(.hidden){ opacity:1; transform:translateY(0); }
.hidden{ display:none !important; }

/* --- FORM ALANLARI BÜYÜTME --- */
.field{ margin:14px 0; }
.field label{
  display:block; font-size:1rem; margin-bottom:8px; color:#cbd5e1;
}

/* Input / Select / Date */
.field input[type="text"],
.field input[type="number"],
.field input[type="date"],
.field select{
  width:100%;
  padding:16px 14px;                 /* daha dolgun */
  border-radius:14px;
  border:1px solid #22283a;
  background:#0f121a; color:var(--text);
  outline:none;
  font-size:18px;                     /* iOS zoom tetiklemez, okunaklı */
  line-height:1.2;
  min-height:52px;                    /* dokunma hedefi */
}
.field input:focus, .field select:focus{
  border-color:var(--primary); box-shadow:0 0 0 4px var(--ring);
}

/* Number spinner gizle */
.field input[type="number"]{ -moz-appearance:textfield; }
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* Yardım metinleri */
.hint{ color:var(--muted); font-size:.95rem; margin-top:6px; }
.hint.error{ color:#ff9b9b; }

/* Segmented radio (cinsiyet) */
.seg{ display:flex; gap:12px; }
.seg label{
  display:flex; gap:8px; align-items:center;
  background:var(--card); padding:12px 14px;
  border-radius:14px; border:1px solid #1e2230;
  cursor:pointer; font-size:1rem;
}
.seg input{ accent-color: var(--primary); transform: scale(1.05); }

/* Izgara */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* Butonlar büyütüldü */
.btn{
  width:100%; padding:16px; border-radius:16px;
  background:var(--primary); color:white; border:none;
  font-weight:700; cursor:pointer; font-size:1rem;
  transition:transform .06s ease;
  min-height:52px;                    /* dokunma hedefi */
}
.btn:active{ transform:translateY(1px); }
.btn.ghost{ background:transparent; border:1px solid #2a2f42; color:var(--text); }
.btn.danger{ background:var(--danger); }
.btn:disabled{ opacity:0.6; cursor:not-allowed; }

/* Actions */
.actions{ margin:18px 0; display:flex; gap:12px; flex-direction:column; }

/* Kart listesi */
.card-list{ list-style:none; padding:0; margin:0 0 14px 0; display:flex; flex-direction:column; gap:12px; }
.card{
  background:var(--card); border:1px solid #1e2230; border-radius:16px;
  padding:14px; display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.card .meta{ font-size:1rem; }
.card .sub{ color:var(--muted); font-size:0.9rem; }
.card .row{ display:flex; gap:8px; }
.card .small{ font-size:0.9rem; color:var(--muted); }

/* Bottom sheet görünümü */
.sheet summary{ list-style:none; cursor:pointer; }
.sheet summary::-webkit-details-marker{ display:none; }
.sheet .sheet-body{
  margin-top:10px; background:#0f121a; border:1px solid #22283a;
  padding:12px; border-radius:14px;
}

/* Barlar */
.bars{ margin:14px 0; display:flex; flex-direction:column; gap:10px; }
.bar{
  display:flex; justify-content:space-between; align-items:center;
  background:#0f121a; border:1px solid #22283a;
  padding:12px 14px; border-radius:14px;
  font-size:1rem;
}

/* Chips (plan seçenekleri vs.) büyütüldü */
.chips{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  padding:12px 14px; border-radius:999px;
  background:#0f121a; border:1px solid #22283a; color:var(--text); cursor:pointer;
  font-weight:600; font-size:.95rem;
  min-height:44px; display:inline-flex; align-items:center;
}
.chip.active{ border-color:var(--primary); box-shadow:0 0 0 4px var(--ring); }
.chip.small{ padding:10px 12px; font-size:0.9rem; }

/* Sonuç özet */
.summary{
  display:grid; grid-template-columns:1fr; gap:8px;
  background:var(--card); border:1px solid #1e2230;
  border-radius:14px; padding:12px;
  font-size:1rem;
}

/* Erişilebilirlik */
:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px var(--ring);
  border-color:var(--primary);
}

/* Progress + Back */
.progress{ display:flex; gap:8px; align-items:center; margin:8px 0 16px; justify-content:center; }
.progress .dot{ width:10px; height:10px; border-radius:50%; background:#2a2f42; }
.progress .dot.active{ background:var(--primary); box-shadow:0 0 0 4px var(--ring); }
.backbar{ display:flex; justify-content:space-between; align-items:center; margin:8px 0; }
.backbar .back{
  background:transparent; border:1px solid #2a2f42; color:var(--text);
  padding:10px 12px; border-radius:12px; min-height:44px;
}

/* Toast (Undo) */
#toast{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  background:#0f121a; color:var(--text);
  border:1px solid #22283a; border-radius:12px;
  padding:10px 12px; z-index:9999;
}
#toast .row{ display:flex; align-items:center; gap:10px; }
#toast .undo{
  background:transparent; border:1px solid #2a2f42; color:var(--text);
  border-radius:10px; padding:8px 12px; cursor:pointer; min-height:40px;
}

/* Hero */
.hero{ text-align:center; margin: 8px 0 14px; }
.hero h1{ font-size:1.9rem; margin:6px 0 0; }
.subtitle{ margin:0; font-size:1rem; color:var(--muted); letter-spacing:.2px; }

/* Hareketi azalt tercihine saygı */
@media (prefers-reduced-motion: reduce){
  .screen,#app{ transition:none !important; animation:none !important; }
}