/* SİNCO — sade, okunur, telefonda da çalışır.
   Çerçeve yok: bu kadar ekran için bir CSS kütüphanesi taşımak,
   bağımlılığı az tutma kuralına aykırı.

   Renkler token olarak :root'ta; koyu tema yalnız tokenleri değiştirir.
   Kural: hiçbir rengin TEK tanımı medya sorgusunun içinde olmasın,
   yoksa açık temada tanımsız kalır.

   Rakamlar bu arayüzün asıl içeriği. Bu yüzden para sütunları her yerde
   `tabular-nums` ve sağa yaslı: binler basamağı alt alta gelmezse göz
   kayar ve yanlış okunur. */

:root {
  --zemin: #f2f5f3;
  --zemin-alt: #e8edea;
  --kart: #ffffff;
  --cizgi: #dde4e0;
  --cizgi-koyu: #c3ccc7;
  --metin: #14201a;
  --soluk: #5a6862;
  --cok-soluk: #8b9791;
  --vurgu: #2c6a4b;
  --vurgu-parlak: #37855d;
  --vurgu-acik: #e6f1ea;
  --dikkat: #a8460f;
  --dikkat-acik: #fbede5;
  --uyari: #8a6d1f;
  --iyi: #2c6a4b;
  --golge: 0 1px 2px rgba(18, 32, 25, .05), 0 2px 8px rgba(18, 32, 25, .04);
  --golge-derin: 0 2px 4px rgba(18, 32, 25, .06), 0 8px 24px rgba(18, 32, 25, .07);
  --yuvarlak: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --zemin: #101412;
    --zemin-alt: #1a201c;
    --kart: #191f1c;
    --cizgi: #2a322d;
    --cizgi-koyu: #3a443e;
    --metin: #e6ece9;
    --soluk: #93a099;
    --cok-soluk: #6d7a74;
    --vurgu: #6cc39a;
    --vurgu-parlak: #85d3ae;
    --vurgu-acik: #1c2a23;
    --dikkat: #e5915f;
    --dikkat-acik: #2c2119;
    --uyari: #d6b768;
    --iyi: #6cc39a;
    --golge: 0 1px 2px rgba(0, 0, 0, .35);
    --golge-derin: 0 4px 20px rgba(0, 0, 0, .45);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--vurgu); text-underline-offset: 2px; }
a:hover { color: var(--vurgu-parlak); }

/* --- üst şerit --- */
.ust {
  background: var(--kart);
  border-bottom: 1px solid var(--cizgi);
  padding: .55rem 1.4rem;
  display: flex; align-items: center; gap: 1.4rem;
  position: sticky; top: 0; z-index: 10;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.marka { display: flex; align-items: baseline; gap: .5rem; flex: none; }
.marka .ad {
  font-weight: 700; font-size: 1.15rem; letter-spacing: .16em;
  color: var(--vurgu); text-decoration: none;
}
.marka .alt { font-size: .7rem; color: var(--cok-soluk); letter-spacing: .02em; }

/* Telefonda menü yatay kayar — sarıp iki satıra bölmek başlığı aşağı
   iter ve sayfanın yarısını menüye verir. */
.ust nav {
  display: flex; gap: .1rem; flex: 1; align-items: center;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.ust nav::-webkit-scrollbar { display: none; }
.ust nav a {
  color: var(--soluk); text-decoration: none;
  padding: .35rem .6rem; border-radius: 7px; font-size: .9rem;
  white-space: nowrap; transition: background .12s, color .12s;
}
.ust nav a:hover { background: var(--zemin-alt); color: var(--metin); }
.ust nav a.acik {
  background: var(--vurgu-acik); color: var(--vurgu); font-weight: 600;
}
.ust nav a.sag { margin-left: auto; color: var(--cok-soluk); }
.ust nav a .sayac {
  display: inline-block; min-width: 1.05rem; text-align: center;
  background: var(--dikkat); color: #fff; border-radius: 9px;
  font-size: .65rem; font-weight: 600; padding: 0 .28rem;
  margin-left: .3rem; vertical-align: .08rem;
}

main { max-width: 1120px; margin: 1.6rem auto 0; padding: 0 1.4rem; }
footer {
  max-width: 1120px; margin: 3rem auto 0; padding: 1rem 1.4rem 2.5rem;
  border-top: 1px solid var(--cizgi);
  color: var(--cok-soluk); font-size: .78rem;
}

/* --- başlıklar --- */
.sayfa-basligi { margin-bottom: 1.3rem; }
.sayfa-basligi h1 { margin-bottom: .25rem; }
.sayfa-basligi .aciklama {
  color: var(--soluk); font-size: .9rem; max-width: 68ch; margin: 0;
}

h1 {
  font-size: 1.45rem; margin: 0 0 .4rem; letter-spacing: -.015em;
  font-weight: 650;
}
h2 {
  font-size: .78rem; margin: 2.2rem 0 .7rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--cok-soluk); font-weight: 700;
  display: flex; align-items: center; gap: .6rem;
}
/* Başlığın sağına ince bir çizgi — bölümler gözle ayrılsın */
h2::after {
  content: ""; flex: 1; height: 1px; background: var(--cizgi);
}
h2:first-child { margin-top: 0; }
h3 {
  font-size: .95rem; margin: 1.5rem 0 .5rem; font-weight: 650;
  letter-spacing: -.005em;
}
h3 .kisik { font-weight: 400; }

/* --- özet kutuları --- */
.kutular {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(172px, 1fr));
  margin-bottom: .5rem;
}
.kutu {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak);
  padding: .8rem .95rem; box-shadow: var(--golge);
  position: relative; overflow: hidden;
  transition: box-shadow .15s, transform .15s;
}
.kutu:hover { box-shadow: var(--golge-derin); }
/* Renk şeridi kenardan değil, üstten: kutular yan yana dizildiğinde
   soldan gelen şerit kolonu kaydırıyor ve rakamlar hizasını kaybediyor. */
