:root {
  /* "color-scheme" BİLEREK burada — bu olmadan, tarayıcı (özellikle
     Windows'un "web içeriğine Windows temasını uygula" / Chrome-Edge'in
     "force dark mode" özelliği açıkken) input/select gibi NATIVE form
     kontrollerini bizim data-tema anahtarımızdan BAĞIMSIZ olarak İŞLETİM
     SİSTEMİ tercihine göre boyayabiliyor — sonuç: uygulama "açık tema"
     gösterirken (arka plan/metin bizim CSS'imizle doğru), input/select'in
     kendisi OS koyu modundaysa yine de koyu-native render edilip ÜZERİNE
     yazdığımız açık renkli metin (var(--renk-metin), koyu lacivert)
     GÖRÜNMEZ oluyordu (koyu native input üzerinde koyu metin ~ "beyaz
     yazı" izlenimi veren gerçek neden buydu — bkz. Hızlı Günlük Giriş
     grid'i, kullanıcı raporu). Bu satır tarayıcıya "bu sayfa AÇIK
     şemada, native kontrolleri buna göre çiz" diye AÇIKÇA söylüyor;
     [data-tema="koyu"] bloğu aşağıda bunu "dark" olarak eziyor. */
  color-scheme: light;
  /* ===== Koyu Lacivert + Beyaz Kurumsal Tema (25 Ağustos 2026) — kullanıcı
     isteği: "modern koyu lacivert + beyaz tema, kurumsal/premium, tamamen
     siyah OLMASIN, ferah." Önceki monokrom (siyah-beyaz) paletin YERİNE
     geçti. Sidebar/topbar (--renk-bar ailesi) HER İKİ temada da (açık/koyu)
     koyu lacivert kalıyor — buradaki (açık tema) blok içerik alanı için
     ferah, beyaz ağırlıklı, lacivert VURGULU bir görünüm tanımlıyor; asıl
     "tamamen koyu lacivert arka plan" deneyimi aşağıdaki [data-tema="koyu"]
     bloğunda. Yeşil/kırmızı (başarı/hata/tehlike) yine BİLEREK dokunulmadı —
     anlam taşıyan renkler, estetik paletten bağımsız. */
  --renk-ana: #1e3a68;
  --renk-ana-koyu: #14284a;
  --renk-ana-acik: #5678b0;
  --renk-ana-yumusak: #eaf0fb;
  --renk-yesil: #16a34a;
  --renk-kirmizi: #dc2626;
  --renk-zemin: #f6f8fc;
  --renk-panel: #eef1f7;
  --renk-kart: #ffffff;
  --renk-metin: #16213e;
  --renk-metin-soluk: #5b6780;
  --renk-cizgi: #dde3ee;
  --renk-cizgi-soft: #eef1f7;
  --renk-kirmizi-soft: #fef2f2;
  --renk-kirmizi-cizgi: #fecaca;
  --renk-bar: #101a33;
  --renk-bar-koyu: #0a1226;
  --renk-bar-metin: #f5f7fb;
  --radius: 12px;
  --golge: 0 1px 2px rgba(0,0,0,.06), 0 8px 22px rgba(0,0,0,.06);
  --golge-hover: 0 10px 26px rgba(0,0,0,.16);
  --golge-derin: 0 30px 70px rgba(0,0,0,.35);
  --gecis: .1s ease;

  /* ===== Hareket sistemi (motion) — kullanıcı isteği: "animasyonlar daha
     keskin, daha hızlı olsun." Süreler belirgin şekilde kısaltıldı (ör.
     --sure-normal .28s→.16s); eğrilerde DEĞİŞİKLİK YAPILMADI çünkü
     --ease-out zaten "keskin/expo" karakterli bir eğri — asıl "keskinlik"
     hissi süre kısalmasından geliyor. "İşlevsel hareket" felsefesi (durum
     iletir, süslemek için değil) AYNEN korundu. ===== */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --sure-hizli: .09s;
  --sure-normal: .16s;
  --sure-yavas: .22s;

  /* Tema geçişi (açık<->koyu) SIRASINDA renklerin ANİ değil, yumuşak
     değişmesi için — bkz. [data-tema] geçiş kuralı en altta ve
     temaDegistirBtn (app.js). Diğer geçişlerle AYNI hızlandırma. */
  --tema-gecis: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

/* ===== KOYU TEMA — kullanıcının tarif ettiği "koyu lacivert + beyaz"
   görünümün TAM/asıl hali: çok koyu lacivert ana arka plan, biraz daha
   açık lacivert panel/kart yüzeyleri, beyaza yakın ana metin, açık gri
   ikincil metin, düşük kontrastlı lacivert/gri border. Vurgu rengi (--renk-ana)
   koyu zemin üzerinde okunaklı olsun diye AÇIK bir lacivert-mavi (hover'da
   daha da açılıyor — "hover: daha açık lacivert" isteğiyle uyumlu).
   Uygulamanın geri kalanı zaten HEP bu değişkenler üzerinden renkleniyor
   olduğundan otomatik olarak koyu lacivert temaya geçiyor — badge/rozet gibi
   küçük "chip" renkleri (durum-etiket, ikon-*, stok-rozet vb.) BİLEREK
   değişmiyor: pastel zeminleri + koyu metinleri koyu kartların üzerinde de
   okunaklı kalıyor (GitHub/Linear/Notion koyu temalarındaki AYNI, yerleşik
   desen). ===== */
:root[data-tema="koyu"] {
  color-scheme: dark;
  --renk-ana: #6f93e0;
  --renk-ana-koyu: #4c6fc4;
  --renk-ana-acik: #9db4ea;
  --renk-ana-yumusak: rgba(111,147,224,.16);
  --renk-yesil: #4ade80;
  --renk-kirmizi: #f87171;
  --renk-zemin: #0a1128;
  --renk-panel: #101a35;
  --renk-kart: #141f42;
  --renk-metin: #f5f7fb;
  --renk-metin-soluk: #a7b1c9;
  --renk-cizgi: #253258;
  --renk-cizgi-soft: #1a2440;
  --renk-kirmizi-soft: rgba(248,113,113,.14);
  --renk-kirmizi-cizgi: rgba(248,113,113,.35);
  --renk-bar: #060b1a;
  --renk-bar-koyu: #04070f;
  --renk-bar-metin: #f5f7fb;
  --golge: 0 1px 2px rgba(0,0,0,.35), 0 8px 22px rgba(0,0,0,.3);
  --golge-hover: 0 10px 26px rgba(0,0,0,.45);
  --golge-derin: 0 30px 70px rgba(0,0,0,.6);
}

/* ===== EK RENK TEMALARI (25 Ağustos 2026) — kullanıcı isteği: "daha çok
   tema olsun, istediğimizi seçelim." Yukarıdaki :root / :root[data-tema=koyu]
   "Lacivert" temasının (varsayılan, `data-renk` özniteliği YOKKEN aktif)
   yanına 4 tema daha eklendi: Monokrom (önceki siyah-beyaz tema), Zümrüt,
   Bordo, Mor — her biri kendi açık/koyu çiftiyle. Sadece GERÇEKTEN değişen
   değişkenler (--renk-ana ailesi, içerik zemin/panel/kart/metin/border,
   --renk-bar ailesi) burada tanımlanıyor; --renk-yesil/--renk-kirmizi
   (başarı/hata — anlam taşır, temadan bağımsız) ve gölge/hareket değişkenleri
   KASITLI OLARAK tekrar edilmiyor, htmledeki en yakın eşleşen kural olan
   yukarıdaki temel :root / :root[data-tema=koyu] bloklarından miras kalıyor
   (CSS custom property çözümlemesi kural-bazlı değil ÖZELLİK-bazlı olduğu
   için bu güvenli). Seçim `document.documentElement`'e `data-renk="..."`
   ekleyip çıkaran `renkTemasiUygula()` (app.js) ile yapılıyor; `data-renk`
   HİÇ yoksa veya "lacivert" ise varsayılan temaya (yukarıdaki blok) dönülür. */

/* --- Monokrom (siyah-beyaz) — bir önceki oturumda kullanılan tema, artık
   seçeneklerden biri olarak korunuyor. --- */
:root[data-renk="monokrom"] {
  --renk-ana: #18181b;
  --renk-ana-koyu: #000000;
  --renk-ana-acik: #a1a1aa;
  --renk-ana-yumusak: #f4f4f5;
  --renk-zemin: #fafafa;
  --renk-panel: #f4f4f5;
  --renk-kart: #ffffff;
  --renk-metin: #18181b;
  --renk-metin-soluk: #71717a;
  --renk-cizgi: #e4e4e7;
  --renk-cizgi-soft: #f4f4f5;
  --renk-bar: #18181b;
  --renk-bar-koyu: #000000;
  --renk-bar-metin: #fafafa;
}
:root[data-renk="monokrom"][data-tema="koyu"] {
  --renk-ana: #fafafa;
  --renk-ana-koyu: #d4d4d8;
  --renk-ana-acik: #71717a;
  --renk-ana-yumusak: rgba(255,255,255,.08);
  --renk-zemin: #09090b;
  --renk-panel: #18181b;
  --renk-kart: #1f1f23;
  --renk-metin: #fafafa;
  --renk-metin-soluk: #a1a1aa;
  --renk-cizgi: #3f3f46;
  --renk-cizgi-soft: #27272a;
  --renk-bar: #000000;
  --renk-bar-koyu: #000000;
  --renk-bar-metin: #fafafa;
}

/* --- Zümrüt (koyu teal/yeşil-mavi — başarı yeşilinden (--renk-yesil)
   bilerek farklı bir ton, karışmasın diye camgöbeğine yakın tutuldu). --- */
:root[data-renk="yesil"] {
  --renk-ana: #0f6e63;
  --renk-ana-koyu: #0b5048;
  --renk-ana-acik: #4fa89c;
  --renk-ana-yumusak: #e6f5f2;
  --renk-zemin: #f5faf9;
  --renk-panel: #eaf3f1;
  --renk-kart: #ffffff;
  --renk-metin: #0f2a26;
  --renk-metin-soluk: #5c7a75;
  --renk-cizgi: #d9e9e5;
  --renk-cizgi-soft: #eaf3f1;
  --renk-bar: #0d3430;
  --renk-bar-koyu: #082220;
  --renk-bar-metin: #f2fbf9;
}
:root[data-renk="yesil"][data-tema="koyu"] {
  --renk-ana: #4fd6c4;
  --renk-ana-koyu: #2fb3a1;
  --renk-ana-acik: #8fe6da;
  --renk-ana-yumusak: rgba(79,214,196,.16);
  --renk-zemin: #07211d;
  --renk-panel: #0c2e29;
  --renk-kart: #103a33;
  --renk-metin: #f2fbf9;
  --renk-metin-soluk: #a6c9c2;
  --renk-cizgi: #1d4a42;
  --renk-cizgi-soft: #153a34;
  --renk-bar: #051815;
  --renk-bar-koyu: #03100e;
  --renk-bar-metin: #f2fbf9;
}

/* --- Bordo (koyu şarap kırmızısı — hata rengi --renk-kirmizi'den (parlak
   kırmızı) bilerek farklı, mora çalan koyu bir ton). --- */
:root[data-renk="bordo"] {
  --renk-ana: #7a1f3d;
  --renk-ana-koyu: #5c1730;
  --renk-ana-acik: #b06a83;
  --renk-ana-yumusak: #f8ecf0;
  --renk-zemin: #fbf6f7;
  --renk-panel: #f5eaed;
  --renk-kart: #ffffff;
  --renk-metin: #301019;
  --renk-metin-soluk: #7a5a63;
  --renk-cizgi: #ecdbe0;
  --renk-cizgi-soft: #f5eaed;
  --renk-bar: #3d0f1f;
  --renk-bar-koyu: #280913;
  --renk-bar-metin: #fbf1f4;
}
:root[data-renk="bordo"][data-tema="koyu"] {
  --renk-ana: #e0879e;
  --renk-ana-koyu: #c2637d;
  --renk-ana-acik: #f0b9c8;
  --renk-ana-yumusak: rgba(224,135,166,.16);
  --renk-zemin: #210a11;
  --renk-panel: #2e0f18;
  --renk-kart: #3a141f;
  --renk-metin: #fbf1f4;
  --renk-metin-soluk: #c9a3ac;
  --renk-cizgi: #4a1c28;
  --renk-cizgi-soft: #3a141f;
  --renk-bar: #180509;
  --renk-bar-koyu: #0f0306;
  --renk-bar-metin: #fbf1f4;
}

/* --- Mor (indigo/mor — kurumsal, canlı olmayan bir mor tonu). --- */
:root[data-renk="mor"] {
  --renk-ana: #5b21b6;
  --renk-ana-koyu: #431a8a;
  --renk-ana-acik: #9c7fd6;
  --renk-ana-yumusak: #f1ecfb;
  --renk-zemin: #f8f6fd;
  --renk-panel: #f1ecfb;
  --renk-kart: #ffffff;
  --renk-metin: #241636;
  --renk-metin-soluk: #6f6485;
  --renk-cizgi: #e4dcf5;
  --renk-cizgi-soft: #f1ecfb;
  --renk-bar: #2c1454;
  --renk-bar-koyu: #1c0c38;
  --renk-bar-metin: #f6f2fd;
}
:root[data-renk="mor"][data-tema="koyu"] {
  --renk-ana: #b090f0;
  --renk-ana-koyu: #9670df;
  --renk-ana-acik: #d3bdf7;
  --renk-ana-yumusak: rgba(176,144,240,.16);
  --renk-zemin: #150a26;
  --renk-panel: #1e1035;
  --renk-kart: #271543;
  --renk-metin: #f6f2fd;
  --renk-metin-soluk: #bcaed6;
  --renk-cizgi: #3a2359;
  --renk-cizgi-soft: #2b1846;
  --renk-bar: #0e0620;
  --renk-bar-koyu: #080314;
  --renk-bar-metin: #f6f2fd;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--renk-zemin);
  color: var(--renk-metin);
  -webkit-font-smoothing: antialiased;
  transition: var(--tema-gecis);
}

.gizli { display: none !important; }

/* Form elemanları eskiden tarayıcının VARSAYILAN (her zaman beyaz) zeminini
   kullanıyordu — açık temada zaten beyaz olduğu için fark etmiyordu, ama
   koyu temada bu, koyu bir sayfanın ortasında parlayan beyaz kutulara yol
   açardı. Artık hepsi tema değişkenlerinden besleniyor. Belirli bir
   bileşen kuralı (ör. .modal-kart input) zemin/renk BELİRTMEDİĞİ sürece bu
   genel kural geçerli olur; belirtilmiş yerlerde (ör. eski "background:
   white" idi, artık var(--renk-kart)) o kural üstün gelir — ikisi de AYNI
   sonucu verir, sadece burası varsayılanı düzeltir. */
input, select, textarea {
  background: var(--renk-kart);
  color: var(--renk-metin);
}

/* ===== Genel geçiş/animasyon davranışı — tema ile uyumlu, yumuşak etkileşimler ===== */
button, select, input, a, .sekme-btn, .mini-buton, .urun-kart, .ana-menu-kutu,
.odeme-tum-buton, .gk-oneri-chip, .durum-etiket, .menu-baslik {
  transition: background-color var(--gecis), border-color var(--gecis), color var(--gecis),
    box-shadow var(--gecis), transform .12s var(--ease-out), opacity var(--gecis);
}

/* İnce, tutarlı kaydırma çubuğu — artık sadece sidebar'da değil, tüm
   uygulamada (Windows'un varsayılan kalın gri çubuğu yerine). */
* { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.35) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(0,0,0,.28); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.45); }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--renk-ana) !important;
  box-shadow: 0 0 0 3px var(--renk-ana-yumusak);
}
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--renk-ana-yumusak);
}

