/* ==========================================================================
   APOX PANEL — tek stil dosyasi
   Harici font/CDN YOK: muhasebe ekrani internete bagimli olmasin.
   Sinif sozlugu Turkce ve kisa; sablonlarda satir ici stil KULLANILMAZ,
   yeni bir gorunum gerekiyorsa buraya sinif eklenir.
   ========================================================================== */

:root {
  /* ZEMIN: neredeyse beyaz. Icerik ferah gorunsun diye gri tonundan cikildi. */
  --sayfa:    #f7f9fc;
  --kart:     #ffffff;
  --cizgi:    #e4eaf2;
  --cizgi2:   #eef2f7;
  --metin:    #17202e;
  --metin2:   #5b6779;
  --soluk:    #94a1b2;
  --cok-soluk:#c2ccd9;

  /* kenar cubugu KOYU kaliyor */
  --yan1:     #202b38;
  --yan2:     #151d27;
  --yan-cizgi:#2b3746;
  --yan-metin:#8996a6;
  --yan-ak:   #f2f6fa;

  /* MODUL RENKLERI — anlam tasiyor, sadece susleme degil */
  --mavi:      #2563eb;  --mavi-koyu: #1d4ed8;
  --mavi-acik: #eff5ff;  --mavi-kenar:#cfe0fb;   /* cari, birincil */
  --yesil:     #0e7a53;  --yesil-acik:#eefaf4;  --yesil-kenar:#c2ead9;  /* kasa, alacak */
  --kirmizi:   #c0303a;  --kirmizi-acik:#fef2f3; --kirmizi-kenar:#f7cfd2; /* borc */
  --sari:      #b45c09;  --sari-acik: #fff9ed;  --sari-kenar: #f7e0b8;
  --mor:       #5b4bc4;  --mor-acik:  #f2f1fe;  --mor-kenar:  #dcd8f8;  /* belge */
  --gok:       #0a6f9c;  --gok-acik:  #edf7fc;  --gok-kenar:  #c5e3f2;  /* panel */

  --golge:    0 1px 2px rgba(23,32,46,.04), 0 4px 14px -8px rgba(23,32,46,.12);
  --golge-yan:0 18px 40px rgba(15,21,28,.24);
  --r:        12px;
  --r-buyuk:  14px;
  --yan-en:   244px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--sayfa);
  color: var(--metin);
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--mavi); outline-offset: 2px; border-radius: 6px; }

