:root {
  --zemin: #eceef1;
  --yuzey: #ffffff;
  --yuzey2: #f5f6f8;
  --cizgi: #cfd4da;
  --cizgi-acik: #e3e6ea;
  --yazi: #1b1e22;
  --soluk: #5b636e;
  --vurgu: #1f4e8c;
  --vurgu-dolu: #1f4e8c;
  --vurgu-dolu-koyu: #173d6e;
  --vurgu-zemin: #e7edf5;
  --iyi: #1b6e37;
  --iyi-zemin: #e6f2ea;
  --iyi-cizgi: #9dc9ab;
  --kotu: #b02a1f;
  --kotu-zemin: #fbecea;
  --kotu-cizgi: #e3aaa4;
  --uyari: #8a5a00;
  --uyari-zemin: #fdf3e2;
  --uyari-cizgi: #e6cd9c;
  --golge: 0 6px 24px rgba(15, 20, 30, 0.14);
  --yazi-tipi: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --es-tip: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --zemin: #15171a;
    --yuzey: #1d2024;
    --yuzey2: #23272c;
    --cizgi: #383d45;
    --cizgi-acik: #2b2f35;
    --yazi: #e2e5e9;
    --soluk: #9aa2ad;
    --vurgu: #7ba7e0;
    --vurgu-dolu: #2a5f9e;
    --vurgu-dolu-koyu: #1f4a7d;
    --vurgu-zemin: #22303f;
    --iyi: #7fd39b;
    --iyi-zemin: #1c2b22;
    --iyi-cizgi: #33553f;
    --kotu: #f0918a;
    --kotu-zemin: #33201e;
    --kotu-cizgi: #5c3733;
    --uyari: #e2b875;
    --uyari-zemin: #2f2719;
    --uyari-cizgi: #574830;
    --golge: 0 6px 24px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

html {
  background: var(--zemin);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--zemin);
  color: var(--yazi);
  font: 14px/1.5 var(--yazi-tipi);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--vurgu);
}

h1,
h2 {
  margin: 0;
  font-weight: 650;
  letter-spacing: -0.01em;
}

h1 {
  font-size: 19px;
}

h2 {
  font-size: 15px;
}

code {
  font-family: var(--es-tip);
  font-size: 0.92em;
  background: var(--yuzey2);
  border: 1px solid var(--cizgi-acik);
  border-radius: 4px;
  padding: 1px 4px;
}

.soluk {
  color: var(--soluk);
  font-weight: 400;
}

.acilis {
  padding: 48px;
  text-align: center;
  color: var(--soluk);
}

[hidden] {
  display: none !important;
}

.giris {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.giris-kutu {
  width: 100%;
  max-width: 360px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  padding: 22px;
  box-shadow: var(--golge);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.giris-kutu h1 {
  font-size: 17px;
}

.giris-marka {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--soluk);
  font-size: 13px;
  text-transform: uppercase;
}

.ust {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--yuzey);
  border-bottom: 1px solid var(--cizgi);
}

.ust-ic {
  max-width: 1560px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.marka {
  font-weight: 700;
  color: var(--yazi);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.menu {
  display: flex;
  gap: 4px;
}

.menu a {
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--soluk);
  text-decoration: none;
  font-weight: 500;
}

.menu a:hover {
  background: var(--yuzey2);
  color: var(--yazi);
}

.menu a.etkin {
  background: var(--vurgu-zemin);
  color: var(--vurgu);
}

.ust-sag {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.kullanici {
  color: var(--soluk);
  font-size: 13px;
}

.kap {
  max-width: 1560px;
  margin: 0 auto;
  padding: 18px 20px 60px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.sayfa {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kart {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  padding: 16px;
}

.kart.dar {
  max-width: 420px;
}

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

.rozet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--cizgi);
  background: var(--yuzey2);
  color: var(--soluk);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.rozet.iyi {
  background: var(--iyi-zemin);
  border-color: var(--iyi-cizgi);
  color: var(--iyi);
}

.rozet.kotu {
  background: var(--kotu-zemin);
  border-color: var(--kotu-cizgi);
  color: var(--kotu);
}

.rozet.uyari {
  background: var(--uyari-zemin);
  border-color: var(--uyari-cizgi);
  color: var(--uyari);
}

.ekle h2 {
  margin-bottom: 10px;
}

.ekle-satir {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.alan {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 0 1 220px;
}

.alan.buyuk {
  flex: 2 1 340px;
}

.alan > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--soluk);
}

input[type="text"],
input[type="search"],
input[type="password"],
textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--cizgi);
  border-radius: 7px;
  background: var(--yuzey);
  color: var(--yazi);
  font: inherit;
  font-size: 13.5px;
}

textarea {
  font-family: var(--es-tip);
  font-size: 12.5px;
  resize: vertical;
}

input:focus-visible,
textarea:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--vurgu);
  outline-offset: 1px;
}

input[readonly],
textarea[readonly] {
  background: var(--yuzey2);
  color: var(--soluk);
}

