:root {
  --zemin: #F5F6F8; --yuzey: #FFFFFF; --yazi: #14171F; --soluk: #6A7180; --cizgi: #E7E9EE;
  --vurgu: #2456E6; --vurgu-bas: #1C46C2; --vurgu-zemin: #EEF3FE; --tamam: #12805C; --uyari: #B54708;
  --golge: 0 1px 2px rgba(20, 23, 31, .04), 0 12px 32px rgba(20, 23, 31, .07); --logo: #0A0A0A;
}
@media (prefers-color-scheme: dark) {
  :root {
    --zemin: #0F1115; --yuzey: #181B21; --yazi: #F2F4F7; --soluk: #9199A8; --cizgi: #262A33;
    --vurgu: #5B85FF; --vurgu-bas: #4A72EC; --vurgu-zemin: #1B2440; --tamam: #4ADE9E; --uyari: #FDB022;
    --golge: none; --logo: #FFFFFF;
  }
}
* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0; min-height: 100%; background: var(--zemin); color: var(--yazi);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; align-items: center;
  padding: max(24px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
}
main { width: 100%; max-width: 400px; flex: 1; display: flex; flex-direction: column; justify-content: center; }

.bas { text-align: center; margin-bottom: 22px; }
h1 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; word-break: break-word; }
.alt { margin: 6px 0 0; color: var(--soluk); font-size: 15px; }

.kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 22px; box-shadow: var(--golge); overflow: hidden; }
.satir {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 16px 15px 20px; text-align: left;
  background: transparent; color: inherit; border: 0; border-top: 1px solid var(--cizgi);
  font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.satir:first-child { border-top: 0; }
.satir:active { background: var(--zemin); }
.satir .metin { flex: 1; min-width: 0; }
.etiket { display: block; font-size: 13px; color: var(--soluk); margin-bottom: 3px; }
.deger { display: block; font-size: 16px; font-weight: 600; word-break: break-word; }
.deger.iban { font-size: 17px; line-height: 1.45; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.ikon {
  flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--zemin); color: var(--soluk);
}
.ikon svg { width: 18px; height: 18px; }
.satir.oldu .ikon { background: transparent; color: var(--tamam); }
.duz { cursor: default; }
.duz:active { background: transparent; }
.uyari { display: block; color: var(--uyari); font-size: 13px; font-weight: 500; margin-top: 6px; }

.ana {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 56px; margin-top: 16px;
  border: 0; border-radius: 16px; background: var(--vurgu); color: #fff; font-family: inherit; font-size: 17px; font-weight: 600;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease;
}
.ana:active { background: var(--vurgu-bas); }
.ana svg { width: 19px; height: 19px; }
.ana.oldu { background: var(--tamam); }
@media (prefers-color-scheme: dark) { .ana { color: #0B1020; } }
button:focus-visible { outline: 3px solid var(--vurgu); outline-offset: 2px; }

.ipucu { margin: 14px 8px 0; text-align: center; color: var(--soluk); font-size: 14px; line-height: 1.5; }
.not {
  margin: 14px 0 0; padding: 13px 16px; border-radius: 14px; background: var(--yuzey); border: 1px solid var(--cizgi);
  color: var(--yazi); font-size: 14px; line-height: 1.5;
}
.bos { text-align: center; }
.bos p { color: var(--soluk); margin: 8px 0 0; font-size: 15px; line-height: 1.5; }

footer { width: 100%; max-width: 400px; padding-top: 28px; }
footer a { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--soluk); font-size: 12.5px; text-decoration: none; }
footer svg { height: 14px; width: auto; }
footer .h { fill: var(--logo); }
footer b { color: var(--yazi); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .ana { transition: none; } }