.kutu.dikkat::before, .kutu.iyi::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
}
.kutu.dikkat::before { background: var(--dikkat); }
.kutu.iyi::before { background: var(--vurgu); }
.kutu .etiket {
  font-size: .7rem; color: var(--cok-soluk); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600;
}
.kutu .rakam {
  font-size: 1.4rem; font-weight: 650; margin-top: .2rem;
  font-variant-numeric: tabular-nums; letter-spacing: -.025em;
  line-height: 1.2;
}
.kutu .rakam.kucuk { font-size: 1.1rem; }
.kutu .alt-rakam { font-size: .78rem; color: var(--soluk); margin-top: .1rem; }
.kutu a { text-decoration: none; }
.kutu a:hover { text-decoration: underline; }

/* --- kart --- */
.kart {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); padding: 1rem 1.15rem;
  box-shadow: var(--golge); margin-bottom: 1rem;
}
.kart > :first-child { margin-top: 0; }
.kart > :last-child { margin-bottom: 0; }

/* --- tablolar --- */
.tablo-sar {
  overflow-x: auto; border-radius: var(--yuvarlak);
  box-shadow: var(--golge); margin-bottom: .3rem;
}
table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); overflow: hidden;
}
th, td {
  padding: .55rem .75rem; text-align: left;
  border-bottom: 1px solid var(--cizgi); vertical-align: middle;
}
th {
  font-size: .7rem; color: var(--cok-soluk); font-weight: 700;
  background: var(--zemin-alt); text-transform: uppercase;
  letter-spacing: .06em; white-space: nowrap;
  position: sticky; top: 0;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--zemin-alt); }
tr.secili { background: var(--vurgu-acik); }
tr.secili:hover { background: var(--vurgu-acik); }
tr.secili td:first-child { box-shadow: inset 3px 0 0 var(--vurgu); }
tfoot td {
  font-weight: 700; background: var(--zemin-alt);
  border-top: 2px solid var(--cizgi-koyu);
}
.sag { text-align: right; }
.para, .kutu .rakam { font-variant-numeric: tabular-nums; }
.tarih {
  color: var(--soluk); white-space: nowrap; font-size: .86rem;
  font-variant-numeric: tabular-nums;
}
.kisik { color: var(--soluk); }
.cok-kisik { color: var(--cok-soluk); }
.kes {
  max-width: 24rem; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.vurgulu { font-weight: 650; }

/* Boş tablo/liste — "hiç kayıt yok" cümlesi kaybolmasın, ama
   sayfayı da bağırmasın. */
.bos {
  text-align: center; color: var(--cok-soluk); padding: 1.6rem 1rem;
  font-size: .9rem;
}

/* --- rozetler --- */
.rozet {
  display: inline-block;
  font-size: .67rem; background: var(--zemin-alt); color: var(--soluk);
  border: 1px solid var(--cizgi); border-radius: 20px;
  padding: .06rem .48rem; margin-left: .28rem; white-space: nowrap;
  font-weight: 600; letter-spacing: .01em;
}
.rozet.dikkat {
  background: var(--dikkat-acik); color: var(--dikkat);
  border-color: color-mix(in srgb, var(--dikkat) 35%, transparent);
}
.rozet.iyi {
  background: var(--vurgu-acik); color: var(--vurgu);
  border-color: color-mix(in srgb, var(--vurgu) 35%, transparent);
}

/* --- oran çubuğu ---
   Tabloda tutarın yanında ince bir çubuk: "en büyük kalem hangisi"
   sorusu rakamları tek tek okumadan cevaplanır. */
.cubuk {
  height: 5px; background: var(--zemin-alt); border-radius: 3px;
  overflow: hidden; min-width: 48px; width: 100%;
}
.cubuk span {
  display: block; height: 100%; background: var(--vurgu);
  border-radius: 3px;
}
.cubuk.soluk span { background: var(--cizgi-koyu); }
td.cubuk-hucre { width: 90px; padding-right: .4rem; }

/* --- formlar --- */
.satir-form { display: flex; gap: .35rem; align-items: center; }
.form-satiri {
  display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap;
  margin-bottom: 1rem; padding: .85rem .95rem;
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); box-shadow: var(--golge);
}
.alan { display: flex; flex-direction: column; gap: .25rem; }
.alan label {
  font-size: .68rem; color: var(--cok-soluk); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600;
}

