/* Açık, yumuşak tonlu tek tema (karanlık mod bilerek yok). */
:root {
  color-scheme: light;
  --bg: #f4f6fa;
  --yuzey: #ffffff;
  --yuzey-2: #f8f9fc;
  --metin: #2b3445;
  --soluk: #6b7689;
  --cizgi: #e3e8f0;
  --cizgi-koyu: #cfd7e3;
  --vurgu: #4f7cd9;
  --vurgu-koyu: #3d68c2;
  --vurgu-zemin: #edf2fc;
  --arti: #2f8a5b;
  --arti-zemin: #e9f6ef;
  --eksi: #c0504d;
  --eksi-zemin: #fcefee;
  --uyari: #b7791f;
  --golge: 0 1px 2px rgba(31, 45, 72, .04), 0 4px 16px rgba(31, 45, 72, .05);
  --yaricap: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--metin);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2 { margin: 0; color: var(--metin); }
h1 { font-size: 22px; font-weight: 650; }
h2 { font-size: 17px; font-weight: 600; }
.alt { margin: 4px 0 0; color: var(--soluk); }
.soluk { color: var(--soluk); }
.uyari { color: var(--uyari); font-weight: 600; }
.not, .kural-kaynak { color: var(--soluk); font-size: 12px; }
.not { margin: 6px 0 0; }

