:root {
  --mavi: #2f5597;
  --mavi-acik: #dbeafe;
  --yesil: #15803d;
  --yesil-acik: #dcfce7;
  --kirmizi: #b91c1c;
  --kirmizi-acik: #fee2e2;
  --turuncu: #b45309;
  --gri: #6b7280;
  --gri-acik: #f3f6fa;
  --cizgi: #e2e8f0;
  --metin: #1f2937;
}

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

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #f8fafc;
  color: var(--metin);
  -webkit-text-size-adjust: 100%;
}

.sarmal {
  max-width: 520px;
  margin: 0 auto;
  padding: 16px;
  min-height: 100vh;
}

.ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px 18px;
}

.ust h1 {
  font-size: 17px;
  margin: 0;
  color: var(--mavi);
  font-weight: 700;
}

.kart {
  background: #fff;
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.kart.orta { text-align: center; }

h2 { font-size: 16px; margin: 0 0 14px; }

label {
  display: block;
  font-size: 13px;
  color: var(--gri);
  margin-bottom: 6px;
  font-weight: 600;
}

input, select {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: var(--metin);
  margin-bottom: 12px;
  font-family: inherit;
}

input:focus, select:focus { outline: 2px solid var(--mavi-acik); border-color: var(--mavi); }

button {
  width: 100%;
  padding: 15px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  background: var(--mavi);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
}

button:active { opacity: .85; }
button:disabled { opacity: .5; }

button.ikincil { background: #fff; color: var(--metin); border: 1px solid #cbd5e1; }
button.tehlike { background: var(--kirmizi); }
button.kucuk { width: auto; padding: 9px 14px; font-size: 14px; }

.rol-btn {
  display: block;
  width: 100%;
  padding: 26px 20px;
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  text-align: left;
  text-decoration: none;
  color: var(--metin);
}

.rol-btn .baslik { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.rol-btn .alt { font-size: 13px; color: var(--gri); }

.hata {
  background: var(--kirmizi-acik);
  color: var(--kirmizi);
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 12px;
}

.bilgi {
  background: var(--mavi-acik);
  color: var(--mavi);
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 12px;
}

.rozet {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.rozet.icerde { background: var(--yesil-acik); color: var(--yesil); }
.rozet.disarda { background: var(--gri-acik); color: var(--gri); }

#qrKutu svg { width: 100%; height: auto; max-width: 280px; display: block; margin: 0 auto; }

.sayac {
  font-size: 13px;
  color: var(--gri);
  margin-top: 12px;
}

.cubuk {
  height: 5px;
  background: var(--cizgi);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 10px;
}

.cubuk i { display: block; height: 100%; background: var(--mavi); width: 100%; }

.sekmeler {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  background: #fff;
  padding: 5px;
  border-radius: 12px;
  border: 1px solid var(--cizgi);
}

.sekmeler button {
  flex: 1;
  padding: 11px 6px;
  font-size: 14px;
  background: transparent;
  color: var(--gri);
  border-radius: 8px;
}

.sekmeler button.aktif { background: var(--mavi); color: #fff; }

#kamera {
  width: 100%;
  border-radius: 12px;
  background: #000;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.sonuc {
  padding: 22px;
  border-radius: 14px;
  text-align: center;
  margin-bottom: 14px;
}

.sonuc.giris { background: var(--yesil-acik); border: 2px solid var(--yesil); }
.sonuc.cikis { background: #fef3c7; border: 2px solid var(--turuncu); }
.sonuc.hatali { background: var(--kirmizi-acik); border: 2px solid var(--kirmizi); }

.sonuc .isim { font-size: 21px; font-weight: 700; margin-bottom: 6px; }
.sonuc .islem { font-size: 15px; font-weight: 600; }
.sonuc .saat { font-size: 34px; font-weight: 800; margin: 8px 0; letter-spacing: -1px; }
.sonuc .detay { font-size: 13px; color: var(--gri); }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; color: var(--gri); padding: 8px 6px; border-bottom: 1px solid var(--cizgi); }
td { padding: 11px 6px; border-bottom: 1px solid #f1f5f9; }
tr:last-child td { border-bottom: none; }

.satir-ust { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.mini { font-size: 12px; color: var(--gri); }
.bos { text-align: center; color: var(--gri); padding: 30px 10px; font-size: 14px; }

.liste-oge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid #f1f5f9;
  gap: 10px;
}

.liste-oge:last-child { border-bottom: none; }
.liste-oge .ad { font-weight: 600; font-size: 15px; }
.liste-oge .alt { font-size: 12px; color: var(--gri); margin-top: 2px; }
.dugmeler { display: flex; gap: 6px; flex-shrink: 0; }

/* ---------- Giriş / Çıkış mod düğmeleri ---------- */
button.mod-giris,
button.mod-cikis {
  padding: 22px;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: .3px;
}

button.mod-giris { background: var(--yesil); }
button.mod-cikis { background: var(--turuncu); }

.serit {
  padding: 12px;
  border-radius: 10px;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  margin-bottom: 12px;
  letter-spacing: .4px;
}

.serit-giris { background: var(--yesil); }
.serit-cikis { background: var(--turuncu); }