/* ══════════════════════════════════════════════════════════════════════════════
   AFATECH Elektronik — ORTAK GÖRÜNÜM
   Bu dosyayı hem masaüstü hem web okur. Renkler AFATECH'in kendi paletinden:
   lacivert mürekkep + pirinç. Jetonlar tek yerde; ekranlar sabit renk yazmaz.
   ══════════════════════════════════════════════════════════════════════════════ */
:root {
  --murekkep: #050F2E;
  --murekkep-2: #132554;
  --kenar-koyu: #2B3E73;
  --pirinc: #C08A0B;
  --pirinc-parlak: #E3A912;

  --zemin: #E4EAF4;
  --kart: #F0F5FE;
  --kart-2: #E9EFFA;
  --yazi: #2A3140;
  --yazi-2: #575F6F;
  --kenar: #ABB8C9;
  --cizgi: #DCE4F0;

  --onay: #1F8A4C;      --onay-z: #E7F3EC;    --onay-y: #14552F;
  --tehlike: #DC2626;   --tehlike-z: #FBE9E9; --tehlike-y: #8A1C1C;
  --uyari-z: #FAF0D8;   --uyari-y: #6A4A05;
  --mavi: #0A2A75;      --mavi-z: #E4EAF8;    --mavi-y: #102C6B;

  --acik: #B9C9EC;
  --soluk: #8FA6C4;

  --yazitipi: "Segoe UI", system-ui, -apple-system, sans-serif;
  --kodyazi: "Cascadia Mono", Consolas, ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--zemin);
  color: var(--yazi);
  font-family: var(--yazitipi);
  font-size: 14px;
  line-height: 1.5;
}