@keyframes sekmeFadeIn {
  from { opacity: 0; transform: translateY(10px) scale(.994); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.sekme:not(.gizli) { animation: sekmeFadeIn var(--sure-normal) var(--ease-out); }

@keyframes modalBgFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPopIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-arkaplan:not(.gizli) {
  animation: modalBgFadeIn .1s ease;
  /* Hafif "cam" efekti — arkadaki içerik bulanıklaşıp modal öne çıkar. */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.modal-arkaplan:not(.gizli) .modal-kart { animation: modalPopIn .15s var(--ease-out); }

/* ===== Kademeli giriş animasyonu (stagger) — kartların arka arkaya, küçük
   bir gecikmeyle belirmesi. Sadece "ilk görünüşte" oynar (CSS animasyonu
   elemanın DOM'a EKLENDİĞİ anda tetiklenir) — yeniden render/kaydırmada
   tekrar oynamaz, göz yormaz. Kullanan yerler: Ana Menü kutucukları,
   Şirket Özeti KPI kartları (bkz. aşağıdaki ilgili bölümler). ===== */
@keyframes kutuGirisAnim {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== İskelet (skeleton) yükleme durumu — "yükleniyor..." yazısı yerine,
   verinin nihai şeklini taklit eden, hafif kayan bir parıltıyla (shimmer)
   dolu placeholder bloklar. Fonksiyonel bir sinyal: kullanıcı verinin NE
   ZAMAN geldiğini şeklin netleşmesinden anlar. ===== */
@keyframes iskeletParilti {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.iskelet {
  background: linear-gradient(90deg, var(--renk-panel) 25%, var(--renk-cizgi-soft) 50%, var(--renk-panel) 75%);
  background-size: 200% 100%;
  animation: iskeletParilti 1.4s linear infinite;
  border-radius: 6px;
}
.iskelet-satir { height: 13px; }
.iskelet-ikon { width: 36px; height: 36px; border-radius: 10px; flex: none; }

/* ===== Birincil (gradyan dolgulu) butonlarda "parıltı geçişi" — üzerine
   gelince soldan sağa hafif bir ışık huzmesi kayar. Sadece ANA çağrı-
   eylem butonlarında (ikincil/mini butonlarda YOK) — görsel hiyerarşiyi
   bozmadan, "buraya tıkla" hissini güçlendirir. ===== */
.buton-birincil, .buyuk-buton, .satir-form button:not(.ikincil-buton):not(.mini-buton),
.modal-butonlar button[type=submit], .rapor-al-btn {
  position: relative; overflow: hidden;
}
.buton-birincil::after, .buyuk-buton::after, .satir-form button:not(.ikincil-buton):not(.mini-buton)::after,
.modal-butonlar button[type=submit]::after, .rapor-al-btn::after {
  content: ""; position: absolute; top: 0; left: -75%; width: 45%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-20deg); transition: left 1.3s var(--ease-out); pointer-events: none;
}
.buton-birincil:hover::after, .buyuk-buton:hover::after, .satir-form button:not(.ikincil-buton):not(.mini-buton):hover::after,
.modal-butonlar button[type=submit]:hover::after, .rapor-al-btn:hover::after { left: 125%; }

/* ===== Giriş ekranı ===== */
.login-wrap {
  min-height: 100vh;
  display: flex;
  /* 7 Eylül 2026: sütun düzenine geçti — giriş kartının ALTINA canlı
     "bağlı şubeler" şeridi (#loginAktifSerit) eklendi; satır düzeninde
     şerit kartın YANINA düşerdi. Kart tek çocukken görünüm değişmez,
     ikisi de ortalı kalır. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
  position: relative; overflow: hidden;
  /* Koyu lacivert tema (25 Ağustos 2026): --renk-bar ailesiyle aynı ton
     ailesinden, koyudan biraz daha açık laciverte geçen bir gradyan —
     bkz. :root'taki tema notu. */
  background: linear-gradient(135deg, #0a1128 0%, #101a33 45%, #1e3a68 100%);
  background-size: 200% 200%;
  animation: loginGradyanKaymasi 9s ease-in-out infinite;
}
@keyframes loginGradyanKaymasi {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
/* Yumuşak, yavaşça süzülen bulanık ışık lekeleri — arka planı yalın bir
   düz gradyandan çıkarıp derinlik katan, günümüz SaaS giriş ekranlarında
   (Stripe/Linear tarzı) yaygın bir dekoratif desen. pointer-events:none —
   tıklamaları/etkileşimi ASLA engellemez, salt görsel. */
.login-blob {
  position: absolute; border-radius: 50%; filter: blur(50px); pointer-events: none;
  opacity: .55; z-index: 0;
}
.login-blob-1 { width: 380px; height: 380px; background: #c7d6fb; top: -120px; left: -100px; animation: loginBlobYuz1 11s ease-in-out infinite; }
.login-blob-2 { width: 320px; height: 320px; background: #3b5bdb; bottom: -140px; right: -80px; animation: loginBlobYuz2 13s ease-in-out infinite; }
.login-blob-3 { width: 220px; height: 220px; background: #c7d6fb; bottom: 10%; left: 8%; animation: loginBlobYuz1 9.5s ease-in-out infinite reverse; opacity: .18; }
@keyframes loginBlobYuz1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(90px, 70px) scale(1.16); }
}
@keyframes loginBlobYuz2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-80px, -60px) scale(1.14); }
}
.login-card {
  position: relative; z-index: 1;
  background: var(--renk-kart);
  padding: 40px;
  border-radius: 18px;
  width: 340px;
  /* Genel İnceleme Raporu, Grup 8 (mobil/responsive temeli): sabit 340px
     genişliğin tek başına dar (~<372px) telefon ekranlarında yatay taşmaya
     yol açmaması için — bkz. .modal-kart-genis'teki AYNI "width + max-width"
     deseni. Masaüstünde HİÇBİR etkisi yok (340 zaten 92vw'den küçük kalır). */
  max-width: calc(100vw - 32px);
  box-shadow: var(--golge-derin);
  text-align: center;
  animation: modalPopIn .3s var(--ease-out);
}
/* Logo, kendi metnini (AKT Portal Pro) zaten içerdiği için ayrı bir
   başlık/alt yazı elemanına gerek yok — bkz. index.html. 25 Ağustos 2026:
   "AKT Portal Pro" logosuyla değiştirildi — yeni logo eskisinden daha
   YATAY/geniş bir en-boy oranına sahip (yaklaşık 2.7:1), bu yüzden
   max-width biraz artırıldı (okunaklılık için), height:auto oranı
   koruyor. */
.login-logo {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 0 auto 28px;
}
/* Topbar'daki küçük logo — "AKT" metninin YANINA, aynı yükseklikte. */
.topbar-logo {
  height: 28px;
  width: auto;
  display: block;
}
/* Logo artık Ana Menü kısayolu (6 Eylül 2026, kullanıcı isteği) — <img>
   gerçek bir <button> içine alındı; buton görsel olarak görünmez kalıyor,
   sadece imleç ve hafif bir vurgu tıklanabilir olduğunu belli ediyor. */
.topbar-logo-btn {
  background: none; border: none; padding: 0 2px; margin: 0;
  display: flex; align-items: center; cursor: pointer; border-radius: 6px;
  transition: var(--gecis);
}
.topbar-logo-btn:hover { opacity: .78; }
.topbar-logo-btn:focus-visible { outline: 2px solid var(--renk-bar-metin); outline-offset: 2px; }
.login-card label { display: block; font-size: 13px; margin: 12px 0 4px; color: var(--renk-metin-soluk); text-align: left; }
.login-card input {
  width: 100%; padding: 11px 12px; border: 1px solid var(--renk-cizgi);
  border-radius: 8px; font-size: 15px; text-align: left;
}
.login-card button {
  width: 100%; margin-top: 20px; padding: 12px; border: none; border-radius: 8px;
  background: linear-gradient(135deg, var(--renk-ana), var(--renk-ana-koyu));
  color: white; font-size: 15px; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
  transition: transform .12s ease, box-shadow var(--gecis);
}
.login-card button:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(0,0,0,.36); }
.login-card button:active { transform: scale(.98); }
.hata-mesaji { color: var(--renk-kirmizi); font-size: 13px; margin-top: 10px; min-height: 16px; }
.login-cihaz-kaydol-link { display: block; margin-top: 14px; font-size: 12.5px; color: var(--renk-metin-soluk); text-decoration: underline; }
.login-cihaz-kaydol-link:hover { color: var(--renk-ana); }
.login-ip-bilgi { margin-top: 14px; font-size: 12px; color: var(--renk-metin-soluk); }
.login-ip-bilgi strong { font-family: ui-monospace, Consolas, monospace; font-weight: 600; }
.login-surum-bilgi { margin-top: 4px; font-size: 11.5px; color: var(--renk-metin-soluk); opacity: .85; }
.login-surum-bilgi strong { font-family: ui-monospace, Consolas, monospace; font-weight: 600; }

.login-oyun-btn {
  position: fixed; z-index: 3; top: 50%; right: clamp(20px, 7vw, 112px); transform: translateY(-50%);
  display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  border: 1px solid rgba(255,255,255,.32); border-radius: 8px;
  background: rgba(255,255,255,.12); color: #fff; font: inherit; font-weight: 700;
  cursor: pointer; backdrop-filter: blur(12px); transition: background .18s ease, transform .18s ease;
}
.login-oyun-btn svg { width: 24px; height: 24px; }
.login-oyun-btn:hover { background: rgba(255,255,255,.22); transform: translateY(calc(-50% - 2px)); }
.login-oyun-btn:focus-visible, .flappy-kapat:focus-visible, .flappy-oyun-alani button:focus-visible { outline: 3px solid #f5c451; outline-offset: 3px; }

.flappy-modal {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  padding: 20px; background: rgba(6, 13, 28, .76); backdrop-filter: blur(8px);
}
.flappy-modal.gizli { display: none; }
.flappy-pencere {
  width: min(100%, 980px); max-height: calc(100vh - 40px); overflow: auto;
  color: #17212b; background: #f5f3ed; border: 1px solid rgba(255,255,255,.55);
  border-radius: 10px; box-shadow: 0 28px 90px rgba(0,0,0,.38); animation: modalPopIn .24s var(--ease-out);
}
.flappy-ust { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid #d9ddd8; }
.flappy-kicker { color: #35735c; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.flappy-ust h2 { margin: 3px 0 0; color: #17212b; font-size: 23px; }
.flappy-kapat { width: 38px; height: 38px; border: 1px solid #cdd3ce; border-radius: 7px; background: transparent; color: #17212b; font-size: 25px; line-height: 1; cursor: pointer; }
.flappy-kapat:hover { background: #e8ebe5; }
.flappy-icerik { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 22px; padding: 22px; }
.flappy-oyun-alani { min-width: 0; }
.flappy-kimlik label { display: block; margin-bottom: 7px; color: #4c5a54; font-size: 12px; font-weight: 700; }
.flappy-kimlik-satir { display: flex; gap: 8px; }
.flappy-kimlik input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid #bec8c0; border-radius: 6px; background: #fff; color: #17212b; font: inherit; }
.flappy-kimlik button, .flappy-alt-serit button { border: 0; border-radius: 6px; background: #287557; color: white; padding: 0 16px; font: inherit; font-weight: 700; cursor: pointer; }
.flappy-kimlik button:hover, .flappy-alt-serit button:hover { background: #1e6046; }
.flappy-hata { min-height: 16px; margin: 5px 0 0; color: #a13f32; font-size: 12px; }
.flappy-skor-seridi { display: flex; justify-content: space-between; padding: 7px 2px; color: #50625a; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.flappy-skor-seridi strong { margin-left: 5px; color: #1d4938; font-size: 15px; letter-spacing: 0; }
#flappyCanvas { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; border: 1px solid #c8d7cf; border-radius: 7px; background: #bce5d4; touch-action: manipulation; }
.flappy-alt-serit { display: flex; align-items: center; justify-content: space-between; min-height: 42px; gap: 10px; }
.flappy-alt-serit p { margin: 0; color: #56625c; font-size: 12px; }
.flappy-alt-serit button { min-height: 34px; }
.flappy-liderlik { border-left: 1px solid #d9ddd8; padding-left: 20px; }
.flappy-liderlik-baslik { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 3px 0 13px; border-bottom: 1px solid #d9ddd8; color: #486052; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.flappy-liderlik-baslik strong { color: #17212b; font-size: 13px; letter-spacing: 0; }
.flappy-liderlik-kapat { display: none; }
.flappy-skor-listesi { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.flappy-skor-listesi li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 39px; border-bottom: 1px solid #e0e3dd; font-size: 12px; }
.flappy-skor-listesi .flappy-sira { color: #7b8880; font-variant-numeric: tabular-nums; }
.flappy-skor-listesi .flappy-ad { overflow: hidden; color: #26362e; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.flappy-skor-listesi .flappy-puan { color: #287557; font-variant-numeric: tabular-nums; font-weight: 800; }
.flappy-skor-listesi .flappy-bos { display: block; padding: 12px 0; color: #7b8880; }
.flappy-kayit-notu { margin: 14px 0 0; color: #7b8880; font-size: 11px; line-height: 1.5; }
@media (max-width: 720px) {
  .login-oyun-btn { top: auto; right: 14px; bottom: 20px; transform: none; padding: 11px; border-radius: 50%; }
  .login-oyun-btn:hover { transform: translateY(-2px); }
  .login-oyun-btn span { display: none; }
  .flappy-modal { padding: 8px; }
  .flappy-pencere { max-height: calc(100vh - 16px); }
  .flappy-ust { padding: 14px 16px; }
  .flappy-icerik { grid-template-columns: minmax(0, 1fr); gap: 15px; padding: 14px; }
  .flappy-liderlik { border-left: 0; border-top: 1px solid #d9ddd8; padding: 12px 0 0; }
  .flappy-skor-listesi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .login-oyun-btn, .flappy-pencere { animation: none; transition: none; } }

@media (max-width: 720px) {
  .login-oyun-btn { bottom: 74px; }
}

.flappy-modal { padding: 0; background: #0b1426; }
.flappy-pencere {
  position: relative; display: block; width: 100vw; height: 100vh; height: 100dvh;
  max-height: none; overflow: hidden; border: 0; border-radius: 0; background: #0b1426;
  box-shadow: none; animation: none;
}
.flappy-ust {
  position: absolute; inset: 0 0 auto; z-index: 6; min-height: 62px; padding: 10px 16px;
  border: 0; background: linear-gradient(180deg, rgba(8,18,34,.86), rgba(8,18,34,0));
}
.flappy-ust h2 { color: #fff; font-size: 18px; }
.flappy-kicker { color: #b9dfc2; }
.flappy-kapat { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.12); color: #fff; }
.flappy-kapat:hover { background: rgba(255,255,255,.22); }
.flappy-liderlik-ac {
  min-height: 36px; padding: 0 12px; border: 1px solid rgba(255,255,255,.32); border-radius: 6px;
  background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.flappy-liderlik-ac:hover { background: rgba(255,255,255,.22); }
.flappy-icerik { position: absolute; inset: 0; display: block; padding: 0; }
.flappy-oyun-alani { position: absolute; inset: 0; }
#flappyCanvas {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(100vw, 56.25vh); width: min(100vw, 56.25dvh);
  height: min(100vh, 177.78vw); height: min(100dvh, 177.78vw);
  max-width: 100vw; max-height: 100dvh; aspect-ratio: 9 / 16;
  border: 0; border-radius: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}
.flappy-skor-seridi {
  position: absolute; z-index: 3; top: 76px; left: 50%; transform: translateX(-50%);
  width: min(100vw, 56.25vh); width: min(100vw, 56.25dvh); padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 7px; background: rgba(8,18,34,.34);
  color: #fff; backdrop-filter: blur(6px);
}
.flappy-skor-seridi strong { color: #fff; }
.flappy-kimlik {
  position: absolute; z-index: 4; top: 132px; left: 50%; transform: translateX(-50%);
  width: min(calc(100vw - 24px), 420px); padding: 12px; border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px; background: rgba(8,18,34,.84); box-shadow: 0 10px 34px rgba(0,0,0,.24);
}
.flappy-kimlik label { color: #e6eee7; }
.flappy-hata { color: #ffb6a8; }
.flappy-alt-serit {
  position: absolute; z-index: 3; bottom: 16px; left: 50%; transform: translateX(-50%);
  width: min(100vw, 56.25vh); width: min(100vw, 56.25dvh); min-height: 40px; padding: 4px 10px;
  border-radius: 6px; background: rgba(8,18,34,.42); color: #fff;
}
.flappy-alt-serit p { color: #fff; }
.flappy-liderlik {
  position: absolute; z-index: 8; inset: 0 0 0 auto; width: min(320px, 88vw); height: 100%;
  overflow-y: auto; padding: 94px 18px 24px; border: 0; border-left: 1px solid #d9ddd8;
  background: #f5f3ed; box-shadow: -16px 0 40px rgba(0,0,0,.25);
}
.flappy-liderlik.gizli { display: none !important; }
.flappy-liderlik-kapat {
  position: absolute; top: 16px; right: 16px; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid #cdd3ce; border-radius: 7px;
  background: transparent; color: #17212b; font-size: 25px; line-height: 1; cursor: pointer;
}
.flappy-liderlik-kapat:hover { background: #e8ebe5; }
/* 3D sürüm (1 Kasım 2026): "HAZIR MISIN / TUR BİTTİ" yazısı artık tuvalin
   içinde değil, üstünde bir HTML katman — WebGL'de metin çizmek gerekmesin.
   Tıklamalar alttaki tuvale geçsin diye pointer-events kapalı. */
.flappy-mesaj {
  position: absolute; z-index: 2; top: 56%; left: 50%; transform: translate(-50%, -50%);
  width: min(calc(100vw - 40px), 340px); padding: 16px 18px; border-radius: 10px;
  background: rgba(8,18,34,.58); color: #fff; text-align: center; pointer-events: none;
  backdrop-filter: blur(4px); box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.flappy-mesaj strong { display: block; font-size: 26px; font-weight: 800; letter-spacing: .05em; }
.flappy-mesaj span { display: block; margin-top: 6px; font-size: 13px; color: #e6eee7; }
.flappy-mesaj.gizli { display: none; }
#flappyCanvas { cursor: pointer; background: #dcefee; }

/* ===== Topbar ===== */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  /* Koyu lacivert tema (25 Ağustos 2026): --renk-bar/--renk-bar-koyu ile
     AYNI tondan bir gradyan — bkz. :root'taki tema notu. Değişken
     KULLANILMIYOR (rgba alfa karışımı gerektiği için) ama DEĞERLER
     kasıtlı olarak birebir aynı (16,26,51 = #101a33, 10,18,38 = #0a1226). */
  background: linear-gradient(90deg, rgba(16,26,51,.96), rgba(10,18,38,.96));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--renk-bar-metin);
  padding: 10px 20px; border-bottom: 1px solid var(--renk-bar-koyu);
  position: sticky; top: 0; z-index: 10; flex-wrap: wrap; gap: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.topbar-sol { display: flex; align-items: center; gap: 14px; }
.topbar-sol strong { color: #fff; letter-spacing: .02em; font-weight: 700; }
.sube-secici, .topbar select {
  padding: 7px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,.35);
  font-size: 14px; background: rgba(255,255,255,.95);
  /* Bilerek SABİT koyu renk (var(--renk-metin) DEĞİL): üst bar/sidebar her
     iki temada da hep koyu lacivert kalıyor, bu yüzden üzerindeki (bilerek
     hep açık renkli) seçici kutusunun metni de koyu temada bile HEP koyu
     olmalı — aksi halde koyu temada "renk-metin" beyaza dönüp neredeyse
     beyaz zemin üzerinde görünmez olurdu. */
  color: #16213e;
}
.topbar-sag { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.topbar-sag #kullaniciEtiket { color: var(--renk-bar-metin); }
.link-btn {
  border: none; background: none; color: var(--renk-bar-metin); cursor: pointer;
  font-size: 13px; text-decoration: underline; padding: 0; opacity: .9;
}
.link-btn:hover { opacity: 1; color: #fff; }

/* ===== Tema değiştirme (açık/koyu) butonu — bkz. app.js temaUygula/
   temaBaslat. Üst barda (giriş yapılmış görünüm) ve giriş ekranında AYRI
   birer örneği var, ikisi de AYNI paylaşılan localStorage tercihini
   okur/yazar. ===== */
.tema-degistir-btn {
  border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: var(--renk-bar-metin);
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.tema-degistir-btn:hover { background: rgba(255,255,255,.18); transform: translateY(-1px) rotate(-10deg); }
.tema-degistir-btn-giris {
  border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.12); color: #fff;
}
.tema-degistir-btn-giris:hover { background: rgba(255,255,255,.22); }
/* Giriş ekranındaki tema/renk butonlarını sağ üstte bir arada tutan
   sarmalayıcı — eskiden bu konumlandırma tek başına .tema-degistir-btn-giris
   üzerindeydi, artık İKİ butonu (koyu/açık + renk teması) yan yana
   hizalamak için ortak bir sarmalayıcıya taşındı. */
.giris-tema-sarmalayici { position: absolute; top: 18px; right: 18px; z-index: 2; display: flex; align-items: center; gap: 8px; }

/* ===== Renk Teması Seçici (25 Ağustos 2026) — "🎨" butonuna basınca açılan,
   5 renk temasını (Lacivert/Monokrom/Zümrüt/Bordo/Mor) gösteren küçük
   açılır panel. Hem üst bardaki hem giriş ekranındaki örnek AYNI class'ları
   paylaşıyor (bkz. app.js renkTemaBtn/loginRenkTemaBtn). ===== */
.renk-tema-sarmalayici { position: relative; display: inline-flex; }
.renk-tema-popover {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  background: var(--renk-kart); border: 1px solid var(--renk-cizgi); border-radius: 10px;
  box-shadow: var(--golge-hover); padding: 6px; display: flex; flex-direction: column; gap: 2px;
  min-width: 152px; max-width: calc(100vw - 16px); transition: var(--tema-gecis);
}
.renk-tema-secenek {
  display: flex; align-items: center; gap: 9px; border: none; background: transparent;
  padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500;
  color: var(--renk-metin); text-align: left; width: 100%; transition: background-color var(--sure-hizli) ease;
}
.renk-tema-secenek:hover { background: var(--renk-panel); }
.renk-tema-secenek.aktif { background: var(--renk-ana-yumusak); font-weight: 700; }
.renk-tema-ornek {
  width: 15px; height: 15px; border-radius: 50%; display: inline-block; flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.12); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
}
.renk-tema-ornek-lacivert { background: #1e3a68; }
.renk-tema-ornek-monokrom { background: #18181b; }
.renk-tema-ornek-yesil { background: #0f6e63; }
.renk-tema-ornek-bordo { background: #7a1f3d; }
.renk-tema-ornek-mor { background: #5b21b6; }

/* ===== Mobil menü butonu (Grup 8b devamı — genel mobil optimizasyon) =====
   Masaüstü/tablette (>640px) GİZLİ — sidebar zaten hep açık/görünür orada.
   Telefon genişliğinde sidebar artık VARSAYILAN OLARAK GİZLİ (bkz. aşağıdaki
   "Telefon boyu ekranlar" bloğundaki .sidebar kuralı) çünkü 10 kapalı menü
   grubu bile alt alta dizilince içeriğin TAMAMINI ekran dışına itiyordu —
   kullanıcı her sayfa açılışında önce koca bir menüyü kaydırıp geçmek zorunda
   kalıyordu. Bu buton sidebar'ı aç/kapat yapar (bkz. app.js, #mobilMenuBtn). */
.mobil-menu-btn {
  display: none; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: var(--renk-bar-metin);
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 18px; line-height: 1;
  align-items: center; justify-content: center; padding: 0; flex: none;
}
.mobil-menu-btn:hover { background: rgba(255,255,255,.18); }

/* ===== Gövde: sol menü + içerik ===== */
.govde { display: flex; align-items: flex-start; min-height: calc(100vh - 53px); }

/* Sidebar artık kendi İÇİNDE kayan (overflow-y:auto), tam viewport
   yüksekliğinde (height — eskiden min-height'tı) bağımsız bir sütun. Eskiden
   min-height olduğundan, içeriği (tüm menü grupları açıkken) viewport'tan
   uzun olduğunda sticky konumlanma sidebar'ın ALT kısmını (ör. Yönetim >
   Yedekle/Geri Yükle) görünüm alanının dışında bırakıyordu — kullanıcı ana
   içerikte (ör. uzun bir cari listesi) en alta inmeden sidebar'ın kendisini
   kaydıramıyordu. Artık height + overflow-y:auto ile sidebar KENDİ
   kaydırma çubuğuna sahip, main'in uzunluğundan tamamen BAĞIMSIZ. */
.sidebar {
  width: 230px; min-width: 230px; max-width: 230px; flex: 0 0 230px;
  background: linear-gradient(180deg, var(--renk-bar), var(--renk-bar-koyu));
  border-right: 1px solid var(--renk-bar-koyu); height: calc(100vh - 53px);
  padding: 14px 0; position: sticky; top: 53px; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.4); }

.menu-grup { margin-bottom: 2px; }
.menu-baslik {
  padding: 10px 18px; font-size: 12px; font-weight: 700; letter-spacing: .03em;
  color: var(--renk-ana-acik); text-transform: uppercase; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; user-select: none;
}
.menu-baslik:hover { color: #fff; background: rgba(255,255,255,.05); }
.menu-baslik::after { content: "▾"; font-size: 10px; transition: transform var(--sure-hizli) var(--ease-out); }
.menu-grup.kapali > .menu-baslik::after { transform: rotate(-90deg); }
/* İç içe gruplar (Personel > Detaylı Veri İşlemleri > Fatura İşlemleri):
   her seviye biraz içeriden başlar ki hiyerarşi okunabilsin. */
.menu-alt .menu-grup > .menu-baslik { padding-left: 28px; }
.menu-alt .menu-grup .sekme-btn { padding-left: 28px; }
.menu-alt .menu-alt .menu-grup > .menu-baslik { padding-left: 38px; }
.menu-alt .menu-alt .menu-grup .sekme-btn { padding-left: 38px; }
/* Bir grup İÇİNDEKİ aktif sekme, o grup kapalıyken bile (henüz açılmadan
   önce, ör. sayfa yüklenirken kısa bir an) fark edilsin diye başlığı hafifçe
   vurgulanır — bkz. menuGrubunuGuncelle (app.js), ".icinde-aktif" sınıfını
   ekleyip çıkarıyor. */
.menu-grup.icinde-aktif > .menu-baslik { color: #fff; }
/* Akordeon açılış/kapanış animasyonu: eskiden display:none/flex ile ANİ
   kayboluyordu — display özelliği transition edilemediği için hiç hareket
   yoktu. max-height + opacity ile yumuşak bir "katlanma" hissi verir (JS
   tarafında HİÇBİR değişiklik gerekmedi, sadece .kapali sınıfına CSS
   tepkisi değişti). max-height'taki 900px değeri (31 Ağustos 2026: 600px'ten
   büyütüldü — Raporlar grubuna artık Cari/Stok/Kasa-Banka gruplarından
   toplanan kısayollar + alt bölüm başlıkları da eklendiği için ~18 satıra
   çıktı), bu sidebar'daki en uzun grubun rahatça sığması için yeterince
   cömert bir üst sınırdır. */
.menu-alt {
  display: flex; flex-direction: column; overflow: hidden;
  max-height: 900px; opacity: 1;
  transition: max-height var(--sure-normal) var(--ease-out), opacity var(--sure-hizli) ease;
}
.menu-grup.kapali .menu-alt { max-height: 0; opacity: 0; transition: max-height var(--sure-normal) var(--ease-out), opacity .12s ease; }
/* NOT (7 Eylül 2026): Raporlar grubundaki tıklanamaz alt başlıklar
   ("Satış / Cari / Kasa-Banka / Stok / Şube-Genel") kullanıcı isteğiyle
   KALDIRILDI, ".menu-alt-baslik" kuralı da buradan silindi — HTML'de artık
   hiçbir kullanımı yok, ölü kural bırakılmadı. Gerekçe index.html'de
   "Raporlar" grubunun üstündeki yorumda. */

.sekme-btn {
  position: relative; border: none; background: transparent; padding: 10px 18px; text-align: left;
  cursor: pointer; font-size: 14px; color: var(--renk-bar-metin); font-weight: 500;
  border-left: 3px solid transparent; overflow: hidden;
  transition: background-color var(--gecis), color var(--gecis), padding-left var(--sure-hizli) var(--ease-out), border-left-color var(--sure-hizli) var(--ease-out);
}
/* Üzerine gelince, solda dar bir çizgi olarak beliren ve sağa doğru
   genişleyerek dolan bir "vurgu" katmanı (Linear/Notion tarzı sidebar
   hover'ı) — düz bir renk değişiminden daha belirgin ve akıcı. Metnin
   ARKASINDA kalması için negatif z-index kullanılıyor. */
.sekme-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(148,181,255,.22), rgba(148,181,255,0) 85%);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--sure-normal) var(--ease-out);
}
.sekme-btn.aktif { background: rgba(255,255,255,.14); color: #fff; border-left-color: var(--renk-ana-acik); font-weight: 600; }
.sekme-btn:hover {
  background: rgba(255,255,255,.08); padding-left: 22px; color: #fff;
  border-left-color: rgba(148,181,255,.55);
}
.sekme-btn:hover::before { transform: scaleX(1); }
/* 25 Ağustos 2026: sidebar'daki 5 üst seviye sekmenin emoji ikonu yerine
   gelen resmi/ince-çizgi SVG'ler — currentColor kullanıyor, buton
   metniyle (var(--renk-bar-metin) / hover-active beyaz) AYNI renkte,
   ekstra bir renk kuralı gerekmiyor. */
.sekme-btn svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 7px; flex-shrink: 0; }

/* Raporlar grubundaki alt rapor kısayolları (Şube Mali Özeti, Cari Ekstresi
   vb.) — hepsi aynı sekmeye açıldığı için normal menü maddelerinden biraz
   daha sık/girintili gösterilir, böylece "Raporlar" başlığının altındaki bir
   alt liste olduğu görsel olarak da belli olur. */
.rapor-menu-btn { font-size: 13px; padding: 7px 18px 7px 28px; }

main { flex: 1; padding: 20px; min-width: 0; }

/* ===== Satış ekranı ===== */
.satis-ust-cubuk {
  display: flex; align-items: center; gap: 12px; margin-bottom: 4px;
}
.cari-sec-buton {
  padding: 10px 18px; font-size: 15px; font-weight: 600; border: 1px solid var(--renk-cizgi);
  border-radius: 8px; background: var(--renk-kart); cursor: pointer;
}
.cari-sec-buton:hover { border-color: var(--renk-ana); background: var(--renk-ana-yumusak); }
.fatura-tarih-etiket {
  display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
  color: var(--renk-metin-soluk); margin-left: auto;
}
.fatura-tarih-girisi {
  padding: 8px 10px; font-size: 14px; border: 1px solid var(--renk-cizgi); border-radius: 8px;
  background: var(--renk-kart); color: var(--renk-metin);
}
.fatura-tarih-girisi:focus { outline: none; border-color: var(--renk-ana); }
/* .satir-form button varsayılanı (mavi dolgu) .cari-sec-buton'ı ezmesin diye —
   Emanet ekranı gibi .satir-form İÇİNDE kullanılan cari seç butonlarında da
   Satış ekranındakiyle AYNI (beyaz, çerçeveli) görünüm korunur. */
.satir-form button.cari-sec-buton {
  background: var(--renk-kart); color: var(--renk-metin); border: 1px solid var(--renk-cizgi);
  flex: none; padding: 10px 18px;
}
.satir-form button.cari-sec-buton:hover { border-color: var(--renk-ana); background: var(--renk-ana-yumusak); }
.cari-sec-listesi {
  max-height: 320px; overflow-y: auto; border: 1px solid var(--renk-cizgi); border-radius: 8px; margin-top: 10px;
}
.cari-sec-listesi div { padding: 10px 12px; cursor: pointer; font-size: 14px; border-bottom: 1px solid var(--renk-cizgi-soft); }
.cari-sec-listesi div:last-child { border-bottom: none; }
.cari-sec-listesi div:hover { background: var(--renk-ana-yumusak); }

.satis-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 14px;
}
.urun-panel, .sepet-panel, .son-faturalar-panel {
  background: var(--renk-kart); border-radius: var(--radius); padding: 16px;
  border: 1px solid var(--renk-cizgi); box-shadow: var(--golge);
}
.arama-kutu {
  width: 100%; padding: 12px; font-size: 16px; border: 1px solid var(--renk-cizgi);
  border-radius: 8px; margin-bottom: 12px;
}
.urun-listesi {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px; max-height: 62vh; overflow-y: auto;
}
.urun-kart {
  border: 1px solid var(--renk-cizgi); border-radius: 10px; padding: 12px 10px;
  cursor: pointer; text-align: center; background: var(--renk-panel);
  user-select: none;
}
.urun-kart:hover { border-color: var(--renk-ana); background: var(--renk-ana-yumusak); transform: translateY(-2px); box-shadow: var(--golge-hover); }
.urun-kart .ad { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.urun-kart .fiyat { color: var(--renk-ana); font-weight: 700; font-size: 14px; }
.urun-kart .fiyat.ozel::after { content: " *"; color: var(--renk-yesil); }

.cari-secim { position: relative; margin-bottom: 14px; }
.cari-secim input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--renk-cizgi); border-radius: 8px; font-size: 14px;
}
.cari-sonuclar {
  position: absolute; top: 42px; left: 0; right: 0; background: var(--renk-kart);
  border: 1px solid var(--renk-cizgi); border-radius: 8px; max-height: 200px; overflow-y: auto;
  z-index: 5; box-shadow: var(--golge-hover);
}
.cari-sonuclar div { padding: 9px 12px; cursor: pointer; font-size: 14px; }
.cari-sonuclar div:hover { background: var(--renk-ana-yumusak); }
/* .satir-form (flex, gap:8px) İÇİNDE kullanılan .cari-secim — diğer input/
   select kardeşleriyle aynı şekilde büyüyüp küçülsün diye flex öğesi olarak
   davranır (bkz. Raporlar > Cari Ekstresi). Ayrıca bu sarmalayıcı, dropdown'ın
   (.cari-sonuclar, position:absolute) DOĞRU konumlanan bir üst öğeye sahip
   olmasını sağlar — sarmalayıcı YOKKEN dropdown, en yakın konumlanmış atanın
   (position'lu ata) bulunamaması yüzünden sayfanın en üst-soluna sabitleniyordu. */
.satir-form .cari-secim { flex: 1; min-width: 200px; margin-bottom: 0; }
.secili-cari {
  background: var(--renk-ana-yumusak); border: 1px solid var(--renk-ana-acik); border-radius: 8px;
  padding: 9px 12px; font-size: 14px; display: flex; justify-content: space-between; align-items: center;
}
.secili-cari button { border: none; background: none; color: var(--renk-kirmizi); cursor: pointer; font-size: 13px; }

.sepet-tablo { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 14px; }
.sepet-tablo th { text-align: left; color: var(--renk-metin-soluk); font-weight: 500; padding: 6px 4px; border-bottom: 1px solid var(--renk-cizgi); }
.sepet-tablo td { padding: 7px 4px; border-bottom: 1px solid var(--renk-cizgi-soft); }
.sepet-tablo input[type=number] { width: 55px; padding: 4px; border: 1px solid var(--renk-cizgi); border-radius: 5px; }
.sepet-tablo input.fiyat-girisi { width: 72px; }
.sepet-sil { border: none; background: none; color: var(--renk-kirmizi); cursor: pointer; font-size: 15px; }

.sepet-toplamlar > div {
  display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; color: var(--renk-metin-soluk);
}
.sepet-toplamlar .genel-toplam {
  font-size: 18px; color: var(--renk-metin); border-top: 1px solid var(--renk-cizgi); padding-top: 10px; margin-top: 4px;
}

.buyuk-buton {
  width: 100%; padding: 14px; font-size: 16px; font-weight: 700; color: white;
  background: linear-gradient(135deg, var(--renk-yesil), #047857); border: none; border-radius: 10px;
  cursor: pointer; margin-top: 8px; box-shadow: 0 10px 22px rgba(5,150,105,.28);
}
.buyuk-buton:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(5,150,105,.34); }
.buyuk-buton:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.basari-mesaji {
  color: var(--renk-yesil); font-size: 13px; margin-top: 10px; text-align: center; font-weight: 600;
}

/* ---- Satış: pratik ödeme paneli (Nakit/Kredi Kartı/Havale/Mail Order) ---- */
.odeme-bolumu {
  margin-top: 14px; background: var(--renk-panel); border: 1px solid var(--renk-cizgi);
  border-radius: 10px; padding: 12px 14px;
}
.odeme-baslik-satir { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.odeme-baslik-satir .alt-baslik { margin: 0; font-size: 13px; font-weight: 600; }
.odeme-hizli-satir {
  display: flex; gap: 6px; align-items: center; margin-bottom: 7px;
}
.odeme-hizli-satir select, .odeme-hizli-satir input {
  padding: 8px 9px; border: 1px solid var(--renk-cizgi); border-radius: 6px; font-size: 13px; background: var(--renk-kart);
}
.odeme-tum-buton {
  flex: 0 0 132px; padding: 8px 6px; border: 1px solid var(--renk-cizgi); border-radius: 6px;
  background: var(--renk-kart); cursor: pointer; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.odeme-tum-buton:hover { border-color: var(--renk-ana); background: var(--renk-ana-yumusak); }
.odeme-hizli-satir input[type=number] { flex: 0.8; min-width: 80px; }
.odeme-hizli-satir select { flex: 1.3; min-width: 120px; }
/* Hesap seçici artık gizli — otomatik olarak şubenin kendi kasa/bankasına
   atanıyor; kullanıcıya sadece hangi hesabın kullanılacağını gösteren
   salt okunur küçük bir etiket görünür. */
.odeme-hesap-adi { font-size: 12px; color: var(--renk-metin-soluk); white-space: nowrap; flex: 1.3; }
.odeme-hesap-adi.odeme-hesap-yok { color: var(--renk-kirmizi); }
.odeme-aciklama-girisi { width: 100%; margin-top: 4px; margin-bottom: 10px; }
.odeme-kalan { font-size: 13px; font-weight: 700; text-align: right; color: var(--renk-metin-soluk); min-height: 16px; }
/* Veresiyede (eksik tahsilatta) kırmızı, fazla tahsilatta (ve tam tahsilatta) yeşil. */
.odeme-kalan.odeme-tamam { color: var(--renk-yesil); }
.odeme-kalan.odeme-fazla { color: var(--renk-yesil); }
.odeme-kalan.odeme-eksik { color: var(--renk-kirmizi); }

.son-faturalar-panel h3 { margin: 0 0 12px; font-size: 15px; }
.son-faturalar-listesi { display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow-y: auto; }
.fatura-satiri {
  border: 1px solid var(--renk-cizgi); border-radius: 8px; padding: 9px 11px; font-size: 13px;
}
.fatura-satiri .ust { display: flex; justify-content: space-between; font-weight: 600; }
.fatura-satiri .alt { color: var(--renk-metin-soluk); margin-top: 2px; }
.fatura-satiri.fatura-iptal { opacity: .55; }
.fatura-satiri.fatura-iptal .ust { text-decoration: line-through; }
.fatura-alt-satir { margin-top: 6px; text-align: right; }
.fatura-alt-satir:empty { display: none; }

/* ===== Yönetim ekranları (Şubeler, Kullanıcılar, Ürünler, Cariler) ===== */
.yonetim-panel { background: var(--renk-kart); border-radius: var(--radius); padding: 18px; border: 1px solid var(--renk-cizgi); box-shadow: var(--golge); }
.satir-form { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.satir-form input, .satir-form select {
  padding: 9px 10px; border: 1px solid var(--renk-cizgi); border-radius: 6px; font-size: 14px; flex: 1; min-width: 120px;
}
.satir-form button:not(.ikincil-buton):not(.mini-buton) {
  padding: 9px 20px; background: linear-gradient(135deg, var(--renk-ana), var(--renk-ana-koyu));
  color: white; border: none; border-radius: 6px;
  font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.22);
}
.satir-form button:not(.ikincil-buton):not(.mini-buton):hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.28); }
/* İkincil/mini butonlar (ör. "Cari Birleştir", "Tüm Carileri Sil", "Seçilenleri
   Sil") .satir-form İÇİNE konulduğunda yukarıdaki "ana mavi dolgu" görünümünü
   MİRAS ALMASIN diye yukarıda hariç tutuldu — aksi halde bu buton, ".satir-form
   button" ile ".ikincil-buton"/".tehlike-buton" aynı özgüllükte (specificity)
   olduğundan, hangi renklerin kazanacağı CSS'teki sıraya bağlı kalıyor ve
   üzerine gelince (hover) yazı okunamaz hale gelebiliyordu (beyaz yazı +
   açık mavi zemin gibi). Bu buton grubu artık sadece kendi
   .ikincil-buton/.mini-buton/.tehlike-buton kurallarından renk alıyor. */

/* ".satir-form button" ile AYNI mavi gradyan/gölge görünümü, form İÇİNDE
   olmayan tekil butonlara da (ör. "+ Stok Ekle") uygulayabilmek için —
   .rapor-baslik-satiri gibi form olmayan sarmalayıcılarda kullanılır. */
.buton-birincil {
  padding: 9px 20px; background: linear-gradient(135deg, var(--renk-ana), var(--renk-ana-koyu));
  color: white; border: none; border-radius: 6px;
  font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.22);
}
.buton-birincil:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.28); }

.yonetim-tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
.yonetim-tablo th { text-align: left; padding: 8px; background: var(--renk-panel); color: var(--renk-metin-soluk); font-weight: 600; }
.yonetim-tablo td { padding: 8px; border-bottom: 1px solid var(--renk-cizgi-soft); }
.yonetim-tablo tbody tr:hover td { background: var(--renk-ana-yumusak); }
/* Yetki Yönetimi: rol matrisi/kullanıcı istisna tablolarında modül grubu
   (ör. "Kasa / Banka") ayıraç satırı — normal satır hover'ından etkilenmesin
   diye ayrı seçici. */
.yy-grup-basligi { background: var(--renk-panel) !important; padding-top: 12px !important; }

/* ---- Menü Düzeni (sürükle-bırak sol menü düzenleyici, 25 Ağustos 2026) ---- */
#mdKapsayici { display: flex; flex-direction: column; gap: 14px; }
.md-grup {
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  background: var(--renk-panel);
  padding: 10px 12px;
}
.md-grup.md-ust-duzey { border-style: dashed; }
.md-grup-baslik-satir { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.md-grup-baslik-satir input[type="text"] { flex: 1 1 auto; font-weight: 600; }
.md-grup-baslik-sabit { flex: 1 1 auto; font-weight: 600; color: var(--renk-metin); }
.md-oge-listesi {
  display: flex; flex-wrap: wrap; gap: 8px; min-height: 40px;
  padding: 8px; border-radius: 8px; background: var(--renk-kart);
  border: 1px dashed transparent; transition: background .12s, border-color .12s;
}
.md-oge-listesi.md-surukle-uzerinde { background: var(--renk-vurgu-soft, rgba(37,99,235,.10)); border-color: var(--renk-vurgu, #2563eb); }
.md-oge-listesi:empty::before { content: "(boş — buraya öğe sürükleyin)"; color: #9ca3af; font-size: 12.5px; padding: 4px; }
.md-oge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px; font-size: 13px;
  background: var(--renk-kart2, var(--renk-kart)); border: 1px solid var(--renk-cizgi);
  cursor: grab; user-select: none;
}
.md-oge:active { cursor: grabbing; }
.md-oge.md-surukleniyor { opacity: .4; }
.md-oge-kilit { color: var(--renk-metin-soluk); font-size: 11px; }
/* Emanet Raporu: cari bazlı özet satırı tıklanabilir (detay açar), ok simgesi döner. */
.emanet-ozet-satir { cursor: pointer; }
.emanet-genislet-ok { display: inline-block; transition: transform .15s; color: var(--renk-metin-soluk); }
.emanet-ozet-satir-acik .emanet-genislet-ok { transform: rotate(90deg); }
.emanet-detay-satir td { background: var(--renk-panel); padding: 10px 8px 14px 28px; border-bottom: 2px solid var(--renk-cizgi-soft); }
.emanet-detay-tablosu { font-size: 13px; }
/* Emanet Raporu özet satırı: "Açık Emanet (Ürün Bazında)" hücresi birden
   fazla ürün satırı içerebilir (bkz. app.js raporEmanetOzetCiz/kalemMetni)
   — her ürün kendi satırında (ad solda, rozet sağda) hizalanır, satırlar
   arasına ince bir ayraç konur ki sıkışık/iç içe geçmiş görünmesin. */
.emanet-kalem-satiri {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 5px 0;
}
.emanet-kalem-satiri + .emanet-kalem-satiri { border-top: 1px dashed var(--renk-cizgi-soft); }
.emanet-kalem-ad { font-weight: 600; margin-right: auto; }
.emanet-kalem-detay { font-size: 12px; color: var(--renk-metin-soluk); white-space: nowrap; }
#raporEmanetOzetTablosu td:nth-child(2) { min-width: 260px; }
.emanet-duzelt-ornek-liste { max-height: 320px; overflow-y: auto; font-size: 13px; padding-left: 18px; }
.emanet-duzelt-ornek-liste li { margin-bottom: 10px; }
.durum-etiket { padding: 2px 8px; border-radius: 12px; font-size: 12px; }
.durum-aktif { background: #dcfce7; color: #166534; }
.durum-pasif { background: #fee2e2; color: #991b1b; }
/* Bakiye rozeti: durum-etiket ile AYNI ton — borçlu (bize borçlu) kırmızı
   (durum-pasif ile aynı renkler), alacaklı (biz borçluyuz) yeşil
   (durum-aktif ile aynı renkler). Cariler listesindeki Bakiye sütununda kullanılır. */
.durum-etiket.bakiye-borclu { background: #fee2e2; color: #991b1b; }
.durum-etiket.bakiye-alacakli { background: #dcfce7; color: #166534; }
/* Onay Talepleri sekmesindeki "Beklemede" durumu için (Onaylandı=durum-aktif
   yeşili, Reddedildi=durum-pasif kırmızısı zaten var, üçüncü renk gerekti). */
.durum-etiket.durum-beklemede { background: #fef3c7; color: #92400e; }
/* Eşleştirme Hafızası'nda "şüpheli" (Excel adı ile bağlandığı Cari/Stok adı
   yazım olarak çok benzemiyor) kayıtlar için — durum-beklemede ile AYNI amber
   renkler, "dikkat gerektirir" anlamı zaten aynı, ayrı bir isim sadece bu
   ekrandaki niyeti (kod okurken) netleştirmek için. */
.durum-etiket.durum-supheli { background: #fef3c7; color: #92400e; }
/* Rozetsiz (düz metin) kullanım için — ör. Veresiye Raporu özet kutusu. */
strong.bakiye-borclu { color: #991b1b; }
strong.bakiye-alacakli { color: #166534; }
.mini-buton {
  border: 1px solid var(--renk-cizgi); background: var(--renk-kart); border-radius: 6px; padding: 4px 10px;
  cursor: pointer; font-size: 12px; margin: 2px;
}
.mini-buton:hover { border-color: var(--renk-ana); background: var(--renk-ana-yumusak); color: var(--renk-ana-koyu); }
.tehlike-buton { border-color: var(--renk-kirmizi-cizgi); color: var(--renk-kirmizi); }
.tehlike-buton:hover { background: var(--renk-kirmizi-soft); border-color: var(--renk-kirmizi-cizgi); color: var(--renk-kirmizi); }
/* ".ikincil-buton" ile birlikte kullanıldığında (ör. "Tüm Carileri Sil") her
   iki sınıf da AYNI özgüllükte (tek sınıf seçici) olduğundan, hangisinin
   rengi kazanacağı CSS dosyasındaki sıraya bağlı kalıyordu — bu da bazı
   düzenlemelerde "tehlike" görünümünün (kırmızı yazı) sessizce kaybolup
   ikincil-buton'ın normal (lacivert) yazı rengine dönmesine yol açabiliyordu.
   Aşağıdaki birleşik seçici daha yüksek özgüllüğe sahip olduğundan sıradan
   bağımsız olarak her zaman "tehlike" (kırmızı) görünümü garanti eder. */
.ikincil-buton.tehlike-buton { color: var(--renk-kirmizi); }
.ikincil-buton.tehlike-buton:hover { background: var(--renk-kirmizi-soft); border-color: var(--renk-kirmizi-cizgi); color: var(--renk-kirmizi); }
.checkbox-etiket {
  display: flex !important; align-items: center; gap: 6px; font-size: 13px; flex: none !important;
  color: var(--renk-metin-soluk); padding: 0 6px;
}
.checkbox-etiket input { width: auto; flex: none; }
.bilgi-metni { color: var(--renk-metin-soluk); font-size: 13px; margin: 0 0 14px; }
/* Grup 9 (confirm() göçü): eski confirm() mesajlarının çoğu \n\n ile
   çok satırlıydı (ör. "...taşınacak.\n\nBu işlem GERİ ALINAMAZ. ...") —
   sadece #onayModalMetin için (genel .bilgi-metni'yi ETKİLEMEDEN) bunu
   gerçek satır sonuna çevirir. */
#onayModalMetin { white-space: pre-line; color: var(--renk-metin); }
.eslesme-sozcuk-bolumu {
  margin: 4px 0 16px; padding: 12px 14px; border: 1px solid var(--renk-cizgi); border-radius: var(--radius);
  background: var(--renk-panel);
}
.eslesme-sozcuk-baslik { font-size: 13px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.eslesme-sozcuk-ipucu { cursor: help; color: var(--renk-metin-soluk); font-size: 13px; }
.eslesme-sozcuk-listesi { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.eslesme-sozcuk-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 13px;
  background: var(--renk-kart); border: 1px solid var(--renk-cizgi); border-radius: 999px; color: var(--renk-metin);
}
.eslesme-sozcuk-sil {
  border: none; background: none; cursor: pointer; color: var(--renk-metin-soluk); font-size: 15px;
  line-height: 1; padding: 0; font-weight: 700;
}
.eslesme-sozcuk-sil:hover { color: #991b1b; }
.eslesme-sozcuk-form { display: flex; gap: 8px; }
.eslesme-sozcuk-input {
  flex: 1; padding: 7px 10px; font-size: 13px; border: 1px solid var(--renk-cizgi); border-radius: 6px;
}
.eslesme-sozcuk-hata { margin-top: 6px; }
.envanter-input { width: 70px; padding: 5px; border: 1px solid var(--renk-cizgi); border-radius: 5px; }
.stok-etiketi {
  display: inline-block; margin-top: 2px; font-size: 11px; color: var(--renk-metin-soluk);
}
.depozito-rozet {
  display: inline-block; background: #fef3c7; color: #92400e; font-size: 10px;
  padding: 1px 6px; border-radius: 8px; margin-left: 4px;
}
/* Stok Türü rozeti (Tüplü/Su/Emtia — bkz. app.js stokTuruRozetHtml) —
   satış ekranı ürün kartında ve Stoklar yönetim tablosunda kullanılır. */
.stok-rozet {
  display: inline-block; font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 8px; margin-left: 4px; letter-spacing: .2px;
}
.stok-rozet-tuplu { background: #fef3c7; color: #92400e; }
.stok-rozet-su { background: #dbeafe; color: #1d4ed8; }
.stok-rozet-emtia { background: #e5e7eb; color: #374151; }

/* ===== Modal ===== */
.modal-arkaplan {
  position: fixed; inset: 0; background: rgba(8,25,40,.5); display: flex;
  align-items: center; justify-content: center; z-index: 50;
}
/* max-width: Grup 8 (mobil/responsive temeli) — .modal-kart-genis zaten aynı
   deseni kullanıyordu (width + max-width:92vw), TABAN .modal-kart'ta eksikti.
   Masaüstünde etkisi yok (320px zaten 92vw'nin altında kalır, ~347px'ten
   dar ekranlarda devreye girer). */
.modal-kart { position: relative; background: var(--renk-kart); border-radius: var(--radius); padding: 26px; width: 320px; max-width: 92vw; box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.modal-kart h2 { margin: 0 0 16px; font-size: 18px; font-weight: 700; padding-right: 26px; }
.modal-kart label { display: block; font-size: 13px; margin: 10px 0 4px; color: var(--renk-metin-soluk); }
.modal-kart input { width: 100%; padding: 9px 10px; border: 1px solid var(--renk-cizgi); border-radius: 6px; }
.modal-kart input:disabled { background: var(--renk-cizgi-soft); color: var(--renk-metin-soluk); cursor: not-allowed; }
.modal-butonlar { display: flex; gap: 8px; margin-top: 18px; }

/* Her modalın sağ üstünde tek tip bir "×" kapatma butonu — özellikle uzun
   listeli modallarda (ör. Stok Hareketleri, Cari Ekle) kullanıcı en alttaki
   "Kapat"/"Vazgeç" butonuna kadar kaydırmak zorunda kalmasın diye. Tıklayınca
   o modalın MEVCUT kapatma butonuna programatik .click() gönderir — böylece
   o buton her ne yapıyorsa (formu sıfırlama dahil) birebir aynısı çalışır. */
.modal-kapat-x {
  position: absolute; top: 14px; right: 14px; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 50%;
  font-size: 20px; line-height: 1; color: var(--renk-metin-soluk); cursor: pointer; padding: 0;
}
.modal-kapat-x:hover { background: var(--renk-panel); color: var(--renk-metin); }

/* ---- Cari Ekle/Düzenle: kategorilere ayrılmış, tek sütunlu, satır satır form ---- */
.form-bolum { margin-bottom: 4px; }
.form-bolum + .form-bolum { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--renk-cizgi); }
.form-bolum-baslik {
  margin: 0; font-size: 12px; font-weight: 700; color: var(--renk-ana-koyu);
  text-transform: uppercase; letter-spacing: .04em;
}
.form-satir-tek { display: block; font-size: 13px; margin: 12px 0 4px; color: var(--renk-metin-soluk); }
.form-satir-tek input {
  width: 100%; margin-top: 5px; padding: 10px 11px; border: 1px solid var(--renk-cizgi);
  border-radius: 6px; font-size: 14px; color: var(--renk-metin);
}
.form-satir-ipucu { font-weight: 400; color: #8ba0b3; font-size: 12px; }
/* Cari Düzenle formundaki "Şube" satırı — kilitli gösterim input'unun
   yanında (sadece Tam Yetkili'ye, sadece düzenlerken görünen) "Şube
   Değiştir" butonu için — bkz. app.js cariSubeTransferAcBtn. */
.cari-sube-satiri { display: flex; gap: 8px; align-items: center; margin-top: 5px; }
.cari-sube-satiri input { margin-top: 0; flex: 1; }
.cari-sube-satiri button { flex: none; white-space: nowrap; padding: 9px 14px; }
.yardimci-metin { color: #6b7280; font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
.modal-butonlar button { flex: 1; padding: 10px; border-radius: 6px; border: none; cursor: pointer; font-weight: 600; }
.modal-butonlar button[type=submit] { background: linear-gradient(135deg, var(--renk-ana), var(--renk-ana-koyu)); color: white; box-shadow: 0 4px 12px rgba(0,0,0,.22); }
.modal-butonlar button[type=submit]:hover { transform: translateY(-1px); }
/* Kendi kendine yeten (self-contained) taban stil: eskiden padding/border/
   cursor gibi temel özellikler yalnızca içinde bulunduğu kaba (".modal-butonlar
   button" ya da ".satir-form button") güveniyordu — bu buton bir gün o
   kapların DIŞINDA (veya .satir-form gibi rengi de belirleyen bir kapta)
   kullanılırsa çıplak/varsayılan tarayıcı görünümüne dönüyordu. Artık
   nerede kullanılırsa kullanılsın aynı, tutarlı ikincil buton görünümünü
   garanti eder; daha özgül bir kap kuralı (ör. .modal-butonlar button'ın
   padding:10px'i) zaten daha yüksek özgüllükle bunun üstüne biner. */
.ikincil-buton {
  padding: 9px 20px; background: var(--renk-cizgi-soft); color: var(--renk-metin);
  border: none; border-radius: 6px; font-weight: 600; cursor: pointer;
}
.ikincil-buton:hover { background: var(--renk-cizgi); }

/* ===== Ana Menü (kutucuklu dashboard) ===== */
.ana-menu-btn {
  display: block; width: 100%; margin-bottom: 10px; padding-top: 12px; padding-bottom: 12px;
  font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.12);
}
.sekme-baslik { margin: 0 0 18px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.ana-menu-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
}
.ana-menu-kutu {
  background: var(--renk-kart); border: 1px solid var(--renk-cizgi); border-radius: var(--radius);
  padding: 22px 14px; text-align: center; cursor: pointer; box-shadow: var(--golge);
  display: flex; flex-direction: column; align-items: center; gap: 10px; font-weight: 600; font-size: 14px;
  animation: kutuGirisAnim var(--sure-yavas) var(--ease-out) backwards;
}
.ana-menu-kutu:hover { border-color: var(--renk-ana); transform: translateY(-4px); box-shadow: var(--golge-hover); }
.ana-menu-kutu:active { transform: translateY(-1px) scale(.98); }
/* ===== 3B (kabartmalı) ana menü ikonları — 6 Eylül 2026, kullanıcı isteği:
   "ana menüdeki ikonları da tamamen 3d yap ve dark modda text okunabilir
   renkte, zıt renkte olsun."

   Derinlik dört katmandan geliyor (Kasalar'ın ₺ madeni parasında zaten
   kullanılan .ikon-madeni-tl deseninin aynısı, tüm ikonlara yayıldı):
     1) köşegen degrade    -> hacim
     2) üstte iç beyaz çizgi -> ışık vuran kenar
     3) altta iç koyu gölge  -> içeri çöken kenar
     4) dışa renkli gölge    -> yüzeyden yükselme
   Renkler .ikon-* sınıflarındaki üç değişkenden (--ikon-ust/--ikon-alt/
   --ikon-golge) geliyor; koyu temada bu değişkenler AŞAĞIDA yeniden
   tanımlanıyor. */
.ana-menu-kutu .ikon {
  width: 52px; height: 52px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  background-image: linear-gradient(155deg, var(--ikon-ust) 0%, var(--ikon-alt) 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .8),
    inset 0 -2.5px 5px rgba(0, 0, 0, .16),
    0 5px 12px -3px var(--ikon-golge),
    0 2px 4px rgba(0, 0, 0, .10);
  transition: transform var(--sure-hizli) var(--ease-spring), box-shadow var(--gecis);
}
/* Çizgi ikonun kendisi de kabarık dursun — ince bir alt gölge. */
.ana-menu-kutu .ikon svg { filter: drop-shadow(0 1px 0.5px rgba(0, 0, 0, .28)); }

.ana-menu-kutu:hover .ikon {
  transform: scale(1.12) rotate(-4deg) translateY(-1px);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .9),
    inset 0 -2.5px 5px rgba(0, 0, 0, .18),
    0 9px 18px -4px var(--ikon-golge),
    0 3px 6px rgba(0, 0, 0, .14);
}
.ana-menu-kutu:active .ikon {
  /* Basılınca içeri gömülsün — dışa gölge kaybolur, iç gölge güçlenir. */
  transform: scale(1.02) translateY(1px);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3), inset 0 -1px 0 rgba(255, 255, 255, .35);
}

/* Kutu yazısı: rengi AÇIKÇA temanın metin belirtecine bağlanıyor —
   miras yoluyla gelmesine bırakılmıyor ki koyu temada da garanti
   okunur/zıt olsun (kullanıcı isteği). */
.ana-menu-kutu { color: var(--renk-metin); }
/* 25 Ağustos 2026: emoji ikonların yerini alan resmi/ince-çizgi SVG'ler —
   currentColor ile .ikon-* sınıflarının aşağıda tanımladığı "color" değerini
   kullanıyor, böylece her modül için var olan pastel renk kodlaması (mavi/
   yeşil/turuncu/mor/kırmızı) korunuyor, sadece emoji yerine tutarlı çizgi
   ikon geliyor. */
.ikon svg { width: 24px; height: 24px; display: block; }
/* Kademeli giriş — ilk 10 kutu tek tek, sonrası tek seferde (bkz.
   kutuGirisAnim açıklaması yukarıda). */
.ana-menu-kutu:nth-child(1) { animation-delay: 17ms; }
.ana-menu-kutu:nth-child(2) { animation-delay: 35ms; }
.ana-menu-kutu:nth-child(3) { animation-delay: 52ms; }
.ana-menu-kutu:nth-child(4) { animation-delay: 70ms; }
.ana-menu-kutu:nth-child(5) { animation-delay: 87ms; }
.ana-menu-kutu:nth-child(6) { animation-delay: 105ms; }
.ana-menu-kutu:nth-child(7) { animation-delay: 122ms; }
.ana-menu-kutu:nth-child(8) { animation-delay: 140ms; }
.ana-menu-kutu:nth-child(9) { animation-delay: 157ms; }
.ana-menu-kutu:nth-child(10) { animation-delay: 175ms; }
.ana-menu-kutu:nth-child(n+11) { animation-delay: 192ms; }
/* --- AÇIK tema: pastel degrade + koyu çizgi ikon ---
   ÖNEMLİ: düz `background` KORUNDU. Bu sınıflar SADECE ana menüde değil,
   Şirket Özeti'ndeki istatistik kartlarında da kullanılıyor (bkz. app.js
   `ikonSinif: "ikon-mavi"` vb., 14 yer) — orada 3B tabak yok, düz pastel
   zemin bekleniyor. Degrade sadece .ana-menu-kutu .ikon kuralında
   `background-image` olarak biniyor; düz renk altta güvenli taban kalıyor. */
.ikon-mavi    { background: #dbeafe; --ikon-ust: #eff6ff; --ikon-alt: #93c5fd; --ikon-golge: rgba(37, 99, 235, .45);  color: #1d4ed8; }
.ikon-yesil   { background: #dcfce7; --ikon-ust: #f0fdf4; --ikon-alt: #86efac; --ikon-golge: rgba(22, 163, 74, .45);  color: #15803d; }
.ikon-turuncu { background: #ffedd5; --ikon-ust: #fff7ed; --ikon-alt: #fdba74; --ikon-golge: rgba(234, 88, 12, .45);  color: #c2410c; }
.ikon-mor     { background: #ede9fe; --ikon-ust: #f5f3ff; --ikon-alt: #c4b5fd; --ikon-golge: rgba(124, 58, 237, .45); color: #6d28d9; }
.ikon-kirmizi { background: #fee2e2; --ikon-ust: #fef2f2; --ikon-alt: #fca5a5; --ikon-golge: rgba(220, 38, 38, .45);  color: #b91c1c; }

/* --- KOYU tema: doygun/derin degrade + AÇIK çizgi ikon ---
   Kullanıcı isteği: "dark modda text okunabilir renkte, zıt renkte olsun."
   Açık temadaki pastel zemin + koyu ikon çifti, koyu kartın üzerinde
   parlak bir leke gibi duruyordu; burada ilişki TERSİNE çevriliyor:
   derin renkli tabak + neredeyse beyaz ikon → yüksek kontrast.
   Tek `[data-tema="koyu"]` seçicisi TÜM koyu renk varyantlarını
   (lacivert/monokrom/yeşil/bordo/mor) kapsar — hepsi aynı özniteliği
   taşıyor (bkz. :root[data-renk=...][data-tema="koyu"] blokları).

   KAPSAM: bilerek SADECE `.ana-menu-kutu .ikon` — Şirket Özeti kartlarındaki
   aynı sınıflar düz pastel zeminini korusun; orada ikon rengi açığa
   çevrilirse açık zemin üzerinde okunmaz hale gelirdi. */
[data-tema="koyu"] .ana-menu-kutu .ikon.ikon-mavi    { --ikon-ust: #3b82f6; --ikon-alt: #1e3a8a; --ikon-golge: rgba(59, 130, 246, .5);  color: #eff6ff; }
[data-tema="koyu"] .ana-menu-kutu .ikon.ikon-yesil   { --ikon-ust: #22c55e; --ikon-alt: #14532d; --ikon-golge: rgba(34, 197, 94, .5);   color: #f0fdf4; }
[data-tema="koyu"] .ana-menu-kutu .ikon.ikon-turuncu { --ikon-ust: #f97316; --ikon-alt: #7c2d12; --ikon-golge: rgba(249, 115, 22, .5);  color: #fff7ed; }
[data-tema="koyu"] .ana-menu-kutu .ikon.ikon-mor     { --ikon-ust: #a855f7; --ikon-alt: #4c1d95; --ikon-golge: rgba(168, 85, 247, .5);  color: #f5f3ff; }
[data-tema="koyu"] .ana-menu-kutu .ikon.ikon-kirmizi { --ikon-ust: #ef4444; --ikon-alt: #7f1d1d; --ikon-golge: rgba(239, 68, 68, .5);   color: #fef2f2; }

/* Koyu zeminde beyaz "üst parlama" fazla sert kalıyor — yumuşatılıyor,
   ikonun kendi gölgesi ise koyulaştırılıyor ki hacim korunsun. */
[data-tema="koyu"] .ana-menu-kutu .ikon {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .35),
    inset 0 -2.5px 6px rgba(0, 0, 0, .45),
    0 5px 14px -3px var(--ikon-golge),
    0 2px 5px rgba(0, 0, 0, .4);
}
[data-tema="koyu"] .ana-menu-kutu:hover .ikon {
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, .45),
    inset 0 -2.5px 6px rgba(0, 0, 0, .5),
    0 10px 22px -4px var(--ikon-golge),
    0 3px 7px rgba(0, 0, 0, .45);
}
[data-tema="koyu"] .ana-menu-kutu .ikon svg { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55)); }

/* Kasalar için: dolar işaretli para torbası emojisi yerine, Türk Lirası
   madeni parayı andıran, altın tonlu yuvarlak bir ₺ rozeti. */
.ikon-madeni-tl {
  /* 6 Eylül 2026: diğer ikonlar 3B'ye geçerken 48 -> 52px oldu; madeni
     para da ızgarada aynı hizada dursun diye eşitlendi. */
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; font-family: Arial, "Segoe UI", sans-serif; color: #fffbeb;
  background: radial-gradient(circle at 32% 28%, #fde68a, #d97706 70%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), inset 0 -2px 4px rgba(120,53,15,.35), 0 1px 2px rgba(120,53,15,.25);
  text-shadow: 0 1px 1px rgba(120,53,15,.4);
}

/* ===== Sıralanabilir tablo başlıkları ===== */
.yonetim-tablo.siralanabilir th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.yonetim-tablo.siralanabilir th[data-sort]:hover { color: var(--renk-ana); }
.yonetim-tablo.siralanabilir th[data-sort]::after { content: "↕"; opacity: .35; margin-left: 4px; font-size: 11px; }
.yonetim-tablo.siralanabilir th.th-sirala-asc::after { content: "▲"; opacity: 1; color: var(--renk-ana); }
.yonetim-tablo.siralanabilir th.th-sirala-desc::after { content: "▼"; opacity: 1; color: var(--renk-ana); }
.satir-iptal { opacity: .55; text-decoration: line-through; }

/* ===== Stok Hareketleri: tıklanabilir stok adı + satır vurgusu ===== */
/* Stoklar listesinde ürün adına çift tıklayınca hareket geçmişi modalı açılır. */
.stok-ad-baglanti { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.stok-ad-baglanti:hover { color: var(--renk-ana); }
/* Cariler listesinde cari adına çift tıklayınca Cari Kartı sayfası açılır
   (bkz. app.js carilerTabloCiz, cariDetayAc) — stok-ad-baglanti ile AYNI kalıp. */
.cari-ad-baglanti { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; font-weight: 600; }
.cari-ad-baglanti:hover { color: var(--renk-ana); }
/* Stok Hareketleri modalındaki satırlar (çift tıklayınca ilgili belgeye gider). */
.tiklanabilir-satir { cursor: pointer; }
.tiklanabilir-satir:hover { background: var(--renk-panel); }
/* "İlgili belgeye git" navigasyonuyla hedef sekmeye ulaşılınca satırı kısa
   süreliğine vurgulamak için (bkz. app.js satiriVurgulaVeGorunurYap). */
@keyframes satirVurgulaAnim {
  0%, 100% { background: transparent; }
  15%, 70% { background: #fef3c7; }
}
.satir-vurgula { animation: satirVurgulaAnim 1.4s ease; }

/* ===== Cari bakiye/geçmiş (satış ekranı + cari yönetimi) ===== */
.cari-bakiye-rozeti {
  margin-top: 8px; padding: 8px 12px; border-radius: 8px; font-size: 13px; background: var(--renk-panel);
  border: 1px solid var(--renk-cizgi);
}
.cari-bakiye-rozeti.bakiye-borclu { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.cari-bakiye-rozeti.bakiye-alacakli { background: #ecfdf5; border-color: #a7f3d0; color: #166534; }
.cari-gecmis-paneli { margin-top: 8px; max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.bos-liste { color: var(--renk-metin-soluk); font-size: 13px; }

.alt-baslik { font-size: 15px; margin: 18px 0 10px; font-weight: 700; }
.alt-baslik:first-child { margin-top: 0; }
.son-transferler { margin: 12px 0 20px; display: flex; flex-direction: column; gap: 6px; }
.son-transferler h4 { margin: 0 0 4px; font-size: 13px; color: var(--renk-metin-soluk); }

.form-etiket { display: flex; flex-direction: column; font-size: 12px; color: var(--renk-metin-soluk); gap: 4px; flex: none !important; min-width: 150px; }
.form-etiket input { padding: 9px 10px; border: 1px solid var(--renk-cizgi); border-radius: 6px; font-size: 14px; }

/* Kullanıcı isteği: "...emanet girişi için kutucuklar yamuk duruyor, bir
   kutucuk aşağıda, bir kutucuk yukarıda." — kök neden: .satir-form'un
   varsayılan align-items:stretch'i (bkz. yukarısı), aynı satıra düşen
   ÇIPLAK input/select'leri (tek satır, kısa) ile etiketli .form-etiket
   öğelerini (etiket metni + input, daha uzun) AYNI yüksekliğe zorluyordu —
   satıra göre değişen bu yükseklik farkı, kutuların birbirine göre
   "yukarı/aşağı" kaymış gibi görünmesine yol açıyordu. Sadece Hızlı Giriş >
   Emanet formuna ÖZEL olarak (diğer onlarca .satir-form'u etkilememek için
   scoped) alt hizalama uygulanıyor — tüm kutular artık ORTAK bir alt
   çizgiye (etiketli olanların input'unun alt kenarına) hizalanır. */
#hgEmanetForm { align-items: flex-end; }

/* Kullanıcı isteği: "Cari seçme, stok türü ve stok adedi bölümü belirgin
   olmalı." — bu üç alan diğer ikincil alanlardan (Tanım/Açıklama) görsel
   olarak ayrılsın diye vurgulu bir kutuya alındı (bkz. index.html
   #hgEmanetForm .hg-emanet-onemli-grup). */
.hg-emanet-onemli-grup {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px;
  flex: 1 1 100%;
  background: var(--renk-ana-yumusak); border: 1px solid var(--renk-ana-acik);
  border-radius: 8px; padding: 10px 12px 12px;
}
.hg-emanet-onemli-grup .cari-secim { min-width: 200px; }

/* ===== Şirket Özeti (dashboard) ===== */
.so-donem-secici {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px;
}
.so-donem-btn {
  border: 1px solid var(--renk-cizgi); background: var(--renk-kart); color: var(--renk-metin-soluk);
  padding: 7px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.so-donem-btn:hover { border-color: var(--renk-ana); color: var(--renk-ana-koyu); }
.so-donem-btn.aktif { background: var(--renk-ana); border-color: var(--renk-ana); color: #fff; }
.so-donem-araligi { margin-left: 8px; font-size: 12px; color: var(--renk-metin-soluk); }

.so-ozel-tarih-secici {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: -8px 0 18px;
}
.so-ozel-tarih-secici label {
  display: flex; flex-direction: column; font-size: 12px; color: var(--renk-metin-soluk); gap: 4px;
}
.so-ozel-tarih-secici input { padding: 7px 9px; border: 1px solid var(--renk-cizgi); border-radius: 6px; font-size: 13px; }

/* Ürün Satış Raporu — "Ay Seç" açılır ay ızgarası (bkz. usAySeciciKutusu) */
.ay-secici-panel {
  display: block; margin: -8px 0 18px; padding: 12px; border: 1px solid var(--renk-cizgi);
  border-radius: 10px; background: var(--renk-kart); max-width: 320px;
}
.ay-secici-yil-satiri {
  display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px;
  font-size: 14px; font-weight: 700;
}
.ay-secici-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ay-secici-ay-btn {
  border: 1px solid var(--renk-cizgi); background: var(--renk-panel); color: var(--renk-metin);
  padding: 8px 6px; border-radius: 6px; font-size: 13px; cursor: pointer;
}
.ay-secici-ay-btn:hover { border-color: var(--renk-ana); color: var(--renk-ana-koyu); }
.ay-secici-ay-btn.aktif { background: var(--renk-ana); border-color: var(--renk-ana); color: #fff; }

.so-kart-izgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-bottom: 24px;
}
.so-kart {
  background: var(--renk-kart); border: 1px solid var(--renk-cizgi); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--golge); display: flex; flex-direction: column; gap: 8px;
  animation: kutuGirisAnim var(--sure-yavas) var(--ease-out) backwards;
  transition: box-shadow var(--gecis), transform var(--gecis), border-color var(--gecis), background-color .35s ease;
}
.so-kart:hover { box-shadow: var(--golge-hover); border-color: var(--renk-ana-acik); transform: translateY(-2px); }
/* Analiz Paneli'nde Uyumlu/Fark Var/Eşleşmeyen kartları — tıklanınca
   altındaki kayıt listesini açar (bkz. app.js dgPaneliDetayGoster). */
.so-kart-tiklanabilir { cursor: pointer; }
.so-kart-tiklanabilir:hover { border-color: var(--renk-ana); }
#dpDetayPanel { margin-bottom: 16px; }
#dpDetayPanel .yonetim-tablo { font-size: 12.5px; }
/* Detay Rapor satırına tıklanınca açılan işlem detayı (bkz.
   app.js dgSatirDetayAcKapat) — Excel/Sistem tarafı özeti ile Programdaki
   (AKT) gerçek fatura/tahsilat kayıtları yan yana/alt alta gösterilir. */
.dp-detay-satir:hover td { background: var(--renk-ana-yumusak); }
.dp-detay-acik-satir > td { background: var(--renk-panel); padding: 0; border-bottom: 2px solid var(--renk-ana-acik); }
.dp-detay-acik-icerik { display: flex; flex-direction: column; gap: 14px; padding: 14px 18px; }
.dp-detay-acik-icerik .yonetim-tablo { font-size: 12px; }
.dp-detay-acik-icerik strong { display: block; margin-bottom: 4px; font-size: 13px; }
.so-kart:nth-child(1) { animation-delay: 22ms; }
.so-kart:nth-child(2) { animation-delay: 45ms; }
.so-kart:nth-child(3) { animation-delay: 67ms; }
.so-kart:nth-child(4) { animation-delay: 90ms; }
.so-kart:nth-child(5) { animation-delay: 112ms; }
.so-kart:nth-child(6) { animation-delay: 135ms; }
.so-kart:nth-child(7) { animation-delay: 157ms; }
.so-kart:nth-child(8) { animation-delay: 180ms; }
.so-kart:nth-child(n+9) { animation-delay: 202ms; }
.so-kart-ust { display: flex; align-items: center; gap: 10px; }
.so-kart-ikon {
  width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none;
}
.so-kart-baslik { font-size: 12.5px; color: var(--renk-metin-soluk); font-weight: 600; }
.so-kart-deger { font-size: 22px; font-weight: 800; color: var(--renk-metin); }
.so-kart-deger.so-negatif { color: var(--renk-kirmizi); }
.so-kart-alt-not { font-size: 11px; color: var(--renk-metin-soluk); }
.so-kart .mini-buton { align-self: flex-start; margin-top: 2px; }

.so-alt-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.so-panel {
  background: var(--renk-kart); border: 1px solid var(--renk-cizgi); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--golge);
}
.so-panel-baslik { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.so-panel-baslik h3 { margin: 0; font-size: 14px; }
.so-bar-listesi { display: flex; flex-direction: column; gap: 10px; }
.so-bar-satir { display: flex; flex-direction: column; gap: 4px; }
.so-bar-etiket { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--renk-metin-soluk); }
.so-bar-etiket strong { color: var(--renk-metin); font-weight: 700; }
.so-bar-zemin { background: var(--renk-panel); border-radius: 6px; height: 8px; overflow: hidden; }
/* Genişlik, JS tarafında ÖNCE %0 olarak çizilip bir sonraki animasyon
   karesinde gerçek yüzdeye ayarlanır (bkz. app.js soBarListesiCiz) — bu
   geçiş de o "0 -> gerçek değer" büyümesini yumuşatır. */
.so-bar-dolu {
  background: linear-gradient(90deg, var(--renk-ana-acik), var(--renk-ana)); height: 100%; border-radius: 6px;
  width: 0%; transition: width .5s var(--ease-out);
}

.rapor-ozet {
  display: flex; gap: 20px; flex-wrap: wrap; background: var(--renk-panel); border: 1px solid var(--renk-cizgi);
  border-radius: 8px; padding: 12px 16px; margin-bottom: 16px;
}
.rapor-ozet > div { display: flex; flex-direction: column; font-size: 13px; color: var(--renk-metin-soluk); gap: 2px; }
.rapor-ozet > div strong { font-size: 16px; color: var(--renk-metin); }
.rapor-ozet .genel-toplam strong { color: var(--renk-ana); }
.rapor-iptal-notu { flex-basis: 100%; font-size: 12px; color: var(--renk-metin-soluk); }

/* Şube Günlük Raporu — kategori bazında açılıp kapanan (accordion) detay
   bölümleri (bkz. index.html #raporSubeGunluk, app.js raporSubeGunlukGetir). */
.sgr-bolum { border: 1px solid var(--renk-cizgi); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.sgr-bolum-baslik {
  width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer;
  background: var(--renk-panel); border: none; padding: 10px 14px; font-size: 14px; font-weight: 700;
  color: var(--renk-metin);
}
.sgr-bolum-baslik:hover { background: var(--renk-ana-yumusak); }
.sgr-ok { display: inline-block; transition: transform .15s; color: var(--renk-metin-soluk); }
.sgr-bolum-baslik.acik .sgr-ok { transform: rotate(90deg); }
.sgr-adet { font-weight: 400; font-size: 12px; color: var(--renk-metin-soluk); }
.sgr-bolum-icerik { padding: 0 14px 14px; }
.sgr-bolum-icerik table { margin-top: 8px; }

/* Devir Mutabakatı — "Uyuşmayan" özet kutusundaki metnin yerini alan
   filtre butonu (bkz. raporTupDevirTabloCiz/raporSuDevirTabloCiz):
   tıklanınca sadece uyuşmayan şubeler listelenir. */
.uyusmayan-filtre-btn { align-self: center; font-weight: 700; }
.uyusmayan-filtre-btn.uyusmayan-var { border-color: var(--renk-kirmizi-cizgi); background: var(--renk-kirmizi-soft); color: var(--renk-kirmizi); }
.uyusmayan-filtre-btn.uyusmayan-var:hover { border-color: var(--renk-kirmizi); }
.uyusmayan-filtre-btn.aktif { background: var(--renk-ana); border-color: var(--renk-ana); color: #fff; }

/* ===== Günlük Kapanış İçe Aktarım: dosya listesi + eşleştirme ===== */
.gk-dosya-listesi {
  margin-top: 12px; border: 1px solid var(--renk-cizgi); border-radius: 8px; max-height: 260px; overflow-y: auto;
}
.gk-dosya-satiri {
  display: flex; flex-direction: column; gap: 6px; padding: 8px 12px;
  border-bottom: 1px solid var(--renk-cizgi-soft); font-size: 13px;
}
.gk-dosya-satiri:last-child { border-bottom: none; }
.gk-dosya-satiri.gk-dosya-hata { color: var(--renk-kirmizi); }
.gk-dosya-satiri.gk-dosya-atlandi { color: #b45309; }
.gk-dosya-satiri-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gk-dosya-satiri-ust > span:first-child { flex-shrink: 0; font-weight: 600; }
.gk-dosya-satiri-ust > span:nth-child(2) { flex: 1; text-align: right; }
.gk-gun-farki-etiket {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px;
  background: #fef3c7; color: #b45309; font-size: 11px; font-weight: 600;
}
.gk-secili-dosya-sayisi { font-size: 13px; color: var(--renk-metin-soluk); align-self: center; }
.gk-dosya-kaldir-btn {
  flex-shrink: 0; width: 22px; height: 22px; line-height: 20px; padding: 0; margin: 0;
  border: 1px solid var(--renk-cizgi); border-radius: 50%; background: var(--renk-kart); color: var(--renk-metin-soluk);
  font-size: 12px; cursor: pointer; text-align: center;
}
.gk-dosya-kaldir-btn:hover { background: var(--renk-kirmizi); border-color: var(--renk-kirmizi); color: #fff; }

.gk-belirsiz-oge {
  background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: 12px 14px; margin-bottom: 10px;
}
.gk-belirsiz-oge.gk-cozuldu { background: #f0fdf4; border-color: #bbf7d0; }
/* Sabit koyu metin — bu kutu (.gk-belirsiz-oge) her iki temada da HEP açık
   (şeftali/nane) bir zemin kullanıyor (bkz. aşağıda), bu yüzden üzerindeki
   başlık metni de tema değişkeninden (koyu temada beyaza dönerdi) değil,
   sabit koyu bir renkten gelir. */
.gk-belirsiz-baslik { font-weight: 700; font-size: 14px; margin-bottom: 6px; color: #1f2937; }
.gk-oneri-chip {
  display: inline-block; margin: 4px 6px 0 0; padding: 5px 10px; border: 1px solid var(--renk-cizgi);
  border-radius: 999px; background: var(--renk-kart); cursor: pointer; font-size: 12px;
}
.gk-oneri-chip:hover { border-color: var(--renk-ana); background: var(--renk-ana-yumusak); }
/* Mükerrer isimli (aynı ada sahip birden fazla cari) bir öğede, hafızada
   önceden kaydedilmiş kararı öne çıkarır (bkz. app.js gkBelirsizOgeCiz —
   bu, listenin ilk sırasına alınır ve aşağıdaki .gk-oneri-chip-secili ile
   otomatik olarak da uygulanır). */
.gk-oneri-chip-onerilen { border-color: var(--renk-ana); background: var(--renk-ana-yumusak); font-weight: 600; }
.gk-oneri-onerilen-etiket { color: var(--renk-ana-koyu); font-weight: 700; }
/* "Sık kullanılan" (kullanım sıklığı bazlı, metinsel benzerlik yok) masraf
   kategori önerisi — bkz. GunlukKapanisController.MasrafKategorileriniBul. */
.gk-oneri-sik-etiket { color: #b45309; font-weight: 700; }
/* Şu an uygulanmış/seçili aday — sayfa açılır açılmaz en kuvvetli aday
   (önceki seçim varsa o, yoksa en yüksek benzerlikli) otomatik burada
   işaretlenir; kullanıcı başka bir chip'e tıklayarak değiştirebilir (bkz.
   app.js gkBelirsizOgeCiz/chipSec). Kullanıcının hepsini tek tek elle
   onaylamasına gerek kalmasın diye. */
.gk-oneri-chip-secili { border-color: #16a34a; background: #dcfce7; color: #166534; font-weight: 700; box-shadow: 0 0 0 1px #16a34a inset; }
.gk-oneri-chip-secili::before { content: "✓ "; }
.gk-belirsiz-aksiyon { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gk-belirsiz-aksiyon button { padding: 6px 12px; font-size: 12px; }
/* Sabit koyu yeşil (var(--renk-yesil) DEĞİL) — bu etiket hep açık nane
   yeşili bir zemin üzerinde durur (.gk-belirsiz-oge.gk-cozuldu), koyu
   temada --renk-yesil parlak bir yeşile döndüğünde bu açık zeminde okunaklı
   kalmayabilirdi. */
.gk-cozuldu-etiket { font-size: 13px; color: #166534; font-weight: 600; }

.gk-yeni-olustur-bolum { margin-top: 14px; }
.gk-yeni-olustur-bolum .satir-form { margin-top: 10px; margin-bottom: 0; }

/* ===== Cari Detay (bazı ortak modaller hâlâ "genis" boyutu kullanıyor) ===== */
.modal-kart-genis { width: 640px; max-width: 92vw; max-height: 88vh; overflow-y: auto; }
.cari-detay-liste { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }

/* ===== Cari Kartı — tam sayfa profil (bkz. app.js cariDetayAc/cariKartYenile) =====
   "Modern bir CV" hissi: üstte hero/kimlik kartı, altında icmal istatistik
   kartları, sonra bir zaman çizelgesi, sonra detaylı bölümler. */
.carikart-sayfa { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.carikart-ust-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.carikart-ust-bar-sag { display: flex; gap: 8px; flex-wrap: wrap; }

.carikart-hero {
  background: linear-gradient(135deg, var(--renk-ana-koyu), var(--renk-ana));
  border-radius: var(--radius); box-shadow: var(--golge); padding: 22px 26px;
  display: flex; gap: 20px; align-items: center; color: #fff; flex-wrap: wrap;
}
.carikart-avatar {
  flex: none; width: 68px; height: 68px; border-radius: 50%; background: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700; color: #fff;
}
.carikart-hero-bilgi { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 8px; }
.carikart-ad-satiri { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.carikart-ad-satiri h2 { margin: 0; font-size: 22px; }
.carikart-ad-satiri .durum-etiket { background: rgba(255,255,255,.18); color: #fff; }
.carikart-ad-satiri .durum-etiket.durum-aktif { background: rgba(255,255,255,.22); color: #dcfce7; }
.carikart-ad-satiri .durum-etiket.durum-pasif { background: rgba(153,27,27,.35); color: #fee2e2; }
.carikart-chip-satiri { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.carikart-chip { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,.92); }
.carikart-aciklama { font-size: 12.5px; color: rgba(255,255,255,.85); background: rgba(255,255,255,.12); border-radius: 8px; padding: 6px 10px; }

.carikart-bakiye-kart {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  background: var(--renk-kart); border: 1px solid var(--renk-cizgi); border-radius: var(--radius);
  box-shadow: var(--golge); padding: 16px 22px;
}
.carikart-bakiye-etiket { font-size: 13px; color: var(--renk-metin-soluk); font-weight: 600; }
.carikart-bakiye-deger { font-size: 26px; font-weight: 800; }
.carikart-bakiye-kart.bakiye-borclu .carikart-bakiye-deger { color: #991b1b; }
.carikart-bakiye-kart.bakiye-alacakli .carikart-bakiye-deger { color: #166534; }
.carikart-bakiye-acilis { width: 100%; font-size: 12px; color: var(--renk-metin-soluk); }
.carikart-acilis-form {
  width: 100%; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 8px;
  padding-top: 10px; border-top: 1px dashed var(--renk-cizgi);
}
.carikart-acilis-form label {
  display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: var(--renk-metin-soluk);
}
.carikart-acilis-form input {
  padding: 7px 9px; font-size: 13px; border: 1px solid var(--renk-cizgi); border-radius: 6px;
}
.carikart-acilis-form .hata-mesaji { width: 100%; }

.carikart-icmal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.carikart-icmal-kart {
  display: flex; align-items: center; gap: 12px; background: var(--renk-kart); border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius); box-shadow: var(--golge); padding: 14px 16px;
  transition: box-shadow var(--gecis), transform var(--gecis), background-color .35s ease, border-color .35s ease;
}
.carikart-icmal-kart:hover { box-shadow: var(--golge-hover); transform: translateY(-2px); }
.carikart-icmal-ikon {
  flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--renk-ana-yumusak);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.carikart-icmal-metin { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.carikart-icmal-etiket { font-size: 11.5px; color: var(--renk-metin-soluk); }
.carikart-icmal-deger { font-size: 15px; }
.carikart-icmal-kart.icmal-negatif .carikart-icmal-deger { color: #991b1b; }

.carikart-nav {
  position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; flex-wrap: wrap;
  background: var(--renk-zemin); padding: 8px 0; border-bottom: 1px solid var(--renk-cizgi-soft);
}
.carikart-nav-pill {
  border: 1px solid var(--renk-cizgi); background: var(--renk-kart); border-radius: 999px; padding: 6px 14px;
  font-size: 12.5px; cursor: pointer; color: var(--renk-metin-soluk); transition: var(--gecis);
}
.carikart-nav-pill:hover { border-color: var(--renk-ana); color: var(--renk-ana-koyu); background: var(--renk-ana-yumusak); }

/* ===== Cariler alt sekmeleri (Cari Listesi / Çakışan Cariler Raporu) =====
   .carikart-nav-pill ile AYNI görünüm ama ayrıca bir "aktif" (seçili sekme)
   durumu var — carikart-nav-pill'de böyle bir durum yok (o sadece
   scroll-to-anchor içindi, burada gerçek göster/gizle sekme değişimi var). */
.cariler-alt-sekme-nav { margin-bottom: 14px; }
.cariler-alt-sekme-pill {
  border: 1px solid var(--renk-cizgi); background: var(--renk-kart); border-radius: 999px; padding: 7px 16px;
  font-size: 13px; cursor: pointer; color: var(--renk-metin-soluk); transition: var(--gecis); font-weight: 600;
}
.cariler-alt-sekme-pill:hover, .alt-sekme-pill:hover { border-color: var(--renk-ana); color: var(--renk-ana-koyu); background: var(--renk-ana-yumusak); }
.cariler-alt-sekme-pill.aktif, .alt-sekme-pill.aktif { background: linear-gradient(135deg, var(--renk-ana), var(--renk-ana-koyu)); color: #fff; border-color: transparent; }
/* .alt-sekme-pill: içerik alanı İÇİNDE (sidebar DIŞINDA) kullanılan alt-sekme
   butonları için — bkz. Hızlı Günlük Giriş/Sistem Logları. Önceden bu
   butonlar ".sekme-btn" sınıfını (sol menüye özel, koyu bar arka planını
   varsayan `color: var(--renk-bar-metin)` / hover-aktifte `#fff`) ödünç
   alıyordu — açık temada İÇERİK ALANININ (açık) arka planı üzerinde bu açık
   renkli metin neredeyse görünmezdi (koyu temada tesadüfen fark
   edilmiyordu, çünkü içerik alanı da koyulaşıyor). ".cariler-alt-sekme-pill"
   ile AYNI, tema-duyarlı ("var(--renk-metin-soluk)" / kart arka planı)
   görünümü kullanıyor — bkz. kullanıcı raporu: "başlıklar açık renkte
   yazılmış, açık temada görünmüyor". */
.alt-sekme-pill {
  border: 1px solid var(--renk-cizgi); background: var(--renk-kart); border-radius: 999px; padding: 7px 16px;
  font-size: 13px; cursor: pointer; color: var(--renk-metin-soluk); transition: var(--gecis); font-weight: 600;
}

/* Çakışan Cariler Raporu — bkz. CarilerController.CakismaRaporu */
.cakisma-karti {
  border: 1px solid var(--renk-cizgi); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.cakisma-ust-satir { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.cakisma-sebepler { display: flex; flex-wrap: wrap; gap: 4px; }
.cakisma-sebep-etiket {
  background: var(--renk-ana-yumusak); color: var(--renk-ana-koyu); border-radius: 999px; padding: 2px 9px; font-size: 11.5px;
}
.cakisma-skor { font-weight: 700; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; }
.cakisma-skor.skor-yuksek { background: #fee2e2; color: #991b1b; }
.cakisma-skor.skor-orta { background: #fef3c7; color: #92400e; }
.cakisma-skor.skor-dusuk { background: var(--renk-ana-yumusak); color: var(--renk-metin-soluk); }
.cakisma-taraflar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.cakisma-taraf { font-size: 13px; line-height: 1.5; }
.cakisma-taraf b { display: block; font-size: 14px; margin-bottom: 2px; }
.cakisma-taraf .satir { color: var(--renk-metin-soluk); }
.cakisma-ok { color: var(--renk-metin-soluk); font-size: 18px; text-align: center; }
.cakisma-alt-satir { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* Birebir (yüzde 100) eşleşen çiftler — kullanıcı isteğiyle listenin en
   üstünde, ayrı bir bölüm başlığı + vurgulu kenarlık/rozet ile gösterilir
   (bkz. app.js carilerCakismaRaporunuYukle, CarilerController.CakismaRaporu
   Birebir alanı). */
.cakisma-karti-birebir { border-color: var(--renk-ana); box-shadow: 0 0 0 1px var(--renk-ana-acik); }
.cakisma-birebir-rozet {
  background: var(--renk-ana); color: #fff; border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 700;
}

.carikart-bolum {
  background: var(--renk-kart); border: 1px solid var(--renk-cizgi); border-radius: var(--radius);
  box-shadow: var(--golge); padding: 16px 20px; scroll-margin-top: 52px;
}

.carikart-zaman-cizelgesi { position: relative; display: flex; flex-direction: column; gap: 14px; padding-left: 8px; }
.carikart-zc-oge { display: flex; gap: 12px; position: relative; }
.carikart-zc-oge:not(:last-child)::before {
  content: ""; position: absolute; left: 15px; top: 32px; bottom: -14px; width: 2px; background: var(--renk-cizgi);
}
.carikart-zc-nokta {
  flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--renk-ana-yumusak);
  display: flex; align-items: center; justify-content: center; font-size: 15px; z-index: 1;
}
.carikart-zc-icerik { display: flex; flex-direction: column; gap: 1px; padding-top: 2px; }
.carikart-zc-baslik { font-weight: 600; font-size: 13.5px; }
.carikart-zc-detay { font-size: 12.5px; color: var(--renk-metin-soluk); }
.carikart-zc-tarih { font-size: 11px; color: var(--renk-metin-soluk); }

.carikart-detay-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ===== Kayıt Tarihi (gizli sütun): varsayılan gizli, kutucuk işaretlenince görünür ===== */
.kayit-tarihi-sutunu { display: none; }
.kayit-tarihi-goster .kayit-tarihi-sutunu { display: table-cell; }

/* ===== Açılır/Kapanır Bölüm (örn. Geçmiş İçe Aktarımlar) ===== */
.acilir-bolum { margin-top: 24px; }
.acilir-bolum-bar {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: var(--renk-panel); border: 1px solid var(--renk-cizgi); border-radius: var(--radius);
  padding: 12px 16px; font-size: 15px; font-weight: 600; color: var(--renk-metin); cursor: pointer;
  transition: var(--gecis); font-family: inherit;
}
.acilir-bolum-bar:hover { background: var(--renk-ana-yumusak); border-color: var(--renk-ana-acik); }
.acilir-bolum-bar::after { content: "▾"; font-size: 12px; color: var(--renk-metin-soluk); transition: transform var(--sure-hizli) var(--ease-out); }
.acilir-bolum.kapali .acilir-bolum-bar::after { transform: rotate(-90deg); }
/* Sidebar akordeonuyla AYNI max-height tekniği — bkz. .menu-alt açıklaması.
   NOT: 2000px'lik eski tavan, Alım Satış Raporu'ndaki "Eşleştirme Gereken
   Stoklar" gibi YÜZLERCE öğe içerebilen listelerde gerçek içeriği KESİYORDU
   (overflow:hidden + içerik > max-height => altındaki "Sonraki Adım" butonu
   dahil her şey görünmez oluyordu). Tavan çok yükseğe (100000px) çekildi —
   bu sadece açılış animasyonunun ÜST SINIRI, gerçek içerik hep bundan kısa
   olacağından animasyon hissi değişmiyor, sadece artık hiçbir içerik kesilmiyor. */
.acilir-bolum-icerik {
  margin-top: 10px; overflow: hidden; max-height: 100000px; opacity: 1;
  transition: max-height var(--sure-normal) var(--ease-out), opacity var(--sure-hizli) ease, margin-top var(--sure-normal) var(--ease-out);
}
.acilir-bolum.kapali .acilir-bolum-icerik { max-height: 0; opacity: 0; margin-top: 0; }

/* Alım Satış Raporu basamak sihirbazı (bkz. app.js asrAdimGoster): tek
   adımda yüzlerce eşleştirme öğesi (stok/cari) olabilir. Liste kutusu
   SINIRLI yükseklikte kaydırılabilir yapılır ki, altındaki "Sonraki Adım"
   butonuna ulaşmak için sayfanın tamamını değil, sadece küçük bir kutuyu
   kaydırmak yeterli olsun. Navigasyon satırı da sticky ile alta sabitlenir. */
.asr-adim-liste-kutu {
  max-height: 48vh; overflow-y: auto; border: 1px solid var(--renk-cizgi);
  border-radius: 8px; padding: 6px; margin-top: 4px;
}
.asr-adim-navigasyon {
  position: sticky; bottom: 0; background: var(--renk-kart);
  padding: 12px 0 4px; border-top: 1px solid var(--renk-cizgi); z-index: 3;
}

/* Dosya seçme bar'ı (Stoklar/Cariler Toplu Aktarım) — açılır/kapanır bar ile
   AYNI görünüm ama tıklanınca içerik açılmaz, doğrudan işletim sisteminin
   dosya seçme penceresi açılır. Kısa/kompakt kalması için genişlik sınırlı. */
.dosya-sec-satiri { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.dosya-sec-bar { width: auto; max-width: 320px; margin-top: 0; }
.dosya-sec-bar::after { content: none; }
.dosya-sec-adi { font-size: 13px; color: var(--renk-metin-soluk); font-style: italic; }

/* Cari Ekstresi "Detaylı Görünüm" — ana hareket satırının altında görünen
   ürün kalemi satırları; ana satırdan görsel olarak ayrışsın diye soluk. */
.ekstre-detay-satiri td { background: var(--renk-ana-yumusak); color: var(--renk-metin-soluk); font-size: 13px; padding-top: 4px; padding-bottom: 4px; }

/* ===== Başlık + Rapor Al butonunu aynı satırda, buton sağda olacak şekilde
   hizalar — hangi bölümde kullanılırsa kullanılsın tutarlı "sağ üstte"
   yerleşim sağlar. ===== */
.rapor-baslik-satiri { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rapor-baslik-satiri .alt-baslik { margin-top: 0; }
.rapor-baslik-satiri .rapor-al-yerlesim { margin-bottom: 0; }

/* ===== Rapor Al (Excel / Yazdır-PDF) butonu ===== */
.rapor-al-yerlesim { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.rapor-al-sarmalayici { position: relative; display: inline-block; }
.rapor-al-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 14px;
  background: linear-gradient(135deg, var(--renk-kart), var(--renk-ana-yumusak));
  color: var(--renk-ana-koyu); border: 1px solid var(--renk-ana-acik); border-radius: 999px;
  font-weight: 700; font-size: 13.5px; cursor: pointer; box-shadow: var(--golge);
}
.rapor-al-btn:hover { border-color: var(--renk-ana); box-shadow: var(--golge-hover); transform: translateY(-1px); background: linear-gradient(135deg, var(--renk-ana-yumusak), var(--renk-ana-acik)); }
.rapor-al-btn:active { transform: translateY(0); }
.rapor-al-btn .rapor-al-ok { font-size: 10px; transition: transform .18s ease; opacity: .7; }
.rapor-al-btn.acik .rapor-al-ok { transform: rotate(180deg); }
.rapor-al-popover {
  position: absolute; right: 0; top: calc(100% + 8px); background: var(--renk-kart); border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius); box-shadow: var(--golge-hover); padding: 6px; display: flex; flex-direction: column;
  gap: 2px; z-index: 60; min-width: 240px;
  /* Grup 8'deki hg-popup'larla AYNI güvenlik ağı — dar ekranda sabit
     min-width'in viewport dışına taşmasını önler, masaüstünde etkisi yok. */
  max-width: calc(100vw - 16px);
  animation: raporAlPopAc .1s ease;
}
@keyframes raporAlPopAc { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.rapor-al-popover button {
  display: flex; align-items: center; gap: 10px; text-align: left; background: transparent; border: none;
  padding: 10px 12px; border-radius: 8px; cursor: pointer; color: var(--renk-metin); font-size: 13.5px;
  font-weight: 500; transition: var(--gecis);
}
.rapor-al-popover button:hover { background: var(--renk-ana-yumusak); color: var(--renk-ana-koyu); }

/* ===== Hızlı Arama (SOL alt, HER ZAMAN sabit — sayfa kaydırılsa da,
   sekme değişse de yeri/boyutu değişmez) =====
   Evrak No veya cari adı ile arayıp doğrudan ilgili satış faturasına/cari
   detayına gider (bkz. app.js hizliAramaGirdi'nin "input" dinleyicisi).
   Modallardaki gibi (bkz. .modal-arkaplan) sekme dışında, index.html'in en
   altında tutulur — bu sayede sekmeAc()'in .sekme'leri gizleyip
   göstermesinden ETKİLENMEZ. z-index BİLEREK çok yüksek (9999) — herhangi
   bir modal/popover'ın (en yükseği .rapor-al-popover z-index:60) altında
   kalıp tıklanamaz hâle gelmesin diye.

   7 Eylül 2026 — KURUMSALLAŞTIRMA (kullanıcı isteği: "sol alta taşıyalım,
   ikonu değiştirip kurumsal hale getirelim"):
     • SAĞ alt → SOL alt. Sağ altta AKTAI düğmesi var, ikisi çakışıyordu.
     • 68px daire + 30px emoji (🔍) → "hap" biçimli, etiketli, ince-çizgi
       SVG'li düğme. Emoji her tarayıcı/işletim sisteminde farklı çizilir ve
       bir ERP arayüzünde oyuncak durur; SVG uygulamanın geri kalanıyla
       (sol menü ikonları, Task #221) aynı dili konuşur ve currentColor ile
       temaya uyar.
     • Adı YAZILI: sadece ikon, ne yaptığını üzerine gelmeden anlatmıyordu.
     • "Nefes alan" halka animasyonu KALDIRILDI — kurumsal bir panelde
       sürekli titreşen bir öğe dikkat dağıtıyor; düğme zaten sabit yerde. */
.hizli-arama-btn {
  position: fixed; left: 28px; bottom: 28px; z-index: 9999;
  height: 46px; padding: 0 18px 0 15px; border-radius: 23px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, var(--renk-ana), var(--renk-ana-koyu));
  color: #fff; cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,.28);
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
  transition: transform var(--sure-normal) var(--ease-out), box-shadow var(--gecis);
}
.hizli-arama-btn svg { width: 19px; height: 19px; flex-shrink: 0; }
.hizli-arama-btn-ad { line-height: 1; }
.hizli-arama-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.34); }
.hizli-arama-btn:active { transform: translateY(0); }

/* Dar ekranda etiket gizlenir, düğme daireye döner — sol altta yer daralınca
   metin taşmasın. */
@media (max-width: 640px) {
  .hizli-arama-btn { left: 14px; bottom: 14px; padding: 0; width: 44px; height: 44px; border-radius: 50%; justify-content: center; }
  .hizli-arama-btn-ad { display: none; }
}

.hizli-arama-panel {
  position: fixed; left: 28px; bottom: 86px; z-index: 9999;
  width: 380px; max-width: calc(100vw - 40px); max-height: 64vh;
  background: var(--renk-kart); border: 1px solid var(--renk-cizgi); border-radius: 16px;
  box-shadow: 0 30px 70px rgba(0,0,0,.32); padding: 18px; display: flex; flex-direction: column;
  animation: modalPopIn .18s ease;
}
.hizli-arama-panel-baslik { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hizli-arama-panel-baslik strong { font-size: 16px; }
.hizli-arama-panel-baslik button {
  border: none; background: var(--renk-panel); color: var(--renk-metin-soluk); font-size: 17px; cursor: pointer;
  line-height: 1; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.hizli-arama-panel-baslik button:hover { color: var(--renk-metin); background: var(--renk-cizgi-soft); }
.hizli-arama-panel input {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--renk-cizgi); border-radius: 10px; font-size: 14.5px; margin-bottom: 12px;
}
.hizli-arama-sonuclar { overflow-y: auto; }
.hizli-arama-grup-baslik {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--renk-metin-soluk); margin: 12px 2px 6px;
}
.hizli-arama-grup-baslik:first-child { margin-top: 0; }
/* Modern liste görünümü: her sonuç, sol tarafta yuvarlak bir "ikon rozeti"
   (fatura: 🧾 / cari: 👤 — bkz. app.js) olan bir kart satırı olarak gösterilir. */
.hizli-arama-sonuclar .oge {
  padding: 8px 8px; border-radius: 12px; cursor: pointer; display: flex; align-items: center; gap: 10px;
}
.hizli-arama-sonuclar .oge:hover { background: var(--renk-ana-yumusak); }
.hizli-arama-sonuclar .oge .oge-ikon {
  flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--renk-ana-yumusak);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.hizli-arama-sonuclar .oge:hover .oge-ikon { background: var(--renk-kart); }
.hizli-arama-sonuclar .oge .oge-metin { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hizli-arama-sonuclar .oge .ust-metin { font-size: 13.5px; font-weight: 600; color: var(--renk-metin); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hizli-arama-sonuclar .oge .alt-metin { font-size: 12px; color: var(--renk-metin-soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hizli-arama-bos, .hizli-arama-ipucu { color: var(--renk-metin-soluk); font-size: 13px; padding: 8px 2px; }

/* ===== Yazdırma / PDF çıktısı ===== */
.yazdirma-alani { display: none; }
@media print {
  body.yazdirma-modu > *:not(#yazdirmaAlani) { display: none !important; }
  body.yazdirma-modu #yazdirmaAlani { display: block !important; padding: 12px; }
  #yazdirmaAlani h2 { margin: 0 0 2px; font-size: 18px; }
  #yazdirmaAlani .yazdirma-tarih { color: #555; font-size: 12px; margin-bottom: 14px; }
  #yazdirmaAlani table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
  #yazdirmaAlani th, #yazdirmaAlani td { border: 1px solid #999; padding: 4px 8px; font-size: 12px; text-align: left; }
  #yazdirmaAlani .yazdirma-ozet-tablo td { border: none; padding: 2px 8px; }
  #yazdirmaAlani .yazdirma-ozet-tablo { width: auto; margin-bottom: 14px; }
}

/* Açık<->koyu tema geçişinde bu yüzeylerin ÖNCEDEN transition'ı yoktu
   (renk anında zıplardı) — burada YENİ ekleniyor. (.so-kart/.carikart-
   icmal-kart gibi zaten kendi transition'ı olanlara dokunulmadı, oralara
   background-color ayrıca eklendi — bkz. ilgili tanımları.) */
.yonetim-panel, .urun-panel, .sepet-panel, .son-faturalar-panel, .so-panel,
.modal-kart, .carikart-bolum, .carikart-bakiye-kart, .sidebar, .topbar,
table, th, td, .cari-sec-listesi, .cari-sonuclar, .rapor-al-popover, .hizli-arama-panel {
  transition: var(--tema-gecis);
}

/* Hareket hassasiyeti olan kullanıcılar için (işletim sistemi ayarı) tüm
   dekoratif animasyon/geçişleri neredeyse anlık hale getirir — erişilebilirlik
   best-practice'i, işlevselliği ETKİLEMEZ (sadece süre kısalır). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

@media (max-width: 1000px) {
  .satis-grid { grid-template-columns: 1fr; }
  .govde { flex-direction: column; }
  .sidebar { width: 100%; min-width: 0; max-width: none; flex-basis: auto; position: static; height: auto; overflow-y: visible; border-right: none; border-bottom: 1px solid var(--renk-bar-koyu); }
  .menu-alt { flex-direction: row; flex-wrap: wrap; }
  .carikart-detay-izgara { grid-template-columns: 1fr; }
  .carikart-hero { flex-direction: column; align-items: flex-start; }
}

/* ===== Telefon boyu ekranlar (Genel İnceleme Raporu, Grup 8 + Grup 8b +
   genel mobil optimizasyon turu) =====
   Uygulama artık gerçekten telefondan kullanılıyor (kullanıcı test etti) —
   bu blok zamanla büyüdü, aşağıdaki kurallar hepsi SADECE ≤640px'te
   devreye girer, masaüstü/tablet (>640px) DAVRANIŞI TAMAMEN AYNI kalır:
   - .yonetim-tablo (TÜM liste tabloları) yatay kaydırılabilir olur.
   - .sidebar VARSAYILAN OLARAK GİZLİ, sadece #mobilMenuBtn (topbar,
     ☰) ile açılır — 10 kapalı menü grubu bile alt alta içeriği ekran
     dışına itiyordu, artık kullanıcı isteyince açıp bir sekmeye
     tıklayınca otomatik kapanıyor (bkz. app.js, sidebarNav.mobil-acik).
   - Tüm input/select/textarea en az 16px font-size'a zorlanır — iOS
     Safari'de 16px'ten küçük yazı tipi olan bir alana dokunulunca
     tarayıcı SAYFAYI OTOMATİK YAKINLAŞTIRIYOR (bilinen bir iOS davranışı,
     bug değil) — bu, uygulamanın onlarca yerindeki 13-14px'lik input'larla
     her dokunuşta istenmeyen bir zoom'a yol açıyordu. !important burada
     BİLEREK kullanıldı: amaç tek bir yerde unutulan bir input kalmasın
     diye HER input'u kapsamak, tek etkisi yazı boyutu (düzeni bozmaz). */
@media (max-width: 640px) {
  .yonetim-tablo { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mobil-menu-btn { display: flex; }
  .sidebar { display: none; }
  .sidebar.mobil-acik { display: block; }
  input, select, textarea { font-size: 16px !important; }
}

/* ===== Günlük Kapanış: Envanter Etkisi seçimi ===== */
.gk-envanter-etkisi-bolumu {
  margin: 14px 0; padding: 12px 16px; background: var(--renk-panel); border: 1px solid var(--renk-cizgi); border-radius: 8px;
}
.radio-etiket { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--renk-metin); margin-bottom: 6px; cursor: pointer; }
.radio-etiket input[type="radio"] { cursor: pointer; }

/* ===== "Dosya Seçimi" / "Yükleme" adım kartları (6 Eylül 2026) =====
   Kullanıcı isteği: "altta yer alan seçim ve yükleme kısmını biraz daha
   mükerrersiz yapalım, seçim ve yükleme gibi."
   Önceki hâlde dosya seçici ile Yükle butonu birbirinden kopuktu ve
   aralarında aynı bilgiyi tekrarlayan üç paragraf vardı. Artık iki
   numaralı, başlıklı kart var; açıklamalar (i) ipuçlarına taşındı. */
.gk-adim-karti {
  margin: 14px 0; padding: 12px 16px; background: var(--renk-panel);
  border: 1px solid var(--renk-cizgi); border-radius: 8px;
}
/* Yükleme kartı her iki sınıfı da taşıyor — çift kenarlık/çift boşluk
   olmasın diye ikinci kez uygulanan kutu stilleri sıfırlanıyor. */
.gk-adim-karti.gk-envanter-etkisi-bolumu { margin: 14px 0; padding: 12px 16px; }
.gk-adim-karti-baslik {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--renk-cizgi-soft);
}
.gk-adim-karti-baslik h4 { margin: 0; font-size: 14px; }
.gk-adim-karti-no {
  flex-shrink: 0; width: 21px; height: 21px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--renk-ana); color: #fff; font-size: 12px; font-weight: 700;
}
.gk-adim-karti .satir-form { margin-bottom: 0; }
/* İkincil/parantez içi not — asıl seçenek metnini boğmasın. */
.gk-etiket-not { color: var(--renk-metin-soluk); font-size: 12px; }

/* ===== Gün detayındaki BELİRGİN eylem butonları (6 Eylül 2026) =====
   Kullanıcı isteği: "bu günün dosyası indir ve devirli sonraki gün
   butonları da küçük olmasın, daha belirgin olsun."
   .mini-buton (ince, 11-12px) yerine gerçek bir eylem butonu ölçüsü.
   "Dosya Seç ve Yükle" de aynı sınıfı kullanıyor — üçü de aynı ağırlıkta.
   NOT: eski .gk-hizli-yukle sarmalayıcısı KALDIRILDI; gün detayında artık
   görünür bir dosya seçici yok (kullanıcı isteği: "iki adet dosya seçimi
   var, ekstra gerek yok") — buton gizli input'u tetikliyor. */
.gk-detay-buyuk-buton {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; font-size: 13.5px; font-weight: 700; line-height: 1.2;
  border-radius: 9px; cursor: pointer; transition: var(--gecis);
  background: var(--renk-ana); color: #fff; border: 1px solid var(--renk-ana);
}
.gk-detay-buyuk-buton:hover:not(:disabled) {
  background: var(--renk-ana-koyu); border-color: var(--renk-ana-koyu);
  transform: translateY(-1px);
}
.gk-detay-buyuk-buton:disabled { opacity: .6; cursor: default; transform: none; }

@media (max-width: 640px) {
  /* Telefonda tam genişlik — parmakla rahat basılsın. */
  .gk-detay-buyuk-buton { width: 100%; justify-content: center; }
}

/* ===== Hızlı Sorun Çözümü =====
   Önizleme sonrası çıkan dört ayrı bloğu tek bir çerçevede toplar; amber
   "dikkat gerekiyor" paleti (.ys-mesaj-uyari ile aynı aile) kullanılıyor ki
   sayfadaki nötr bölümlerden ayrışsın. */
.gk-sorun-bolumu {
  margin: 16px 0; padding: 14px 16px;
  border: 1px solid #fdba74; border-radius: 10px; background: #fff7ed;
}
.gk-sorun-baslik { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.gk-sorun-baslik .alt-baslik { color: #9a3412; }
.gk-sorun-sayaci { font-size: 12.5px; font-weight: 700; color: #9a3412; }
/* İçerideki blokların üst boşlukları çerçeve içinde fazla geliyordu. */
.gk-sorun-bolumu > div > .alt-baslik:first-child { margin-top: 12px !important; }
.gk-sorun-bolumu > div:first-of-type > .alt-baslik:first-child { margin-top: 0 !important; }

/* --- Takvimde bir güne tıklanınca çıkan "o günün sorunları" kartı --- */
.gk-gun-sorun-kart {
  background: var(--renk-kart); border: 1px solid var(--renk-cizgi);
  border-radius: 8px; padding: 12px 14px; margin-bottom: 12px;
}
.gk-gun-sorun-kart.gk-gun-sorun-temiz { color: #166534; border-color: #bbf7d0; background: #f0fdf4; font-size: 13px; }
.gk-gun-sorun-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.gk-gun-sorun-grup { margin-bottom: 10px; }
.gk-gun-sorun-grup-baslik {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--renk-metin); margin-bottom: 4px;
}
.gk-gun-sorun-adet {
  background: var(--renk-cizgi); color: var(--renk-metin-soluk);
  border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 700;
}
.gk-gun-sorun-satir {
  font-size: 12.5px; line-height: 1.5; color: var(--renk-metin-soluk);
  padding: 3px 0 3px 10px; border-left: 2px solid var(--renk-cizgi); margin-left: 2px;
}
.gk-gun-sorun-aksiyonlar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* "Bu günün uyuşmazlıkları seçimle çözülmüş" notu — listenin sebepleri
   görünür kalır ama artık çözülmüş oldukları belli olur. */
/* Yüklemede "Excel'i kullan" ile düzeltilmiş stok farkları — sorun değil, bilgi (31 Ekim 2026). */
.gk-gun-duzeltilen-miktar {
  margin: 8px 0 10px; padding: 6px 10px; border: 1px solid #bbf7d0; border-radius: 8px;
  background: #f0fdf4; color: #166534; font-size: 12.5px;
}
.gk-gun-duzeltilen-miktar summary { cursor: pointer; font-weight: 600; }
.gk-gun-duzeltilen-miktar .gk-gun-sorun-satir { color: inherit; }
[data-tema="koyu"] .gk-gun-duzeltilen-miktar { border-color: rgba(74, 222, 128, .4); background: rgba(74, 222, 128, .1); color: #86efac; }
.gk-gun-sorun-cozuldu-not {
  background: #fff7ed; border: 1px solid #fdba74; color: #9a3412;
  border-radius: 8px; padding: 8px 12px; font-size: 12.5px; line-height: 1.5; margin-bottom: 10px;
}

/* Bölümün EN ALTI: açıklama + "Seçimleri Onayla" (kullanıcı isteği —
   tüm seçimler yapıldıktan sonra basılacak son adım). */
.gk-sorun-alt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid #fdba74;
}
.gk-sorun-alt .bilgi-metni { flex: 1 1 240px; }
@media (max-width: 640px) {
  .gk-sorun-alt .gk-detay-buyuk-buton { width: 100%; }
}

/* ===== Küçük "ⓘ" ipucu ikonu — kalabalık bilgi paragraflarını sadeleştirmek
   için (Task #188, kullanıcı isteği: "açıklama/yardım alt metinlerini daha
   sade yapalım... üzerine gelince görünür olsun"). Ayrıntı, native `title`
   niteliğinde tutulur (fare ile üzerine gelince ya da Tab+klavye odağıyla
   görünür) — ekstra bir JS tooltip kütüphanesi GEREKMEZ. ===== */
.ipucu-ikon {
  display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px;
  border-radius: 50%; background: var(--renk-ana-yumusak); color: var(--renk-ana-koyu); font-size: 11px;
  font-style: normal; cursor: help; vertical-align: middle; margin-left: 2px;
}

/* ===== Devir Takip takvimi (Task #187, kullanıcı isteği: şubeler için gün
   gün onay/uyarı takvimi) — bkz. GunlukKapanisController.DevirTakip.cs. ===== */
.gk-takvim-lejant { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0; font-size: 12px; color: var(--renk-metin-soluk); }
.gk-takvim-lejant span { display: inline-flex; align-items: center; gap: 5px; }
.gk-takvim-nokta { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.gk-takvim-nokta-temiz { background: var(--renk-yesil); }
.gk-takvim-nokta-supheli { background: var(--renk-kirmizi); }
.gk-takvim-nokta-bilinmiyor { background: #f59e0b; }
.gk-takvim-nokta-bos { background: var(--renk-cizgi); }
.gk-takvim-gun-adlari, .gk-takvim-izgara {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}
.gk-takvim-gun-adlari { margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--renk-metin-soluk); text-align: center; }
.gk-takvim-gun {
  /* min-height 76→96→122: önce mini eylem şeridi (.gk-gun-mini-serit), sonra
     üç satırlık tutar bloğu (.gk-gun-tutarlar) eklendi. Sabit bir taban boy,
     verisi olan ve olmayan günlerin AYNI boyda kalmasını sağlıyor. */
  position: relative; min-height: 122px; padding: 8px 6px 7px; border: 1px solid var(--renk-cizgi); border-radius: 10px;
  background: var(--renk-kart); cursor: pointer; transition: var(--gecis);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px;
  text-align: center;
}
.gk-takvim-gun:hover { border-color: var(--renk-ana); box-shadow: 0 0 0 1px var(--renk-ana) inset; transform: translateY(-1px); }
.gk-takvim-gun-numara { font-size: 15px; font-weight: 700; line-height: 1.1; }
.gk-takvim-gun.gk-takvim-gun-disi-ay { opacity: .35; cursor: default; }
.gk-takvim-gun.gk-takvim-gun-disi-ay:hover { border-color: var(--renk-cizgi); box-shadow: none; }
.gk-takvim-gun.gk-takvim-gun-bos { background: transparent; border-style: dashed; }
.gk-takvim-gun.gk-takvim-gun-dolu { border-color: #bbf7d0; background: #f0fdf4; }
.gk-takvim-gun.gk-takvim-gun-supheli { border-color: var(--renk-kirmizi-cizgi); background: var(--renk-kirmizi-soft); }
/* "Seçim yapıldı" — amber; yeşil (temiz) ile kırmızı (çözülmemiş) arasında
   kendi durumu var: uyuşmazlık vardı, kullanıcı karar verdi. */
.gk-takvim-gun.gk-takvim-gun-cozuldu { border-color: #fdba74; background: #fff7ed; }
/* Kapalı gün: kesik çizgili "boş" görünümünden çıkar, sakin dolu bir kutu
   olur — bakan kişi "burada eksik var" diye düşünmesin. */
.gk-takvim-gun.gk-takvim-gun-kapali {
  border-style: solid; border-color: var(--renk-ana-acik);
  background: var(--renk-ana-yumusak); opacity: .85;
}
.gk-takvim-gun.gk-takvim-gun-kapali .gk-takvim-gun-numara { color: var(--renk-ana-koyu); }
.gk-takvim-gun.gk-takvim-gun-cozuldu .gk-takvim-gun-numara { color: #9a3412; }
.gk-takvim-gun.gk-takvim-gun-secili { box-shadow: 0 0 0 2px var(--renk-ana) inset; }
.gk-takvim-gun.gk-takvim-gun-bugun .gk-takvim-gun-numara { color: var(--renk-ana); text-decoration: underline; }
/* Koyu tema (22 Ekim 2026): yukarıdaki açık yeşil/turuncu sabit renkler koyu
   zeminde gün numarasını ve tutarları okunmaz yapıyordu. */
[data-tema="koyu"] .gk-takvim-gun.gk-takvim-gun-dolu { border-color: rgba(34, 197, 94, .45); background: rgba(34, 197, 94, .12); }
[data-tema="koyu"] .gk-takvim-gun.gk-takvim-gun-cozuldu { border-color: rgba(251, 146, 60, .5); background: rgba(251, 146, 60, .12); }
[data-tema="koyu"] .gk-takvim-gun.gk-takvim-gun-cozuldu .gk-takvim-gun-numara { color: #fdba74; }
[data-tema="koyu"] .gk-takvim-gun.gk-takvim-gun-supheli .gk-takvim-gun-numara { color: #fca5a5; }
[data-tema="koyu"] .gk-takvim-gun-ikon-yuklendi { color: #4ade80; }
[data-tema="koyu"] .gk-takvim-gun-ikon-supheli { color: #f87171; }
[data-tema="koyu"] .gk-takvim-gun-ikon-cozuldu { color: #fb923c; }
.gk-takvim-gun-ozet { font-size: 11px; color: var(--renk-metin-soluk); line-height: 1.3; font-variant-numeric: tabular-nums; }

/* ===== AI ASİSTAN (7 Eylül 2026) =====
   Sağ altta sabit bir düğme ve ondan açılan sohbet paneli. Sekmeden
   bağımsız (#uygulama içinde, .sekme dışında) — kullanıcı isteği gereği
   giriş sonrası HER ekranda aynı yerde duruyor.
   z-index modalların (4000) ALTINDA: bir onay modalı açıkken asistan onun
   önüne geçmemeli. */
/* Düğme "hap" biçiminde: adı (AKTAI) yazılı olsun diye — kullanıcı isteği
   gereği asistanın bir ADI var ve o ad görünmeli. */
.ai-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 3500;
  height: 48px; padding: 0 18px 0 14px; border-radius: 24px;
  border: none; cursor: pointer;
  background: var(--renk-ana); color: #fff;
  box-shadow: var(--golge-hover);
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .04em;
  transition: transform var(--sure-normal) var(--ease-out), background-color var(--gecis), opacity var(--gecis);
}
.ai-fab svg { width: 22px; height: 22px; flex-shrink: 0; }
.ai-fab-ad { line-height: 1; }
.ai-fab-kilit { font-size: 11px; line-height: 1; opacity: .85; }
.ai-fab:hover { transform: translateY(-2px); }

/* GİRİŞ EKRANI: düğme DURUR ama kilitlidir — tıklanınca panel açılmaz,
   sadece bilgi verilir (bkz. app.js aiPaneliAcKapat). Kilit durumu yalnızca
   renkle değil, 🔒 rozeti ve başlık metniyle de anlatılır. */
.ai-fab-kilitli {
  background: rgba(255, 255, 255, .14); color: #eaf2ff;
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: none; cursor: not-allowed; opacity: .85;
}
.ai-fab-kilitli:hover { transform: none; }

/* Giriş var ama model bağlı değil: gri — tıklanabilir kalır (panelde ne
   yapılacağı yazar) ama "hazır" izlenimi vermez. */
.ai-fab-kapali { background: var(--renk-metin-soluk); }

.ai-panel {
  position: fixed; right: 20px; bottom: 84px; z-index: 3500;
  width: min(380px, calc(100vw - 40px)); max-height: min(560px, calc(100vh - 130px));
  display: flex; flex-direction: column;
  background: var(--renk-kart); color: var(--renk-metin);
  border: 1px solid var(--renk-cizgi); border-radius: 14px;
  box-shadow: var(--golge-derin); overflow: hidden;
  animation: aiPanelGir .22s var(--ease-out);
}
@keyframes aiPanelGir { from { opacity: 0; transform: translateY(10px); } }

.ai-panel-ust {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid var(--renk-cizgi);
  background: var(--renk-panel); font-size: 14px;
}
.ai-panel-durum { margin-left: auto; font-size: 11px; color: var(--renk-metin-soluk); }
.ai-panel-kapat { background: none; border: none; cursor: pointer; font-size: 15px; color: var(--renk-metin-soluk); padding: 2px 4px; }

/* Sesli sohbet modu düğmesi ve durum şeridi (7 Eylül 2026).
   Durum yalnızca renkle değil, HER ZAMAN yazıyla da anlatılır
   ("Dinliyorum…", "Düşünüyorum…", "AKTAI konuşuyor…") — kullanıcı sesli
   moddayken ekrana bakmadan da ne olduğunu bilmeli, baktığındaysa net
   görmeli. aria-live ile ekran okuyucuya da duyurulur. */
.ai-sesli-btn {
  background: none; border: 1px solid var(--renk-cizgi); border-radius: 8px;
  cursor: pointer; font-size: 13px; padding: 3px 7px; line-height: 1;
  color: var(--renk-metin-soluk); transition: var(--gecis);
}
.ai-sesli-btn:hover { color: var(--renk-metin); }
.ai-sesli-btn.aktif { background: var(--renk-ana); border-color: var(--renk-ana); color: #fff; }

.ai-ses-durumu {
  padding: 7px 14px; font-size: 12px; font-weight: 600;
  border-bottom: 1px solid var(--renk-cizgi);
  display: flex; align-items: center; gap: 7px;
}
/* Ses seçici — sesli modda görünür. Seçeneklerde "yerel / ÇEVRİMİÇİ"
   etiketi var; kullanıcı gizlilik sonucunu görmeden seçim yapmasın. */
.ai-ses-ayar {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-bottom: 1px solid var(--renk-cizgi);
  background: var(--renk-panel); font-size: 11.5px;
}
.ai-ses-ayar label { color: var(--renk-metin-soluk); flex-shrink: 0; }
.ai-ses-ayar select {
  flex: 1; min-width: 0; font-size: 11.5px; padding: 4px 6px;
  border: 1px solid var(--renk-cizgi); border-radius: 7px;
  background: var(--renk-kart); color: var(--renk-metin);
}
.ai-ses-ayar .mini-buton { font-size: 11px; padding: 4px 9px; flex-shrink: 0; }

.ai-ses-dinliyor { background: rgba(220,38,38,.10); color: var(--renk-kirmizi); }
.ai-ses-dusunuyor { background: var(--renk-ana-yumusak); color: var(--renk-ana); }
.ai-ses-konusuyor { background: rgba(22,163,74,.12); color: var(--renk-yesil); }
.ai-panel-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--renk-yesil); flex-shrink: 0; }
.ai-nokta-kapali { background: var(--renk-metin-soluk); }

.ai-mesajlar { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.ai-mesaj {
  padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5;
  max-width: 88%; white-space: pre-wrap; word-break: break-word;
}
.ai-mesaj-kullanici { align-self: flex-end; background: var(--renk-ana); color: #fff; border-bottom-right-radius: 4px; }
.ai-mesaj-asistan { align-self: flex-start; background: var(--renk-panel); border-bottom-left-radius: 4px; }
.ai-mesaj-sistem { align-self: stretch; max-width: 100%; background: var(--renk-ana-yumusak); font-size: 12px; }
.ai-mesaj-uyari { background: var(--renk-kirmizi-soft); color: var(--renk-metin); }
.ai-mesaj-bekliyor { opacity: .6; font-style: italic; }
.ai-kaynak { margin-top: 6px; font-size: 10.5px; color: var(--renk-metin-soluk); }

/* Modelin cümlesinin ALTINDA duran GERÇEK veriler. Varsayılan açık ve
   görsel olarak ayrık: modelin metni YORUM, bu blok ÖLÇÜM. Küçük modeller
   sayı karıştırabildiği için kullanıcı doğruyu her zaman burada görmeli. */
.ai-veri { margin-top: 8px; border-top: 1px solid var(--renk-cizgi); padding-top: 7px; }
.ai-veri > summary { cursor: pointer; font-size: 11px; font-weight: 600; color: var(--renk-ana); }
.ai-veri pre {
  margin: 6px 0 0; padding: 8px 10px; border-radius: 8px;
  background: var(--renk-kart); border: 1px solid var(--renk-cizgi);
  font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  color: var(--renk-metin);
}

.ai-giris { display: flex; align-items: flex-end; gap: 6px; padding: 9px 10px; border-top: 1px solid var(--renk-cizgi); }
.ai-giris textarea {
  flex: 1; resize: none; border: 1px solid var(--renk-cizgi); border-radius: 10px;
  padding: 8px 10px; font-size: 13px; font-family: inherit; line-height: 1.4;
  background: var(--renk-kart); color: var(--renk-metin); max-height: 120px;
}
.ai-mik, .ai-gonder {
  border: 1px solid var(--renk-cizgi); background: var(--renk-panel);
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer; flex-shrink: 0;
  font-size: 14px; color: var(--renk-metin); transition: var(--gecis);
}
.ai-gonder { background: var(--renk-ana); color: #fff; border-color: var(--renk-ana); }
.ai-mik:hover, .ai-gonder:hover { filter: brightness(1.08); }
/* Kayıt sürüyor: nabız + kırmızı — ayrıca düğme başlığı da değişiyor,
   durum yalnızca renkle anlatılmıyor. */
.ai-mik-aktif { background: var(--renk-kirmizi); color: #fff; border-color: var(--renk-kirmizi); animation: aiMikNabiz 1.2s ease-out infinite; }
@keyframes aiMikNabiz {
  0% { box-shadow: 0 0 0 0 rgba(220,38,38,.55); }
  70% { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
  100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}

@media (max-width: 640px) {
  .ai-panel { right: 10px; left: 10px; width: auto; bottom: 76px; }
  .ai-fab { right: 14px; bottom: 14px; width: 46px; height: 46px; }
}

/* ===== ŞABLON OLUŞTURMA IZGARASI (7 Eylül 2026) =====
   Excel'in görünümünü taklit eder: satır/sütun başlıkları, ince ızgara
   çizgileri, hücre içinde kenarlıksız giriş kutuları.

   ÜÇ HÜCRE TÜRÜ, GÖRSEL OLARAK AYRIK — kullanıcı neye dokunabileceğini
   denemeden anlamalı:
     .sab-h-formul → gri zemin + italik: Excel hesaplar, kilitli
     .sab-h-etiket → şablonun sabit yazısı, kilitli
     .sab-h-giris  → beyaz, yazılabilir (odakta marka rengiyle çerçevelenir)
   Kilit durumu yalnızca renkle anlatılmıyor: formül hücrelerinde title
   ipucu var ve giriş hücrelerinde gerçek bir <input> imleci beliriyor. */
.sab-sekmeler { display: flex; gap: 3px; flex-wrap: wrap; margin: 12px 0 0; border-bottom: 1px solid var(--renk-cizgi); }
.sab-sekme {
  border: 1px solid var(--renk-cizgi); border-bottom: none; background: var(--renk-panel);
  padding: 7px 13px; border-radius: 8px 8px 0 0; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--renk-metin-soluk);
  margin-bottom: -1px; transition: var(--gecis); white-space: nowrap;
}
.sab-sekme:hover { color: var(--renk-metin); }
.sab-sekme.aktif { background: var(--renk-kart); color: var(--renk-ana); border-bottom: 1px solid var(--renk-kart); }

/* Izgara kendi kutusunda kayar — sayfa gövdesi ASLA yatay kaymaz. */
.sab-izgara-sarmal { overflow: auto; max-height: 70vh; border: 1px solid var(--renk-cizgi); border-top: none; background: var(--renk-kart); }
.sab-izgara { border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.sab-izgara th, .sab-izgara td { border: 1px solid var(--renk-cizgi-soft); padding: 0; }

/* Satır/sütun başlıkları kaydırırken yerinde kalır (Excel'deki gibi). */
.sab-izgara thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--renk-panel); color: var(--renk-metin-soluk);
  font-size: 10.5px; font-weight: 600; text-align: center; padding: 3px 2px;
}
.sab-satir-no {
  position: sticky; left: 0; z-index: 1;
  background: var(--renk-panel); color: var(--renk-metin-soluk);
  font-size: 10.5px; font-weight: 600; text-align: center;
  min-width: 34px; padding: 2px 4px;
}
.sab-kose { position: sticky; left: 0; z-index: 3; background: var(--renk-panel); min-width: 34px; }

.sab-h { height: 22px; padding: 2px 5px; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sab-h-formul { background: var(--renk-cizgi-soft); color: var(--renk-metin-soluk); font-style: italic; }
.sab-h-etiket { color: var(--renk-metin); }
.sab-h-giris { padding: 0; }
.sab-h-giris input {
  width: 100%; height: 22px; border: none; background: transparent;
  padding: 2px 5px; font-size: 12px; font-family: inherit; color: var(--renk-metin);
  text-align: inherit;
}
.sab-h-giris input:focus {
  outline: 2px solid var(--renk-ana); outline-offset: -2px;
  background: var(--renk-ana-yumusak);
}

/* AKTAI ile doldurma bölümü — öneriler tabloda gösterilir ve HER SATIR
   kullanıcı onayına bağlıdır. "Şu an" ve "Önerilen" sütunları yan yana:
   kullanıcı neyin değişeceğini görmeden onaylamasın. */
.sab-ai {
  margin: 10px 0 4px; padding: 11px 13px;
  border: 1px solid var(--renk-ana-acik); border-radius: var(--radius);
  background: var(--renk-ana-yumusak);
}
.sab-ai-giris { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.sab-ai-giris input {
  flex: 1; min-width: 220px; padding: 8px 11px; font-size: 13px;
  border: 1px solid var(--renk-cizgi); border-radius: 9px;
  background: var(--renk-kart); color: var(--renk-metin);
}
.sab-ai-bekle { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--renk-metin-soluk); padding: 8px 0; }
.sab-ai-tablo { font-size: 12.5px; margin-top: 4px; }
.sab-ai-tablo code { font-size: 12px; }
.sab-ai-eski { color: var(--renk-metin-soluk); }
.sab-ai-yeni { font-weight: 700; color: var(--renk-ana); }
.sab-ai-red { color: var(--renk-kirmizi); font-size: 11.5px; }

/* ===== SATIŞ SATIRI ÖNİZLEMESİ ("fiş") — 7 Eylül 2026 =====
   Kullanıcı isteği: söylenen satışın ekrana YAZILMASI. Hücre adresleri tek
   başına okunaklı değil ("D4=2, J4=1000"); bunun yerine sayılar bir fiş
   düzeninde, alt alta ve sağa yaslı gösterilir — göz, tutar sütununu tek
   bakışta toplayabilsin.

   Sayılar tabular-nums ile hizalanır; oransız yazı tipinde rakam genişlikleri
   farklı olduğu için sütun kayar ve kontrol etmek zorlaşırdı. */
/* "Onay sormadan yaz" anahtarı — ikincil bir tercih, giriş satırının altında
   küçük ve sessiz durur; ana eylemle (AKTAI ile Doldur) yarışmamalı. */
.sab-ai-otomatik {
  display: flex; align-items: center; gap: 7px;
  margin-top: 7px; font-size: 12.5px; color: var(--renk-metin-soluk);
  cursor: pointer; user-select: none;
}
.sab-ai-otomatik em { font-style: normal; opacity: .75; }

/* ===== TÜM CARİ EŞLEŞTİRMELERİ (8 Eylül 2026) =====
   "Belirsiz" bölümünden ayrı, sakin bir liste: burada karar BEKLENMİYOR,
   sadece ne olacağı gösteriliyor. Bu yüzden uyarı rengi yok; yalnızca
   gerçekten değişen satır vurgulanır. */
.gk-cari-bolum {
  margin-top: 18px; padding: 12px 14px;
  border: 1px solid var(--renk-cizgi); border-radius: 10px;
  background: var(--renk-kart);
}
.gk-cari-baslik {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.gk-cari-baslik span { font-size: 11.5px; color: var(--renk-metin-soluk); }
.gk-cari-ozet { padding: 8px 12px; border-radius: 8px; font-size: 12.5px; margin-bottom: 8px; border-left: 3px solid transparent; }
.gk-cari-ozet-ayni { background: var(--renk-panel); border-left-color: var(--renk-ana-acik); }
.gk-cari-ozet-degisik { background: rgba(234,179,8,.12); border-left-color: #d97706; }
.gk-cari-ozet div { margin-top: 3px; }
.gk-cari-tablo { font-size: 12.5px; }
.gk-cari-excel { font-weight: 600; }
.gk-cari-hedef { font-weight: 600; }
.gk-cari-ek { display: block; font-weight: 400; font-size: 11px; color: var(--renk-metin-soluk); }
.gk-cari-kaynak { font-size: 11.5px; color: var(--renk-metin-soluk); }
.gk-cari-rozet {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 999px; font-size: 10.5px; font-weight: 700;
  background: var(--renk-ana-yumusak); color: var(--renk-ana);
}
.gk-cari-degisti td { background: var(--renk-ana-yumusak); }

/* ===== KOMUT SIRASI — 8 Eylül 2026 =====
   Söylenen cümleler burada birikir, şablona ancak "Tabloya İşle" ile yazılır.
   Kasten "henüz yazılmadı" hissi veriyor: kesikli çerçeve + soluk zemin.
   Yazılmış veriyle karıştırılmamalı. */
.sab-kuyruk {
  margin-top: 10px; padding: 10px 12px;
  border: 1px dashed var(--renk-ana-acik); border-radius: 10px;
  background: var(--renk-panel);
}
.sab-kuyruk-baslik {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.sab-kuyruk-baslik strong { font-size: 13.5px; }
.sab-kuyruk-baslik span { font-size: 11.5px; color: var(--renk-metin-soluk); }
/* Ön onay, hedef sayfanın kendi sütunlarıyla MİNİ BİR ŞABLON olarak çizilir
   (kullanıcı isteği: "şablon halinde ön onayda bekleyecek"). Aşağıdaki asıl
   ızgaraya benzemesi kasıtlı — ama kesikli dış çerçeve ve soluk zemin
   "henüz yazılmadı"yı ayırt ettirir. */
.sab-onay-sayfa { margin-bottom: 10px; }
.sab-onay-sayfa-ad {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 12px; font-weight: 700; margin-bottom: 4px;
}
.sab-onay-sayfa-ad span { font-weight: 400; font-size: 11.5px; color: var(--renk-metin-soluk); }
/* Geniş tablo SAYFAYI değil KENDİNİ kaydırır — gövde yatay kaymamalı. */
.sab-onay-kaydir { overflow-x: auto; border: 1px solid var(--renk-cizgi); border-radius: 8px; background: var(--renk-kart); }
.sab-onay-tablo { border-collapse: collapse; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
.sab-onay-tablo th, .sab-onay-tablo td {
  padding: 5px 9px; border-bottom: 1px solid var(--renk-cizgi);
  white-space: nowrap; text-align: right;
}
.sab-onay-tablo thead th {
  background: var(--renk-panel); font-size: 11px; font-weight: 700;
  text-align: right; position: sticky; top: 0;
}
.sab-onay-tablo tbody tr:last-child td, .sab-onay-tablo tbody tr:last-child th { border-bottom: none; }
/* İlk veri sütunu (müşteri) metindir — sola yaslanır. */
.sab-onay-tablo th:nth-child(2), .sab-onay-tablo td:nth-child(2) { text-align: left; font-weight: 600; }
.sab-onay-satirno {
  background: var(--renk-panel); color: var(--renk-metin-soluk);
  font-size: 11px; font-weight: 700; text-align: center !important;
}
/* Ön onayda düzeltme (8 Eylül 2026): hücreler doğrudan yazılabilir.
   Input, hücreyle aynı görünür — kutu çizgisi yok ki tablo "form" gibi
   değil "tablo" gibi okunsun; odaklanınca çerçevelenir. */
.sab-onay-giris {
  width: 100%; min-width: 70px; box-sizing: border-box;
  border: 1px solid transparent; border-radius: 5px;
  padding: 2px 5px; font: inherit; text-align: inherit;
  background: transparent; color: inherit;
  font-variant-numeric: tabular-nums;
}
.sab-onay-giris:hover { border-color: var(--renk-cizgi); }
.sab-onay-giris:focus {
  outline: none; border-color: var(--renk-ana);
  background: var(--renk-kart); box-shadow: 0 0 0 2px var(--renk-ana-yumusak);
}
/* Elle düzeltilmiş hücre işaretlenir — hangi değerin AKTAI'den, hangisinin
   kullanıcıdan geldiği onaydan önce görünsün. */
.sab-onay-duzeltildi { background: var(--renk-ana-yumusak); }
.sab-onay-duzeltildi .sab-onay-giris { font-weight: 700; }

.sab-onay-formul { color: var(--renk-metin-soluk); font-style: italic; }
.sab-onay-formul small { display: block; font-size: 9px; font-style: normal; opacity: .7; }
.sab-onay-uyari-satir td {
  text-align: left !important; white-space: normal;
  font-size: 11.5px; color: #b45309; background: rgba(234,179,8,.10);
}
.sab-onay-sil { padding: 2px 4px !important; }
.sab-kuyruk-sil {
  flex: 0 0 auto; border: none; background: transparent; cursor: pointer;
  color: var(--renk-metin-soluk); font-size: 14px; line-height: 1;
  padding: 3px 5px; border-radius: 6px;
}
.sab-kuyruk-sil:hover { background: var(--renk-kirmizi-soft); color: var(--renk-kirmizi); }
.sab-kuyruk-eylem { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }

.sab-fis {
  margin: 8px 0 10px; padding: 12px 14px;
  border: 1px solid var(--renk-cizgi); border-radius: 10px;
  background: var(--renk-kart);
}
.sab-fis-baslik {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px solid var(--renk-cizgi);
}
.sab-fis-baslik strong { font-size: 15px; letter-spacing: .2px; }
.sab-fis-baslik span { font-size: 11.5px; color: var(--renk-metin-soluk); }
.sab-fis-satir {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 4px 0; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.sab-fis-satir > span:last-child { white-space: nowrap; }
.sab-fis-ara { color: var(--renk-metin-soluk); }
.sab-fis-ara-toplam {
  margin-top: 4px; padding-top: 7px; border-top: 1px solid var(--renk-cizgi);
  font-weight: 700;
}
.sab-fis-odeme { color: var(--renk-metin-soluk); }
.sab-fis-kalan {
  margin-top: 4px; padding-top: 7px; border-top: 2px solid var(--renk-ana-acik);
  font-weight: 700; font-size: 14px; color: var(--renk-ana);
}
.sab-fis-not {
  font-size: 12px; color: var(--renk-metin-soluk);
  background: var(--renk-panel); border-radius: 8px;
  padding: 8px 12px; margin-bottom: 6px;
}
.sab-fis-not ul { margin: 5px 0 0; padding-left: 18px; }
.sab-fis-not li { margin: 2px 0; }

/* İşlenen satır ızgarada kısa süre vurgulanır — 400 satır içinde neyin
   değiştiğini kullanıcının aramasına gerek kalmasın. */
.sab-satir-vurgu td { animation: sabSatirVurgu 2.4s var(--ease-out); }
@keyframes sabSatirVurgu {
  0%, 55% { background: var(--renk-ana-yumusak); }
  100% { background: transparent; }
}

.sab-uyari { padding: 8px 12px; border-radius: 8px; font-size: 12.5px; margin-bottom: 6px; border-left: 3px solid transparent; }
.sab-uyari-bilgi { background: var(--renk-panel); border-left-color: var(--renk-ana-acik); }
.sab-uyari-uyari { background: rgba(234,179,8,.12); border-left-color: #d97706; }
.sab-uyari-hata { background: var(--renk-kirmizi-soft); border-left-color: var(--renk-kirmizi); }

/* ===== GİRİŞ EKRANI: CANLI BAĞLI ŞUBELER ŞERİDİ (7 Eylül 2026) =====
   Giriş kartının ALTINDA, animasyonlu koyu-mavi zeminin üzerinde durur.
   Kartın kendi rengini kullanmaz: zemin koyu olduğu için burada AÇIK ink +
   yarı saydam cam yüzey ("frosted") kullanılıyor — böylece hem okunur hem
   de arka plandaki hareketli ışıklar içinden geçebiliyor.

   ⚠️ İÇERİK KISITI: burada yalnızca SAYI ve ŞUBE ADI görünür. Kullanıcı adı /
   IP / cihaz adı BİLEREK yok — bkz. index.html'deki #loginAktifSerit yorumu
   ve AktifKullanicilarController.AnonimOzet.

   z-index: 1 — giriş ekranındaki bulanık ışık lekelerinin (.login-blob,
   z-index 0) ÜSTÜNDE kalması için; aksi halde şerit lekelerin altında
   kalıp soluklaşırdı. */
/* Ölçü notu (7 Eylül 2026, kullanıcı isteği: "az küçültelim"): şerit giriş
   kartının ALTINDA ikincil bir bilgi — kartla boy ölçüşmemeli. Genişlik
   420→340px, iç boşluk ve yazı puntoları bir kademe düşürüldü. */
.login-aktif {
  position: relative; z-index: 1;
  margin-top: 14px; width: min(340px, 90vw);
  padding: 9px 13px; border-radius: 12px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px);
  color: #eaf2ff;
  animation: loginAktifGir .5s var(--ease-out);
}
@keyframes loginAktifGir { from { opacity: 0; transform: translateY(8px); } }

.login-aktif-ust { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; }
.login-aktif-not { color: rgba(234, 242, 255, .58); font-size: 10.5px; margin-left: auto; }
.login-aktif-rozetler { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.login-aktif-rozet {
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .18);
  color: #eaf2ff;
}
.login-aktif-rozet-merkez { background: rgba(89, 165, 255, .22); border-color: rgba(89, 165, 255, .40); }

/* Canlı noktası — giriş zemininde parlak yeşil. Durum yalnızca renkle
   anlatılmaz: yanında "Aktif N kullanıcı" yazısı var. */
.login-aktif-nokta {
  width: 7px; height: 7px; border-radius: 50%; background: #4ade80;
  display: inline-block; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, .6);
  animation: loginAktifNabiz 2s ease-out infinite;
}
@keyframes loginAktifNabiz {
  0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); }
  70%  { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* ===== CANLI İZLEME: AKTİF KULLANICILAR (7 Eylül 2026) =====
   Ana menünün üstündeki şerit + Yönetim ekranındaki tablo.
   Yeşil nokta "canlı" sinyali; ama durum ASLA sadece renkle anlatılmaz —
   yanında her zaman "Aktif N Kullanıcı" yazısı ve "son N dakika içinde
   işlem yapanlar" açıklaması var. */
.aktif-kul-serit {
  margin: 0 0 18px; padding: 12px 14px;
  border: 1px solid var(--renk-cizgi); border-radius: var(--radius);
  background: var(--renk-kart);
}
.aktif-kul-serit-ust { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.aktif-kul-not { font-size: 12px; color: var(--renk-metin-soluk); }
.aktif-kul-rozetler { display: flex; flex-wrap: wrap; gap: 8px; }
.aktif-kul-rozet {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  background: var(--renk-panel); border: 1px solid var(--renk-cizgi);
  font-size: 13px; font-weight: 600; color: var(--renk-metin);
}
.aktif-kul-rozet small { font-weight: 400; color: var(--renk-metin-soluk); font-size: 11.5px; }
.aktif-kul-durum { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }

/* Yanıp sönen canlı noktası — hareket, "bu veri donmuş değil" der.
   prefers-reduced-motion'da sabit kalır (bkz. dosya sonundaki blok). */
.aktif-kul-nokta {
  width: 8px; height: 8px; border-radius: 50%; background: var(--renk-yesil);
  display: inline-block; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(22,163,74,.55);
  animation: aktifKulNabiz 2s ease-out infinite;
}
@keyframes aktifKulNabiz {
  0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}

/* ===== Hızlı Şablon Oluştur — ADIM 1 takvimi (7 Eylül 2026) =====
   Gün kutuları Günlük Veri İşlemleri'ndeki .gk-takvim-* sınıflarını
   YENİDEN KULLANIR (ikinci bir görsel dil üretilmedi). Buradaki tek fark,
   seçim amaçlı olduğu için biraz daha derli toplu durması. */
.hg-takvim-bolumu {
  margin: 12px 0 16px; padding: 12px 14px;
  border: 1px solid var(--renk-cizgi); border-radius: var(--radius);
  background: var(--renk-panel);
}
.hg-takvim-ust { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.hg-takvim-ust strong { font-size: 14px; min-width: 150px; }
.hg-takvim-secili { margin-left: auto; font-size: 12px; color: var(--renk-metin-soluk); }
/* Seçim takviminde gün kutuları daha alçak: burada tutar/mini ikon
   gösterilmiyor, sadece "hangi gün" seçiliyor. */
.hg-takvim-bolumu .gk-takvim-gun { min-height: 64px; }
.hg-takvim-bolumu .gk-gun-mini-serit,
.hg-takvim-bolumu .gk-gun-tutarlar { display: none; }

/* ===== TABLO DIŞA AKTARIM ÇUBUĞU (7 Eylül 2026) =====
   Her rapor tablosunun ÜSTÜNE JS ile takılır (bkz. app.js disaAktarimBagla).
   Sağa dayalı ve küçük: rapor içeriğinin önüne geçmemeli, ama arandığında
   hep aynı yerde bulunmalı. Tablonun üstünde durur — uzun raporlarda alta
   konsa ekranda hiç görünmezdi. */
.disa-aktar-cubugu {
  display: flex; justify-content: flex-end; gap: 6px;
  margin: 0 0 6px; flex-wrap: wrap;
}
.disa-aktar-btn { font-size: 12px; padding: 5px 11px; }
@media print { .disa-aktar-cubugu { display: none; } }

/* ===== DEVİR İNCELEMESİ (7 Eylül 2026) =====
   "Bu günün açılışı, önceki günün kapanışıyla tutuyor mu?" tablosu.
   İki sayı sütunu YAN YANA ve sağa dayalı, tabular rakamla — göz aynı
   basamağı dikey tarayabilsin diye; devir denetiminin tamamı "bu iki sayı
   eşit mi" sorusudur, hizasız gösterim bunu okunmaz yapardı. */
.gk-devir-denetim {
  margin-top: 16px; padding: 14px 16px;
  border: 1px solid var(--renk-cizgi); border-radius: var(--radius);
  background: var(--renk-kart);
}
.gk-devir-denetim-baslik { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.gk-devir-denetim-baslik h4 { margin: 0; font-size: 15px; }
.gk-devir-denetim-baslik .mini-buton { margin-left: auto; }
.gk-devir-yukleniyor { display: flex; align-items: center; gap: 10px; color: var(--renk-metin-soluk); font-size: 13px; padding: 10px 0; }

.gk-devir-ozet {
  padding: 9px 12px; border-radius: 9px; font-size: 13.5px; margin-bottom: 10px;
  border-left: 4px solid transparent;
}
.gk-devir-ozet-temiz { background: rgba(22,163,74,.10); border-left-color: var(--renk-yesil); }
.gk-devir-ozet-sorunlu { background: var(--renk-kirmizi-soft); border-left-color: var(--renk-kirmizi); }
.gk-devir-ozet-bilinmiyor { background: var(--renk-panel); border-left-color: var(--renk-metin-soluk); }

.gk-devir-tablo { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.gk-devir-tablo th {
  text-align: left; font-weight: 600; font-size: 11.5px; color: var(--renk-metin-soluk);
  padding: 5px 8px; border-bottom: 1px solid var(--renk-cizgi); white-space: nowrap;
}
.gk-devir-tablo td { padding: 5px 8px; border-bottom: 1px solid var(--renk-cizgi-soft); }
.gk-devir-tablo th:nth-child(4), .gk-devir-tablo th:nth-child(5) { text-align: right; }
.gk-devir-sayi { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gk-devir-hucre { color: var(--renk-metin-soluk); font-size: 11.5px; white-space: nowrap; }
.gk-devir-durum { width: 22px; text-align: center; font-weight: 700; }
.gk-devir-aciklama { color: var(--renk-metin-soluk); font-size: 11.5px; }

/* Satır durumu — renk TEK BAŞINA anlam taşımaz: her satırın başında ikon
   (✓ / ✕ / ⚠ / –) ve sonunda yazılı açıklama var. */
.gk-devir-ok .gk-devir-durum { color: var(--renk-yesil); }
.gk-devir-hata { background: var(--renk-kirmizi-soft); }
.gk-devir-hata .gk-devir-durum, .gk-devir-hata .gk-devir-aciklama { color: var(--renk-kirmizi); font-weight: 600; }
.gk-devir-uyari { background: rgba(234,179,8,.12); }
.gk-devir-uyari .gk-devir-durum { color: #b45309; }
.gk-devir-notr { opacity: .5; }

.gk-devir-emtia { margin-top: 12px; }
.gk-devir-emtia > summary { cursor: pointer; font-size: 13px; font-weight: 600; padding: 6px 0; }
.gk-devir-notlar { margin-top: 10px; font-size: 12px; color: var(--renk-metin-soluk); display: flex; flex-direction: column; gap: 4px; }

/* Hızlı Sorun Çözümü — "muhtemel sebep" notu (7 Eylül 2026).
   Sorun satırlarından görsel olarak AYRI durur: satırlar OLGU (ne bulundu),
   bu kutu YORUM (neden olmuş olabilir). İkisini aynı biçimde göstermek,
   tahmini ölçüm gibi okutur. */
.gk-gun-sorun-sebep {
  margin: 4px 0 8px; padding: 7px 10px; border-radius: 8px;
  background: var(--renk-ana-yumusak); border-left: 3px solid var(--renk-ana-acik);
  font-size: 12px; line-height: 1.45; color: var(--renk-metin);
}

/* --- Dosya seçimi ve "Önizle ve Değerlendir" (7 Eylül 2026, kullanıcı
   isteği: "dosyaları seç butonunu biraz daha belirgin hale getirelim") ---
   Tarayıcının varsayılan <input type=file> düğmesi gri ve siliktir; kullanıcı
   ekrandaki ilk adımı bulamıyordu. Kesikli çerçeve onu bir "bırakma alanı"
   gibi okutur, hover'da marka rengine döner. */
.gk-dosya-girisi {
  padding: 9px 12px; border: 2px dashed var(--renk-ana-acik); border-radius: 10px;
  background: var(--renk-ana-yumusak); color: var(--renk-metin);
  cursor: pointer; font-size: 13.5px; transition: var(--gecis);
}
.gk-dosya-girisi:hover { border-color: var(--renk-ana); border-style: solid; }
.gk-dosya-girisi::file-selector-button {
  margin-right: 10px; padding: 6px 14px; cursor: pointer;
  border: none; border-radius: 7px; font-weight: 600; font-size: 13px;
  background: var(--renk-ana); color: #fff;
}
.gk-onizle-btn { padding: 10px 20px; font-size: 14px; font-weight: 700; }

/* --- Gün kutusundaki ÜÇ TUTAR (7 Eylül 2026, kullanıcı isteği:
   "satış, tahsilat, veresiye sırayla o kutunun içerisinde yer alsın") ---
   Etiket (Sat/Tah/Ver) soluk ve sabit genişlikte, sayı sağa dayalı —
   böylece üç satır alt alta HİZALI okunur, göz sayıları tarayabilir.
   Renk sadece VERESİYE'de anlam taşıyor (sıfırdan büyükse dikkat çeker);
   diğer ikisi nötr ink — her satırı boyamak kutuyu okunmaz hale getirirdi. */
.gk-gun-tutarlar {
  display: flex; flex-direction: column; gap: 1px; width: 100%;
  font-size: 10.5px; line-height: 1.25; font-variant-numeric: tabular-nums;
  color: var(--renk-metin-soluk);
}
.gk-gun-tutar { display: flex; justify-content: space-between; gap: 4px; padding: 0 2px; }
.gk-gun-tutar i { font-style: normal; opacity: .65; font-size: 9.5px; letter-spacing: .02em; }
.gk-gun-tutar-satis { color: var(--renk-metin); font-weight: 600; }
.gk-gun-tutar-veresiye { color: var(--renk-kirmizi); }

/* --- Gün kutusundaki MİNİ EYLEM İKONLARI (7 Eylül 2026, kullanıcı isteği:
   "her güne ait seçeneklere ait mini ikonlar ile işlem sağlansın") ---
   Kutunun altına oturur. Normalde SOLUK durur (kutuyu görsel olarak
   kalabalıklaştırmasın, gün numarası ve durum ikonu okunaklı kalsın);
   fareyle kutunun üzerine gelince tam görünürlüğe çıkar. Dokunmatik
   cihazlarda hover olmadığı için (aşağıdaki media sorgusu) HER ZAMAN tam
   görünür — aksi halde tablette hiç keşfedilemezlerdi.

   KLAVYE NOTU: bu butonlar bilerek tabindex="-1" — bir aylık takvimde
   30 gün × 3 buton = ~90 ekstra sekme durağı, klavyeyle gezinmeyi
   kullanılamaz hale getirirdi. AYNI üç işlem, güne tıklayınca açılan
   detay panelinde gerçek, adlandırılmış ve sekmeyle erişilebilir
   butonlar olarak duruyor — yani klavye kullanıcısı hiçbir işlevi
   kaybetmiyor, sadece bu kısayolu kullanmıyor. */
.gk-gun-mini-serit {
  display: flex; gap: 3px; margin-top: auto; padding-top: 3px;
  opacity: .32; transition: opacity var(--sure-normal) var(--ease-out);
}
.gk-takvim-gun:hover .gk-gun-mini-serit { opacity: 1; }

.gk-gun-mini {
  width: 20px; height: 20px; padding: 0; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; cursor: pointer;
  border: 1px solid var(--renk-cizgi); border-radius: 5px;
  background: var(--renk-panel); color: var(--renk-metin);
  transition: var(--gecis);
}
.gk-gun-mini:hover {
  background: var(--renk-ana); border-color: var(--renk-ana); color: #fff;
  transform: translateY(-1px);
}
/* "Devret" ikonu bu şeridin ASIL işi — diğerlerinden ayrılsın diye
   markanın rengiyle çerçeveli durur. */
.gk-gun-mini-devir { border-color: var(--renk-ana); color: var(--renk-ana); font-weight: 700; }

@media (hover: none) {
  .gk-gun-mini-serit { opacity: 1; }
  .gk-gun-mini { width: 24px; height: 24px; font-size: 12px; } /* dokunma hedefi büyür */
}
.gk-takvim-gun-unlem { position: absolute; top: 4px; right: 5px; font-size: 12px; line-height: 1; }

/* --- Gün kutusu durum ikonu (6 Eylül 2026, kullanıcı isteği: "günler daha
   ortalı ve ikonlar görünsün, kutucuklar görselliğe hitap etsin") ---
   Her günün durumu artık sadece arka plan rengiyle değil, kutunun
   ORTASINDA tek bir ikonla da anlatılıyor: ✓ yüklendi, ⚠ şüpheli,
   ＋ eksik (tıklanabilir), · gelecek gün. Renk körlüğü/düşük kontrast
   durumunda da okunabilir olması ayrıca bir erişilebilirlik kazancı. */
.gk-takvim-gun-ikon {
  font-size: 17px; line-height: 1; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  min-height: 20px; transition: var(--gecis);
}
.gk-takvim-gun-ikon-yuklendi { color: #16a34a; font-weight: 800; }
.gk-takvim-gun-ikon-supheli { color: #b91c1c; }
/* Uyuşmazlık bulundu AMA kullanıcı seçim yapıp düzeltmeyi uyguladı —
   kırmızı "çözülmemiş" ile karışmasın diye AMBER (kullanıcı isteği,
   6 Eylül 2026: "seçim yapılmış ise sarı olsun"). */
.gk-takvim-gun-ikon-cozuldu { color: #b45309; font-weight: 800; }
/* Kapalı gün (tatil/bayram) — "eksik" DEĞİL; nötr mavi-gri, dikkat
   çekmeyen bir ton (kullanıcı isteği, 6 Eylül 2026). */
.gk-takvim-gun-ikon-kapali { color: var(--renk-ana-acik); }
/* Eksik gün: soluk bir "＋" — kutunun tıklanıp yükleme başlatılabileceğini
   ima eder, üzerine gelince belirginleşir (keşfedilebilirlik). */
.gk-takvim-gun-ikon-eksik { color: var(--renk-metin-soluk); opacity: .45; font-weight: 700; }
.gk-takvim-gun:hover .gk-takvim-gun-ikon-eksik { opacity: 1; color: var(--renk-ana); transform: scale(1.15); }
/* Gelecek gün: eylem yok, sadece yer tutucu. */
.gk-takvim-gun-ikon-gelecek { color: var(--renk-cizgi); }

/* Kilit rozeti SOL üst köşede — ⚠️ sağ üstte olduğu için çakışmaz.
   Önceden gün numarasının yanına metin olarak ekleniyordu ve numarayı
   ortadan kaydırıyordu. */
.gk-takvim-gun-kilit { position: absolute; top: 4px; left: 5px; font-size: 11px; line-height: 1; }

/* Dosya bazlı devir denetimi rozeti (22 Ekim 2026): kırmızı = önceki günün
   kapanışıyla tutmuyor, yeşil = yönetici onayladı (ana kasada düzeltildi).
   "E" = eski (5 sayfalı) şablonla yüklenmiş gün. */
.gk-takvim-gun-devir {
  position: absolute; top: 3px; right: 20px; font-size: 11px; font-weight: 700; line-height: 1;
  color: #fff; background: var(--renk-kirmizi, #dc2626); border-radius: 4px; padding: 1px 3px;
}
.gk-takvim-gun-devir.gk-takvim-gun-devir-onayli { background: var(--renk-yesil, #16a34a); }
.gk-takvim-gun-sablon {
  position: absolute; top: 3px; left: 20px; font-size: 9px; font-weight: 700; line-height: 1;
  color: var(--renk-metin-soluk); border: 1px solid var(--renk-cizgi); border-radius: 3px; padding: 1px 2px;
}

/* Sağ tıkla kilitlenebilen (yönetici + yüklemesi olan) günler: imleç
   "menü var" hissi versin — sağ tık kısayolu tamamen görünmez kalmasın. */
.gk-takvim-gun-kilitlenebilir { cursor: context-menu; }

/* ===== Bekleme göstergesi (6 Eylül 2026, kullanıcı isteği: "önizleniyor
   kısmında bir loading bar veya dairesel döngü") =====
   Önizleme büyük dosyalarda 5-10 saniye sürebiliyor ve ekranda sadece düz
   bir "Önizleniyor..." yazısı vardı — kullanıcı sistemin donduğunu sanıp
   tekrar tıklıyordu. Dönen daire, işlemin SÜRDÜĞÜNÜ görsel olarak belli eder. */
.yukleniyor-satiri { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.yukleniyor-daire {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid var(--renk-cizgi); border-top-color: var(--renk-ana);
  animation: yukleniyorDon .7s linear infinite;
}
@keyframes yukleniyorDon { to { transform: rotate(360deg); } }

/* Hareket azaltma tercihi olan kullanıcılarda dönmesin (erişilebilirlik) —
   daire yine görünür, sadece animasyon durur. */
@media (prefers-reduced-motion: reduce) {
  .yukleniyor-daire { animation: none; border-top-color: var(--renk-ana); }
}
/* Sabit koyu kırmızı — .gk-takvim-gun-supheli hep açık kırmızımsı bir zemin
   kullanır (yukarıda), --renk-kirmizi koyu temada parlak bir tona
   dönebildiğinden burada sabit tutuldu (Cariler'deki .gk-belirsiz-baslik ile
   AYNI gerekçe). */
.gk-takvim-gun.gk-takvim-gun-supheli .gk-takvim-gun-numara { color: #991b1b; }

.gk-takvim-detay {
  margin-top: 14px; padding: 14px 16px; border: 1px solid var(--renk-cizgi); border-radius: 10px; background: var(--renk-panel);
}
.gk-takvim-detay-baslik { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.gk-takvim-detay-baslik h4 { margin: 0; }
/* Kullanıcı isteği (6 Eylül 2026): "gün seçilince altında açılan menülerde
   'dosya            dosya adı' şeklinde boşluklu bir yapı var, onu da
   düzeltelim."
   SEBEP: satır `justify-content: space-between` idi — etiket sola, değer
   SAĞ UCA yapışıyordu; geniş ekranda aralarında kocaman bir boşluk
   kalıyordu. ÇÖZÜM: iki sütunlu ızgara — etiket sabit dar bir sütunda,
   değer HEMEN yanında başlıyor. Uzun dosya adları taşmasın diye değer
   sütununda kelime kırma açık. */
.gk-takvim-detay-satir {
  display: grid; grid-template-columns: minmax(96px, 168px) 1fr; gap: 12px;
  padding: 5px 0; font-size: 13px; border-bottom: 1px solid var(--renk-cizgi-soft);
}
.gk-takvim-detay-satir > span:first-child { color: var(--renk-metin-soluk); }
.gk-takvim-detay-satir > strong { min-width: 0; overflow-wrap: anywhere; }
.gk-takvim-detay-satir:last-of-type { border-bottom: none; }
@media (max-width: 640px) {
  /* Dar ekranda tek sütun — etiket üstte, değer altında. */
  .gk-takvim-detay-satir { grid-template-columns: 1fr; gap: 2px; }
}
.gk-takvim-detay-uyari-listesi { margin: 8px 0; padding: 8px 12px; background: var(--renk-kirmizi-soft); border: 1px solid var(--renk-kirmizi-cizgi); border-radius: 8px; font-size: 12.5px; color: #991b1b; }
.gk-takvim-detay-uyari-listesi div { padding: 2px 0; }
.gk-takvim-detay-aksiyonlar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
@media (max-width: 640px) {
  /* Telefonda tutar gizlenir; gün numarası + durum ikonu kalır — kutu
     küçülse de "bu gün ne durumda" sorusu hâlâ tek bakışta cevaplanır. */
  .gk-takvim-gun { min-height: 54px; padding: 5px 3px; gap: 2px; }
  .gk-takvim-gun-ozet { display: none; }
  .gk-takvim-gun-numara { font-size: 13px; }
  .gk-takvim-gun-ikon { font-size: 14px; min-height: 16px; }
  .gk-takvim-gun-adlari { font-size: 10.5px; }
  .gk-takvim-gun-kilit, .gk-takvim-gun-unlem { font-size: 9.5px; top: 2px; }
  .gk-takvim-gun-kilit { left: 3px; }
  .gk-takvim-gun-unlem { right: 3px; }
  .gk-takvim-gun-devir { right: 15px; top: 2px; font-size: 9px; }
  .gk-takvim-gun-sablon { left: 15px; top: 2px; font-size: 8px; }
}

/* ===== Günlük Excel Dosyasını Yükle — arayüz yenilemesi (6 Eylül 2026) =====
   Kullanıcı isteği: "arayüz olarak zayıf buluyorum, daha interaktif ve
   kullanıcı dostu hale getir; yönetici ekranında gün kilit butonu, user
   kısmında daha user friendly."

   Üç yeni bileşen: (1) adım göstergesi — uzun tek sayfalık akışı
   "Dosya Seç → Önizle → Yükle" olarak okunur kılar; (2) ay özet şeridi —
   takvimin üstünde o ayın durumu tek bakışta + tıklayınca ilgili günleri
   vurgular; (3) durum rozetleri — gün detayında "ne durumda" sorusunun
   rengli, tek kelimelik cevabı. */

/* --- (1) Adım göstergesi --- */
.gk-adim-cubugu { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 14px; }
.gk-adim {
  display: flex; align-items: center; gap: 8px; flex: 1 1 180px; min-width: 0;
  padding: 9px 12px; border: 1px solid var(--renk-cizgi); border-radius: 9px;
  background: var(--renk-kart); font-size: 13px; color: var(--renk-metin-soluk); transition: var(--gecis);
}
.gk-adim-no {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--renk-cizgi); color: var(--renk-metin-soluk); font-size: 12px; font-weight: 700;
}
.gk-adim-metin { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gk-adim.gk-adim-aktif {
  border-color: var(--renk-ana); background: var(--renk-ana-yumusak);
  color: var(--renk-ana-koyu); font-weight: 600;
}
.gk-adim.gk-adim-aktif .gk-adim-no { background: var(--renk-ana); color: #fff; }
.gk-adim.gk-adim-tamam { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.gk-adim.gk-adim-tamam .gk-adim-no { background: #16a34a; color: #fff; }
.gk-adim.gk-adim-tamam .gk-adim-no::before { content: "✓"; }
.gk-adim.gk-adim-tamam .gk-adim-no span { display: none; }

/* --- (2) Ay özet şeridi --- */
.gk-ay-ozet { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 4px 0 10px; }
.gk-ozet-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
  border: 1px solid var(--renk-cizgi); border-radius: 999px; background: var(--renk-kart);
  font-size: 12.5px; font-weight: 600; color: var(--renk-metin); cursor: pointer; transition: var(--gecis);
}
.gk-ozet-chip:hover { border-color: var(--renk-ana); }
.gk-ozet-chip[disabled] { opacity: .5; cursor: default; }
.gk-ozet-chip[disabled]:hover { border-color: var(--renk-cizgi); }
.gk-ozet-chip .gk-ozet-sayi { font-size: 14px; font-weight: 800; }
.gk-ozet-chip.gk-ozet-secili { box-shadow: 0 0 0 2px var(--renk-ana) inset; border-color: var(--renk-ana); }
.gk-ozet-chip-yuklendi .gk-ozet-sayi { color: #16a34a; }
.gk-ozet-chip-eksik .gk-ozet-sayi { color: #b45309; }
.gk-ozet-chip-supheli .gk-ozet-sayi { color: var(--renk-kirmizi); }
.gk-ozet-chip-kilitli .gk-ozet-sayi { color: var(--renk-ana); }
.gk-ozet-chip-kapali .gk-ozet-sayi { color: var(--renk-ana-acik); }

/* Bir özet chip'i seçiliyken, EŞLEŞMEYEN günler soluklaşır — kullanıcı
   "eksik olanlar hangileri" sorusunu takvimde anında görsün diye. */
.gk-takvim-izgara.gk-filtre-aktif .gk-takvim-gun:not(.gk-takvim-gun-vurgulu):not(.gk-takvim-gun-disi-ay) { opacity: .25; }

/* --- (3) Durum rozetleri --- */
.gk-durum-rozet {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.gk-durum-rozet-yuklendi { background: #dcfce7; color: #166534; }
.gk-durum-rozet-eksik { background: #fff7ed; color: #9a3412; }
.gk-durum-rozet-supheli { background: var(--renk-kirmizi-soft); color: #991b1b; }
.gk-durum-rozet-cozuldu { background: #fff7ed; color: #9a3412; }
.gk-durum-rozet-kapali { background: var(--renk-ana-yumusak); color: var(--renk-ana-koyu); }
.gk-durum-rozet-kilitli { background: var(--renk-ana-yumusak); color: var(--renk-ana-koyu); }

/* Kilitli günün kutusu: yeşil "yüklendi" görünümünü korur ama kilit
   olduğu kenarından da anlaşılsın (sadece emoji yeterli değil). */
.gk-takvim-gun.gk-takvim-gun-kilitli { border-color: var(--renk-ana-acik); box-shadow: 0 0 0 1px var(--renk-ana-acik) inset; }

/* Gün detayındaki ANA eylem (ör. "Bu Günü Şimdi Yükle") diğer
   butonlardan ayrışsın — kullanıcı ne yapması gerektiğini aramasın. */
.gk-detay-ana-buton {
  background: var(--renk-ana); color: #fff; border-color: var(--renk-ana); font-weight: 700;
}
.gk-detay-ana-buton:hover { background: var(--renk-ana-koyu); border-color: var(--renk-ana-koyu); }

@media (max-width: 640px) {
  .gk-adim { flex: 1 1 100%; }
  .gk-ay-ozet { gap: 6px; }
  .gk-ozet-chip { padding: 5px 9px; font-size: 12px; }
}

/* ===== Yeni Şube Şablonu: Önizle uyarı/bilgi mesajları ===== */
.ys-mesaj-listesi { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.ys-mesaj { padding: 10px 14px; border-radius: 8px; font-size: 13px; line-height: 1.5; }
.ys-mesaj-uyari { background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; }
.ys-mesaj-bilgi { background: var(--renk-ana-yumusak); border: 1px solid var(--renk-ana-acik); color: var(--renk-ana-koyu); }
.ys-devir-kaynaksiz td { color: #9a3412; }

/* ===== Onay Talepleri: Beklemede satırlarda fiyat uyarısı önizlemesi =====
   27 Ağustos 2026 — TamYetkili/KontrolGrubu Onayla'ya basmadan ÖNCE fiyat
   uyarılarını görebilsin diye (bkz. app.js onayTalepleriYenile). AYNI amber
   "dikkat" paleti (.ys-mesaj-uyari ile aynı renkler). */
.ot-fiyat-uyarisi {
  background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; border-radius: 6px;
  padding: 8px 10px; font-size: 12.5px; line-height: 1.5;
}
.ot-onizleme-yukleniyor { color: #6b7280; font-size: 12.5px; font-style: italic; }

/* ===== Hızlı Günlük Giriş: Excel benzeri satır/sütun tablo (grid) =====
   Tüplü/Emtia/Su/Veresiyeden Dönenler sayfaları artık "form doldur, satırı
   ekle" yerine, doğrudan hücrelere yazılan çok satırlı bir tablo — bkz.
   app.js "HIZLI GÜNLÜK GİRİŞ" bölümü / hgSatirEkle / hgGridCiz. */
.hg-grid-sarici { overflow-x: auto; margin-bottom: 8px; border: 1px solid var(--renk-cizgi); border-radius: 8px; }
.hg-grid { min-width: 100%; }
.hg-grid th, .hg-grid td { white-space: nowrap; padding: 4px 6px; }
.hg-grid td input[type="number"], .hg-grid td input[type="text"], .hg-grid td select {
  width: 52px; padding: 4px 6px; font-size: 13px; border: 1px solid var(--renk-cizgi); border-radius: 4px; background: var(--renk-panel); color: var(--renk-metin);
}
/* Fiyat hücreleri (data-alan "Fiyat" ile bitiyor ya da tam "fiyat") adet
   hücrelerinden biraz daha geniş — kuruşlu tutarlar sığsın (ör. 1234,50). */
.hg-grid td input[type="number"][data-alan$="Fiyat"], .hg-grid td input[type="number"][data-alan="fiyat"] { width: 78px; }
/* Kullanıcı isteği: adet/fiyat hücrelerinde tarayıcının artırma/azaltma
   oklarına gerek yok (Excel'deki gibi doğrudan yazılıyor, ok işaretleri
   sadece görsel gürültü + hücreyi gereksiz genişletiyordu). */
.hg-grid td input[type="number"]::-webkit-outer-spin-button,
.hg-grid td input[type="number"]::-webkit-inner-spin-button,
#hgOdemePopup input[type="number"]::-webkit-outer-spin-button,
#hgOdemePopup input[type="number"]::-webkit-inner-spin-button,
#hgPanelKasaStok input[type="number"]::-webkit-outer-spin-button,
#hgPanelKasaStok input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hg-grid td input[type="number"], #hgOdemePopup input[type="number"], #hgPanelKasaStok input[type="number"] { -moz-appearance: textfield; }
/* Kapanış Kasa artık elle girilmiyor, otomatik hesaplanıyor (bkz.
   hgKasaKapanisKasaHesapla, app.js) — salt-okunur olduğu görsel olarak
   belli olsun diye hafif gri arka plan. */
#hgKasaKapanisKasa[readonly] { background: var(--renk-cizgi-soft); color: var(--renk-metin-soluk); font-weight: 600; cursor: default; }
.hg-grid td select { width: 150px; }
/* Şüpheli/absürt fiyat uyarısı (bkz. hgFiyatSupheliKontrolEt, app.js) —
   girilen fiyat, o ürünün standart fiyatından oransal olarak çok sapıyorsa
   (ör. 1460₺ yerine sehven 146₺) hücre amber işaretlenir. Uygulamanın diğer
   yerlerinde de kullanılan AYNI "amber = dikkat" palet (bkz. .durum-supheli,
   .hg-odeme-eksik) — kaydetmeyi engellemez, sadece görsel bir ipucu. */
.hg-grid td input.hg-fiyat-supheli {
  background: #fff7ed; border-color: #fdba74; color: #9a3412; font-weight: 700;
}
.hg-grid tfoot tr { font-weight: 700; background: var(--renk-cizgi-soft); }
.hg-grid tfoot td { padding: 6px; }
.hg-satir-sil-btn { border: none; background: none; color: var(--renk-kirmizi); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; }
.hg-satir-sil-btn:hover { text-decoration: underline; }

/* ===== Hızlı Giriş v2: taslak (tek satır giriş) formu =====
   Kullanıcı isteği: "sıra sıra tablo yerine tek satır olsun, cariyi seçip
   detayları girelim, Ekle/Enter'la aşağıdaki listeye düşsün." Sadece Tüplü/
   Emtia/Su'da (bkz. hgTaslakFormunuCiz, app.js) — Veresiye zaten çok basit,
   eski grid'inde bırakıldı. Form, GRİD İLE AYNI hücre üretici fonksiyonları
   (hgCariHucre/hgStokHucre/hgOdemeHucre/hgSayiHucre) kullanır, sadece
   <td> yerine etiketli <label> kutularına yerleştirilir. */
.hg-taslak-formu {
  display: flex; flex-direction: column; gap: 12px; background: var(--renk-panel);
  border: 1px solid var(--renk-cizgi); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px;
}
.hg-taslak-alanlar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.hg-taslak-alan { display: flex; flex-direction: column; gap: 4px; min-width: 90px; }
/* Kullanıcı geri bildirimi (22 Ağustos 2026): "açık temada kutucukları
   seçmek ve karşılıklarını eşleştirmek zor oluyor" — etiket rengi/boyutu
   koyulaştırıldı (soluk griden ana metin rengine) VE Adet/Fiyat kendi
   rengiyle (mavi/yeşil) işaretlendi ki göz, metni okumadan sadece renkle
   eşleştirebilsin (bkz. .hg-taslak-alan-adet / .hg-taslak-alan-fiyat). */
.hg-taslak-alan span { font-size: 12px; font-weight: 700; color: var(--renk-metin); text-transform: uppercase; letter-spacing: .02em; }
.hg-taslak-alan input[type="number"], .hg-taslak-alan input[type="text"] {
  min-height: 38px; padding: 6px 10px; font-size: 15px; font-weight: 600; border: 1px solid var(--renk-cizgi); border-radius: 6px;
  background: var(--renk-kart); color: var(--renk-metin); width: 100%;
}
.hg-taslak-alan .hg-cari-sec-btn, .hg-taslak-alan .hg-stok-sec-btn, .hg-taslak-alan .hg-odeme-hucre-btn {
  min-height: 38px; font-size: 13.5px; background: var(--renk-kart);
}
.hg-taslak-musteri { min-width: 190px; }
.hg-taslak-tup-satiri { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 100%; }
.hg-taslak-tup-grubu {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 10px; background: var(--renk-kart);
  border: 1px solid var(--renk-cizgi); border-radius: 8px;
}
.hg-taslak-tup-baslik { font-size: 12px; font-weight: 700; color: var(--renk-ana-koyu); align-self: center; margin-right: 2px; min-width: 52px; }
.hg-taslak-tup-grubu .hg-taslak-alan { min-width: 0; gap: 2px; }
/* Kullanıcı isteği: "adet hücresi gereksiz çok uzun; adet fiyat basit
   görülebilsin" — Adet küçük/dar (genelde 1-2 haneli), Fiyat biraz daha
   geniş (kuruşlu tutarlar için); ikisi rengiyle de ayrışıyor (mavi=Adet,
   yeşil=Fiyat) böylece etiketi okumadan da hangisinin hangisi olduğu
   anlaşılıyor. */
.hg-taslak-alan-adet { width: 56px; }
.hg-taslak-alan-adet span { color: var(--renk-ana-koyu); }
/* NOT: ".hg-taslak-alan input[type=number]" temel kuralı (yukarıda) 2
   sınıf/öznitelik seçiciyle (0,2,1) daha yüksek özgüllüğe sahip — burada
   AYNI özgüllükte "[type=number]" eklenerek ez­ilmesi önlendi (aksi halde
   border-left rengi hiç görünmezdi). */
.hg-taslak-alan-adet input[type="number"] { width: 56px; border-left: 3px solid var(--renk-ana-acik); text-align: center; padding-left: 6px; }
.hg-taslak-alan-fiyat { width: 88px; }
.hg-taslak-alan-fiyat span { color: var(--renk-yesil); }
.hg-taslak-alan-fiyat input[type="number"] { width: 88px; border-left: 3px solid var(--renk-yesil); }
.hg-taslak-carpi, .hg-taslak-esittir { font-size: 15px; font-weight: 700; color: var(--renk-metin-soluk); padding-bottom: 8px; }
/* Kullanıcı isteği: "en sağda veya uygun bir yerde anlık toplam görünsün —
   ör. 300₺ 2 Kg tüp için adeti 5 seçtiğinde Toplam 1500₺ görünsün." Her
   kalemin kendi anlık Adet×Fiyat sonucu — hgTaslakMiniToplamlariTazele
   (app.js) her tuşa basışta bu span'ın metnini günceller. */
.hg-taslak-mini-toplam {
  font-size: 13.5px; font-weight: 700; color: var(--renk-ana-koyu); background: var(--renk-ana-yumusak);
  border: 1px solid var(--renk-ana-acik); border-radius: 6px; padding: 7px 10px; min-width: 84px;
  text-align: center; margin-left: auto;
}
.hg-taslak-butonlar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 16px; }
/* Formun altındaki GENEL toplam (tüm kalemlerin toplamı, hgSatirTutari ile
   AYNI formül) — kullanıcı isteği: "birden çok ürün çeşidi satışında
   toplam tutar anlık görünmüyor" sorununu çözer. margin-right:auto ile
   butonlardan ayrılıp sola yaslanıyor. */
.hg-taslak-genel-toplam { font-size: 14px; color: var(--renk-metin-soluk); margin-right: auto; }
.hg-taslak-genel-toplam strong { font-size: 16px; color: var(--renk-ana-koyu); margin-left: 4px; }
.hg-taslak-ekle-btn {
  padding: 9px 24px; background: linear-gradient(135deg, var(--renk-ana), var(--renk-ana-koyu)); color: #fff;
  border: none; border-radius: 6px; font-weight: 700; font-size: 14px; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.22);
}
.hg-taslak-ekle-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.28); }

/* ---- Önizleme listesi: artık salt okunur özet satırlar — tıklanınca
   yukarıdaki taslak formuna geri yüklenir (bkz. hgOnizlemeSatiriDuzenle).
   Sil butonu (.hg-satir-sil-btn, DEĞİŞMEDİ) kendi hücresinde ayrı durur,
   tıklaması satır düzenlemeyi TETİKLEMEZ (bkz. app.js click dinleyici
   sırası). ---- */
.hg-onizleme-satir { cursor: pointer; }
.hg-onizleme-satir:hover { background: var(--renk-ana-yumusak); }
.hg-onizleme-satir:focus-visible { outline: 2px solid var(--renk-ana); outline-offset: -2px; }
/* "Detay" ve "Uyarı/Bilgi" hücreleri uzun olabiliyor (ör. 5 tüp türü özeti,
   birden fazla uyarı rozeti) — .hg-grid'in genel "white-space:nowrap"
   kuralı burada masaüstünde tabloyu gereksiz yere genişletirdi, bu iki
   hücrede BİLEREK normal satır kaydırmaya açıldı. */
.hg-onizleme-satir td[data-etiket="Detay"], .hg-onizleme-uyari-hucresi { white-space: normal; }
.hg-onizleme-uyari-hucresi { display: flex; flex-direction: column; gap: 4px; }
.hg-onizleme-rozet { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: normal; }
.hg-onizleme-rozet-uyari { background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; }
.hg-onizleme-rozet-bilgi { background: var(--renk-ana-yumusak); border: 1px solid var(--renk-ana-acik); color: var(--renk-ana-koyu); }

/* ===== Hızlı Giriş (.hg-grid): telefonda KART görünümü (Grup 8b) =====
   Grup 8'de BİLEREK ertelenmişti (bkz. yukarıdaki "Telefon boyu ekranlar"
   notu) — kullanıcı telefondan gerçek testi yapıp onay verdi, şimdi
   uygulanıyor. Masaüstü/tablette (>640px) HİÇBİR görsel değişiklik YOK —
   sadece bu media query içindeki kurallar geçerli. Yöntem: tabloyu JS ile
   YENİDEN YAZMAK yerine SAF CSS ile "responsive table" tekniği — her <tr>
   bir karta, her <td> alt alta bir satıra dönüşür, sütun başlığı da
   ::before ile data-etiket attribute'undan (bkz. hgSatirHtml, app.js)
   gösterilir. Klavye açıldığında dikey akış (yukarıdan aşağıya alan sırası)
   yatay kaydırmadan çok daha kullanışlı olduğu için (kullanıcıyla birlikte
   karşılaştırılıp seçildi) kart görünümü tercih edildi. */
@media (max-width: 640px) {
  .hg-grid-sarici { overflow-x: visible; border: none; border-radius: 0; }
  .hg-grid { min-width: 0; width: 100%; }
  .hg-grid thead { display: none; }
  .hg-grid, .hg-grid tbody { display: block; width: 100%; }
  .hg-grid tbody tr {
    display: block; margin-bottom: 10px; padding: 8px 12px; border: 1px solid var(--renk-cizgi);
    border-radius: 10px; background: var(--renk-kart);
  }
  .hg-grid tbody td {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    white-space: normal; padding: 7px 0; border-bottom: 1px dashed var(--renk-cizgi-soft);
  }
  .hg-grid tbody td:last-child { border-bottom: none; }
  .hg-grid tbody td::before {
    content: attr(data-etiket); flex: 0 0 auto; font-size: 11.5px; font-weight: 600;
    color: var(--renk-metin-soluk); text-transform: uppercase; letter-spacing: .02em;
  }
  /* Dokunmatik hedefler büyütülür (min ~44px) — masaüstündeki dar/kısa
     hücreler telefonda parmakla isabetli dokunulamıyordu. */
  .hg-grid tbody td input[type="number"], .hg-grid tbody td input[type="text"], .hg-grid tbody td select {
    width: auto; flex: 0 0 auto; max-width: 55%; min-width: 76px; min-height: 40px;
    font-size: 15px; padding: 6px 10px;
  }
  .hg-grid tbody .hg-cari-sec-btn, .hg-grid tbody .hg-stok-sec-btn, .hg-grid tbody .hg-odeme-hucre-btn {
    width: auto; flex: 0 0 auto; max-width: 68%; min-width: 96px; min-height: 40px; font-size: 13.5px;
  }
  /* Sil hücresi: etiketsiz, sağa yaslı, tam genişlik — kartın en altında
     kendi başına geniş bir dokunma alanı (parmakla silmek kolay olsun,
     yanlışlıkla başka bir alana denk gelmesin). */
  .hg-grid tbody td.hg-td-sil { justify-content: flex-end; border-bottom: none; padding-top: 4px; }
  .hg-grid tbody td.hg-td-sil::before { content: none; }
  .hg-grid tbody .hg-satir-sil-btn { font-size: 20px; padding: 6px 14px; min-height: 40px; }
  .hg-grid tfoot tr { display: block; padding: 10px 12px; }
  .hg-grid tfoot td { display: block; padding: 3px 0; }
  /* Hızlı Giriş v2: uyarı/bilgi hücresi birden fazla rozet içerebiliyor —
     genel ".hg-grid tbody td" kuralındaki "justify-content:space-between"
     dikey (flex-direction:column) düzende rozetleri gereksiz aralıklı
     dağıtıyordu, burada üste yaslanacak şekilde düzeltildi. */
  .hg-grid tbody td.hg-onizleme-uyari-hucresi { justify-content: flex-start; align-items: flex-start; }
  .hg-taslak-formu { padding: 12px; }
  .hg-taslak-alan { min-width: 46%; }
  .hg-taslak-musteri { min-width: 100%; }
  /* Kullanıcı isteği: kompakt kalem kutuları mobilde de uyarlansın — her
     kalem (ör. "2 KG") kendi tam genişlikte satırında, Adet/Fiyat yan yana
     dokunmaya elverişli boyutta, anlık toplam ALTTA kendi satırında (dar
     ekranda aynı satıra sığdırmak okunurluğu bozuyordu). */
  .hg-taslak-tup-grubu { flex: 1 1 100%; }
  .hg-taslak-tup-baslik { min-width: 100%; margin-bottom: 2px; }
  .hg-taslak-alan-adet, .hg-taslak-alan-adet input[type="number"] { width: 64px; }
  .hg-taslak-alan-fiyat, .hg-taslak-alan-fiyat input[type="number"] { width: 108px; }
  .hg-taslak-alan-adet input[type="number"], .hg-taslak-alan-fiyat input[type="number"] { min-height: 42px; font-size: 16px; }
  .hg-taslak-mini-toplam { flex: 1 1 100%; margin-left: 0; margin-top: 4px; font-size: 14.5px; padding: 8px 10px; }
  .hg-taslak-genel-toplam { flex: 1 1 100%; text-align: center; font-size: 15px; margin-right: 0; order: -1; }
  .hg-taslak-genel-toplam strong { font-size: 18px; }
  .hg-taslak-butonlar { justify-content: space-between; }
  .hg-taslak-butonlar .hg-taslak-ekle-btn, .hg-taslak-butonlar .ikincil-buton { flex: 1 1 auto; }
}

/* ---- Müşteri hücresi: serbest metin kutusu yerine TEK bir "Cari Seç"
   butonu — tıklanınca #hgCariSecPopup açılıyor (bkz. hgCariHucre /
   hgCariSecPopupAc, app.js). ---- */
.hg-cari-sec-btn {
  width: 100%; min-width: 96px; padding: 5px 8px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--renk-cizgi); border-radius: 5px; background: var(--renk-panel); color: var(--renk-metin-soluk);
  cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hg-cari-sec-btn:hover { border-color: var(--renk-ana-acik); }
.hg-cari-sec-btn.hg-cari-secili { background: var(--renk-cizgi-soft); color: var(--renk-metin); }

/* ---- Ödeme hücresi: 5 ayrı sütun yerine TEK buton — tıklanınca #hgOdemePopup
   açılıyor (bkz. hgOdemeHucreBtnMetni / hgOdemePopupAc, app.js). Renk, satır
   tutarına göre ödeme durumunu ANINDA gösteriyor: gri=hiç girilmemiş,
   sarı=eksik, yeşil=tam, kırmızı=fazla. ---- */
.hg-odeme-hucre-btn {
  width: 100%; min-width: 92px; padding: 5px 8px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--renk-cizgi); border-radius: 5px; background: var(--renk-panel); color: var(--renk-metin-soluk);
  cursor: pointer; text-align: center;
}
.hg-odeme-hucre-btn:hover { border-color: var(--renk-ana-acik); }
.hg-odeme-hucre-btn.hg-odeme-tam { background: rgba(5,150,105,.12); border-color: var(--renk-yesil); color: var(--renk-yesil); }
.hg-odeme-hucre-btn.hg-odeme-eksik { background: #fff7ed; border-color: #fdba74; color: #9a3412; }
.hg-odeme-hucre-btn.hg-odeme-fazla { background: rgba(220,38,38,.1); border-color: var(--renk-kirmizi); color: var(--renk-kirmizi); }

/* Kullanıcı isteği: "Ödeme gir bölümü ... biraz büyütülsün, tümü nakit,
   tümü kredi vs. bunlar da belirgin butonlar olsun. Şu an çok küçük
   kalıyorlar." — genişlik 250px→340px, "Tümü X" butonları pill/flex-wrap
   yerine 2 sütunlu ızgara + belirgin çerçeve/dolgu ile büyütüldü. */
#hgOdemePopup {
  /* max-width: Grup 8 (mobil/responsive temeli) — popupButonAltinaKonumlandir
     (app.js) yatay konumu viewport içinde tutuyor ama SABİT genişliği
     küçültmüyor; çok dar ekranlarda taşmaması için ek güvenlik. Masaüstünde
     etkisi yok. max-height/overflow-y: kullanıcı geri bildirimi (22 Ağustos
     2026) — "mobilde Nakit/Kredi/Mail Order görünüyor, Havale/Çek'e
     kaydıramıyoruz." position:fixed olduğu için SAYFA kaydırması popup'ı
     hareket ettirmiyordu; artık popup viewport'tan uzunsa KENDİ İÇİNDE
     kaydırılabiliyor (bkz. popupButonAltinaKonumlandir, app.js — konum da
     ayrıca akıllandırıldı). */
  position: fixed; z-index: 60; width: 340px; max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px); overflow-y: auto; background: var(--renk-kart); border: 1px solid var(--renk-cizgi);
  border-radius: 10px; box-shadow: var(--golge-derin); padding: 16px;
}
#hgOdemePopup.gizli { display: none; }
.hg-odeme-popup-baslik { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.hg-odeme-popup-baslik span { font-size: 14px; font-weight: 600; color: var(--renk-metin); }
.hg-odeme-popup-kapat { border: none; background: none; color: var(--renk-metin-soluk); cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 4px; }
.hg-odeme-popup-tumu { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.hg-odeme-popup-tumu button {
  font-size: 13px; font-weight: 600; padding: 9px 8px; border: 1px solid var(--renk-ana-acik); border-radius: 8px;
  background: var(--renk-ana-yumusak); color: var(--renk-ana-koyu); cursor: pointer;
}
.hg-odeme-popup-tumu button:hover { background: var(--renk-ana-acik); color: #fff; }
.hg-odeme-popup-alan { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.hg-odeme-popup-alan label { flex: 0 0 82px; font-size: 13px; color: var(--renk-metin-soluk); }
.hg-odeme-popup-alan input {
  flex: 1; min-width: 0; padding: 7px 8px; font-size: 14px; border: 1px solid var(--renk-cizgi); border-radius: 6px;
  background: var(--renk-panel); color: var(--renk-metin);
}
.hg-odeme-popup-kalan-btn {
  flex: 0 0 auto; font-size: 12px; font-weight: 600; padding: 6px 9px; border: 1px solid var(--renk-cizgi); border-radius: 6px;
  background: var(--renk-panel); color: var(--renk-ana); cursor: pointer;
}
.hg-odeme-popup-kalan-btn:hover { background: var(--renk-ana-yumusak); border-color: var(--renk-ana-acik); }
.hg-odeme-popup-ozet {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--renk-cizgi); font-size: 13.5px; color: var(--renk-metin-soluk);
  display: flex; justify-content: space-between; align-items: center;
}
.hg-odeme-popup-ozet strong { color: var(--renk-metin); font-size: 15px; }

/* ---- Cari seçim popup'ı (#hgCariSecPopup) — ödeme popup'uyla AYNI kutu
   deseni, ayrıca arama kutusu + önerilen cariler listesi içerir (bkz.
   hgCariSecPopupIcerikUret / hgCariSecOnerilenGoster, app.js). ---- */
#hgCariSecPopup {
  /* max-width/max-height: bkz. #hgOdemePopup'taki AYNI not — güvenlik ağı,
     içindeki #hgCariSecSonuclar zaten kendi 260px'lik iç kaydırmasına
     sahip ama başlık+arama+temizle ile toplamı yine de kısa ekranlarda
     taşabilir. */
  position: fixed; z-index: 60; width: 280px; max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px); overflow-y: auto; background: var(--renk-kart); border: 1px solid var(--renk-cizgi);
  border-radius: 10px; box-shadow: var(--golge-derin); padding: 12px;
}
#hgCariSecPopup.gizli { display: none; }
.hg-cari-sec-popup-baslik { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.hg-cari-sec-popup-baslik span { font-size: 12.5px; color: var(--renk-metin-soluk); }
.hg-cari-sec-popup-kapat { border: none; background: none; color: var(--renk-metin-soluk); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 4px; }
#hgCariSecArama {
  width: 100%; padding: 6px 8px; font-size: 13px; border: 1px solid var(--renk-cizgi); border-radius: 5px;
  background: var(--renk-panel); color: var(--renk-metin); margin-bottom: 6px;
}
.hg-cari-sec-temizle-btn {
  width: 100%; font-size: 11.5px; padding: 4px 6px; border: 1px solid var(--renk-cizgi); border-radius: 5px;
  background: var(--renk-panel); color: var(--renk-kirmizi); cursor: pointer; margin-bottom: 8px;
}
.hg-cari-sec-temizle-btn:hover { background: rgba(220,38,38,.08); }
#hgCariSecSonuclar { max-height: 260px; overflow-y: auto; }
.hg-cari-sec-baslik-kucuk { font-size: 11px; color: var(--renk-metin-soluk); text-transform: uppercase; letter-spacing: .03em; padding: 2px 4px 6px; }
.hg-cari-sec-satir {
  display: flex; flex-direction: column; gap: 1px; padding: 7px 8px; border-radius: 6px; cursor: pointer;
}
.hg-cari-sec-satir:hover { background: var(--renk-ana-yumusak); }
.hg-cari-sec-satir span:first-child { font-size: 13px; color: var(--renk-metin); }
.hg-cari-sec-satir-alt { font-size: 11px; color: var(--renk-metin-soluk); display: flex; gap: 6px; align-items: center; }
.hg-cari-sec-rozet {
  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 999px;
  background: rgba(5,150,105,.12); color: var(--renk-yesil);
}
.hg-cari-sec-bos, .hg-cari-sec-yukleniyor { padding: 10px 6px; font-size: 12.5px; color: var(--renk-metin-soluk); text-align: center; }

/* ---- Emtia satırı: aşağı açılır <select> yerine TEK bir "Ürün Seç"
   butonu — tıklanınca #hgStokSecPopup açılıyor (bkz. hgStokHucre /
   hgStokSecPopupAc, app.js). Kullanıcı isteği: "Ürün sayısı arttıkça
   aradığını bulmak zorlaşıyor. Onun yerine yazmaya başladıkça daralan
   liste olsa daha iyi olur" — #hgCariSecPopup ile BİREBİR AYNI görsel
   dil, tek fark arama YEREL (state.hg.stoklarCache zaten yüklü). ---- */
.hg-stok-sec-btn {
  width: 100%; min-width: 120px; padding: 5px 8px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--renk-cizgi); border-radius: 5px; background: var(--renk-panel); color: var(--renk-metin-soluk);
  cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hg-stok-sec-btn:hover { border-color: var(--renk-ana-acik); }
.hg-stok-sec-btn.hg-stok-secili { background: var(--renk-cizgi-soft); color: var(--renk-metin); }

#hgStokSecPopup {
  /* max-width/max-height: bkz. #hgOdemePopup'taki AYNI not (güvenlik ağı). */
  position: fixed; z-index: 60; width: 300px; max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px); overflow-y: auto; background: var(--renk-kart); border: 1px solid var(--renk-cizgi);
  border-radius: 10px; box-shadow: var(--golge-derin); padding: 12px;
}
#hgStokSecPopup.gizli { display: none; }
.hg-stok-sec-popup-baslik { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.hg-stok-sec-popup-baslik span { font-size: 12.5px; color: var(--renk-metin-soluk); }
.hg-stok-sec-popup-kapat { border: none; background: none; color: var(--renk-metin-soluk); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 4px; }
#hgStokSecArama {
  width: 100%; padding: 6px 8px; font-size: 13px; border: 1px solid var(--renk-cizgi); border-radius: 5px;
  background: var(--renk-panel); color: var(--renk-metin); margin-bottom: 6px;
}
#hgStokSecSonuclar { max-height: 260px; overflow-y: auto; }
.hg-stok-sec-satir {
  display: flex; flex-direction: column; gap: 1px; padding: 7px 8px; border-radius: 6px; cursor: pointer;
}
.hg-stok-sec-satir:hover { background: var(--renk-ana-yumusak); }
.hg-stok-sec-satir span:first-child { font-size: 13px; color: var(--renk-metin); }
.hg-stok-sec-satir-alt { font-size: 11px; color: var(--renk-metin-soluk); }
.hg-stok-sec-bos { padding: 10px 6px; font-size: 12.5px; color: var(--renk-metin-soluk); text-align: center; }

/* ---- Önizlemede cari bazında bakiye önizlemesi (bkz. hgCariOzetiHtml /
   hgCariBakiyeDetayGoster) ---- */
.hg-cari-bakiye-ozet { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--renk-cizgi); }
.hg-cari-bakiye-satiri { margin-bottom: 4px; }
.hg-cari-bakiye-btn {
  width: 100%; text-align: left; padding: 6px 10px; font-size: 13px; border: 1px solid var(--renk-cizgi);
  border-radius: 6px; background: var(--renk-panel); color: var(--renk-metin); cursor: pointer;
}
.hg-cari-bakiye-btn:hover { border-color: var(--renk-ana-acik); background: var(--renk-ana-yumusak); }
.hg-cari-bakiye-fark { color: var(--renk-metin-soluk); font-size: 12px; }
.hg-cari-bakiye-detay { padding: 6px 12px; font-size: 12.5px; color: var(--renk-metin-soluk); }
.hg-cari-bakiye-detay div { padding: 2px 0; }

/* ---- Bildirim (toast) bileşeni ----
   Genel inceleme raporu bulgusu (Grup 4): ortak bir bildirim/toast
   bileşeni yoktu, hata gösterimi alert()/.textContent/innerHTML olmak
   üzere 3 farklı desenle karışık kullanılıyordu. bildirimGoster(mesaj, tur)
   (bkz. app.js) artık bu ortak, engellemeyen (non-blocking) bileşeni
   kullanıyor — sağ üstte köşede kısa süreliğine görünüp kendiliğinden
   kapanır, elle de kapatılabilir. NOT: bu bileşen ALTYAPI olarak eklendi;
   mevcut 148 alert()/68 confirm() çağrısının TAMAMININ buna taşınması
   (özellikle confirm() → async modal dönüşümü her çağrı yerinin akışını
   tek tek incelemeyi gerektirdiğinden) BİLEREK bu oturumun kapsamı DIŞINDA
   bırakıldı — bkz. DURUM.md'deki not. */
.bildirim-kutusu {
  position: fixed; top: 16px; right: 16px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px; max-width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}
.bildirim {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
  border-radius: 10px; background: var(--renk-kart); border: 1px solid var(--renk-cizgi);
  box-shadow: 0 10px 28px rgba(0,0,0,.18); font-size: 13.5px; color: var(--renk-metin);
  pointer-events: auto; animation: bildirimGir .12s ease-out;
}
.bildirim-basari { border-left: 4px solid var(--renk-yesil); }
.bildirim-hata { border-left: 4px solid var(--renk-kirmizi); }
.bildirim-uyari { border-left: 4px solid #b45309; }
.bildirim-bilgi { border-left: 4px solid var(--renk-ana); }
/* white-space: pre-line — Grup 9 (alert() göçü): birçok eski alert() mesajı
   \n ile çok satırlı özet üretiyordu (ör. "X oluşturuldu.\n\nOluşturulamayanlar:
   ..."); normal akışta \n görmezden gelinip tek satıra dönüşürdü, bu satır
   o boşlukları GERÇEK satır sonuna çevirir — davranış native alert()'teki
   çok satırlı görünümle tutarlı kalır. */
.bildirim-metin { flex: 1; line-height: 1.4; white-space: pre-line; }
.bildirim-kapat {
  flex: 0 0 auto; background: none; border: none; cursor: pointer; font-size: 15px;
  color: var(--renk-metin-soluk); line-height: 1; padding: 2px;
}
.bildirim-kapat:hover { color: var(--renk-metin); }
.bildirim.bildirim-cikiyor { animation: bildirimCik .1s ease-in forwards; }
@keyframes bildirimGir { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes bildirimCik { from { opacity: 1; } to { opacity: 0; transform: translateX(16px); } }
@media (prefers-reduced-motion: reduce) {
  .bildirim, .bildirim.bildirim-cikiyor { animation: none; }
}

/* Sol menünün EN ÜSTÜNDEKİ "Genel" butonu (kullanıcı isteği: "genel sekmesi
   ana menü içinde yer almasın, sol tabda en üstte yer alsın"). Diğer sekme
   butonlarıyla aynı iskelette durur; sadece bir sekme DEĞİL bir "gösteri"
   başlattığı için soldan ince bir vurgu çizgisi ve hafif bir zemin alır. */
.sidebar .genel-sunum-btn {
  position: relative;
  margin-bottom: 6px;
  background: linear-gradient(90deg, rgba(89,165,255,.16), transparent 70%);
}
.sidebar .genel-sunum-btn::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 0 3px 3px 0; background: #59a5ff;
}
.sidebar .genel-sunum-btn:hover { background: linear-gradient(90deg, rgba(89,165,255,.28), transparent 70%); }

/* ===================== GENEL SUNUM (tam ekran "trailer") =====================
   Kullanıcı isteği (6 Eylül 2026): "mavi animasyonlu, üstte logo, ortada
   veriler ve grafikler slider gibi geçsin."

   TASARIM KARARI — bu katman temayı TAKİP ETMEZ: her iki temada da kendi
   koyu-mavi sinematik sahnesini kurar (istenen şey zaten "mavi animasyonlu"
   bir sunum). Bu yüzden renkler tema belirteçlerine değil, sahnenin kendi
   sabit paletine bağlı. Metin her zaman açık ink (--gs-ink) — seri rengi
   ASLA yazıya uygulanmaz; sayının kimliğini yanındaki çubuk taşır.

   GRAFİK KARARI: her slaytta TEK seri var (şubeye göre satış, kategoriye
   göre gider) — tek seride lejant gerekmez, başlık seriyi zaten adlandırır;
   ve tek hue kullanılır (büyüklük çubuğun UZUNLUĞUYLA kodlanır, renkle
   değil). Değerler doğrudan etiketli: bu bir otomatik akan sunum, bilgi
   hover'ın arkasına saklanamaz. */
.gs-katman {
  position: fixed; inset: 0; z-index: 4000;
  background: #061530; color: var(--gs-ink);
  display: flex; flex-direction: column; overflow: hidden;
  --gs-ink: #eaf2ff;          /* birincil yazı */
  --gs-ink-soluk: #9db6de;    /* ikincil yazı */
  --gs-seri: #59a5ff;         /* TEK seri rengi (sequential tek hue) */
  --gs-seri-parlak: #8ec5ff;
  animation: gsAc .45s var(--ease-out);
}
@keyframes gsAc { from { opacity: 0; } to { opacity: 1; } }

/* Animasyonlu mavi arka plan: yavaşça sürüklenen üç ışık kümesi. */
.gs-arkaplan { position: absolute; inset: 0; overflow: hidden; }
.gs-arkaplan span {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55;
}
.gs-arkaplan span:nth-child(1) {
  width: 46vw; height: 46vw; left: -8vw; top: -10vw;
  background: radial-gradient(circle, #1d4ed8, transparent 70%);
  animation: gsSuruklen1 22s ease-in-out infinite alternate;
}
.gs-arkaplan span:nth-child(2) {
  width: 40vw; height: 40vw; right: -6vw; top: 18vh;
  background: radial-gradient(circle, #0ea5e9, transparent 70%);
  animation: gsSuruklen2 27s ease-in-out infinite alternate;
}
.gs-arkaplan span:nth-child(3) {
  width: 52vw; height: 52vw; left: 22vw; bottom: -22vw;
  background: radial-gradient(circle, #4338ca, transparent 70%);
  animation: gsSuruklen3 31s ease-in-out infinite alternate;
}
@keyframes gsSuruklen1 { to { transform: translate(12vw, 8vh) scale(1.15); } }
@keyframes gsSuruklen2 { to { transform: translate(-10vw, 10vh) scale(1.1); } }
@keyframes gsSuruklen3 { to { transform: translate(8vw, -10vh) scale(1.2); } }

.gs-ust {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 16px;
  padding: 18px 26px;
}
.gs-logo { height: 40px; width: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.gs-ust-orta { flex: 1; text-align: center; }
.gs-donem { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gs-ink-soluk); }
.gs-kapat {
  background: rgba(255,255,255,.1); color: var(--gs-ink); border: 1px solid rgba(255,255,255,.22);
  width: 38px; height: 38px; border-radius: 50%; font-size: 17px; cursor: pointer; transition: var(--gecis);
}
.gs-kapat:hover { background: rgba(255,255,255,.22); }

.gs-sahne { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 26px; min-height: 0; }
.gs-slaytlar { width: min(1100px, 100%); max-height: 100%; overflow: auto; }

/* Slayt geçişi — "slider gibi" kayarak gelir. */
.gs-slayt { animation: gsSlaytGir .55s var(--ease-out); }
@keyframes gsSlaytGir { from { opacity: 0; transform: translateX(42px); } to { opacity: 1; transform: none; } }
.gs-slayt-baslik { font-size: clamp(20px, 3vw, 34px); font-weight: 800; margin: 0 0 4px; letter-spacing: -.01em; }
.gs-slayt-altbaslik { color: var(--gs-ink-soluk); font-size: 14px; margin: 0 0 22px; }

/* --- Hero sayılar (stat tile): "her zaman grafik olması gerekmez" --- */
.gs-kpi-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.gs-kpi {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: 16px 18px; backdrop-filter: blur(6px);
}
.gs-kpi-etiket { font-size: 12.5px; color: var(--gs-ink-soluk); margin-bottom: 6px; }
.gs-kpi-deger { font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.gs-kpi-birim { font-size: .55em; font-weight: 600; color: var(--gs-ink-soluk); margin-left: 4px; }

/* --- Çubuk grafik: ince mark, 4px yuvarlatılmış uç, taban çizgisine
       oturur, doğrudan etiketli, TEK hue --- */
.gs-grafik { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.gs-bar-satir { display: grid; grid-template-columns: minmax(90px, 190px) 1fr auto; gap: 12px; align-items: center; }
.gs-bar-ad { font-size: 13px; color: var(--gs-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-bar-yol { position: relative; height: 14px; background: rgba(255,255,255,.09); border-radius: 7px; overflow: hidden; }
.gs-bar-dolgu {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--gs-seri), var(--gs-seri-parlak));
  border-radius: 0 4px 4px 0;              /* veri ucu yuvarlak, taban düz */
  animation: gsBarBuyu .8s var(--ease-out) backwards;
}
@keyframes gsBarBuyu { from { width: 0 !important; } }
.gs-bar-deger { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gs-ink); min-width: 112px; text-align: right; }

/* --- Yığın çubuk: zaman içinde parça-bütün ("ay ay, türe göre") ---
   Segmentler arasında 2px yüzey boşluğu: bitişik dolgular asla doğrudan
   temas etmez, sınır rengin kendisiyle değil YÜZEYLE çizilir. */
.gs-yigin-yol {
  position: relative; height: 16px; border-radius: 8px; overflow: hidden;
  background: rgba(255,255,255,.09); display: flex; gap: 2px;
}
.gs-yigin-parca {
  height: 100%; flex: 0 0 auto; min-width: 2px;
  animation: gsYiginBuyu .7s var(--ease-out) backwards;
}
.gs-yigin-parca:first-child { border-radius: 8px 0 0 8px; }
.gs-yigin-parca:last-child { border-radius: 0 4px 4px 0; }
@keyframes gsYiginBuyu { from { width: 0 !important; } }

/* Lejant şeridi (yığın çubuk için — halkanınki dikey listedir) */
.gs-lejant-serit {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12.5px; color: var(--gs-ink);
}
.gs-lejant-oge { display: inline-flex; align-items: center; gap: 7px; }

/* --- Ay ay döküm tablosu ---
   Grafiğin yanında sayıların kendisi; aynı zamanda "tablo görünümü"
   erişilebilirlik gereğini karşılar. Geniş içerik KENDİ kutusunda kayar,
   sayfa gövdesi yatay kaymaz. */
.gs-tablo-sarmal { overflow-x: auto; }
.gs-tablo { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.gs-tablo th, .gs-tablo td { padding: 8px 12px; text-align: right; white-space: nowrap; }
.gs-tablo th:first-child, .gs-tablo td:first-child { text-align: left; }
.gs-tablo thead th {
  color: var(--gs-ink-soluk); font-weight: 600; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.gs-tablo tbody td { color: var(--gs-ink); border-bottom: 1px solid rgba(255,255,255,.07); }
.gs-tablo tbody tr.gs-tablo-bos td { color: var(--gs-ink-soluk); }
.gs-tablo tfoot td {
  color: var(--gs-ink); font-weight: 800; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.22);
}

/* --- Halka (pasta) grafik: parça-bütün kompozisyonu ---
   Grafik SOLDA, lejant SAĞDA. Lejant her dilimin adını, değerini VE yüzdesini
   yazar: kimlik hiçbir zaman yalnızca renkle taşınmaz, ve pastadan güvenilir
   okunamayan yakın değerler sayı olarak yanında durur. Ortadaki toplam,
   "neyin yüzdesi" sorusunu grafiğin içinde cevaplar. */
.gs-halka-sarmal {
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap; justify-content: center;
}
.gs-halka-kutu { position: relative; flex: 0 0 auto; width: clamp(180px, 26vw, 250px); }
.gs-halka { display: block; width: 100%; height: auto; }
.gs-halka-dilim {
  /* Dilim, çevresi boyunca "çizilerek" gelir — çubuklardaki büyüme
     animasyonunun halka karşılığı. */
  animation: gsHalkaCiz .9s var(--ease-out) backwards;
}
@keyframes gsHalkaCiz { from { stroke-dasharray: 0 9999; } }
.gs-halka-orta {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none; text-align: center;
}
.gs-halka-orta-etiket { font-size: 10.5px; letter-spacing: .12em; color: var(--gs-ink-soluk); }
.gs-halka-orta-deger {
  font-size: clamp(14px, 1.5vw, 19px); font-weight: 800; color: var(--gs-ink);
  font-variant-numeric: tabular-nums; line-height: 1.2; max-width: 78%;
}

.gs-lejant { flex: 1 1 300px; min-width: 260px; display: flex; flex-direction: column; gap: 8px; }
.gs-lejant-satir {
  display: grid; grid-template-columns: 12px minmax(80px, 1fr) auto 58px;
  gap: 10px; align-items: center; font-size: 13px;
}
.gs-lejant-nokta { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.gs-lejant-ad { color: var(--gs-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-lejant-deger { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gs-ink); }
.gs-lejant-yuzde { color: var(--gs-ink-soluk); font-variant-numeric: tabular-nums; text-align: right; }

@media (max-width: 720px) {
  .gs-halka-sarmal { gap: 18px; }
  .gs-lejant { min-width: 0; }
  .gs-lejant-satir { grid-template-columns: 12px 1fr auto 52px; font-size: 12px; }
}

.gs-alt { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px; }
.gs-nav {
  background: rgba(255,255,255,.1); color: var(--gs-ink); border: 1px solid rgba(255,255,255,.22);
  width: 36px; height: 36px; border-radius: 50%; font-size: 16px; cursor: pointer; transition: var(--gecis);
}
.gs-nav:hover { background: rgba(255,255,255,.24); }
.gs-noktalar { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; max-width: 46vw; }
.gs-nokta { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.28); cursor: pointer; border: none; padding: 0; transition: var(--gecis); }
.gs-nokta.aktif { background: var(--gs-seri-parlak); transform: scale(1.35); }

.gs-ilerleme { position: relative; z-index: 2; height: 3px; background: rgba(255,255,255,.12); }
.gs-ilerleme > div { height: 100%; width: 0; background: var(--gs-seri-parlak); }

.gs-bos { color: var(--gs-ink-soluk); font-size: 14px; }

@media (max-width: 640px) {
  .gs-bar-satir { grid-template-columns: 1fr auto; }
  .gs-bar-ad { grid-column: 1 / -1; }
  .gs-noktalar { max-width: 60vw; }
}
/* Hareket azaltma tercihi: arka plan sürüklenmesi ve slayt kayması durur —
   sunum yine çalışır, sadece animasyonsuz. */
@media (prefers-reduced-motion: reduce) {
  .gs-arkaplan span, .gs-slayt, .gs-bar-dolgu, .gs-katman, .gs-halka-dilim,
  .gs-yigin-parca, .aktif-kul-nokta,
  .login-aktif, .login-aktif-nokta,
  .ai-panel, .ai-mik-aktif { animation: none; }
}

@media (max-width: 640px) {
  body { overflow-x: hidden; }
  #uygulama, .govde, main { width: 100%; min-width: 0; }
  main { padding: 14px 12px; }
  .topbar { padding: 8px 12px; gap: 8px; }
  .topbar-sol, .topbar-sag { min-width: 0; flex-wrap: wrap; gap: 8px; }
  .topbar-sag { width: 100%; justify-content: flex-start; }
  .topbar-sol #subeSecici, .topbar-sol .sube-secici { max-width: min(62vw, 280px); }
  #kullaniciEtiket { overflow-wrap: anywhere; }

  .yonetim-panel, .urun-panel, .sepet-panel, .son-faturalar-panel, .so-panel,
  .carikart-bolum, .carikart-hero, .carikart-bakiye-kart { min-width: 0; padding: 14px; }
  .satir-form { align-items: stretch; }
  .satir-form input, .satir-form select { flex: 1 1 140px; min-width: 0; max-width: 100%; }
  .satir-form button { min-height: 42px; }
  .so-alt-izgara { grid-template-columns: minmax(0, 1fr); }
  .so-panel, .so-kart, .so-kpi { min-width: 0; }
  .carikart-hero-bilgi { min-width: 0; }
  .cakisma-taraflar { grid-template-columns: minmax(0, 1fr); }
  .cakisma-ok { transform: rotate(90deg); }

  .odeme-hizli-satir { flex-wrap: wrap; }
  .odeme-hizli-satir select, .odeme-hizli-satir input[type="number"] { flex: 1 1 120px; min-width: 0; }
  .odeme-tum-buton { flex: 1 1 100%; white-space: normal; }
  .odeme-hesap-adi { flex: 1 1 100%; white-space: normal; }

  main table:not(.hg-grid):not(.sab-izgara):not(.sab-onay-tablo):not(.gs-tablo) {
    display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .yonetim-tablo { display: block; max-width: 100%; overflow-x: auto; }
  .modal-arkaplan { padding: 8px; }
  .modal-kart, .modal-kart-genis { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: auto; }
  .modal-butonlar { flex-wrap: wrap; }
  .modal-butonlar button { min-width: 120px; }
}

/* ===================================================================
   SATIŞ PANOSU (Ana Menü) + SAYFA ÜSTÜ SATIŞ ŞERİDİ — 2 Kasım 2026
   Kullanıcı isteği: "ana menü biraz boş; kullanıcılar ana menüde ve diğer
   sayfalarda şube satışlarını görebilsin, grafikler olsun." Bkz. js/satis-panosu.js.
   Grafik renkleri: tek seri = mavi (series-1); halka dilimleri sabit
   kategorik sıra. Açık/koyu tema ayrı ayrı doğrulanmış adımlar kullanır.
   =================================================================== */
:root {
  --ap-seri: #2a78d6;
  --ap-seri-vurgu: #184f95;
  --ap-seri-soluk: #cde2fb;
  --ap-s1: #2a78d6; --ap-s2: #eb6834; --ap-s3: #1baf7a;
  --ap-s4: #eda100; --ap-s5: #e87ba4; --ap-s6: #008300;
}
[data-tema="koyu"] {
  --ap-seri: #3987e5;
  --ap-seri-vurgu: #86b6ef;
  --ap-seri-soluk: #1c3a66;
  --ap-s1: #3987e5; --ap-s2: #d95926; --ap-s3: #199e70;
  --ap-s4: #c98500; --ap-s5: #d55181; --ap-s6: #008300;
}

.ap { margin: 0 0 8px; display: flex; flex-direction: column; gap: 16px; }
.ap-bolum-baslik {
  margin: 10px 0 -2px; font-size: 13px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--renk-metin-soluk);
  display: flex; align-items: center; gap: 10px;
}
.ap-bolum-baslik::after { content: ""; flex: 1; height: 1px; background: var(--renk-cizgi); }

/* --- Karşılama bandı (hero) --- */
.ap-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap;
  padding: 24px 26px 26px; border-radius: calc(var(--radius) + 4px);
  color: var(--renk-bar-metin);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--renk-ana-acik) 45%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, var(--renk-bar) 0%, var(--renk-bar-koyu) 100%);
  box-shadow: var(--golge);
  animation: kutuGirisAnim var(--sure-yavas) var(--ease-out) backwards;
}
.ap-hero-desen { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 70%; z-index: -1; opacity: .16; }
.ap-hero-desen path { fill: var(--renk-bar-metin); }
.ap-hero-selam { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.ap-hero-tarih { margin-top: 4px; font-size: 13.5px; opacity: .78; }
.ap-hero-rozetler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ap-rozet {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(4px);
}
.ap-hero-sag { text-align: right; }
.ap-hero-etiket { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.ap-hero-deger { font-size: clamp(30px, 4.2vw, 44px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 4px 0 6px; font-variant-numeric: tabular-nums; }
.ap-hero-alt { font-size: 13px; opacity: .85; }

/* --- KPI kartları --- */
.ap-kpi-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.ap-kpi {
  background: var(--renk-kart); border: 1px solid var(--renk-cizgi); border-radius: var(--radius);
  padding: 16px 16px 14px; box-shadow: var(--golge); min-width: 0;
  animation: kutuGirisAnim var(--sure-yavas) var(--ease-out) backwards;
}
.ap-kpi:nth-child(2) { animation-delay: 40ms; } .ap-kpi:nth-child(3) { animation-delay: 80ms; } .ap-kpi:nth-child(4) { animation-delay: 120ms; }
.ap-kpi-ust { display: flex; align-items: center; gap: 9px; }
.ap-kpi-ikon {
  width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ap-seri); background: color-mix(in srgb, var(--ap-seri) 14%, transparent);
}
.ap-kpi-ikon svg { width: 17px; height: 17px; }
.ap-kpi-etiket { font-size: 13px; font-weight: 600; color: var(--renk-metin-soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-kpi-deger { margin: 10px 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -.015em; color: var(--renk-metin); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-kpi-alt { font-size: 12px; min-height: 18px; }

.ap-degisim { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ap-degisim small { font-weight: 500; color: var(--renk-metin-soluk); }
.ap-artis { color: var(--renk-yesil); background: color-mix(in srgb, var(--renk-yesil) 12%, transparent); }
.ap-dusus { color: var(--renk-kirmizi); background: color-mix(in srgb, var(--renk-kirmizi) 12%, transparent); }
.ap-notr { color: var(--renk-metin-soluk); background: var(--renk-panel); font-weight: 600; }
.ap-hero .ap-degisim small { color: inherit; opacity: .8; }

/* --- Kartlar / ızgaralar --- */
.ap-izgara-2 { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 16px; }
.ap-izgara-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.ap-kart {
  background: var(--renk-kart); border: 1px solid var(--renk-cizgi); border-radius: var(--radius);
  padding: 16px 18px 18px; box-shadow: var(--golge); min-width: 0;
  animation: kutuGirisAnim var(--sure-yavas) var(--ease-out) backwards;
}
.ap-kart-baslik { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.ap-kart-baslik h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--renk-metin); }
.ap-kart-not { font-size: 12px; color: var(--renk-metin-soluk); }
.ap-link {
  background: none; border: 0; padding: 0; color: var(--renk-ana); font-weight: 700; font-size: 12.5px; cursor: pointer;
}
[data-tema="koyu"] .ap-link { color: var(--renk-ana-acik); }
.ap-link:hover { text-decoration: underline; }
.ap-bos { padding: 26px 8px; text-align: center; color: var(--renk-metin-soluk); font-size: 13px; }
.ap-hata {
  padding: 14px 16px; border-radius: var(--radius); background: var(--renk-kirmizi-soft); border: 1px solid var(--renk-kirmizi-cizgi);
  color: var(--renk-metin); font-size: 13.5px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.ap-alt-bilgi { display: flex; justify-content: flex-end; align-items: center; gap: 12px; font-size: 12px; color: var(--renk-metin-soluk); margin-top: -6px; }

/* --- Günlük sütun grafiği --- */
.ap-kart-genis { display: flex; flex-direction: column; }
.ap-sutun-grafik { position: relative; flex: 1; display: flex; flex-direction: column; }
.ap-sutun-alan { position: relative; flex: 1; min-height: 220px; margin-left: 58px; border-bottom: 1px solid var(--renk-cizgi); }
.ap-izgara { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--renk-cizgi); }
.ap-izgara span {
  position: absolute; right: calc(100% + 8px); top: -8px; font-size: 11px; color: var(--renk-metin-soluk);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ap-sutunlar { position: absolute; inset: 0; display: flex; align-items: stretch; gap: 2px; isolation: isolate; }
.ap-sutun { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; justify-content: center; cursor: default; outline: none; }
.ap-sutun-dolgu {
  width: 100%; max-width: 22px; border-radius: 4px 4px 0 0; background: var(--ap-seri);
  opacity: .82; transform-origin: bottom; animation: apSutunBuyu .5s var(--ease-out) backwards;
  transition: opacity var(--gecis), background-color var(--gecis);
}
.ap-sutun-bugun .ap-sutun-dolgu { opacity: 1; background: var(--ap-seri-vurgu); }
.ap-sutun-aktif .ap-sutun-dolgu, .ap-sutun:hover .ap-sutun-dolgu { opacity: 1; }
.ap-sutun-aktif::before {
  content: ""; position: absolute; inset: 0 -1px; background: color-mix(in srgb, var(--ap-seri) 9%, transparent); border-radius: 4px; z-index: -1;
}
.ap-sutun-etiket {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  font-size: 10.5px; color: var(--renk-metin-soluk); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ap-sutun-bugun .ap-sutun-etiket { color: var(--renk-metin); font-weight: 700; }
.ap-sutun-grafik { padding-bottom: 22px; }
@keyframes apSutunBuyu { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.ap-ipucu {
  position: absolute; top: -6px; z-index: 5; pointer-events: none; min-width: 140px;
  padding: 8px 11px; border-radius: 9px; background: var(--renk-bar); color: var(--renk-bar-metin);
  box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 12px;
}
.ap-ipucu-baslik { opacity: .75; }
.ap-ipucu-deger { font-size: 15px; font-weight: 800; margin: 2px 0; font-variant-numeric: tabular-nums; }
.ap-ipucu-alt { opacity: .75; }

/* --- Sıralama çubukları (şubeler / ürünler) --- */
.ap-sira { display: flex; flex-direction: column; gap: 12px; }
.ap-sira-satir { display: flex; gap: 11px; align-items: flex-start; border-radius: 10px; padding: 2px 4px; margin: 0 -4px; }
.ap-tiklanir { cursor: pointer; }
.ap-tiklanir:hover { background: var(--renk-panel); }
.ap-sira-no {
  flex: 0 0 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: var(--renk-metin-soluk); background: var(--renk-panel); margin-top: 1px;
}
.ap-sira-satir:first-child .ap-sira-no { color: #fff; background: linear-gradient(155deg, #f5b52e, #c98500); }
.ap-sira-govde { flex: 1; min-width: 0; }
.ap-sira-ust { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.ap-sira-ad { font-weight: 600; color: var(--renk-metin); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-sira-deger { font-weight: 700; color: var(--renk-metin); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ap-sira-yol { height: 8px; margin-top: 6px; border-radius: 4px; background: var(--renk-panel); overflow: hidden; }
.ap-sira-dolgu { height: 100%; border-radius: 4px; background: var(--ap-seri); transform-origin: left; animation: apCubukBuyu .55s var(--ease-out) backwards; }
.ap-sira-alt { margin-top: 4px; font-size: 11.5px; color: var(--renk-metin-soluk); }
.ap-sira-alt b { color: var(--renk-metin); font-weight: 700; }
@keyframes apCubukBuyu { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- Halka grafik --- */
.ap-halka-sarmal { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.ap-halka-kutu { position: relative; width: 170px; height: 170px; flex: 0 0 auto; }
.ap-halka { width: 100%; height: 100%; display: block; }
.ap-halka-zemin { stroke: var(--renk-panel); }
.ap-halka-dilim { animation: apHalkaGir .6s var(--ease-out) backwards; }
@keyframes apHalkaGir { from { opacity: 0; } to { opacity: 1; } }
.ap-halka-orta { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ap-halka-orta small { font-size: 11px; color: var(--renk-metin-soluk); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ap-halka-orta strong { font-size: 17px; font-weight: 800; color: var(--renk-metin); font-variant-numeric: tabular-nums; }
.ap-lejant { flex: 1 1 160px; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.ap-lejant-satir { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; font-size: 12.5px; }
.ap-lejant-nokta { width: 10px; height: 10px; border-radius: 3px; }
.ap-lejant-ad { color: var(--renk-metin); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-lejant-yuzde { color: var(--renk-metin-soluk); font-variant-numeric: tabular-nums; }
.ap-lejant-deger { color: var(--renk-metin); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

/* --- Son satışlar akışı --- */
.ap-akis { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ap-akis li { display: flex; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--renk-cizgi-soft); }
.ap-akis li:last-child { border-bottom: 0; }
.ap-akis-nokta {
  flex: 0 0 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--ap-seri);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ap-seri) 18%, transparent);
}
.ap-akis li:first-child .ap-akis-nokta { animation: apNabiz 2s ease-in-out infinite; }
@keyframes apNabiz { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ap-seri) 6%, transparent); } }
.ap-akis-govde { flex: 1; min-width: 0; }
.ap-akis-ust { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.ap-akis-cari { font-weight: 600; color: var(--renk-metin); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-akis-tutar { font-weight: 700; color: var(--renk-metin); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ap-akis-alt { font-size: 11.5px; color: var(--renk-metin-soluk); margin-top: 2px; }

/* --- Yüklenirken iskelet --- */
.ap-iskelet { display: flex; flex-direction: column; gap: 16px; }
.ap-iskelet-satir { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.ap-iskelet-blok {
  height: 108px; border-radius: var(--radius); border: 1px solid var(--renk-cizgi);
  background: linear-gradient(90deg, var(--renk-kart) 0%, var(--renk-panel) 50%, var(--renk-kart) 100%);
  background-size: 200% 100%; animation: apIskelet 1.3s ease-in-out infinite;
}
.ap-iskelet-hero { height: 150px; }
.ap-iskelet-uzun { height: 260px; }
@keyframes apIskelet { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* --- Sayfa üstü satış şeridi --- */
.ss {
  display: flex; align-items: stretch; gap: 0; margin: 0 0 16px; padding: 0;
  background: var(--renk-kart); border: 1px solid var(--renk-cizgi); border-radius: var(--radius);
  box-shadow: var(--golge); overflow: hidden; position: relative;
}
.ss::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--ap-seri), var(--ap-seri-vurgu)); }
.ss-oge {
  display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 9px 16px; min-width: 0;
  border-right: 1px solid var(--renk-cizgi-soft);
}
.ss-ana {
  flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; padding-left: 18px;
  background: none; border: 0; border-right: 1px solid var(--renk-cizgi-soft); border-radius: 0; cursor: pointer;
  color: inherit; text-align: left; font: inherit;
}
.ss-ana:hover { background: var(--renk-panel); }
.ss-ana .ss-deger { font-size: 17px; }
.ss-etiket { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--renk-metin-soluk); white-space: nowrap; }
.ss-deger { font-size: 14.5px; font-weight: 800; color: var(--renk-metin); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ss-kisa { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.ss-grafik { justify-content: center; padding: 6px 12px; }
.ss-mini { width: 120px; height: 30px; display: block; overflow: visible; }
.ss-mini-alan { fill: color-mix(in srgb, var(--ap-seri) 16%, transparent); }
.ss-mini-cizgi { fill: none; stroke: var(--ap-seri); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ss-mini-nokta { fill: var(--ap-seri-vurgu); stroke: var(--renk-kart); stroke-width: 2; }
.ss-kapat {
  margin-left: auto; align-self: center; background: none; border: 0; color: var(--renk-metin-soluk);
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 13px; margin-right: 6px; padding: 0;
}
.ss-kapat:hover { background: var(--renk-panel); color: var(--renk-metin); }
.ss-yukleniyor { padding: 12px 18px; font-size: 13px; color: var(--renk-metin-soluk); }
.ss.ss-kapali { background: none; border: 0; box-shadow: none; overflow: visible; justify-content: flex-end; margin-bottom: 8px; }
.ss.ss-kapali::before { display: none; }
.ss-ac {
  background: var(--renk-kart); border: 1px solid var(--renk-cizgi); border-radius: 999px; padding: 5px 12px;
  font-size: 12px; font-weight: 700; color: var(--renk-metin-soluk); cursor: pointer; box-shadow: var(--golge);
}
.ss-ac:hover { color: var(--renk-metin); border-color: var(--renk-ana-acik); }

/* --- Sayfa başlıkları: küçük renkli vurgu (tüm sayfalar) --- */
.sekme-baslik { display: flex; align-items: center; gap: 11px; }
.sekme-baslik::before {
  content: ""; flex: 0 0 6px; height: 24px; border-radius: 3px;
  background: linear-gradient(180deg, var(--ap-seri), var(--ap-seri-vurgu));
}

@media (max-width: 1100px) {
  .ap-izgara-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ss-gizlenebilir { display: none; }
}
@media (max-width: 640px) {
  .ap-hero { padding: 18px; }
  .ap-hero-sag { text-align: left; }
  .ap-hero-selam { font-size: 19px; }
  .ap-kpi-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ap-kpi { padding: 12px; }
  .ap-kpi-deger { font-size: 18px; }
  .ap-kpi-alt small { display: none; }
  .ap-izgara-3 { grid-template-columns: minmax(0, 1fr); }
  .ap-sutun-alan { min-height: 170px; margin-left: 46px; }
  .ss-grafik { display: none; }
  .ss-oge { padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-sutun-dolgu, .ap-sira-dolgu, .ap-halka-dilim, .ap-hero, .ap-kpi, .ap-kart, .ap-iskelet-blok, .ap-akis li:first-child .ap-akis-nokta { animation: none !important; }
}