:root {
  --zemin: #f7f6f3;
  --yuzey: #ffffff;
  --metin: #1d1d1b;
  --soluk: #5f5e5a;
  --cizgi: #dcdad4;
  --vurgu: #1f5fbf;
  --vurgu-metin: #ffffff;
  --tehlike: #b3261e;
  --iyi: #1e6b3a;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --zemin: #161615;
    --yuzey: #1f1f1d;
    --metin: #ecebe7;
    --soluk: #a6a49e;
    --cizgi: #3a3936;
    --vurgu: #7aa7ec;
    --vurgu-metin: #10213b;
    --tehlike: #f0857c;
    --iyi: #7fd19b;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 640px; margin: 0 auto; padding: 32px 16px 16px; }
footer { max-width: 640px; margin: 0 auto; padding: 16px; color: var(--soluk); font-size: 14px; }
h1 { margin: 0; font-size: 28px; }
h2 { margin: 32px 0 8px; font-size: 18px; }
.alt, .kucuk { color: var(--soluk); }
.kucuk { font-size: 14px; }
a { color: var(--vurgu); }
ul { padding-left: 20px; }
.ileti { padding: 12px 14px; border-radius: 8px; background: var(--yuzey); border: 1px solid var(--cizgi); }
.ileti.hata { border-color: var(--tehlike); }
.ileti.iyi { border-color: var(--iyi); }
.onay { display: flex; gap: 8px; align-items: center; margin: 12px 0; }
.dugme, button {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--vurgu);
  background: var(--vurgu);
  color: var(--vurgu-metin);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.dugme[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.ikincil { background: transparent; color: var(--vurgu); }
.tehlike { background: transparent; color: var(--tehlike); border-color: var(--tehlike); }
button + button { margin-left: 8px; }
.liste { list-style: none; padding: 0; }
.liste li { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 8px; padding: 12px 14px; margin: 8px 0; }
.liste .satir { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.etiket { font-size: 13px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--cizgi); color: var(--soluk); }
.etiket.yuksek { color: var(--tehlike); border-color: var(--tehlike); }
.etiket.uyari { color: var(--tehlike); border-color: var(--tehlike); }
.metin-ince { color: var(--soluk); font-size: 14px; margin-top: 4px; }