/* Yalnız ekran okuyucu görsün — görünür metinden gizle ama kaldırma */
.gizli-etiket {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.kabuk { min-height: 100%; display: flex; flex-direction: column; }

/* ── üst bant ───────────────────────────────────────────────────────────── */
.ust-bant {
  background: var(--murekkep); color: #E8EFFB;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  padding: 12px 20px;
}
.marka { font-size: 17px; font-weight: 700; flex: 0 0 auto; }
.marka span { font-weight: 400; color: var(--pirinc-parlak); }

.arama { flex: 999 1 320px; min-width: 0; display: flex; align-items: center; gap: 10px;
         background: var(--murekkep-2); border: 1px solid var(--kenar-koyu);
         border-radius: 9px; padding: 0 13px; }
.arama input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
               color: #E9EFFA; font-family: inherit; font-size: 14px; padding: 10px 0; }
.arama input::placeholder { color: #7F93B4; }
.arama kbd { font-family: var(--kodyazi); font-size: 10.5px; color: var(--soluk);
             border: 1px solid var(--kenar-koyu); border-radius: 5px; padding: 2px 6px; }

.esitleme { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--acik); flex: 0 0 auto; }
.esitleme .nokta { width: 8px; height: 8px; border-radius: 50%; background: #5FD08C; }

/* ── sekmeler ───────────────────────────────────────────────────────────── */
.sekmeler { background: var(--murekkep); display: flex; flex-wrap: wrap; gap: 2px;
            padding: 0 12px; border-bottom: 2px solid var(--pirinc); }
.sekme { color: var(--acik); text-decoration: none; font-size: 13.5px; font-weight: 500;
         padding: 12px 14px; border-bottom: 3px solid transparent; white-space: nowrap; }
.sekme:hover { color: #fff; background: rgba(255,255,255,.06); }
.sekme.active { color: #fff; font-weight: 600; background: var(--murekkep-2);
                border-bottom-color: var(--pirinc-parlak); }
.sekme:focus-visible { outline: 2px solid var(--pirinc-parlak); outline-offset: -3px; }

/* ── gövde ──────────────────────────────────────────────────────────────── */
.govde { flex: 1; padding: 18px 20px 26px; display: flex; flex-direction: column; gap: 14px; }

/* ─────────────────────────────────────────────────────────────────────────────
   SAYAÇ KUTULARI

   🎨 Murat, 18 Eki 2026: rakip bir programın yedi renkli kutulu ekranını gösterip
      "programa renk katıyor" dedi. Renk KATILDI ama oradaki hatayla değil:
      o ekranda yedi kutunun yedisi de doluyken renkliydi ve renkler bir şey
      ANLATMIYORDU (bakım gri, hatırlatma mavi, talep de mavi). Her şey renkliyse
      renk bilgi olmaktan çıkar, göz acil olanı bulamaz.

   🪤 BURADA RENK ANLAMDIR: sayı SIFIRSA kutu sönük durur (bağıracak bir şey yok),
      iş varsa kendi rengiyle söyler. Kırmızı = müşteri bekliyor, sarı = dışarıdan
      bir şey bekleniyor, yeşil = bitti, lacivert = tezgâhta akıyor.
   ───────────────────────────────────────────────────────────────────────────── */
.sayaclar { display: grid; grid-template-columns: repeat(auto-fit, minmax(188px, 1fr)); gap: 12px; }

.sayac { position: relative; overflow: hidden; display: block;
         background: var(--kart); border: 1px solid var(--kenar);
         border-radius: 12px; padding: 15px 16px 13px;
         color: var(--yazi); text-decoration: none; }

/* Tıklanabilir sayaç: imleç değişir, üstüne gelince hafif kalkar. */
a.sayac { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
a.sayac:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgb(5 15 46 / 18%); }
a.sayac:focus-visible { outline: 2px solid var(--pirinc); outline-offset: 2px; }

.sayac b { display: block; font-size: 34px; font-weight: 700; line-height: 1;
           font-variant-numeric: tabular-nums; }
.sayac .ad { display: block; font-size: 13px; font-weight: 600; margin-top: 7px; }
.sayac .ipucu { display: block; font-size: 11.5px; margin-top: 3px; opacity: .78; }

/* «İncele →» — kutunun tıklanabildiğini SÖYLER. Rakip ekrandan alınmaya değer
   tek şey buydu: kutu bir yere götürüyorsa bunu yazmalı. */
.sayac .incele { display: inline-block; margin-top: 11px; font-size: 12px; font-weight: 700; }

/* Büyük soluk simge — köşede durur, yazıyı örtmez. */
.sayac-simge { position: absolute; right: -10px; bottom: -12px;
               width: 86px; height: 86px; opacity: .13; pointer-events: none; }

/* Dolu sayaçlar: zemin renkli, yazı beyaz. */
.sayac-mavi    { background: linear-gradient(135deg, var(--murekkep-2), var(--murekkep));
                 border-color: var(--murekkep); color: #fff; }
.sayac-sari    { background: linear-gradient(135deg, var(--pirinc-parlak), var(--pirinc));
                 border-color: var(--pirinc); color: #fff; }
.sayac-yesil   { background: linear-gradient(135deg, #2BA862, var(--onay));
                 border-color: var(--onay); color: #fff; }
.sayac-kirmizi { background: linear-gradient(135deg, #E64545, var(--tehlike));
                 border-color: var(--tehlike); color: #fff; }

/* Sıfır sayaç: sönük. 🪤 Renkli kalsaydı "0 onay bekliyor" kutusu da kırmızı yanar
   ve esnaf her sabah olmayan bir işi arardı. */
.sayac-sonuk { background: var(--kart-2); border-color: var(--kenar); color: var(--yazi-2); }
.sayac-sonuk b { color: var(--soluk); }

.kart { background: var(--kart); border: 1px solid var(--kenar); border-radius: 11px; overflow: hidden; }
.kart-basi { padding: 15px 16px 9px; }
.kart-basi h2 { margin: 0; font-size: 15.5px; font-weight: 700; }
.kart-basi p { margin: 3px 0 0; font-size: 12.5px; color: var(--yazi-2); }

.tablo-kutu { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead tr { background: var(--kart-2); text-align: left; }
th { padding: 8px 15px; font-size: 11.5px; font-weight: 600; color: var(--yazi-2); white-space: nowrap; }
td { padding: 10px 15px; border-top: 1px solid var(--cizgi); vertical-align: top; }
tbody tr:hover { background: var(--kart-2); }
td .alt { display: block; font-size: 11.5px; color: var(--yazi-2); }
.kod { font-family: var(--kodyazi); }
.sayi { font-variant-numeric: tabular-nums; }
.sayi.geciken { color: var(--tehlike); font-weight: 700; }

/* Renk TEK BAŞINA anlam taşımaz — her durumun kelimesi de yazılıdır */
.pil { display: inline-block; font-size: 11.5px; font-weight: 600;
       border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.pil-yesil   { background: var(--onay-z);    color: var(--onay-y); }
.pil-kirmizi { background: var(--tehlike-z); color: var(--tehlike-y); }
.pil-sari    { background: var(--uyari-z);   color: var(--uyari-y); }
.pil-mavi    { background: var(--mavi-z);    color: var(--mavi-y); }

.maket-notu { margin: 4px 0 0; font-size: 12.5px; color: var(--yazi-2); }

/* 🔌 Bağlantı koptu şeridi — id'yi Blazor dayatır, biz yalnız biçimlendiriyoruz.
   display:none BAŞLANGIÇ hâlidir; görünür yapan Blazor'un kendi betiğidir. */
#blazor-error-ui {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    padding: 11px calc(18px + env(safe-area-inset-right, 0px))
             calc(11px + env(safe-area-inset-bottom, 0px)) calc(18px + env(safe-area-inset-left, 0px));
    background: var(--uyari-z); color: var(--uyari-y);
    border-top: 1px solid var(--uyari); font-size: 13px;
    box-shadow: 0 -2px 10px rgb(0 0 0 / 18%);
}
#blazor-error-ui a { color: inherit; margin-left: 10px; }
#blazor-error-ui .reload { text-decoration: underline; font-weight: 600; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; margin: 0; }

/* ── sayfa başı ─────────────────────────────────────────────────────────── */
.sayfa-basi { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
              gap: 10px 16px; }
.sayfa-basi h1 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.sayfa-basi p { margin: 3px 0 0; font-size: 12.5px; color: var(--yazi-2); }

/* ── yapım notu ─────────────────────────────────────────────────────────── */
.yapim-notu { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
              background: var(--kart); border: 1px dashed var(--kenar); border-radius: 11px;
              padding: 13px 15px; font-size: 13px; color: var(--yazi-2); }
.yapim-rozeti { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .03em;
                text-transform: uppercase; background: var(--uyari-z); color: var(--uyari-y);
                border-radius: 999px; padding: 3px 10px; }

/* Satır başlığı olan tablolar (ayarlar gibi): sol sütun başlık görevi görür */
th[scope="row"] { text-align: left; width: 40%; min-width: 150px; border-top: 1px solid var(--cizgi);
                  padding: 10px 15px; font-size: 13px; color: var(--yazi-2); vertical-align: top; }
tbody tr:first-child th[scope="row"] { border-top: 0; }
tbody tr:first-child td { border-top: 0; }


/* ── süzgeç şeridi ──────────────────────────────────────────────────────── */
.suzgec { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px;
          background: var(--kart); border: 1px solid var(--kenar); border-radius: 11px;
          padding: 12px 15px; }
.suzgec-alan { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 200px; }
.suzgec-alan > span { font-size: 11.5px; font-weight: 600; color: var(--yazi-2); }
.suzgec-alan input, .suzgec-alan select {
  font-family: inherit; font-size: 13.5px; color: var(--yazi);
  background: var(--kart-2); border: 1px solid var(--kenar); border-radius: 8px;
  padding: 8px 10px; min-width: 0; width: 100%; }
.suzgec-alan input:focus-visible, .suzgec-alan select:focus-visible,
.suzgec-onay input:focus-visible { outline: 2px solid var(--pirinc); outline-offset: 1px; }
.suzgec-onay { display: flex; align-items: center; gap: 7px; font-size: 13px;
               flex: 0 0 auto; padding-bottom: 8px; }

/* ── liste yardımcıları ─────────────────────────────────────────────────── */
.baglanti { color: var(--mavi); text-decoration: none; }
.baglanti:hover { text-decoration: underline; }
.baglanti:focus-visible { outline: 2px solid var(--pirinc); outline-offset: 2px; }

/* Boş liste SESSİZ bırakılmaz: ne olduğu ve ne yapılacağı yazılır */
.bos-liste { margin: 0; padding: 18px 16px; font-size: 13px; color: var(--yazi-2); }

/* ── kart kartı (künye + stok yan yana) ─────────────────────────────────── */
.kart-ikili { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }

/* Muadil tablosunda aranan parçanın kendi satırı ayırt edilir.
   🪤 Zemin, üstündeki mavi rozetle AYNI renk olmamalı: rozet görünmez olur (bir kez oldu). */
.asil-satir { background: var(--kart-2); box-shadow: inset 3px 0 0 var(--mavi); }
.asil-satir td { font-weight: 600; }

/* Sayı ve kod hücreleri satır atlamaz: "500 V" iki satıra bölünürse tablo okunmaz olur */
td.sayi, td.kod { white-space: nowrap; }

.notlar { margin: 0; padding-left: 17px; font-size: 12.5px; color: var(--yazi-2); }
.notlar li + li { margin-top: 3px; }

/* Künye tablosunda özelliğin ne demek olduğu başlığın altında küçük yazar */
th[scope="row"] .alt { display: block; font-size: 11px; font-weight: 400; color: var(--soluk); }

/* ── dolap & göz ızgarası ───────────────────────────────────────────────── */
.goz-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
              gap: 9px; padding: 0 15px 15px; }
.goz { background: var(--kart-2); border: 1px solid var(--cizgi); border-radius: 9px;
       padding: 9px 10px; display: flex; flex-direction: column; gap: 4px; }
.goz-adi { font-size: 12px; font-weight: 700; color: var(--yazi-2); letter-spacing: .02em; }
.goz-parca { display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
             text-decoration: none; color: var(--yazi); font-size: 12.5px;
             border-top: 1px solid var(--cizgi); padding-top: 4px; }
.goz-parca:hover .goz-kod { text-decoration: underline; }
.goz-parca:focus-visible { outline: 2px solid var(--pirinc); outline-offset: 2px; }
.goz-kod { min-width: 0; overflow-wrap: anywhere; }
.goz-adet { flex: 0 0 auto; color: var(--yazi-2); font-size: 12px; }
/* Renk tek başına anlam taşımaz: gözün durumu kelimeyle de yazılır */
.goz-durum { font-size: 11px; font-weight: 600; margin-top: 2px; }
.goz-bos { border-color: var(--tehlike); background: var(--tehlike-z); }
.goz-bos .goz-durum { color: var(--tehlike-y); }
.goz-azaldi { border-color: var(--pirinc); background: var(--uyari-z); }
.goz-azaldi .goz-durum { color: var(--uyari-y); }

/* Kapanmış iş listede durur ama öne çıkmaz: bitmiş işi parlak göstermek yanıltır */
.kapanmis td { color: var(--yazi-2); }
.kapanmis strong { font-weight: 500; }

/* ── düğmeler ───────────────────────────────────────────────────────────── */
.dugme { display: inline-block; font-family: inherit; font-size: 13px; font-weight: 600;
         cursor: pointer; text-decoration: none; text-align: center;
         background: var(--kart); color: var(--yazi); border: 1px solid var(--kenar);
         border-radius: 9px; padding: 9px 15px; }
.dugme:hover:not(:disabled) { border-color: var(--pirinc); }
.dugme:focus-visible { outline: 2px solid var(--pirinc); outline-offset: 2px; }
.dugme-ana { background: var(--murekkep); color: #fff; border-color: var(--murekkep); }
.dugme-ana:hover:not(:disabled) { background: var(--murekkep-2); border-color: var(--pirinc); }
/* Kapalı düğme KAPALI görünür: çalışıyormuş gibi durmaz */
.dugme:disabled { opacity: .55; cursor: not-allowed; }

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

/* ── form ───────────────────────────────────────────────────────────────── */
.form-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
               gap: 12px 16px; padding: 0 16px 16px; }
.form-alan { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.form-genis { grid-column: 1 / -1; }
.form-alan > span { font-size: 12.5px; font-weight: 600; }
/* Zorunlu alan RENKLE değil KELİMEYLE işaretlenir: yıldız ne demek, herkes bilmez */
.form-alan > span em { font-style: normal; font-weight: 400; font-size: 11px;
                       color: var(--tehlike-y); background: var(--tehlike-z);
                       border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
/* Acilir liste de yazi kutusuyla AYNI gorunur: biri cerceveli biri tarayici
   varsayilani olunca form "yarim yapilmis" gorunur. */
.form-alan input, .form-alan textarea, .form-alan select {
  font-family: inherit; font-size: 13.5px; color: var(--yazi);
  background: var(--kart-2); border: 1px solid var(--kenar); border-radius: 8px;
  padding: 9px 11px; min-width: 0; width: 100%; resize: vertical; }
.form-alan select { resize: none; }
.form-alan input:focus-visible, .form-alan textarea:focus-visible,
.form-alan select:focus-visible {
  outline: 2px solid var(--pirinc); outline-offset: 1px; }
/* Salt okunur kutu (kurulan yer, kar): DOLDURULACAK bir kutu gibi gorunmemeli. */
.form-alan input[readonly] { background: var(--zemin); color: var(--yazi-2); }
.form-alan small { font-size: 11.5px; color: var(--yazi-2); }
.form-alan .validation-message { font-size: 12px; color: var(--tehlike-y); font-weight: 600; }
/* 🩸 Murat (20 Eki 2026, masaüstü ekranından): «kartı aç / vazgeç düğmeleri kutuya
   yapışık, görsel kötü». Kuralın üst boşluğu HİÇ YOKTU; düğmeler üstündeki kartın
   dibine yapışıyor, karta ait bir parça gibi duruyordu — oysa onlar formun TAMAMINI
   kaydeden düğmeler. Bu kural 19 ekranda kullanılıyor, yani kusur her formda vardı. */
.form-islemler { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }

.hata-kutusu { margin: 0; background: var(--tehlike-z); color: var(--tehlike-y);
               border: 1px solid var(--tehlike); border-radius: 11px;
               padding: 12px 15px; font-size: 13px; font-weight: 600; }

.acilan-fis { margin: 0; padding: 4px 16px 0; font-size: 30px; font-weight: 700;
              letter-spacing: .02em; }

/* ── giriş ekranı ───────────────────────────────────────────────────────── */
/* Giriş, TAM SAYFA koyu ekran DEĞİL: ortada duran bir pencere (Murat, 17 Ekim 2026).
   🪤 min-height:100% yetmez — masaüstü kabuğunda araya #app sarmalı girer ve yüzde,
   yüksekliği belli olmayan bir atadan hesaplanınca zemin pencerenin altını doldurmaz. */
.giris-sayfa { min-height: 100vh; display: flex; align-items: center; justify-content: center;
               background: var(--zemin);
               padding: calc(24px + env(safe-area-inset-top, 0px))
                        max(16px, env(safe-area-inset-right, 0px))
                        calc(24px + env(safe-area-inset-bottom, 0px))
                        max(16px, env(safe-area-inset-left, 0px)); }
/* Pencere gibi dursun: solda koyu marka panosu, sağda form; üstünde pirinç şerit.
   🪤 TAM SAYFA DEĞİL (Murat, 17 Eki 2026: "tam sayfa güzel olmadı, yarım popup gibi olsun").
   Dar ekranda pano gizlenir ve yalnız form kalır — 920px'lik kutu telefona sığmaz. */
.giris-pencere { display: flex; width: 100%; max-width: 920px; min-height: 560px; background: var(--kart);
                 border: 1px solid var(--kenar); border-top: 3px solid var(--pirinc);
                 border-radius: 12px; overflow: hidden;
                 box-shadow: 0 14px 38px rgb(5 15 46 / 22%); }

/* Sol pano: markanın kendi koyu zemini. Renkler jetondan GELMEZ çünkü bu pano temadan
   bağımsızdır — açık temada da koyu durur, marka her yerde aynı görünür. */
.giris-pano { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
              align-items: center; justify-content: center; gap: 14px; padding: 40px 32px;
              background: radial-gradient(120% 90% at 50% 0%, #15365c 0%, #0d2038 55%, #081426 100%);
              color: #fff; text-align: center; }
.giris-pano img { width: 132px; height: 132px;
                  filter: drop-shadow(0 14px 34px rgb(0 0 0 / 55%)); }
.giris-pano-ad { font-size: 38px; font-weight: 700; letter-spacing: .17em; margin-top: 6px; }
.giris-pano-imza { font-size: 14px; font-style: italic; color: #e3a912; margin-top: -4px; }
.giris-pano-slogan { font-size: 15px; color: #c7d4e6; margin: 18px 0 0; }
.giris-pano-slogan strong { color: #fff; font-weight: 700; }

/* Slogan altındaki ışık şeridi — Muhasebe'nin giriş görselindeki parıltının karşılığı.
   Görselden değil CSS'ten gelir: büyütünce bulanıklaşmaz, dosya da taşımaz. */
.giris-pano-isik { display: block; width: 190px; height: 2px; margin-top: 26px;
                   background: linear-gradient(90deg, transparent, #7fa6d9, transparent);
                   box-shadow: 0 0 22px 5px rgb(127 166 217 / 45%); }

/* Sağ taraf: Muhasebe'deki 440px'lik form sütunuyla aynı. */
.giris-kutu { width: 100%; max-width: 440px; flex: 0 0 440px;
              background: var(--kart); padding: 38px 38px 26px;
              display: flex; flex-direction: column; justify-content: center; }

.giris-hosgeldin { margin: 0; font-size: 27px; font-weight: 600; letter-spacing: -.01em; }

/* Deneme verisi çipi — yalnız defter örnek kayıtlarla doluysa çizilir. */
.giris-cip { display: inline-block; align-self: flex-start; margin-top: 10px;
             padding: 5px 11px; border: 1px solid var(--pirinc); border-radius: 999px;
             font-size: 11.5px; font-weight: 700; color: var(--pirinc-y, var(--yazi)); }

.giris-surum { margin: 10px 0 20px; font-size: 13px; color: var(--yazi-2); }

/* Sürüm satırı en altta, sönük: Muhasebe'de de oradadır. */
.giris-surum-alt { margin: 18px 0 0; text-align: center;
                   font-size: 11.5px; color: var(--yazi-2); }

/* Telefon: koyu pano yer kaplamasın, form tek başına kalsın. */
@media (max-width: 760px) {
    .giris-pano { display: none; }
    .giris-pencere { max-width: 420px; min-height: 0; }
    .giris-kutu { flex: 1 1 auto; max-width: none; padding: 26px 24px 20px; }
}

/* «Beni hatırla» satırı: onay kutusu solda, «şifremi unuttum» düğmesi sağda */
.giris-secenek { display: flex; align-items: center; justify-content: space-between;
                 gap: 10px; margin: 4px 0 2px; font-size: 13px; }
.giris-onay { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.giris-onay input { width: 17px; height: 17px; accent-color: var(--pirinc); cursor: pointer; }
.giris-ipucu { margin: 6px 0 14px; font-size: 11.5px; color: var(--yazi-2); }
.giris-bilgi { margin: 0 0 16px; font-size: 13px; color: var(--yazi-2); line-height: 1.55; }

/* Giriş alanları Muhasebe'dekiler gibi geniş ve mavi zeminli. */
.giris-kutu .form-alan { margin-bottom: 14px; }
.giris-kutu .form-alan > span { font-size: 12.5px; color: var(--yazi-2); font-weight: 500; }
.giris-kutu .form-alan input { padding: 11px 13px; font-size: 14px;
                               background: var(--zemin); border-radius: 9px; }
.giris-dugme { width: 100%; margin-top: 10px; padding: 12px 16px; font-size: 14.5px; }
.giris-alt { margin: 16px 0 0; font-size: 12.5px; color: var(--yazi-2); text-align: center;
             display: flex; align-items: center; justify-content: center; gap: 8px; }

/* Çerçeveli ince düğme: "Şifremi unuttum?" ve "Üye ol" — bağlantı değil, düğmedir. */
.dugme-ince { padding: 6px 12px; font-size: 12.5px; font-weight: 600; }

/* Bağlantı gibi görünen düğme: gerçekte gezinmiyor, ekranı değiştiriyor */
.baglanti-dugme { background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
                  color: var(--mavi); text-decoration: underline; }
.baglanti-dugme:focus-visible { outline: 2px solid var(--pirinc); outline-offset: 2px; }

.iyi-kutusu { margin: 0 0 12px; background: var(--onay-z); color: var(--onay-y);
              border: 1px solid var(--onay); border-radius: 11px;
              padding: 11px 14px; font-size: 12.5px; font-weight: 600; }
.giris-kutu .hata-kutusu { margin-bottom: 12px; font-size: 12.5px; }

/* Üst banttaki kullanıcı köşesi */
.kullanici-kose { display: flex; align-items: center; gap: 9px; flex: 0 0 auto;
                  font-size: 12.5px; color: var(--acik); }
.kullanici-kose strong { color: #fff; font-weight: 600; }
.cikis-dugme { background: none; border: 1px solid var(--kenar-koyu); border-radius: 8px;
               color: var(--acik); font: inherit; font-size: 12px; cursor: pointer;
               padding: 5px 10px; }
.cikis-dugme:hover { color: #fff; border-color: var(--pirinc); }
.cikis-dugme:focus-visible { outline: 2px solid var(--pirinc-parlak); outline-offset: 2px; }

/* Oturum kapısı tarayıcıya sorarken: kısa bir "açılıyor" yazısı.
   🪤 Burada "giriş ekranına atma" YAPILMAZ — jeton henüz sorulmadı. */
.aciliyor { margin: 0; padding: 28px 20px; font-size: 13px; color: var(--yazi-2); }

/* Eşitleme işareti: artık bir DÜĞME — tıklanınca gerçekten eşitler */
.esitleme { display: flex; align-items: center; gap: 7px; flex: 0 0 auto;
            background: none; border: 1px solid transparent; border-radius: 8px;
            color: var(--acik); font: inherit; font-size: 12.5px; cursor: pointer;
            padding: 5px 9px; }
.esitleme:hover:not(:disabled) { border-color: var(--kenar-koyu); color: #fff; }
.esitleme:disabled { cursor: default; color: var(--soluk); }
.esitleme:focus-visible { outline: 2px solid var(--pirinc-parlak); outline-offset: 2px; }
.esitleme .nokta { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
/* Renk TEK BAŞINA anlam taşımaz: yanında durumun kelimesi yazılıdır */
.nokta-iyi { background: #5FD08C; }
.nokta-sorun { background: var(--tehlike); }
.nokta-suruyor { background: var(--pirinc-parlak); }
.nokta-kapali { background: var(--soluk); }

/* Kart içindeki işlem düğmeleri: kartın kenarıyla hizalı dursun */
.kart-islemler { padding: 0 16px 16px; }

/* ── kısayol yardımı (F1) ───────────────────────────────────────────────── */
.yardim-perde { position: fixed; inset: 0; z-index: 900; display: flex;
                align-items: center; justify-content: center;
                background: rgb(5 15 46 / 45%);
                padding: max(16px, env(safe-area-inset-left, 0px)); }
.yardim-kutu { width: 100%; max-width: 340px; background: var(--kart);
               border: 1px solid var(--kenar); border-top: 3px solid var(--pirinc);
               border-radius: 12px; padding: 18px 20px 20px;
               box-shadow: 0 14px 38px rgb(5 15 46 / 30%); }
.yardim-kutu h2 { margin: 0 0 12px; font-size: 15.5px; }
.yardim-liste { list-style: none; margin: 0 0 16px; padding: 0; font-size: 13px; }
.yardim-liste li { display: flex; align-items: center; gap: 10px; padding: 5px 0;
                   border-top: 1px solid var(--cizgi); }
.yardim-liste li:first-child { border-top: 0; }
.yardim-liste kbd { flex: 0 0 48px; font-family: var(--kodyazi); font-size: 11.5px;
                    text-align: center; color: var(--yazi-2);
                    border: 1px solid var(--kenar); border-radius: 5px; padding: 2px 0; }

/* Rapor dönem seçici — sayfa başlığının yanında durur */
.rapor-donem { font-family: inherit; font-size: 13px; font-weight: 600;
               padding: 8px 11px; border-radius: 9px;
               border: 1px solid var(--kenar); background: var(--kart); color: var(--yazi); }
.rapor-donem:focus-visible { outline: 2px solid var(--pirinc); outline-offset: 2px; }

/* 🚨 Geri alınamaz yolun düğmesi. Kırmızıdır ve üstünde FİİL yazar ("Föyü sil"),
   "Tamam" değil: kullanıcı neye bastığını okumadan da görebilmeli. Vurgulu (dugme-ana)
   olan daima GÜVENLİ yoldur — "Vazgeç". */
.dugme-tehlike { background: var(--tehlike); color: #fff; border-color: var(--tehlike); }
.dugme-tehlike:hover:not(:disabled) { background: var(--tehlike-y); border-color: var(--tehlike-y); }

/* 🔑 Kurtarma kodu kutusu: kod OKUNAKLI olmalı — kâğıda yazılacak.
   Eşit genişlikli yazı tipi ve geniş harf aralığı, 0/O ve 1/I karışmasını önler. */
.kurtarma-kutu { border-top: 3px solid var(--pirinc); }
.kurtarma-kod { margin: 0 16px; padding: 16px; text-align: center;
                background: var(--zemin); border: 1px dashed var(--kenar); border-radius: 11px;
                font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
                font-size: 26px; font-weight: 700; letter-spacing: .14em;
                user-select: all; }

/* ✍️ İmza tahtası ve kabul fotoğrafı — ikisi de aynı çerçevede durur. */
.imza-kutu { margin: 0 16px 14px; padding: 10px; background: var(--zemin);
             border: 1px dashed var(--kenar); border-radius: 11px; }
.imza-tahta { display: block; width: 100%; height: 170px; cursor: crosshair;
              background: #fff; border-radius: 8px; }
.imza-resim { display: block; width: 100%; max-width: 420px; margin: 0 auto;
              background: #fff; border-radius: 8px; }
.kabul-resim { display: block; width: 100%; max-height: 520px; object-fit: contain;
               border-radius: 8px; }

/* 🔗 Müşteri takip sayfası: durum rozeti ve cümlesi */
.takip-durum { margin: 0 0 16px; }
.takip-cumle { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--yazi); }

/* 💾 Yedek uyarı şeridi — yalnız dikkat gerektiğinde çizilir (bkz. YedekUyarisi.razor).
   🪤 Renk tek başına anlam taşımaz: şeritte başlık kelimesi de vardır. */
.uyari-serit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
               margin: 0 0 16px; padding: 12px 16px; border-radius: 10px;
               border: 1px solid transparent; font-size: 13.5px; line-height: 1.5; }
.uyari-serit strong { font-size: 14px; }
.uyari-serit > span { flex: 1 1 320px; min-width: 0; }
.uyari-kirmizi { background: var(--tehlike-z); border-color: var(--tehlike);
                 color: var(--tehlike-y); }
.uyari-sari    { background: var(--uyari-z); border-color: #D9B24C;
                 color: var(--uyari-y); }

/* ═══ 🖨 ÇIKTI SAYFASI — kâğıda göre ═════════════════════════════════════════════
   🪤 Yazdırmada düğmeler SAKLANIR: müşteriye verilen kâğıdın üstünde «Yazdır»
      düğmesi basılı olmasın. */
.cikti-sayfa { max-width: 820px; margin: 0 auto; padding: 24px 16px 48px; }
.cikti-islemler { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }

.cikti-kagit { background: #fff; color: #111; border: 1px solid var(--cizgi);
               border-radius: 10px; padding: 28px 30px; }
.cikti-basi { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start;
              justify-content: space-between; border-bottom: 2px solid #111;
              padding-bottom: 12px; margin-bottom: 18px; }
.cikti-basi h1 { margin: 0; font-size: 20px; letter-spacing: -0.01em; }
.cikti-alt { margin: 4px 0 0; font-size: 12.5px; color: #555; }
.cikti-no { text-align: right; }
.cikti-no strong { display: block; font-size: 18px; }
.cikti-no span { font-size: 12.5px; color: #555; }

.cikti-bolum { margin: 0 0 18px; }
.cikti-bolum h2 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase;
                  letter-spacing: 0.06em; color: #444; }
.cikti-tablo { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cikti-tablo th, .cikti-tablo td { padding: 5px 0; vertical-align: top;
                                   border-bottom: 1px solid #E5E5E5; }
.cikti-tablo th[scope="row"] { width: 38%; text-align: left; font-weight: 600; color: #444; }
.cikti-liste th[scope="col"] { text-align: left; font-size: 12px; text-transform: uppercase;
                               letter-spacing: 0.05em; color: #444; }
.cikti-metin { margin: 0; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; }

.cikti-imza { display: flex; gap: 40px; margin: 34px 0 0; }
.cikti-imza div { flex: 1; border-top: 1px solid #111; padding-top: 6px; }
.cikti-imza span { font-size: 12px; color: #555; }
.cikti-marka { margin: 26px 0 0; font-size: 11px; color: #777; text-align: center; }

@media print {
  /* Düğmeler ve uyarılar kâğıda GİTMEZ. */
  .cikti-islemler { display: none !important; }

  .cikti-sayfa { max-width: none; margin: 0; padding: 0; }
  .cikti-kagit { border: 0; border-radius: 0; padding: 0; }

  /* 🪤 Kâğıt beyaz, yazı siyah: tema koyu olsaydı sayfa simsiyah basılır ve toner
     biterdi. Çıktı temadan BAĞIMSIZDIR. */
  html, body, .cikti-kagit { background: #fff !important; color: #000 !important; }

  @page { size: A4; margin: 16mm; }
}

/* 🏷 GÖZ ETİKETLERİ — kesilip çekmeceye yapıştırılır.
   🪤 Ölçü santimetreyle verilir, pikselle değil: kâğıda basılan şeyin ölçüsü ekran
      çözünürlüğüne göre değişmemeli. */
.cikti-etiket-basi { margin: 0 0 12px; font-size: 18px; }
/* 🪤 Etiket genişliği BARKODA GÖRE seçildi, göze göre değil: 5,5 cm iken en uzun
   deneme numarasının (LM1117-5.0) barkodu 58 mm tutuyor ve etiketten TAŞIYORDU.
   Taşan barkod kesilir ve HİÇ OKUNMAZ. Ölçüsü «Barkod39Tests» bu dosyadan okur. */
.etiket-tablasi { display: grid; grid-template-columns: repeat(auto-fill, minmax(7cm, 1fr));
                  gap: 4mm; }
.etiket { display: flex; flex-direction: column; gap: 1mm; padding: 4mm;
          border: 1px dashed #999; border-radius: 2mm; background: #fff; color: #111;
          break-inside: avoid; }
.etiket-yer { font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.etiket-kod { font-size: 15px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.etiket-cins { font-size: 11px; color: #555; }
.etiket-bolum { font-size: 11px; color: #555; }

@media print {
  /* 🪤 break-inside: bir etiket iki sayfaya BÖLÜNMEZ; bölünse yarısı çöp olur. */
  .cikti-etiket-basi { display: none; }
  .etiket { border-color: #666; }
}

/* 🏷 Barkod çizimi — ölçüler milimetreyle (bkz. Barkod.razor).

   🚨 RENK JETONU KULLANILMAZ ve bu TEK istisnadır: barkod, temadan BAĞIMSIZ olarak
      siyah çizgi + beyaz zemin olmak ZORUNDADIR. Jetona bağlansaydı koyu temada
      çizgiler açık renge döner, zemin koyulaşır ve okuyucu çizgi ile boşluğu ayırt
      edemezdi — barkod ekranda "duruyor" görünür ama HİÇ OKUNMAZ.

   🪤 Beyaz zemin de şart: yalnız çubukları siyah yapmak yetmez, aralardaki boşlukların
      da beyaz olması gerekir. */
.barkod { display: block; margin: 1mm 0 0; background: #fff; }
.barkod rect { fill: #000; }
.barkod-numara { display: block; font-size: 10px; letter-spacing: 0.12em;
                 font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
                 color: #333; }
.barkod-yok { margin: 1mm 0 0; font-size: 10.5px; color: var(--tehlike-y);
              line-height: 1.4; }

/* 🔎 Aramanın cevabı — yalnız bulunamayınca çizilir (bkz. AnaYerlesim.razor). */
.arama-sozu { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
              margin: 0; padding: 10px 20px; background: var(--uyari-z);
              color: var(--uyari-y); font-size: 13.5px; }

/* --- acilir pencere ------------------------------------------------------ */
/* Formu AYRI SAYFADA acmak listeyi kaybettiriyordu (Murat, 19 Ekim 2026).
   PERDEYE TIKLAMAK KAPATMAZ: yari doldurulmus formu bir yanlis tiklamayla
   cope atmak, programin yapabilecegi en sinsi seydir. Kapanis yalniz
   «Vazgec» ve «x» ile olur - ikisi de bilerek basilan dugmelerdir. */
/* 🩸 EKRANDA YAKALANDI (19 Ekim): pencere acikken tekerlek cevrilince ARKADAKI SAYFA
   kayiyordu. Kullanici formla ugrasirken listesinin yerini kaybediyordu ve pencerenin
   "ustte duran bir sey" oldugu duygusu kayboluyordu. Sayfa pencere acikken kilitlenir.
   🪤 overflow:hidden TEK BASINA YETMEZ - govdenin kaymasi html'den de kapatilir. */
html:has(.pencere-perde), body:has(.pencere-perde) { overflow: hidden; }
.pencere-perde { position: fixed; inset: 0; z-index: 950; display: flex;
                 align-items: center; justify-content: center;
                 background: rgb(5 15 46 / 45%);
                 padding: max(16px, env(safe-area-inset-top, 0px))
                          max(16px, env(safe-area-inset-right, 0px))
                          max(16px, env(safe-area-inset-bottom, 0px))
                          max(16px, env(safe-area-inset-left, 0px));
                 /* 🪤 Kaydirma PENCERENIN ICINDE olur; perdenin kendisi kaymaz. Kaysaydi
                    tekerlek bazen pencereyi, bazen sayfayi kaydirir ve hangisinin
                    kayacagi imlecin nerede durduguna gore degisirdi. */
                 overflow: hidden; overscroll-behavior: contain; }
/* 🩸 MURAT, 19 Ekim: «asagiya dogru cok iniyor, yana enine dogru 3 satir yaparsak bir
   kerede doldurabilir; boyle cok zor kullanim olmus.» Pencere dar (480px) ve kutular
   TEK SUTUN oldugu icin form ~1900px uzunluga cikiyor, esnaf dort kere kaydiriyordu.
   Pencere genisledi ve kutular YAN YANA UC sutun dizildi. */
.pencere-kutu { width: 100%; max-width: 980px; background: var(--kart);
                border: 1px solid var(--kenar); border-top: 3px solid var(--pirinc);
                border-radius: 12px; box-shadow: 0 18px 46px rgb(5 15 46 / 34%);
                display: flex; flex-direction: column; max-height: 100%; }
.pencere-basi { display: flex; align-items: center; gap: 10px;
                padding: 13px 14px 11px; border-bottom: 1px solid var(--cizgi); }
.pencere-basi h2 { margin: 0; flex: 1 1 auto; font-size: 15.5px; font-weight: 700; }
.pencere-kapat { flex: 0 0 auto; font-family: inherit; font-size: 20px; line-height: 1;
                 color: var(--yazi-2); background: transparent; border: 1px solid transparent;
                 border-radius: 8px; padding: 2px 9px 5px; cursor: pointer; }
.pencere-kapat:hover { color: var(--yazi); border-color: var(--kenar); }
.pencere-kapat:focus-visible { outline: 2px solid var(--pirinc); outline-offset: 2px; }
/* Form penceredeyken uzundur: BASLIK sabit kalir, ici kayar.
   🪤 min-height:0 SART: esnek kutunun cocugu varsayilan olarak kucultulemez
      (min-height:auto), yani overflow hiç devreye girmez ve pencere ekrandan tasar. */
.pencere-govde { padding: 0 14px 14px; overflow-y: auto; min-height: 0;
                 overscroll-behavior: contain; }
/* Pencerenin icinde kartin kendi cercevesi FAZLADIR: kutu icinde kutu gorunur. */
.pencere-govde .kart { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.pencere-govde .kart + .kart { border-top: 1px solid var(--cizgi); }
.pencere-govde .kart-basi { padding: 13px 0 7px; }
/* 🚨 UC SUTUN SAYIYLA YAZILIR, `auto-fit` ile DEGIL: auto-fit sutun sayisini kutu
   genisligine birakir ve bir alan eklendiginde dizilim sessizce degisir. Murat
   «uc satir yana dogru» dedi; sayi burada durur. `minmax(0,1fr)` sart - yoksa uzun
   bir deger sutunu sisirir ve uclu dizilim bozulur. */
.pencere-govde .form-izgara { grid-template-columns: repeat(3, minmax(0, 1fr));
                              padding: 0 0 13px; }
/* Dar ekranda ucu yan yana sigmaz: once ikiye, sonra teke duser. Zorlansaydi
   kutular okunamayacak kadar daralirdi. */
@media (max-width: 900px) {
  .pencere-govde .form-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .pencere-govde .form-izgara { grid-template-columns: 1fr; }
}
/* 🪤 Penceredeyken «tam genislik» alan (Aciklama) KENDI SATIRINI YER ve formu bir satir
   daha uzatir: olcüldü, «Parca bilgileri» 289px yerine 449px oluyordu. Sayfada genislik
   bol oldugu icin orada kalir; pencerede ucluye girer. */
.pencere-govde .form-genis { grid-column: auto; }

/* 🔬 Katlanir bolum: basligi HEP gorunur, tek tiklama acar. Gizlemek degil katlamak -
   bu yuzden ok isareti ve imlec, tiklanabildigini soyler. */
.kart-katlanir > summary { list-style: none; cursor: pointer; display: flex;
                           align-items: baseline; gap: 8px; flex-wrap: wrap;
                           padding: 13px 16px 11px; }
.kart-katlanir > summary::-webkit-details-marker { display: none; }
.kart-katlanir > summary::before { content: "›"; flex: 0 0 auto; width: 12px;
                                   font-size: 17px; line-height: 1; color: var(--yazi-2);
                                   transition: transform .12s; }
.kart-katlanir[open] > summary::before { transform: rotate(90deg); }
.kart-katlanir > summary h2 { margin: 0; font-size: 15.5px; font-weight: 700; }
.katlanir-ozet { font-size: 12.5px; color: var(--yazi-2); }
.kart-katlanir > summary:hover h2 { color: var(--pirinc); }
.kart-katlanir > summary:focus-visible { outline: 2px solid var(--pirinc);
                                         outline-offset: -2px; border-radius: 8px; }
.pencere-govde .kart-katlanir > summary { padding: 13px 0 11px; }
.pencere-govde .bos-liste { padding: 0 0 13px; }
.pencere-govde .hata-kutusu { margin: 0 0 12px; }
/* 🩸 EKRANDA YAKALANDI (19 Eki): «Kartı aç» düğmesi kaydırma alanının DİBİNDE kalıyor
   ve pencere uzayınca görünmüyordu — kullanıcı kaydetmek için her seferinde en alta
   kaydırmak zorundaydı. Düğme satırı artık pencerenin dibine YAPIŞIR: form kayarken
   bile yerinde durur. */
/* 🪤 Açılır pencerede düğmeler YAPIŞKAN bir ayaktır ve kendi boşluğunu kurar;
   sayfadaki 18px üst boşluk burada çift boşluk yapardı. */
.pencere-govde .form-islemler { position: sticky; bottom: 0; z-index: 1;
                                padding: 13px 0; margin-top: -13px;
                                background: var(--kart);
                                border-top: 1px solid var(--cizgi); }

/* --- sayfa ici sekmeler ---------------------------------------------------- */
/* Murat, 19 Ekim 2026: "ayarlar bolumumuzu sekmeler haline getir, karmakarisik;
   asagiya dogru inmek sorun olur, bolum bolum sekme yap."
   🪤 Ust menudeki .sekme ile KARISTIRILMAZ: o koyu bantli ANA menudur ve adrese
      gider. Bu, sayfanin icinde duran ve adres degistirmeyen sekmedir. */
.ic-sekme-kutu { display: flex; flex-direction: column; gap: 14px; }
.ic-sekmeler { display: flex; flex-wrap: wrap; gap: 4px;
               border-bottom: 1px solid var(--kenar); }
.ic-sekme { font-family: inherit; font-size: 13.5px; font-weight: 600;
            color: var(--yazi-2); background: transparent;
            border: 0; border-bottom: 2px solid transparent;
            padding: 9px 14px 8px; margin-bottom: -1px; cursor: pointer;
            border-radius: 8px 8px 0 0; }
.ic-sekme:hover { color: var(--yazi); background: var(--kart-2); }
/* Acik sekme RENKLE DEGIL, cizgiyle de isaretlenir: renk tek basina anlam tasimaz. */
.ic-sekme.acik { color: var(--yazi); border-bottom-color: var(--pirinc);
                 background: var(--kart); }
.ic-sekme:focus-visible { outline: 2px solid var(--pirinc); outline-offset: -2px; }
/* Kapali sekme GIZLENIR (hidden), yikilmaz; yazilmis kutular kaybolmasin diye. */
.ic-sayfa { display: flex; flex-direction: column; gap: 14px; }
.ic-sayfa[hidden] { display: none; }