/* [YENIDEN TASARIM 30-07-2026] Windows 11 (Fluent) tasarim diline uyum --
   kullanicinin gunluk kullandigi Windows arayuzune yabancilik cekmemesi
   icin: Segoe UI yazi tipi, Windows'un acik tema yuzey/arkaplan renkleri,
   Fluent'in standart/accent buton stilleri, koseleri 4-8px yuvarlatma ve
   Fluent'in Success/Caution/Informational/Critical anlamsal renk paleti
   (kategori rozetleri ve durum mesajlarinda). Sinif adlari DEGISTIRILMEDI --
   sadece gorsel degerler (renk/govde/golge/koseler) guncellendi, HTML'e
   dokunulmadi. */
:root {
  /* [EKLENDI 12-08-2026] Netsis-uyumlu pastel bordo/terrakota tema --
     NetOpenXAgent masaustu uygulamasindaki ayni palet (bkz. AnaForm.cs
     ColorScheme: Primary 0xA9707C / DarkPrimary 0x8E5A64 / LightPrimary
     0xE8C4B8 / Accent 0xD9A79C) buraya da tasindi, boylece web ve masaustu
     arayuzleri gorsel olarak tutarli. Windows Fluent mavisi (#0067c0)
     degistirildi -- kategori rozet renkleri (asagida) DOKUNULMADI, sadece
     genel vurgu/buton/odak rengi degisti. */
  --win-accent: #a9707c;
  --win-accent-hover: #8e5a64;
  --win-accent-pressed: #74424b;
  --win-bg: #f3f3f3;
  --win-surface: #ffffff;
  --win-surface-alt: #f9f9f9;
  --win-border: rgba(0, 0, 0, 0.08);
  --win-border-strong: rgba(0, 0, 0, 0.15);
  --win-text: #1b1b1b;
  --win-text-secondary: #5f5f5f;
  --win-radius-card: 8px;
  --win-radius-control: 4px;
  --win-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.07), 0 0.5px 0 rgba(0, 0, 0, 0.04);
  --win-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.12), 0 0.5px 0 rgba(0, 0, 0, 0.04);
  /* Fluent anlamsal renkler (acik tema) */
  --win-success-fg: #0f7b0f; --win-success-bg: #dff6dd;
  --win-caution-fg: #9d5d00; --win-caution-bg: #fff4ce;
  --win-critical-fg: #c42b1c; --win-critical-bg: #fde7e9;
  --win-info-fg: #005fb8;    --win-info-bg: #eef6fd;
  /* [EKLENDI 30-07-2026] Kategori temasi -- yakit=kirmizi (Fluent "Red"
     paleti, Critical'dan hafif farkli -- Sil butonuyla karismasin diye),
     yemek=yesil (success ile ayni), genel=mavi (info ile ayni). */
  --tema-yakit-fg: #d13438;  --tema-yakit-bg: #fdf3f3;
  --tema-yakit-accent: #d13438; --tema-yakit-accent-hover: #b62d31; --tema-yakit-accent-pressed: #9a2529;
  --tema-yemek-fg: #0f7b0f;  --tema-yemek-bg: #f2faf1;
  --tema-yemek-accent: #0f7b0f; --tema-yemek-accent-hover: #0c690c; --tema-yemek-accent-pressed: #0a560a;
  --tema-genel-fg: #005fb8;  --tema-genel-bg: #eef6fd;
  --tema-genel-accent: #005fb8; --tema-genel-accent-hover: #004f98; --tema-genel-accent-pressed: #003d75;
  /* [EKLENDI 05-08-2026] z_raporu icin tema hic tanimlanmamisti -- rozet/
     sayfa arkaplani renksiz (varsayilan) kaliyordu. Diger uc kategoriden
     (kirmizi/yesil/mavi) ayirt edilsin diye mor (Fluent "Grape") secildi --
     Z Raporu bir SATIS/gelir belgesi, digerleri gider oldugu icin de ayri
     bir renk ailesinde olmasi mantikli. */
  --tema-z_raporu-fg: #742774;  --tema-z_raporu-bg: #f8f0f8;
  --tema-z_raporu-accent: #8764b8; --tema-z_raporu-accent-hover: #744da9; --tema-z_raporu-accent-pressed: #62409c;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  margin: 24px; color: var(--win-text); background: var(--win-bg);
}
h1 { font-size: 20px; font-weight: 600; margin: 0; letter-spacing: -0.2px; }