.rakam { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sag  { text-align: right; }
.gizli { display: none !important; }
.tek-satir { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── KABUK ─────────────────────────────────────────────────────────────── */
.kabuk {
  display: grid;
  grid-template-columns: var(--yan-en) minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  min-height: 100vh;
  align-items: start;
}

/* ── KENAR ÇUBUĞU ──────────────────────────────────────────────────────── */
.yan {
  position: sticky;
  top: 16px;
  height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--yan-cizgi);
  border-radius: var(--r-buyuk);
  box-shadow: var(--golge-yan);
  overflow: hidden;
  background: linear-gradient(180deg, var(--yan1) 0%, var(--yan2) 100%);
}

.yan-bas {
  padding: 16px 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
/* Logo ALTIN renkte (murekkep parlakligi ~0.78): koyu zeminde okunuyor,
   acik zeminde kayboluyor. O yuzden her yerde koyu bir kutunun icinde durur. */
.logo-bag { display: block; }
.logo-kutu {
  display: flex; align-items: center; justify-content: center;
  height: 66px; padding: 10px 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.10); border-radius: 10px;
  background: rgba(255,255,255,.04);
}
/* width:auto ONEMLI: max-height ile birlikte width:100% verilirse ve stil
   herhangi bir sebeple gelmezse gorsel dogal boyutuna (345px) acilip
   cubugu tasiriyor. Boyle yazildiginda tasmasi mumkun degil. */
.logo-png { display: block; width: auto; height: auto;
            max-width: 100%; max-height: 42px; }
.logo-alt {
  display: block; text-align: center; margin-top: 8px;
  color: var(--yan-metin); font-size: 9.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
}

.yan-firma {
  margin-top: 14px; padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
}
.yan-firma-et { color: var(--yan-metin); font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.yan-firma-ad { color: var(--yan-ak); font-size: 14px; font-weight: 800; margin-top: 2px; }
.yan-firma-rol { color: #8fb6d8; font-size: 11px; font-weight: 600; margin-top: 1px; }

.yan-govde { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 10px; }
.yan-govde::-webkit-scrollbar { width: 7px; }
.yan-govde::-webkit-scrollbar-thumb { background: rgba(148,163,184,.45); border-radius: 999px; }
.yan-govde::-webkit-scrollbar-thumb:hover { background: rgba(203,213,225,.6); }

.yan-baslik {
  color: #64748b; font-size: 9.5px; font-weight: 900; letter-spacing: .12em;
  text-transform: uppercase; padding: 12px 8px 6px;
}
.yan-baslik:first-child { padding-top: 2px; }

.yan-link {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 12px; border-radius: 7px; margin-bottom: 1px;
  color: #b9c4d1; font-size: 13.5px; font-weight: 500;
  transition: background .13s, color .13s;
}
.yan-link:hover { background: rgba(255,255,255,.05); color: #fff; }
.yan-link.acik { background: rgba(255,255,255,.08); color: #fff; font-weight: 650; }
.yan-link.acik::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px;
  width: 2.5px; border-radius: 2px; background: #7fb0e0;
}
.yan-im { width: 18px; height: 18px; flex: none; display: grid; place-items: center; opacity: .75; }
.yan-link.acik .yan-im, .yan-link:hover .yan-im { opacity: 1; }
.ik { display: block; }
.yan-sayi {
  margin-left: auto; font-size: 10.5px; font-weight: 800;
  background: rgba(255,255,255,.1); color: #e2e8f0;
  padding: 1px 7px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.yan-link.acik .yan-sayi { background: rgba(255,255,255,.22); color: #fff; }

.yan-alt {
  padding: 12px; border-top: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; gap: 10px;
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14);
  color: #e2e8f0; font-size: 12.5px; font-weight: 800;
  display: grid; place-items: center;
}
.yan-kim { min-width: 0; flex: 1; }
.yan-kim b { display: block; color: var(--yan-ak); font-size: 12.5px; font-weight: 700; }
.yan-kim span { display: block; color: #64748b; font-size: 11px; }
.cikis-dg {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  background: transparent; border: 1px solid rgba(255,255,255,.14);
  color: var(--yan-metin); font-size: 13px; display: grid; place-items: center;
}
.cikis-dg:hover { border-color: #f87171; color: #fca5a5; background: rgba(248,113,113,.1); }

/* ── İÇERİK ────────────────────────────────────────────────────────────── */
/* Icerik FERAH ve ACIK: zemin neredeyse beyaz, satir araliklari genis,
   renk anlam tasiyor. Koyu ton yalnizca kenar cubugunda kaliyor.
   Her modulun kendi rengi var; hangi bolumde oldugun renkten anlasiliyor:
     cari mavi · kasa/banka yesil · belge mor · panel gok · ayar gri     */
.icerik { min-width: 0; padding-bottom: 40px; }

/* SAYFA BAŞLIĞI */
.tepe {
  display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
  padding: 2px 2px 20px; margin-bottom: 20px;
  border-bottom: 1px solid var(--cizgi);
}
.tepe-im {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: var(--mavi-acik); color: var(--mavi);
  border: 1px solid var(--mavi-kenar);
}
.tepe-im .ik { width: 21px; height: 21px; }
.tepe-metin { min-width: 0; }
.tepe-yol {
  display: inline-block; font-size: 11.5px; font-weight: 650;
  color: var(--soluk); margin-bottom: 4px;
}
.tepe-yol a { color: var(--mavi); }
.tepe-yol a:hover { text-decoration: underline; }
.tepe-baslik {
  font-size: 25px; font-weight: 700; letter-spacing: -.025em;
  margin: 0; line-height: 1.18; color: var(--metin);
}
.tepe-alt { font-size: 14px; color: var(--metin2); margin: 6px 0 0; max-width: 84ch; }
.tepe-alt .et { vertical-align: 1px; }
.eylemler { margin-left: auto; display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

/* ikon kutusu renk çeşitleri */
.im-mavi  { background: var(--mavi-acik);  color: var(--mavi);  border-color: var(--mavi-kenar); }
.im-yesil { background: var(--yesil-acik); color: var(--yesil); border-color: var(--yesil-kenar); }
.im-mor   { background: var(--mor-acik);   color: var(--mor);   border-color: var(--mor-kenar); }
.im-gok   { background: var(--gok-acik);   color: var(--gok);   border-color: var(--gok-kenar); }
.im-sari  { background: var(--sari-acik);  color: var(--sari);  border-color: var(--sari-kenar); }
.im-kirmizi { background: var(--kirmizi-acik); color: var(--kirmizi); border-color: var(--kirmizi-kenar); }
.im-gri   { background: #f1f5f9; color: var(--metin2); border-color: var(--cizgi); }

/* ── KART ──────────────────────────────────────────────────────────────── */
.kart {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: 14px; box-shadow: var(--golge);
  margin-bottom: 20px; overflow: hidden;
}
.kart-bas {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  padding: 18px 22px 16px; background: #fff;
  border-bottom: 1px solid var(--cizgi2);
}
.kart-im {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: var(--mavi-acik); color: var(--mavi);
  border: 1px solid var(--mavi-kenar);
}
.kart-im .ik { width: 17px; height: 17px; }
.kart-ad { font-size: 16px; font-weight: 650; letter-spacing: -.01em; margin: 0; color: var(--metin); }
.kart-alt { font-size: 13px; color: var(--metin2); margin: 2px 0 0; }
.kart-bas .eylemler { margin-left: auto; }
.kart-govde { padding: 22px; }
.kart-govde.sifir { padding: 0; }
.kart-ayak {
  padding: 14px 22px; border-top: 1px solid var(--cizgi2);
  background: #fbfcfe; font-size: 12.5px; color: var(--metin2);
}
.kart-no {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: var(--mavi-acik); color: var(--mavi);
  border: 1px solid var(--mavi-kenar);
  font-size: 12.5px; font-weight: 700;
}

/* ── SAYI KUTUCUKLARI — renkli, ferah ─────────────────────────────────── */
.kutucuklar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(214px, 1fr));
  gap: 14px; margin-bottom: 20px;
}
.kutucuk {
  border: 1px solid var(--cizgi); border-radius: 14px;
  background: #fff; box-shadow: var(--golge); padding: 18px 20px 17px;
}
.kutucuk-et {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--metin2);
}
.kutucuk-deger {
  font-size: 29px; font-weight: 700; letter-spacing: -.03em;
  margin-top: 7px; font-variant-numeric: tabular-nums; line-height: 1.05;
  color: var(--metin);
}
.kutucuk-not {
  font-size: 12.5px; color: var(--soluk); margin-top: 6px;
  display: flex; align-items: center; gap: 5px;
}
/* renk çeşitleri: yumuşak zemin + renkli rakam */
.kutucuk.yesil   { background: var(--yesil-acik);   border-color: var(--yesil-kenar); }
.kutucuk.yesil   .kutucuk-deger { color: var(--yesil); }
.kutucuk.yesil   .kutucuk-et { color: #3f7a62; }
.kutucuk.kirmizi { background: var(--kirmizi-acik); border-color: var(--kirmizi-kenar); }
.kutucuk.kirmizi .kutucuk-deger { color: var(--kirmizi); }
.kutucuk.kirmizi .kutucuk-et { color: #9d5257; }
.kutucuk.mavi    { background: var(--mavi-acik);    border-color: var(--mavi-kenar); }
.kutucuk.mavi    .kutucuk-deger { color: var(--mavi); }
.kutucuk.mavi    .kutucuk-et { color: #46688a; }
.kutucuk.mor     { background: var(--mor-acik);     border-color: var(--mor-kenar); }
.kutucuk.mor     .kutucuk-deger { color: var(--mor); }
.kutucuk.mor     .kutucuk-et { color: #5d5490; }
.kutucuk.gok     { background: var(--gok-acik);     border-color: var(--gok-kenar); }
.kutucuk.gok     .kutucuk-deger { color: var(--gok); }
.kutucuk.gok     .kutucuk-et { color: #3d6d8c; }

.d-yesil   { color: var(--yesil); }
.d-kirmizi { color: var(--kirmizi); }
.d-soluk   { color: var(--soluk); }
.d-metin   { color: var(--metin); }

/* ── TABLO — açık, ferah, satırlar rahat ──────────────────────────────── */
.tablo-sar { overflow-x: auto; }
.tablo { width: 100%; border-collapse: separate; border-spacing: 0; }
.tablo thead th {
  position: sticky; top: 0; z-index: 2;
  background: #f8fafc; color: var(--metin2);
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; text-align: left;
  padding: 12px 18px; white-space: nowrap;
  border-bottom: 1px solid var(--cizgi);
}
.tablo th.sag, .tablo th.rakam { text-align: right; }
.tablo tbody td {
  padding: 14px 18px; border-bottom: 1px solid var(--cizgi2);
  font-size: 14px; vertical-align: middle; color: var(--metin);
}
.tablo tbody tr:hover td { background: #f8fbff; }
.tablo tbody tr:last-child td { border-bottom: 0; }
.tablo tbody tr.solgun td { opacity: .5; }
.tablo tbody tr.devir td {
  background: #f8fafc; font-weight: 650; color: var(--metin);
}
.tablo tfoot td {
  padding: 15px 18px; background: #f8fafc;
  border-top: 1px solid var(--cizgi);
  font-weight: 700; font-size: 14px; color: var(--metin);
}
.tablo .baglanti { font-weight: 600; color: var(--mavi); }
.tablo .baglanti:hover { text-decoration: underline; }
.kod {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; color: var(--metin2);
}
.ikincil { color: var(--metin2); font-size: 13px; }
.nokta { color: var(--cok-soluk); }
.tablo-not {
  font-size: 12.5px; color: var(--soluk); padding: 14px 22px;
  border-top: 1px solid var(--cizgi2); background: #fbfcfe;
}

/* ── DÜĞMELER ──────────────────────────────────────────────────────────── */
.dg {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  border-radius: 9px; padding: 10px 17px; font-size: 14px; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap; line-height: 1.35;
  transition: background .13s, border-color .13s, color .13s, box-shadow .13s;
}
.dg .ik { width: 16px; height: 16px; }
.dg-mavi {
  background: var(--mavi); border-color: var(--mavi); color: #fff;
  box-shadow: 0 1px 2px rgba(37,99,235,.2);
}
.dg-mavi:hover { background: var(--mavi-koyu); border-color: var(--mavi-koyu); }
.dg-ana {
  background: #fff; color: var(--metin); border-color: #cbd5e1;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.dg-ana:hover { border-color: var(--mavi); color: var(--mavi); background: var(--mavi-acik); }
.dg-hayalet { background: #fff; color: var(--metin2); border-color: var(--cizgi); }
.dg-hayalet:hover { border-color: #b6c2d2; color: var(--metin); background: #f8fafc; }
.dg-tehlike { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }
.dg-tehlike:hover { background: #9f1f28; border-color: #9f1f28; }
.dg-kucuk { padding: 7px 13px; font-size: 13px; }
.dg-mini  { padding: 4px 10px; font-size: 12px; border-radius: 7px; }
.dg-blok  { width: 100%; }
.dg-sira  { display: flex; gap: 9px; flex-wrap: wrap; }
.dg-dikey { display: flex; flex-direction: column; gap: 7px; }

/* ── ETİKETLER ─────────────────────────────────────────────────────────── */
.et {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 7px;
  font-size: 11.5px; font-weight: 650; white-space: nowrap;
  background: #f1f5f9; color: var(--metin2); border: 1px solid var(--cizgi);
}
.et-yesil   { background: var(--yesil-acik); color: var(--yesil); border-color: var(--yesil-kenar); }
.et-kirmizi { background: var(--kirmizi-acik); color: var(--kirmizi); border-color: var(--kirmizi-kenar); }
.et-sari    { background: var(--sari-acik); color: var(--sari); border-color: var(--sari-kenar); }
.et-mavi    { background: var(--mavi-acik); color: var(--mavi); border-color: var(--mavi-kenar); }
.et-mor     { background: var(--mor-acik); color: var(--mor); border-color: var(--mor-kenar); }
.et i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── FORM ──────────────────────────────────────────────────────────────── */
.izgara {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px;
}
.izgara .genis { grid-column: 1 / -1; }
/* Ust uste gelen form bloklari arasinda bosluk: her sablonda inline
   margin-bottom yazmak yerine tek kural. */
.izgara + .izgara, .izgara + .alan, .alan + .izgara { margin-top: 18px; }
.izgara .iki-sutun { grid-column: span 2; }

.alan { min-width: 0; }
.alan-et {
  display: block; font-size: 13.5px; font-weight: 650; color: var(--metin);
  margin-bottom: 7px; letter-spacing: -.1px;
}
.alan-et .ops { color: var(--soluk); font-weight: 500; }
/* Zorunlu alan yildizi sablonda elle yazilmiyor: tek yerden, hem gorunur hem
   ekran okuyucuya anlamli. */
.alan.gerekli > .alan-et::after {
  content: " *"; color: var(--kirmizi); font-weight: 800;
}
input, select, textarea {
  width: 100%; border: 1px solid #cdd7e4; border-radius: 10px;
  padding: 12px 14px; font: inherit; font-size: 15px; color: var(--metin);
  background: #fff; transition: border-color .13s, box-shadow .13s, background .13s;
}
input:hover, select:hover, textarea:hover { border-color: #a8b6c8; }
input:focus, select:focus, textarea:focus {
  border-color: var(--mavi); outline: none; background: #fff;
  box-shadow: 0 0 0 4px rgba(37,99,235,.14);
}
/* Odaklanilan alanin ETIKETI de renk degistiriyor: uzun formda gozun nerede
   oldugunu bulmasi kolaylassin. */
.alan:focus-within > .alan-et { color: var(--mavi); }
input::placeholder { color: var(--cok-soluk); }
textarea { resize: vertical; min-height: 72px; }
select {
  appearance: none; padding-right: 36px; background-repeat: no-repeat;
  background-position: right 13px center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5L6 8l3.5-3.5' stroke='%235b6779' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
}
.alan-ipucu { font-size: 12.5px; color: var(--soluk); margin: 6px 0 0; }
.alan-ipucu code, .kart-ayak code, .tablo-not code {
  font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  background: #f1f5f9; border: 1px solid var(--cizgi);
  border-radius: 5px; padding: 1px 5px;
}

.suzgec {
  display: flex; gap: 11px; flex-wrap: wrap; align-items: flex-end;
  padding: 18px 22px; border-bottom: 1px solid var(--cizgi2); background: #fbfcfe;
}
.suzgec input, .suzgec select { width: auto; min-width: 158px; }
.suzgec .buyu { flex: 1 1 230px; }

/* ── UYARILAR ──────────────────────────────────────────────────────────── */
.uyarilar { margin-bottom: 18px; }
.uyari {
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: 11px; padding: 14px 17px; margin-bottom: 10px;
  font-size: 14px; font-weight: 550; border: 1px solid;
  box-shadow: var(--golge);
}
.uyari-im {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: #fff;
}
.uyari.success { background: var(--yesil-acik); border-color: var(--yesil-kenar); color: #1c6249; }
.uyari.success .uyari-im { background: var(--yesil); }
.uyari.warning { background: var(--sari-acik); border-color: var(--sari-kenar); color: #8a4f0c; }
.uyari.warning .uyari-im { background: var(--sari); }
.uyari.danger  { background: var(--kirmizi-acik); border-color: var(--kirmizi-kenar); color: #97323a; }
.uyari.danger .uyari-im { background: var(--kirmizi); }
.uyari-kapat {
  margin-left: auto; background: none; border: 0; color: inherit;
  opacity: .45; font-size: 17px; line-height: 1; padding: 0 2px;
}
.uyari-kapat:hover { opacity: 1; }

/* ── BOŞ DURUM ─────────────────────────────────────────────────────────── */
.bos { padding: 22px; }
.bos-ic {
  border: 1.5px dashed #d3dde8; border-radius: 14px;
  background: #fbfcfe; padding: 44px 26px; text-align: center;
}
.bos-im {
  width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 16px;
  background: var(--mavi-acik); border: 1px solid var(--mavi-kenar);
  display: grid; place-items: center; color: var(--mavi);
}
.bos-im .ik { width: 24px; height: 24px; }
.bos h3 { margin: 0 0 7px; font-size: 17px; font-weight: 650; color: var(--metin); }
.bos p { margin: 0 auto 20px; font-size: 14px; color: var(--metin2); max-width: 48ch; }

/* ── AŞAMA LİSTESİ ─────────────────────────────────────────────────────── */
.asama {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--cizgi2); font-size: 14px;
}
.asama:last-child { border-bottom: 0; }
.asama-im {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: #f1f5f9; color: var(--cok-soluk); border: 1px solid var(--cizgi);
}
.asama.tamam .asama-im {
  background: var(--yesil-acik); color: var(--yesil); border-color: var(--yesil-kenar);
}
.asama.bekliyor { color: var(--soluk); }

/* ── DÜZEN ─────────────────────────────────────────────────────────────── */
.ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ustuste { display: flex; flex-direction: column; }
.dar { max-width: 660px; }
.gizle { display: none !important; }
.secim { display: flex; gap: 10px; align-items: center; font-size: 14px; margin-bottom: 14px; }
.secim input { width: auto; }
.buyuk-orta { font-size: 17px; }
/* Rapor menusundeki tiklanabilir kutucuk */
.kutucuk-bag { display: block; text-decoration: none; transition: border-color .12s, transform .12s; }
.kutucuk-bag:hover { border-color: var(--mavi-kenar); transform: translateY(-1px); }
.kutucuk-bag .kart-im { margin-bottom: 10px; }
.uyari-satir { display: flex; gap: 12px; align-items: flex-start; }
.uyari-satir .kart-alt { margin: 4px 0 0; }
.orta { max-width: 880px; }

/* ── ÖZET ŞERİDİ ───────────────────────────────────────────────────────── */
.ozet-serit {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 6px 24px; padding: 18px 22px; background: #fbfcfe;
  border-top: 1px solid var(--cizgi2);
}
.ozet-serit div { min-width: 0; padding: 3px 0; }
.ozet-serit b {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--soluk); margin-bottom: 3px;
}
.ozet-serit span { color: var(--metin); font-size: 13.5px; }

.buyuk-tutar {
  font-size: 30px; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1.05; color: var(--metin);
}

/* ── MOBİL ─────────────────────────────────────────────────────────────── */
.yan-ac {
  display: none; position: fixed; left: 12px; top: 12px; z-index: 60;
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--yan1); color: #fff; border: 1px solid var(--yan-cizgi);
  box-shadow: var(--golge);
}
.perde { display: none; position: fixed; inset: 0; z-index: 45; background: rgba(21,29,39,.45); }

@media (max-width: 1100px) { .ikili { grid-template-columns: 1fr; } }

@media (max-width: 860px) {
  .kabuk { grid-template-columns: 1fr; padding: 14px; gap: 14px; }
  .yan {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 50;
    width: 266px; height: 100vh; border-radius: 0 var(--r-buyuk) var(--r-buyuk) 0;
    transform: translateX(-104%); transition: transform .22s ease;
  }
  body.yan-acik .yan { transform: none; }
  body.yan-acik .perde { display: block; }
  .yan-ac { display: grid; place-items: center; }
  .icerik { padding-top: 54px; }
  .tepe-baslik { font-size: 21px; }
  .tepe-im { width: 38px; height: 38px; }
  .izgara .iki-sutun { grid-column: span 1; }
}

@media (max-width: 560px) {
  .kutucuklar { grid-template-columns: 1fr 1fr; gap: 11px; }
  .kutucuk-deger { font-size: 22px; }
  .kutucuk { padding: 14px 15px; }
  .kart-bas, .kart-govde { padding: 15px 16px; }
  .tablo thead th, .tablo tbody td, .tablo tfoot td { padding: 12px 12px; }
  .eylemler { width: 100%; margin-left: 0; }
  .tepe { align-items: flex-start; }
}

@media print {
  .yan, .yan-ac, .eylemler, .suzgec, .uyarilar, .kart-ayak { display: none !important; }
  .kabuk { grid-template-columns: 1fr; padding: 0; }
  .kart { box-shadow: none; border-color: #bbb; break-inside: avoid; }
  body { background: #fff; }
}

/* ── GİRİŞ EKRANI ──────────────────────────────────────────────────────── */
.giris-sayfa { max-width: 404px; margin: 0 auto; padding: 8vh 20px 40px; }
.giris-marka { max-width: 236px; margin: 0 auto 24px; }
.giris-marka .logo-kutu { background: var(--yan1); border-color: var(--yan-cizgi); }
.giris-marka .logo-alt { color: var(--soluk); }

/* ── LİSTE: sıralama ve sayfalama ─────────────────────────────────────── */
.sirala-bag {
  color: inherit; text-decoration: none; display: inline-flex; gap: 4px;
  align-items: center; white-space: nowrap;
}
.sirala-bag:hover { color: var(--mavi); }
.sirala-ok { font-size: 10px; opacity: .85; }
.tablo th.sirali { color: var(--mavi); }

.sayfalama {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 18px; border-top: 1px solid var(--cizgi);
  font-size: 13px; color: var(--metin2);
}
.sayfalama-bilgi { min-width: 150px; }
.sayfalama-sag { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.sayfa-dgler { display: flex; gap: 4px; flex-wrap: wrap; }
.sayfa-dg {
  min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--cizgi);
  border-radius: 8px; display: inline-flex; align-items: center;
  justify-content: center; text-decoration: none; color: var(--metin);
  background: #fff; font-variant-numeric: tabular-nums;
}
.sayfa-dg:hover { border-color: var(--mavi-kenar); color: var(--mavi); }
.sayfa-dg.acik { background: var(--mavi); border-color: var(--mavi); color: #fff; }
.sayfa-dg.pasif { opacity: .4; pointer-events: none; }
.sayfa-bosluk { padding: 0 4px; color: var(--soluk); }
.sayfa-boy { display: flex; align-items: center; gap: 7px; }
.sayfa-boy select { width: auto; padding: 6px 9px; font-size: 13px; }
@media (max-width: 720px) {
  .sayfalama-sag { margin-left: 0; width: 100%; }
  .sayfa-boy span { display: none; }
}
@media print { .sayfalama { display: none; } }

/* ══ FORM SAYFASI ═══════════════════════════════════════════════════════
   Veri girisi ekranlari ORTALANMIS ve dar tutuluyor. Genis ekranda alanlar
   uc dort sutuna yayilinca goz satir basini kaybediyor; 860px'te bir satirda
   en fazla uc alan kaliyor ve form yukaridan asagi tek akista okunuyor. */
.form-sayfa { max-width: 860px; margin: 0 auto; counter-reset: bolum; }
.form-sayfa.genis-form { max-width: 1180px; }

/* Bolum kartlari: numarali baslik + renkli serit. Numara, "kac adim var,
   neredeyim" sorusunu formu okumadan cevapliyor. */
.form-bolum { position: relative; overflow: hidden; }
.form-bolum::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--mavi);
}
.form-bolum.b-yesil::before  { background: var(--yesil); }
.form-bolum.b-mor::before    { background: var(--mor); }
.form-bolum.b-sari::before   { background: var(--sari); }
.form-bolum.b-gok::before    { background: var(--gok); }
.form-bolum.b-kirmizi::before{ background: var(--kirmizi); }
.form-bolum.b-gri::before    { background: var(--cok-soluk); }

.form-bolum .kart-bas { align-items: center; }
.bolum-no {
  counter-increment: bolum; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: var(--metin2);
  background: #f1f5f9; border: 1px solid var(--cizgi);
}
.bolum-no::before { content: counter(bolum); }

/* Para alani: ₺ oneki ve saga dayali, kalin rakam. Tutar alani formdaki en
   kritik alan; goz once oraya gitsin. */
.para-kutu { position: relative; display: block; }
.para-kutu > .para-im {
  position: absolute; left: 1px; top: 1px; bottom: 1px; width: 38px;
  display: grid; place-items: center; border-radius: 9px 0 0 9px;
  background: #f5f8fc; border-right: 1px solid var(--cizgi);
  color: var(--metin2); font-weight: 700; font-size: 15px; pointer-events: none;
}
.para-kutu > input {
  padding-left: 50px; text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 16px; letter-spacing: -.2px;
}
.para-kutu > input:focus ~ .para-im { color: var(--mavi); }

/* Buyuk secim: cari/hesap secerken kutu daha belirgin olsun */
.alan.one-cikan > select, .alan.one-cikan > input {
  border-color: #bfcede; background: #fcfdff;
}

/* Yapiskan kaydet cubugu: uzun formda kullanici en alta inmek zorunda
   kalmiyor, dugme her zaman gorunuyor. */
.form-ayak {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 18px; padding: 14px 18px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  border: 1px solid var(--cizgi); border-radius: var(--r);
  box-shadow: 0 -2px 18px -10px rgba(23,32,46,.35);
}
.form-ayak .dg-ana, .form-ayak .dg-mavi { padding: 12px 22px; font-size: 14.5px; }
.form-ayak .ayak-not {
  margin-left: auto; font-size: 12.5px; color: var(--soluk); text-align: right;
}
.form-ayak .ayak-not kbd {
  font-family: ui-monospace, Menlo, monospace; font-size: 11.5px;
  background: #f1f5f9; border: 1px solid var(--cizgi);
  border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px;
}
@media (max-width: 720px) {
  .form-ayak .ayak-not { display: none; }
  .form-ayak .dg { flex: 1 1 auto; justify-content: center; }
}
@media print { .form-ayak { display: none; } }

/* Onay kutusu satiri */
.secim {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 15px; border: 1px solid var(--cizgi); border-radius: 10px;
  background: #fbfcfe; cursor: pointer; font-size: 14px;
}
.secim:hover { border-color: #bfcede; }
.secim input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; }
.secim b { display: block; }
.secim .secim-not { color: var(--metin2); font-size: 13px; }

/* ── FATURA KALEM TABLOSU ─────────────────────────────────────────────── */
#kalemTablo th, #kalemTablo td { padding: 9px 10px; }
#kalemTablo input, #kalemTablo select { padding: 9px 11px; font-size: 14px; }
.k-s-urun   { min-width: 230px; }
.k-s-ack    { min-width: 150px; }
.k-s-miktar { width: 110px; }
.k-s-birim  { width: 74px; }
.k-s-fiyat  { width: 130px; }
.k-s-isk    { width: 92px; }
.k-s-kdv    { width: 96px; }
.k-s-tutar  { width: 130px; }
.k-s-sil    { width: 44px; }
#kalemTablo .k-tutar { font-weight: 700; }
#kalemTablo tr.kalem:focus-within { background: var(--mavi-acik); }
.ikili-alan { display: flex; gap: 8px; }
.ikili-alan .dar-sec { width: 96px; flex: none; }

/* Toplam karti: genel toplam formdaki en onemli rakam, oyle gorunsun */
.toplam-karti tfoot td { font-size: 17px; font-weight: 800; }
.ayak-toplam {
  display: flex; align-items: baseline; gap: 9px; margin-left: 18px;
  padding-left: 18px; border-left: 1px solid var(--cizgi);
}
.ayak-toplam-et { font-size: 12.5px; color: var(--metin2); }
.ayak-toplam b {
  font-size: 19px; font-variant-numeric: tabular-nums; letter-spacing: -.3px;
}
@media (max-width: 720px) {
  .ayak-toplam { margin-left: auto; padding-left: 0; border-left: 0; }
}

#satirTablo .s-urun { width: 46%; }
#satirTablo .s-miktar { width: 22%; }
#satirTablo .s-sil { width: 10%; }
#satirTablo th, #satirTablo td { padding: 9px 10px; }
#satirTablo tr:focus-within { background: var(--mavi-acik); }

.giris-bas { display: block; }
.giris-sayfa .alan + .alan { margin-top: 14px; }
.giris-sayfa .dg-blok { margin-top: 18px; }
.giris-alt-not {
  text-align: center; font-size: 12px; color: var(--soluk); margin-top: 14px;
}

/* ── ABONELİK ŞERİDİ ──────────────────────────────────────────────────── */
.abonelik-serit {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 12px 17px; margin-bottom: 18px; border-radius: 11px;
  border: 1px solid var(--sari-kenar); background: var(--sari-acik);
  color: #7a4408; font-size: 13.5px;
}
.abonelik-serit.kritik {
  border-color: var(--kirmizi-kenar); background: var(--kirmizi-acik);
  color: #8d2b33;
}
.abonelik-serit .serit-im { display: flex; flex: none; }
.abonelik-serit .dg { margin-left: auto; }
@media print { .abonelik-serit { display: none; } }

/* Tablo icinde kucuk duzenleme formu (etiket satiri) */
.satir-form { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.satir-form .kucuk-alan { width: auto; min-width: 110px; padding: 7px 10px; font-size: 13px; }

/* ── ETİKET SEÇİCİ ────────────────────────────────────────────────────── */
.etiket-kutulari { display: flex; flex-wrap: wrap; gap: 8px; }
.etiket-kutu {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--cizgi); border-radius: 9px; padding: 6px 10px;
  background: #fff; transition: border-color .12s, background .12s;
}
.etiket-kutu:hover { border-color: #bfcede; }
.etiket-kutu.secili { border-color: var(--mavi); background: var(--mavi-acik); }
.etiket-kutu input { width: 15px; height: 15px; margin: 0; }
.etiket-satiri { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.etiket-satiri .et { font-size: 11.5px; padding: 1px 7px; }