:root {
  color-scheme: light dark;
  --bg: #FFFFFF;
  --yuzey: #F8F9FA;
  --metin: #000000;
  --ikincil: #666666;
  --kenar: #E0E0E0;
  --yikici: #FF3B30;
  --onay: #34C759;
  --yazi: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --tek: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --yuzey: #1C1C1E;
    --metin: #FFFFFF;
    --ikincil: #8E8E93;
    --kenar: #2C2C2E;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--metin);
  font-family: var(--yazi);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

a { color: inherit; }

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.3px; }

/* --- Üst çubuk ve sekmeler ------------------------------------------------ */

.ust {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--kenar);
  padding-top: env(safe-area-inset-top);
}

.ust-ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 16px;
}

.marka-satir { flex: 0 0 auto; }
.marka-kucuk { font-size: 17px; font-weight: 700; letter-spacing: -0.4px; }
.marka-etiket { margin-left: 8px; font-size: 13px; color: var(--ikincil); }

.kimlik { display: flex; align-items: center; gap: 8px; min-width: 0; }

.kimlik-eposta {
  font-size: 13px;
  color: var(--ikincil);
  max-width: 44vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sekmeler {
  display: flex;
  gap: 2px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.sekmeler::-webkit-scrollbar { display: none; }

.sekme {
  flex: 0 0 auto;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ikincil);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.sekme:hover { color: var(--metin); }

.sekme[aria-current="page"] {
  color: var(--metin);
  font-weight: 600;
  border-bottom-color: var(--metin);
}

/* Canlı sekmesi: gerçek para riski taşıyan tek bölüm. */
.sekme--vurgu::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--yikici);
  vertical-align: middle;
}

/* --- Yerleşim ------------------------------------------------------------- */

.icerik {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 16px calc(48px + env(safe-area-inset-bottom));
}

.baslik-satiri {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.baslik-satiri h2 { font-size: 20px; }

.kart {
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}

.kart--duz { padding: 0; overflow: hidden; }

.kart-baslik {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.aciklama { margin: 0 0 12px; font-size: 13px; color: var(--ikincil); }

.yukleniyor, .bos {
  padding: 32px 16px;
  text-align: center;
  color: var(--ikincil);
  font-size: 14px;
}

.dipnot {
  margin: 20px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--ikincil);
}

.uyari {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--yikici);
  border-radius: 10px;
  color: var(--yikici);
  font-size: 14px;
}

/* Canlı ekranının başındaki bant: burada gerçek para var. */
.tehlike-bant {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--yikici);
  border-left-width: 4px;
  border-radius: 12px;
  font-size: 14px;
}

/* --- Rozetler ------------------------------------------------------------- */

.rozet {
  display: inline-block;
  padding: 2px 8px;
  margin: 0 4px 4px 0;
  border: 1px solid var(--kenar);
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
  color: var(--ikincil);
}

.rozet--iyi { color: var(--onay); border-color: var(--onay); }
.rozet--yikici { color: var(--yikici); border-color: var(--yikici); }
.rozet--guclu { color: var(--metin); border-color: var(--metin); font-weight: 600; }

/* --- Düğmeler ------------------------------------------------------------- */

.dugme {
  display: inline-block;
  padding: 10px 14px;
  border: 1px solid var(--kenar);
  border-radius: 10px;
  background: var(--bg);
  color: var(--metin);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  /* iOS'ta 16px altı yazı odaklanınca sayfayı yakınlaştırır; dokunma hedefi
     de en az 44px olmalı. */
  min-height: 40px;
}

.dugme:hover { border-color: var(--ikincil); }
.dugme:disabled { opacity: 0.4; cursor: not-allowed; }

.dugme--birincil { background: var(--metin); color: var(--bg); border-color: var(--metin); }
.dugme--yikici { color: var(--yikici); border-color: var(--yikici); }
.dugme--yikici-dolu { background: var(--yikici); color: #FFFFFF; border-color: var(--yikici); }
.dugme--sessiz { background: transparent; color: var(--ikincil); }
.dugme--kucuk { padding: 6px 10px; font-size: 13px; min-height: 32px; }
.dugme--genis { display: block; width: 100%; margin-top: 12px; }

.dugme-grup { display: flex; flex-wrap: wrap; gap: 8px; }

/* --- Formlar -------------------------------------------------------------- */

.etiket {
  display: block;
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ikincil);
}

.alan {
  display: block;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--kenar);
  border-radius: 10px;
  background: var(--bg);
  color: var(--metin);
  font-family: inherit;
  /* 16px: iOS Safari daha küçük yazıda odakta sayfayı yakınlaştırır. */
  font-size: 16px;
}

.alan:focus { outline: 2px solid var(--metin); outline-offset: -1px; }