/* Bekleyen Fisler sayfa basligi -- 29-07-2026 yeniden tasarim */
.sayfa-basligi { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.sayfa-basligi .sayac {
  display: inline-block; background: var(--win-accent); color: #fff; font-size: 12px;
  font-weight: 600; border-radius: 999px; padding: 2px 10px; margin-left: 6px;
}
.yenile-buton {
  margin-left: auto; text-decoration: none; color: var(--win-text); font-size: 13px;
  font-weight: 600; background: var(--win-surface); border: 1px solid var(--win-border-strong);
  border-radius: var(--win-radius-control); padding: 6px 12px; box-shadow: var(--win-shadow-card);
  transition: background 0.1s, border-color 0.1s;
}
.yenile-buton:hover { background: #f5f5f5; border-color: rgba(0, 0, 0, 0.2); }
.yenile-buton:active { background: #e9e9e9; }
.bos-durum { color: var(--win-text-secondary); font-size: 14px; }

.fis-listesi { list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.fis-karti {
  position: relative; border: 1px solid var(--win-border); border-radius: var(--win-radius-card);
  background: var(--win-surface); box-shadow: var(--win-shadow-card); overflow: hidden;
  transition: box-shadow 0.15s, transform 0.15s;
}
.fis-karti:hover { box-shadow: var(--win-shadow-card-hover); transform: translateY(-2px); }
.fis-karti-baglanti { display: block; text-decoration: none; color: var(--win-text); }
.fis-onizleme {
  display: block; height: 130px; background: var(--win-surface-alt); overflow: hidden;
  border-bottom: 1px solid var(--win-border);
}
/* [DUZELTILDI 30-07-2026] object-position belirtilmeyince tarayici goruntunun
   ORTASINI kirpiyordu -- uzun/dar bir fis fotografinda bu, satici basligi/
   tarih gibi tanidici ust kisim degil, fisin ortasindaki alakasiz bir satir
   oluyordu. "top" ile her zaman UST kisim gosterilir. */
.fis-onizleme img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.fis-kategori-etiket {
  display: block; font-size: 11px; font-weight: 600; padding: 4px 10px;
  letter-spacing: 0.1px;
}
/* [DUZELTILDI 30-07-2026] yakit rozeti Caution/amber yerine kirmiz-pastel
   tema rengine tasindi -- fis_detay sayfa temasiyla (asagida) tutarli olsun. */
.fis-kategori-etiket--yakit { background: var(--tema-yakit-bg); color: var(--tema-yakit-fg); }
.fis-kategori-etiket--yemek { background: var(--tema-yemek-bg); color: var(--tema-yemek-fg); }
.fis-kategori-etiket--genel { background: var(--tema-genel-bg); color: var(--tema-genel-fg); }
.fis-kategori-etiket--z_raporu { background: var(--tema-z_raporu-bg); color: var(--tema-z_raporu-fg); }
.fis-bilgi { display: block; padding: 8px 10px 2px; font-size: 12px; line-height: 1.5; }
.fis-bilgi strong { display: block; font-size: 13px; font-weight: 600; }
.fis-tarih { color: var(--win-text-secondary); }
/* [DUZELTILDI 30-07-2026] OCR ile okunan bilgiler (plaka/fis no, tarih,
   tutar) tek satirda " · " ile ayrilmis haldeyken karisik/okunmasi zor
   gorunuyordu -- her alan kendi satirinda, etiket + deger olarak alt alta
   listeleniyor. */
.fis-oku-liste { margin: 0; padding: 4px 10px 10px; }
.fis-oku-satir {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; padding: 3px 0; border-top: 1px solid var(--win-border); font-size: 12px;
}
.fis-oku-satir:first-child { border-top: none; }
.fis-oku-satir dt { margin: 0; color: var(--win-text-secondary); }
.fis-oku-satir dd { margin: 0; font-weight: 600; color: var(--win-text); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sil-form { position: absolute; top: 6px; right: 6px; margin: 0; }
.sil-buton {
  background: var(--win-critical-fg); color: #fff; border: none; border-radius: var(--win-radius-control);
  font-size: 11px; font-weight: 600; padding: 4px 8px; cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.1s;
}
.fis-karti:hover .sil-buton { opacity: 1; }
.sil-buton:hover { background: #a4262c; }
/* [EKLENDI 30-07-2026] Fis Onay sayfasi -- kategoriye gore pastel tema.
   Arkaplan hafifce tinlenir, sayfadaki accent'e bagli her sey (buton,
   odak halkasi) --win-accent'i o temanin rengine cevirerek otomatik
   uyum saglar -- ayri ayri her secici icin renk tekrar tanimlamaya
   gerek kalmaz. */
body.fis-tema--yakit { background: var(--tema-yakit-bg); --win-accent: var(--tema-yakit-accent); --win-accent-hover: var(--tema-yakit-accent-hover); --win-accent-pressed: var(--tema-yakit-accent-pressed); }
body.fis-tema--yemek { background: var(--tema-yemek-bg); --win-accent: var(--tema-yemek-accent); --win-accent-hover: var(--tema-yemek-accent-hover); --win-accent-pressed: var(--tema-yemek-accent-pressed); }
body.fis-tema--genel { background: var(--tema-genel-bg); --win-accent: var(--tema-genel-accent); --win-accent-hover: var(--tema-genel-accent-hover); --win-accent-pressed: var(--tema-genel-accent-pressed); }
body.fis-tema--z_raporu { background: var(--tema-z_raporu-bg); --win-accent: var(--tema-z_raporu-accent); --win-accent-hover: var(--tema-z_raporu-accent-hover); --win-accent-pressed: var(--tema-z_raporu-accent-pressed); }

.fis-tema-basligi { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.fis-tema-basligi .fis-kategori-etiket { display: inline-block; border-radius: 999px; padding: 4px 12px; }

.onay-duzeni { display: flex; gap: 24px; align-items: flex-start; }
.gorsel-alani img {
  max-width: 560px; max-height: 85vh; width: auto; height: auto;
  border: 1px solid var(--win-border); border-radius: var(--win-radius-card); box-shadow: var(--win-shadow-card);
}
.kucuk-not { font-size: 12px; margin-top: 4px; color: var(--win-text-secondary); }
.kucuk-not a { color: var(--win-accent); }
/* [EKLENDI 31-07-2026] Z raporu KDV orani grup satirlari -- fis_detay.html */
.z-raporu-grup-satiri { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.z-raporu-grup-satiri label { display: inline; margin: 0; font-size: 12px; font-weight: 400; color: var(--win-text-secondary); }
.oto-etiket { color: var(--win-caution-fg); font-weight: 400; font-size: 11px; }
.form-alani { flex: 1; max-width: 800px; }
label { display: block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--win-text); }

/* Fluent standart giris kontrolleri: beyaz zemin, ince kenarlik, 4px kose;
   odaklaninca accent renginde 2px "reveal" halkasi. */
input, select {
  padding: 7px 10px; font-size: 14px; margin-top: 4px; width: 100%;
  background: var(--win-surface); color: var(--win-text);
  border: 1px solid var(--win-border-strong); border-radius: var(--win-radius-control);
  font-family: inherit; transition: border-color 0.1s, box-shadow 0.1s;
}
input:hover, select:hover { border-color: rgba(0, 0, 0, 0.35); }
input:focus, select:focus {
  outline: none; border-color: var(--win-accent);
  box-shadow: 0 0 0 1px var(--win-accent);
}

/* Buton temel stilleri -- global button etiketlerini bozmadan standarda baglar */
button {
  font-family: inherit;
  font-size: 13px;
}
.btn-primary, .ekle-buton, .tam-form-buton:not(.tam-form-buton--ikincil), .fis-kaydet-btn {
  margin-top: 14px; padding: 8px 16px; font-size: 13px; font-weight: 700;
  cursor: pointer; color: var(--win-accent-fg, #fff); background: var(--win-accent); border: 1px solid transparent;
  border-radius: var(--win-radius-control, 7px); font-family: inherit;
  transition: background 0.1s, transform 0.06s;
}
.btn-primary:hover, .ekle-buton:hover, .tam-form-buton:not(.tam-form-buton--ikincil):hover, .fis-kaydet-btn:hover { background: var(--win-accent-hover); }
.btn-primary:active, .ekle-buton:active, .tam-form-buton:not(.tam-form-buton--ikincil):active, .fis-kaydet-btn:active { background: var(--win-accent-pressed); }

.fis-tablosu { border-collapse: collapse; margin-top: 16px; width: 100%; }
.fis-tablosu th, .fis-tablosu td { border: 1px solid var(--win-border); padding: 6px; font-size: 13px; }
.fis-tablosu th { background: var(--win-surface-alt); font-weight: 600; text-align: left; }
.fis-tablosu input, .fis-tablosu select { width: 100%; box-sizing: border-box; margin-top: 0; }
.dengeli { color: var(--win-success-fg); font-weight: 600; }
.dengesiz { color: var(--win-critical-fg); font-weight: 600; }
.uyari { color: var(--win-caution-fg); background: var(--win-caution-bg); padding: 10px 12px; border-radius: var(--win-radius-control); }

/* Fis ticari bilgileri bolumu (arsiv alanlari) -- 25-07-2026 */
.ticari-bolum {
  margin-top: 16px; border: 1px solid var(--win-border); border-radius: var(--win-radius-card);
  padding: 10px 12px; background: var(--win-surface-alt);
}
.ticari-bolum > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--win-text); }
.ticari-bolum fieldset { border: 1px solid var(--win-border); border-radius: var(--win-radius-control); margin: 10px 0; padding: 6px 10px 12px; }
.ticari-bolum legend { font-size: 12px; color: var(--win-text-secondary); padding: 0 4px; }
.ticari-bolum label { margin-top: 8px; }
.ticari-bolum input { width: 100%; box-sizing: border-box; }

/* Yeni Bant Tasar�m� (Pastel Renkler) */
.kategori-bant--yakit { background: #ffe6e6; padding: 10px 15px; border-radius: 6px; border-left: 5px solid #ff9999; }
.kategori-bant--yemek { background: #fff4cc; padding: 10px 15px; border-radius: 6px; border-left: 5px solid #ffcc00; }
.kategori-bant--z_raporu { background: #e6f7ff; padding: 10px 15px; border-radius: 6px; border-left: 5px solid #66ccff; }
.kategori-bant--genel { background: #f2f2f2; padding: 10px 15px; border-radius: 6px; border-left: 5px solid #cccccc; }
.kategori-bant--banka { background: #e6ffe6; padding: 10px 15px; border-radius: 6px; border-left: 5px solid #66ff66; }
.kategori-bant--bilinmeyen { background: #f9e6ff; padding: 10px 15px; border-radius: 6px; border-left: 5px solid #cc66ff; }
.kategori-bant--tanimsiz { background: #f9e6ff; padding: 10px 15px; border-radius: 6px; border-left: 5px solid #cc66ff; }

/* �st Butonlar�n D�zeni */
.ust-butonlar {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* [DUZELTILDI 12-08-2026] Bu satirlardaki butonlarin bazilari <a>, bazilari
   <button> (ör. "Taramaları Oku (OCR)"). style.css'te asagida genel bir
   "button { margin-top: 14px; font-size: 14px; ... }" kurali var (form
   ici "Hesapla" gibi butonlar icin dusunulmus) -- <a> etiketleri bu kurali
   hic almadigi icin, SADECE <button> olan OCR butonu 14px asagi kayiyor ve
   font-family/font-weight bakimindan diger 4 butondan hafifce farkli
   goruyordu -- kullanicinin bildirdigi "boyutlar/renkler dengesiz" hissinin
   sebebi buydu. margin/font-family/font-weight burada acikca sifirlanarak
   <a> ve <button> olan nav butonlari birebir ayni boyutta hizalaniyor. */
.btn-top-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  margin: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid #ccc;
  background-color: #f8f9fa;
  color: #333;
  cursor: pointer;
  height: 36px; /* Uniform height */
  box-sizing: border-box;
}
/* [EKLENDI 20-08-2026] "Ana Menu" gibi butonlardaki emoji (🏠) uzak
   masaustu/RDP baglantilarinda tutarsiz goruniyordu (bir sayfada renkli
   emoji, digerinde bozuk kutu/farkli glif) -- ayni sebep daha once giris
   ekranindaki goz ikonunda da vardi (emoji yerine SVG cozumu). Bu yuzden
   nav butonlarindaki ikonlar da SVG'ye (_ikonlar.html) tasindi; bu kural
   o SVG'lerin boyutunu sabitliyor. */
.btn-top-nav svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn-top-nav:hover {
  background-color: #e2e6ea;
  text-decoration: none;
}

.btn-top-nav.kaydet-btn-stil {
  background-color: var(--win-accent);
  color: white;
  border-color: var(--win-accent);
}

.btn-top-nav.kaydet-btn-stil:hover {
  background-color: var(--win-accent-hover);
}

/* [EKLENDI 12-08-2026] Ayarlar / Sube-POS Ayarlari / Plakalar sayfalari
   arasinda "yan yana acilan sekmeler" -- kullanicinin istegi uzerine bu uc
   sayfa artik ana sayfanin ust-nav'inda ayri buton olarak durmuyor, hepsi
   /ayarlar catisina toplanip aralarinda gecis bu sekme cubuguyla yapiliyor.
   Gercek bir tek-sayfa (SPA) sekmesi degil -- her tikta yeni sayfa
   yukleniyor -- ama gorunum/hizalama olarak klasik "tab" gibi davraniyor,
   ve aktif sekme alt kenarindan vurgu rengiyle (accent) belli oluyor. */
.ayarlar-sekmeler {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--win-border-strong);
  margin: 4px 0 20px;
}

.ayarlar-sekme {
  display: inline-block;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--win-text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.1s, border-color 0.1s;
}

.ayarlar-sekme:hover {
  color: var(--win-text);
}

.ayarlar-sekme--aktif,
.ayarlar-sekme--aktif:hover {
  color: var(--win-accent);
  border-bottom-color: var(--win-accent);
}


/* Font K���ltme G�ncellemeleri */
body, input, select, textarea { font-size: 13px; }
h1 { font-size: 18px; }
.kategori-basligi { font-size: 16px; }
.sayac { font-size: 11px; padding: 2px 6px; }
.btn-top-nav { font-size: 12px; height: 32px; padding: 6px 12px; }
.fis-kategori-etiket { font-size: 10px; padding: 3px 8px; }
.fis-bilgi { font-size: 11px; }
.fis-bilgi strong { font-size: 12px; }
.fis-oku-satir { font-size: 11px; }
.sil-buton { font-size: 10px; }
.bos-durum, .bos-kategori { font-size: 12px; }

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  margin-left: 8px;
  vertical-align: middle;
}
.kaydediliyor {
  opacity: 0.8;
  pointer-events: none;
  cursor: wait !important;
}