/* ------------------------------------------------------------ üst bar */
.ust-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cizgi);
}
.ust-ic {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.marka { font-weight: 700; color: var(--vurgu-koyu); white-space: nowrap; }
.menu { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.menu a {
  padding: 7px 14px;
  border-radius: 8px;
  color: var(--soluk);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.menu a:hover { background: var(--yuzey-2); color: var(--metin); }
.menu a[aria-current="page"] { background: var(--vurgu-zemin); color: var(--vurgu-koyu); }
#cikisFormu { margin: 0; }

/* ------------------------------------------------------------ sayfa */
.sayfa { max-width: 960px; margin: 0 auto; padding: 24px 16px 48px; }
.sayfa.genis { max-width: 1280px; }
.sayfa-baslik {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
.bilgi-notu { margin: 10px 0 18px; color: var(--soluk); font-size: 13px; }

/* ------------------------------------------------------------ düğmeler */
button { font: inherit; cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
.birincil, .ikincil, .tehlike {
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.birincil { border: 1px solid var(--vurgu); background: var(--vurgu); color: #fff; }
.birincil:hover:not(:disabled) { background: var(--vurgu-koyu); }
.birincil.basarili, .birincil.basarili:disabled { background: var(--arti); border-color: var(--arti); opacity: 1; cursor: default; }
.ikincil { border: 1px solid var(--cizgi-koyu); background: var(--yuzey); color: var(--metin); }
.ikincil:hover:not(:disabled) { border-color: var(--vurgu); color: var(--vurgu-koyu); }
.tehlike { border: 1px solid #e6c3c2; background: var(--eksi-zemin); color: var(--eksi); }
.tehlike:hover:not(:disabled) { border-color: var(--eksi); }
.metin-dugme {
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--vurgu);
  font-size: 13px;
  font-weight: 500;
}
.metin-dugme:hover { background: var(--vurgu-zemin); }
.tehlike-metin { color: var(--eksi); }
.tehlike-metin:hover { background: var(--eksi-zemin); }

/* ------------------------------------------------------------ form alanları */
input[type="text"], input[type="number"], input[type="date"], input[type="search"], input[type="password"] {
  padding: 8px 10px;
  border: 1px solid var(--cizgi-koyu);
  border-radius: 8px;
  background: var(--yuzey);
  color: var(--metin);
  font: inherit;
}
input:focus { outline: 2px solid var(--vurgu-zemin); border-color: var(--vurgu); }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--vurgu); }

/* ------------------------------------------------------------ bırakma alanı */
.birakma {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 40px 16px;
  border: 2px dashed var(--cizgi-koyu);
  border-radius: var(--yaricap);
  background: var(--yuzey);
  color: var(--soluk);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.birakma strong { color: var(--metin); font-size: 17px; }
.birakma:hover, .birakma:focus-visible, .birakma.aktif {
  border-color: var(--vurgu);
  background: var(--vurgu-zemin);
  outline: none;
}
.birakma-ikon { color: var(--vurgu); margin-bottom: 4px; }

/* ------------------------------------------------------------ kartlar */
.kart {
  position: relative;
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap);
  background: var(--yuzey);
  box-shadow: var(--golge);
}
.kart.hata { color: var(--eksi); background: var(--eksi-zemin); border-color: #f0d4d3; padding-right: 48px; }

.kart-ust {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-right: 32px;
  margin-bottom: 12px;
}
.kart-sag { display: flex; align-items: center; gap: 12px; }
.meta { color: var(--soluk); font-size: 13px; word-break: break-word; }

.toplam {
  padding: 8px 16px;
  border-radius: 10px;
  background: var(--vurgu-zemin);
  text-align: right;
}
.toplam span { display: block; color: var(--soluk); font-size: 12px; }
.toplam strong { font-size: 24px; color: var(--vurgu-koyu); font-variant-numeric: tabular-nums; }
.toplam.engel { background: var(--eksi-zemin); }
.toplam.engel strong { color: var(--eksi); font-size: 17px; }

.kapat {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--soluk);
  font-size: 20px;
}
.kapat:hover { background: var(--yuzey-2); color: var(--metin); }

/* ------------------------------------------------------------ tablolar */
.tablo-sarma { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 8px; border-top: 1px solid var(--cizgi); text-align: left; vertical-align: top; }
th {
  border-top: 0;
  color: var(--soluk);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.kural-ad { font-weight: 600; }
.puan { text-align: right; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.puan.arti { color: var(--arti); }
.puan.eksi { color: var(--eksi); }
.puan.notr { color: var(--soluk); }

/* ------------------------------------------------------------ kayıtlar listesi */
.arac-cubugu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.arac-cubugu input[type="search"] { width: 260px; max-width: 100%; }
.arac-sag { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.secim-bilgi { color: var(--soluk); font-size: 13px; }

.liste-kart { padding: 6px 8px; }
.liste th, .liste td { vertical-align: middle; white-space: nowrap; }
.liste th { position: sticky; top: 0; background: var(--yuzey); }
.liste .sayi { text-align: right; }
.liste .secim { width: 32px; }
.liste .ad { font-weight: 600; }
.liste tbody tr:hover > td { background: var(--yuzey-2); }
.liste tr.secili > td { background: var(--vurgu-zemin); }
.liste .islemler { text-align: right; }
.detay-satir > td { background: var(--yuzey-2); padding: 4px 12px 12px; white-space: normal; }
.detay-satir table { background: var(--yuzey); border-radius: 8px; }
.toplam-rozet {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--vurgu-zemin);
  color: var(--vurgu-koyu);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.toplam-rozet.engel { background: var(--eksi-zemin); color: var(--eksi); font-size: 12px; }
.bos { padding: 28px; text-align: center; color: var(--soluk); }

/* ------------------------------------------------------------ ayarlar */
.ayar-kart h2 { margin-bottom: 14px; }
.ayar-baslik { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ayar-baslik h2 .kural-kaynak { font-weight: 400; margin-left: 6px; }
.satir-alan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-top: 1px solid var(--cizgi);
}
.satir-alan:first-of-type { border-top: 0; }
.satir-alan input { width: 160px; text-align: right; }
.satir-alan input[type="date"] { text-align: left; }
.onay-alan { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--cizgi); }
.secenek-alan { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 12px; padding: 0; border: 0; }
.secenek-alan legend { width: 100%; margin-bottom: 6px; font-size: 14px; }
.secenek-alan label { display: flex; align-items: center; gap: 6px; }
.bant-tablo th, .bant-tablo td { padding: 6px 4px; border-top: 0; }
.bant-tablo input { width: 100%; min-width: 80px; }
.bant-tablo td:nth-child(3) input { min-width: 180px; }
.bant-tablo .puan-girdi { text-align: right; font-weight: 600; }
.hata-metin {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--eksi-zemin);
  color: var(--eksi);
  font-size: 14px;
}
.kaydet-cubugu {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin: 0 -16px 16px;
  padding: 12px 16px;
  background: rgba(244, 246, 250, .94);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--cizgi);
}
.kaydet-cubugu .secim-bilgi { margin-right: auto; }
.gecmis { margin: 0; padding: 0; list-style: none; }
.gecmis li { padding: 6px 0; border-top: 1px solid var(--cizgi); font-size: 14px; }
.gecmis li:first-child { border-top: 0; }

/* ------------------------------------------------------------ uyarılar + elle düzenleme */
.uyari-kutu, .elle-kutu {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  white-space: normal;
}
.uyari-kutu { background: #fdf6e7; border: 1px solid #f1dfb4; color: #7a5413; }
.uyari-kutu strong { display: block; margin-bottom: 2px; }
.elle-kutu { background: #f2effb; border: 1px solid #e0daf3; color: #574a8a; }
.kart-dugmeler { display: flex; gap: 8px; }
.isaret {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  vertical-align: 1px;
  cursor: help;
}
.uyari-isaret { background: #fbecc8; color: #8a5d10; }
.elle-isaret { background: #ebe6f8; color: #5b4c94; }

.duzenle-form {
  margin: 4px 0;
  padding: 16px;
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  background: var(--yuzey);
  white-space: normal;
}
.duzenle-form h3 { margin: 0 0 8px; font-size: 15px; }
.duzenle-form .satir-alan input { width: 200px; }
.duzenle-form .satir-alan .genis-girdi { width: min(420px, 100%); text-align: left; }
.duzenle-form .satir-alan input[type="text"] { text-align: left; }
.gun-girdiler { display: flex; flex-wrap: wrap; gap: 12px; }
.gun-girdiler label { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
.gun-girdiler input { width: 90px !important; }
.hizmet-alan { padding: 10px 0; border-top: 1px solid var(--cizgi); }
.satir-baslik { margin-bottom: 6px; }
.form-dugmeler { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ------------------------------------------------------------ bildirim */
.bildirim {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 50;
  max-width: calc(100% - 32px);
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--metin);
  color: #fff;
  box-shadow: 0 8px 24px rgba(31, 45, 72, .18);
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.bildirim.bilgi, .bildirim.hata { opacity: 1; transform: translate(-50%, 0); }
.bildirim.hata { background: var(--eksi); }

/* ------------------------------------------------------------ giriş sayfası */
.giris-sayfa {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 16px;
  background: linear-gradient(160deg, #eef3fb 0%, #f7f5fb 100%);
}
.giris-kutu {
  width: 100%;
  max-width: 380px;
  padding: 30px 26px;
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  background: var(--yuzey);
  box-shadow: 0 10px 40px rgba(31, 45, 72, .08);
}
.giris-kutu .alt { margin-bottom: 20px; }
.giris-kutu form { display: flex; flex-direction: column; gap: 6px; }
.giris-kutu label { margin-top: 8px; font-size: 13px; font-weight: 600; }
.giris-kutu input { padding: 10px 12px; }
.sifre-alani { position: relative; display: flex; }
.sifre-alani input { flex: 1; padding-right: 44px; }
.giris-kutu .sifre-goz {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 44px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--soluk);
}
.giris-kutu .sifre-goz:hover, .giris-kutu .sifre-goz:focus-visible { color: var(--vurgu); }
.sifre-goz .goz-kapali { display: none; }
.sifre-goz[aria-pressed="true"] .goz-acik { display: none; }
.sifre-goz[aria-pressed="true"] .goz-kapali { display: block; }
.giris-kutu .giris-btn {
  margin-top: 16px;
  padding: 11px;
  border: 0;
  border-radius: 8px;
  background: var(--vurgu);
  color: #fff;
  font-weight: 600;
}
.giris-kutu .giris-btn:hover { background: var(--vurgu-koyu); }
.giris-mesaj {
  margin: 0 0 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--eksi-zemin);
  color: var(--eksi);
  font-size: 14px;
}
.giris-mesaj.bilgi { background: var(--arti-zemin); color: var(--arti); }

/* ------------------------------------------------------------ dar ekran */
@media (max-width: 640px) {
  .ust-ic { gap: 10px; flex-wrap: wrap; }
  .menu { order: 3; flex-basis: 100%; }
  .kart th:nth-child(3), .kart td:nth-child(3) { display: none; }
  .liste th:nth-child(3), .liste td:nth-child(3) { display: table-cell; }
  .toplam { text-align: left; }
  .arac-sag { margin-left: 0; }
  .satir-alan { flex-direction: column; align-items: stretch; }
  .satir-alan input { width: 100%; text-align: left; }
}