.alan--kod {
  font-family: var(--tek);
  font-size: 22px;
  letter-spacing: 8px;
  text-align: center;
}

textarea.alan { min-height: 84px; resize: vertical; font-size: 15px; }

.arama-satiri { display: flex; gap: 8px; margin-bottom: 12px; }
.arama-satiri .alan { flex: 1 1 auto; }

/* --- Tablolar ------------------------------------------------------------- */

.tablo-sar { overflow-x: auto; }

.tablo { width: 100%; border-collapse: collapse; font-size: 14px; }

.tablo th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--kenar);
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ikincil);
  white-space: nowrap;
}

.tablo td {
  padding: 12px;
  border-bottom: 1px solid var(--kenar);
  vertical-align: top;
}

.tablo tbody tr:last-child td { border-bottom: none; }

.tablo a { font-weight: 600; }

.tek { font-family: var(--tek); font-size: 12px; color: var(--ikincil); word-break: break-all; }

.sayfalama {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--ikincil);
}

/* --- Özellik listesi (kullanıcı detayı) ----------------------------------- */

.ozellikler { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0; }
.ozellik dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ikincil); }
.ozellik dd { margin: 2px 0 0; font-size: 14px; word-break: break-word; }

/* --- Şalterler (bayraklar) ------------------------------------------------ */

.salter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.salter-durum { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; }
.salter-durum--acik { color: var(--onay); }
.salter-durum--kapali { color: var(--yikici); }

/* --- Kip (modal) ---------------------------------------------------------- */

.katman {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
}

@media (min-width: 640px) { .katman { align-items: center; } }

.modal {
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
  border: 1px solid var(--kenar);
  border-radius: 16px;
  background: var(--bg);
}

.modal-baslik { font-size: 18px; margin-bottom: 8px; }
.modal-aciklama { margin: 0 0 12px; font-size: 14px; color: var(--ikincil); }
.modal-eylemler { display: flex; gap: 8px; margin-top: 16px; }
.modal-eylemler .dugme { flex: 1 1 0; }

.sil-bolum { margin-top: 12px; }

.on-yazi { margin: 6px 0 0; white-space: pre-wrap; }

.beklenen {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--yuzey);
  border: 1px solid var(--kenar);
  font-family: var(--tek);
  font-size: 13px;
  word-break: break-all;
}

.govde-kilitli { overflow: hidden; }

/* --- Bildirim ------------------------------------------------------------- */

.bildirim {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 60;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border: 1px solid var(--kenar);
  border-radius: 12px;
  background: var(--yuzey);
  color: var(--metin);
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.bildirim--hata { border-color: var(--yikici); color: var(--yikici); }

/* --- Giriş ekranı --------------------------------------------------------- */

.giris {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  max-width: 380px;
  margin: 0 auto;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
}

.giris-kart { padding: 24px; }

.marka { font-size: 24px; text-align: center; }
.marka-alt { margin: 2px 0 20px; text-align: center; font-size: 14px; color: var(--ikincil); }

.ipucu { margin: 0 0 12px; font-size: 13px; color: var(--ikincil); }

.qr-kutu {
  display: flex;
  justify-content: center;
  padding: 12px;
  margin-bottom: 12px;
  /* Karekod okunabilirliği için beyaz zemin şart: koyu temada SVG'nin siyah
     modülleri siyah arka planda kaybolurdu. */
  background: #FFFFFF;
  border: 1px solid var(--kenar);
  border-radius: 12px;
}

.qr-kutu img { display: block; width: 200px; height: 200px; }

.gizli-anahtar {
  display: block;
  padding: 10px;
  margin-bottom: 4px;
  border: 1px solid var(--kenar);
  border-radius: 10px;
  background: var(--bg);
  font-family: var(--tek);
  font-size: 13px;
  letter-spacing: 1px;
  word-break: break-all;
  text-align: center;
}

/* --- Dar ekran: tablolar karta dönüşür ------------------------------------ */

@media (max-width: 720px) {
  .tablo--duyarli thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tablo--duyarli tr {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid var(--kenar);
  }

  .tablo--duyarli tbody tr:last-child { border-bottom: none; }

  .tablo--duyarli td {
    display: flex;
    gap: 12px;
    align-items: baseline;
    justify-content: space-between;
    padding: 5px 14px;
    border: none;
  }

  /* Etiket statik metindir (data-etiket), kullanıcı verisi DEĞİL. */
  .tablo--duyarli td::before {
    content: attr(data-etiket);
    flex: 0 0 38%;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--ikincil);
  }

  .tablo--duyarli td > * { text-align: right; }
  .tablo--duyarli td.hucre--yigin { flex-direction: column; align-items: flex-end; }
}