select, input[type=password], input[type=text], input[type=number], input[type=file] {
  border: 1px solid var(--cizgi-koyu); border-radius: 7px;
  padding: .4rem .5rem; font: inherit; background: var(--kart);
  color: var(--metin); max-width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
select:hover, input:hover { border-color: var(--soluk); }
select:focus, input:focus {
  outline: none; border-color: var(--vurgu);
  box-shadow: 0 0 0 3px var(--vurgu-acik);
}
/* Tablo içindeki denetimler satırı şişirmesin */
td select, td input[type=text], td input[type=number] {
  padding: .25rem .35rem; font-size: .88rem;
}

button {
  background: var(--vurgu); color: #fff; border: 1px solid transparent;
  border-radius: 7px; padding: .4rem .85rem; font: inherit;
  font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background .12s, box-shadow .12s;
}
button:hover { background: var(--vurgu-parlak); }
button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--vurgu-acik); }
button.sade {
  background: transparent; color: var(--soluk);
  border-color: var(--cizgi-koyu);
}
button.sade:hover { background: var(--zemin-alt); color: var(--metin); }
td button { padding: .25rem .6rem; font-size: .85rem; }

.not { color: var(--soluk); font-size: .86rem; max-width: 78ch; }
.not strong { color: var(--metin); }
.hata { color: var(--dikkat); font-weight: 600; }

/* --- bilgi / uyarı kutuları ---
   Sol şerit + yumuşak zemin. Bu arayüzde uyarılar çoğu zaman
   "rakam eksik olabilir" der; görmezden gelinemeyecek kadar belirgin,
   paniğe sokmayacak kadar sakin olmalı. */
.uyari-kutu, .bilgi-kutu {
  border-radius: var(--yuvarlak); padding: .8rem 1rem;
  font-size: .88rem; margin-bottom: 1.1rem; line-height: 1.5;
  border: 1px solid; border-left-width: 3px;
}
.uyari-kutu {
  background: var(--dikkat-acik); border-color: var(--dikkat);
  color: var(--metin);
}
.bilgi-kutu {
  background: var(--vurgu-acik); border-color: var(--vurgu);
  color: var(--metin);
}
.uyari-kutu a, .bilgi-kutu a { font-weight: 600; }

/* --- sekmeler --- */
.sekmeler {
  display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--cizgi); padding-bottom: .6rem;
}
.sekmeler a {
  text-decoration: none; color: var(--soluk); font-size: .9rem;
  padding: .3rem .75rem; border-radius: 7px; border: 1px solid transparent;
  transition: background .12s;
}
.sekmeler a:hover { background: var(--zemin-alt); }
.sekmeler a.acik {
  background: var(--vurgu-acik); color: var(--vurgu);
  border-color: color-mix(in srgb, var(--vurgu) 30%, transparent);
  font-weight: 600;
}

/* --- giriş --- */
.giris-kutu {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: 14px; padding: 1.8rem; max-width: 350px;
  margin: 4.5rem auto; box-shadow: var(--golge-derin);
}
.giris-kutu h1 { text-align: center; margin-bottom: 1.1rem; }
.giris-kutu form { display: flex; flex-direction: column; gap: .55rem; }
.giris-kutu label { font-size: .78rem; color: var(--soluk); }
.giris-kutu button { padding: .5rem; margin-top: .2rem; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em; background: var(--zemin-alt);
  padding: .05rem .3rem; border-radius: 4px;
}

@media (max-width: 700px) {
  main { margin: 1.1rem auto 0; padding: 0 .85rem; }
  .ust { padding: .5rem .85rem; gap: .7rem; }
  .marka .alt { display: none; }
  h1 { font-size: 1.25rem; }
  th, td { padding: .45rem .5rem; font-size: .88rem; }
  .kes { max-width: 12rem; }
  .kutular { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .kutu .rakam { font-size: 1.2rem; }
  .form-satiri { padding: .7rem .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}