/* Cep telefonu once: buyuk dokunma alanlari, az renk, yuksek okunurluk. */
:root{
  --zemin:#f4f6f8; --kart:#ffffff; --yazi:#12212e; --soluk:#5d7186;
  --cizgi:#dde5ec; --ana:#1668c1; --ana-koyu:#0f4e93;
  --iyi:#0f8a4d; --iyi-zemin:#e6f6ed; --uyari:#b8860b; --uyari-zemin:#fdf4e0;
  --hata:#c1272d; --hata-zemin:#fdecec;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--zemin);color:var(--yazi);
  font:17px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  padding-bottom:80px}
a{color:var(--ana);text-decoration:none}

header{position:sticky;top:0;z-index:20;background:var(--ana);color:#fff;
  padding:14px 16px;display:flex;align-items:center;gap:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.15)}
header .baslik{font-size:19px;font-weight:700;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
header a{color:#fff;font-size:15px;opacity:.95}
.geri{font-size:24px;line-height:1;padding:2px 6px;margin-left:-6px}

main{padding:14px;max-width:900px;margin:0 auto}

/* --- buyuk butonlar --- */
.buton{display:flex;align-items:center;gap:14px;width:100%;
  background:var(--kart);border:1px solid var(--cizgi);border-radius:14px;
  padding:20px 18px;margin-bottom:12px;font-size:19px;font-weight:600;
  color:var(--yazi);text-align:left;cursor:pointer;
  box-shadow:0 1px 2px rgba(16,32,48,.06)}
.buton:active{background:#eef3f8}
.buton .simge{font-size:28px;line-height:1}
.buton .sayi{margin-left:auto;background:var(--ana);color:#fff;border-radius:999px;
  min-width:38px;padding:4px 12px;text-align:center;font-size:17px}
.buton .sayi.kirmizi{background:var(--hata)}
.buton .sayi.gri{background:#8ea3b6}

button,.dugme{font:inherit;font-weight:600;border:0;border-radius:12px;
  padding:16px 18px;background:var(--ana);color:#fff;cursor:pointer;width:100%}
button:active{background:var(--ana-koyu)}
.dugme.ikincil{background:#e7edf3;color:var(--yazi)}
.dugme.kucuk,button.kucuk{width:auto;padding:10px 14px;font-size:15px;border-radius:10px}

/* --- kartlar / listeler --- */
.kart{background:var(--kart);border:1px solid var(--cizgi);border-radius:14px;
  padding:16px;margin-bottom:12px}
.kart .ust{display:flex;gap:10px;align-items:baseline}
.kart .firma{font-weight:700;font-size:18px;flex:1}
.kart .tutar{font-weight:700;white-space:nowrap}
.kart .alt{color:var(--soluk);font-size:15px;margin-top:6px;
  display:flex;flex-wrap:wrap;gap:10px}

.etiket{display:inline-block;padding:3px 10px;border-radius:999px;font-size:13px;
  font-weight:700;background:#e7edf3;color:var(--soluk)}
.etiket.iyi{background:var(--iyi-zemin);color:var(--iyi)}
.etiket.uyari{background:var(--uyari-zemin);color:var(--uyari)}
.etiket.hata{background:var(--hata-zemin);color:var(--hata)}

.satir{border-top:1px solid var(--cizgi);padding:12px 0}
.satir:first-of-type{border-top:0}
.satir .ad{font-weight:600}
.satir .kod{color:var(--soluk);font-size:14px;font-family:ui-monospace,Menlo,Consolas,monospace}
.satir .bilgi{display:flex;gap:14px;flex-wrap:wrap;color:var(--soluk);font-size:15px;margin-top:4px}
.yesil{border-left:5px solid var(--iyi);padding-left:11px}
.sari{border-left:5px solid var(--uyari);padding-left:11px}
.kirmizi{border-left:5px solid var(--hata);padding-left:11px}

/* --- form --- */
label{display:block;font-weight:600;margin:14px 0 6px}
input,select{width:100%;font:inherit;padding:15px 14px;border:1px solid var(--cizgi);
  border-radius:12px;background:#fff;color:var(--yazi)}
input:focus,select:focus{outline:3px solid #cfe1f6;border-color:var(--ana)}
.satirlar{display:flex;gap:10px;flex-wrap:wrap}
.satirlar>*{flex:1;min-width:140px}

/* --- ozet serit --- */
.ozet{display:flex;gap:10px;margin-bottom:14px}
.ozet div{flex:1;background:var(--kart);border:1px solid var(--cizgi);border-radius:12px;
  padding:12px 8px;text-align:center}
.ozet .n{font-size:24px;font-weight:700;display:block}
.ozet .b{font-size:13px;color:var(--soluk)}

/* --- uyari mesajlari --- */
.mesaj{padding:14px 16px;border-radius:12px;margin-bottom:12px;font-weight:600}
.mesaj.iyi{background:var(--iyi-zemin);color:var(--iyi)}
.mesaj.hata{background:var(--hata-zemin);color:var(--hata)}
.mesaj.uyari{background:var(--uyari-zemin);color:var(--uyari)}
.bos{text-align:center;color:var(--soluk);padding:40px 20px}
.kucukyazi{font-size:14px;color:var(--soluk)}
table.duz{width:100%;border-collapse:collapse;font-size:15px}
table.duz td,table.duz th{padding:8px 6px;border-bottom:1px solid var(--cizgi);text-align:left}
.kaydir{overflow-x:auto}