.dugme {
  appearance: none;
  border: 1px solid var(--cizgi);
  background: var(--yuzey);
  color: var(--yazi);
  border-radius: 7px;
  padding: 8px 12px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.dugme:hover {
  background: var(--yuzey2);
}

.dugme:disabled {
  opacity: 0.55;
  cursor: default;
}

.dugme.birincil {
  background: var(--vurgu-dolu);
  border-color: var(--vurgu-dolu);
  color: #fff;
}

.dugme.birincil:hover {
  background: var(--vurgu-dolu-koyu);
}

.dugme.kucuk {
  padding: 5px 9px;
  font-size: 12.5px;
}

.dugme.tehlike {
  color: var(--kotu);
  border-color: var(--kotu-cizgi);
}

.dugme.tehlike:hover {
  background: var(--kotu-zemin);
}

.dugme.genis {
  width: 100%;
  justify-content: center;
}

.form-hata,
.form-ok {
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13px;
}

.form-hata {
  background: var(--kotu-zemin);
  border: 1px solid var(--kotu-cizgi);
  color: var(--kotu);
}

.form-ok {
  background: var(--iyi-zemin);
  border: 1px solid var(--iyi-cizgi);
  color: var(--iyi);
}

.liste-ust {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 2px 2px 0;
}

.liste-ust h2 {
  margin-right: auto;
}

.liste-ust input[type="search"] {
  max-width: 280px;
}

.liste {
  padding: 0;
  overflow: hidden;
}

.satir {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--cizgi-acik);
  cursor: pointer;
}

.satir:first-child {
  border-top: 0;
}

.satir:hover {
  background: var(--yuzey2);
}

.satir.secili {
  background: var(--vurgu-zemin);
}

.satir-ad {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.satir-alt {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--soluk);
  font-size: 12.5px;
}

.satir-alt .kimlik {
  font-family: var(--es-tip);
  font-size: 11.5px;
}

.satir > .rozet {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.bos {
  padding: 28px 16px;
  text-align: center;
  color: var(--soluk);
}

.onizleme {
  flex: 0 0 430px;
  position: sticky;
  top: 74px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.onizleme-ust {
  display: flex;
  align-items: center;
  gap: 8px;
}

.onizleme-ust h2 {
  margin-right: auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cerceve {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.cerceve iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.durum {
  font-size: 12.5px;
  color: var(--soluk);
  min-height: 18px;
}

.durum.kotu {
  color: var(--kotu);
}

.kopya {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.kopya .alan {
  flex: 1 1 auto;
}

.kopya input,
.kopya textarea {
  font-family: var(--es-tip);
  font-size: 12px;
}

.duzenle {
  border: 1px solid var(--cizgi-acik);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.duzenle summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--soluk);
}

.onay {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
}

.islemler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--cizgi-acik);
  padding-top: 10px;
}

.cubuk {
  height: 6px;
  border-radius: 999px;
  background: var(--yuzey2);
  border: 1px solid var(--cizgi-acik);
  overflow: hidden;
  margin-top: 10px;
}

.cubuk > span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--vurgu-dolu);
  transition: width 0.2s ease;
}

.toplu-alt {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.toplu-sonuc {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 380px;
  overflow: auto;
  font-size: 12.5px;
}

.toplu-sonuc div {
  padding: 6px 9px;
  border-radius: 6px;
  background: var(--yuzey2);
  border: 1px solid var(--cizgi-acik);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toplu-sonuc .ok {
  border-color: var(--iyi-cizgi);
  background: var(--iyi-zemin);
  color: var(--iyi);
}

.toplu-sonuc .hata {
  border-color: var(--kotu-cizgi);
  background: var(--kotu-zemin);
  color: var(--kotu);
}

.bildirimler {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(440px, calc(100vw - 32px));
}

.bildirim {
  padding: 10px 13px;
  border-radius: 8px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  box-shadow: var(--golge);
  font-size: 13px;
  animation: bildirim-gir 0.16s ease-out;
}

.bildirim.kotu {
  border-color: var(--kotu-cizgi);
  background: var(--kotu-zemin);
  color: var(--kotu);
}

.bildirim.iyi {
  border-color: var(--iyi-cizgi);
  background: var(--iyi-zemin);
  color: var(--iyi);
}

@keyframes bildirim-gir {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (max-width: 1080px) {
  .kap {
    flex-direction: column;
  }
  .onizleme {
    flex: 1 1 auto;
    width: 100%;
    position: static;
  }
  .cerceve {
    max-width: 640px;
  }
}

@media (max-width: 700px) {
  .ust-ic {
    padding: 8px 12px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .menu {
    order: 3;
    width: 100%;
  }
  .menu a {
    flex: 1;
    text-align: center;
    border: 1px solid var(--cizgi-acik);
  }
  .kap {
    padding: 12px 12px 48px;
  }
  .kullanici {
    display: none;
  }
  .alan,
  .alan.buyuk {
    flex: 1 1 100%;
  }
  .liste-ust input[type="search"] {
    max-width: none;
    width: 100%;
  }
  .kart {
    padding: 13px;
  }
}