/* ==========================================================================
   ErpMerkez — TEMA  ("Teknik Sistem")
   --------------------------------------------------------------------------
   Google Stitch'te uretilen ikinci tasarim yonu. Onceki kurumsal panel
   gorunumunden BILEREK uzaklasir:

     * Sol tarafta 64px'lik KOYU IKON SERIDI
     * Yaninda secili bolumun alt sayfalarini gosteren ACIK GRI PANEL
     * UST BAR YOK — sayfa basligi ve araclar icerigin icinde
     * Kartlarda kenarlik ve golge YOK; ayrim hafif zemin + tipografi ile
     * Kose yaricapi 6px (keskin), vurgu rengi CANLI YESIL #10B981
     * Rakamlar tabular (sutunlar hizali), tablolar dar ve teknik

   Kabuk (ikon seridi + panel) lib/sayfa-veri.js tarafindan uretilir;
   sayfa ICERIGI kopyalanan HTML'den oldugu gibi gelir.
   ========================================================================== */

/* ---------------------------------------------------------------- DEGISKENLER */
:root {
  --em-serit:        #111827;   /* dar ikon seridi */
  --em-serit-2:      #1f2937;
  --em-panel:        #f9fafb;   /* ikincil menu paneli */
  --em-panel-cizgi:  #eceff3;
  --em-zemin:        #f1f5f9;   /* icerik zemini — kartlar ayrissin diye BELIRGIN gri
                                   (olculdu 2026-08-18: eski sistem #f1f5f9, bizde #f7f7f8 idi
                                    ve kartlarda golge yoktu; her sey duz beyaz goruluyordu) */
  --em-yuzey:        #ffffff;
  --em-yuzey-2:      #f9fafb;
  --em-cizgi:        #e2e8f0;   /* kenarlik biraz belirgin (eski sistem ile ayni) */
  --em-cizgi-koyu:   #dfe3e8;

  --em-metin:        #111827;
  --em-metin-2:      #6b7280;
  --em-metin-3:      #8a93a3;   /* soluk metin okunur olsun */

  /* TABLO IZGARASI (eski sistem ile esitlendi, 11.09.2026 -- bkz. asagidaki
     "YAZI KIMLIGI" blogu). Hucre metni --em-metin-2 (#6b7280) idi;
     metnin KENDISI gri oldugu icin dolu/soluk ayrimi kalmiyordu. */
  --em-tablo-metin:        #2c3340;   /* hucre metni (eski sistem rgb(44,51,64)) */
  --em-tablo-baslik:       #475569;   /* sutun basligi   (rgb(71,85,105)) */
  --em-tablo-baslik-zemin: #f8fafc;   /* baslik satiri zemini */
  --em-tablo-zebra:        #eef1f5;   /* cift satir (eski sistem #e9ecef) */

  --em-ana:          #10b981;   /* canli yesil */
  --em-ana-koyu:     #059669;
  --em-ana-acik:     #ecfdf5;
  --em-ana-kenar:    #a7f3d0;

  /* MARKA SERIDI  (17.09.2026)
     Kopyalanan sayfalarin KART BASLIKLARI eski sistemin koyu lacivertini
     kullaniyordu (#0f172a -> #1e293b). Tema boru hatti "koyu zemin notr
     yuzeye iner" kuralini uygulayinca o basliklar var(--em-yuzey-2)'ye
     dusuyor, yani NEREDEYSE BEYAZ kaliyordu. Kullanici bildirdi:
     "eski sistemde bu sayfada temalar var bizde yok bembeyaz".
     Baslik seridi notr bir yuzey DEGILDIR; kimligi tasiyan parcadir.
     Bu yuzden BIZIM YESILIMIZE cevrilir (bkz. sayfa-veri.js MARKA_SERIDI).
     --em-serit-uzeri : seridin USTUNDEKI yazi/ikon rengi
     --em-serit-cam   : serit uzerindeki yarı saydam rozet/ikon kutusu */
  --em-serit:        linear-gradient(145deg, #059669 0%, #10b981 100%);
  --em-serit-uzeri:  #ffffff;
  --em-serit-cam:    rgba(255, 255, 255, 0.20);
  /* ISG modul seridinin koyu yesil tonu (.em-baslik--isg ile ayni) --
     kopya sayfalar (isg_kazalar.html pencere basligi) bunu DEGISKENLE
     kullanir; sayfa icine sabit renk yazilirsa tema katmani ezer. */
  --em-isg-koyu:     linear-gradient(135deg, #052e26 0%, #0b5345 55%, #0f766e 100%);

  --em-basari:       #10b981;
  --em-basari-acik:  #ecfdf5;
  --em-uyari:        #d97706;
  --em-uyari-acik:   #fffbeb;
  --em-hata:         #dc2626;
  --em-hata-acik:    #fef2f2;
  --em-bilgi:        #0891b2;
  --em-bilgi-acik:   #ecfeff;

  /* KOPYALANAN SAYFALARIN SIK KULLANDIGI SABIT TONLAR.
     Degerler BUGUNKU gorunumle BIREBIR AYNI -- burada bir sey degismiyor.
     Var olma sebepleri koyu tema: o tonlar sayfalarda sabit yazildigi icin
     koyu zeminde okunmuyorlardi (olculdu 7 Eylul 2026: koyu kirmizi tutar
     koyu kart uzerinde kontrast 2.11). Degisken haline gelince koyu tema
     onlari kendi paletinden acabiliyor. */
  --em-eksi:   #991b1b;        /* negatif tutar (borc) */
  --em-arti:   #166534;        /* pozitif tutar (alacak) */

  /* FINANS OZET KUTUSU TONLARI  (lib/yeni-ekranlar.js finansKutusu).
     Degerler BUGUNKU gorunumle BIREBIR AYNI; degisen yalnizca NEREDE
     yazildiklari. Onceden kutunun ikonuna ve rakamina satir ici
     `style="color:#10b981"` olarak basiliyorlardi. Iki sonucu vardi:
       - kurumsal gorunum denetimi bunlari "gomulu renk" diye isaretliyordu
         (merkez-muhasebe ve KDV raporu bu yuzden KISMEN kaliyordu),
       - koyu temada palet bu tonlari acamiyordu, cunku satir ici stil
         degiskeni eziyordu -- ayni tuzak --em-eksi/--em-arti icin de
         yasanmisti (7 Eylul 2026).
     Degisken olunca koyu tema kendi degerini verebilir. */
  --em-fin-primary:        #10b981;
  --em-fin-primary-zemin:  rgba(16,185,129,.12);
  --em-fin-danger:         #ef4444;
  --em-fin-danger-zemin:   rgba(239,68,68,.12);
  --em-fin-gray:           #64748b;
  --em-fin-gray-zemin:     rgba(100,116,139,.12);
  --em-fin-info:           #3b82f6;
  --em-fin-info-zemin:     rgba(59,130,246,.12);
  --em-fin-warning:        #f59e0b;
  --em-fin-warning-zemin:  rgba(245,158,11,.12);
  --em-fin-iz:             #e9edf2;   /* halkanin bos kismi */
  /* ROZET YAZI RENKLERI. 146 ekranlik taramada EN COK tekrar eden sorun
     (192 adet): rozetin ZEMINI degiskenle koyulasiyor ama YAZISI sabit
     kaldigi icin koyu yesil uzerinde koyu yesil yazi kaliyordu (kontrast
     2.79, olculdu 7 Eylul 2026). Degerler bugunkunun AYNISI. */
  /* TABLO HUCRESI VURGULARI. Bu renkleri sayfa BETIKLERI satir ici stil
     olarak yaziyor (Tabulator bicimleyicileri); satir ici stil CSS ile
     ezilemedigi icin degisken uzerinden verilirler. Degerler bugunkunun
     AYNISI -- acik temada hicbir sey degismiyor. */
  /* UYARI KUTUSU (alert) YAZI RENKLERI. Acik temada !important ile
     yazildiklari icin koyu tema kurallari onlari ezemiyordu; yil kapanisi
     ekraninda koyu amber kutu uzerinde koyu amber yazi kaliyordu
     (kontrast 2.26, olculdu 7 Eylul 2026). Degerler bugunkunun AYNISI. */
  --em-uyarikutu-basari: #065f46;
  --em-uyarikutu-hata:   #991b1b;
  --em-uyarikutu-uyari:  #92400e;
  --em-uyarikutu-bilgi:  #155e75;
  --em-hucre-uyari-zemin: #fef3c7;
  --em-hucre-uyari-yazi:  #b45309;
  --em-hucre-hata-zemin:  #fde2e2;
  --em-hucre-hata-yazi:   #b91c1c;
  --em-rozet-basari: #047857;
  --em-rozet-hata:   #b91c1c;
  --em-rozet-uyari:  #b45309;
  --em-rozet-bilgi:  #0e7490;
  --em-gri-6:  #475569;        /* koyu gri metin */
  --em-gri-5:  #64748b;        /* orta gri metin */
  /* ACIK GRI YUZEYLER. Kopyalanan sayfalar kart/serit zeminlerini bu
     tonlarla yaziyor. Degerler BUGUNKUNUN AYNISI; degisken olmalarinin
     tek sebebi koyu temada pesinden gelebilmeleri. */
  --em-gri-50:  #f8fafc;
  --em-gri-100: #f1f5f9;
  --em-gri-150: #f9fafb;
  --em-gri-160: #f3f4f6;
  --em-gri-200: #e2e8f0;
  /* CAM YUZEY: kopyalanan sayfalarin serit/kart zeminlerinde kullandigi
     YARI SAYDAM BEYAZ (rgba(255,255,255,.4 .. 1)). Acik zeminde bunlarin
     hepsi "neredeyse beyaz" goruluyor, o yuzden TEK degerde toplandi --
     gozle ayirt edilmez. Koyu temada ise ayni beyaz gri bir serit
     yapiyordu (kullanici bildirdi 7 Eylul 2026: personel ekraninin ust
     ekmek kirintisi seridi okunmuyordu). */
  --em-cam: rgba(255, 255, 255, .7);
  /* KOPYALANAN TEMANIN KOYU YAZI RENKLERI. Degerler BUGUNKUNUN AYNISI;
     degisken olmalarinin tek sebebi koyu temada acilabilmeleri. */
  --em-baslik:  #1d398d;       /* sayfa basligi (lacivert) */
  --em-gri-8:   #32393f;       /* Bootstrap baslik grisi (h1..h6) */
  --em-gri-9:   #54606c;       /* orta koyu gri (rozet/etiket metni) */
  --em-gri-7:   #334155;       /* koyu gri govde metni */
  --em-gri-bs:  #6c757d;       /* Bootstrap soluk metni */
  --em-metin-bs:#212529;       /* Bootstrap govde metni */
  --em-gri-210: #eceff3;

  --em-r-s: 4px;
  --em-r:   6px;
  --em-r-l: 6px;               /* keskin koseler */
  --em-serit-g: 64px;          /* ikon seridi genisligi */
  --em-panel-g: 208px;         /* ikincil panel genisligi */
  /* OZEL PENCERE KATMANI (28.09.2026 e2e #5, #44): .em-pd-modal, .em-tp-modal
     ve .em-mdl 1090'da duruyordu; SweetAlert onay sorusu (1060) ARKADA
     kaliyor, "Evet" basilamiyordu. Kenar serit 1040 ve ust menu 1045'in
     ustu, SweetAlert 1060'in alti. Kullanan kural yedekli yazar:
     z-index: var(--em-z-pencere, 1055). */
  --em-z-pencere: 1055;

  --bs-primary: #10b981;
  --bs-primary-rgb: 16,185,129;
  --bs-body-color: #111827;
  --bs-body-bg: #ffffff;
  --bs-border-color: #eceff3;
  --bs-border-radius: 6px;
  --bs-link-color: #059669;
  --bs-link-hover-color: #047857;
}

/* ---------------------------------------------------------------------- TEMEL */
body {
  background: var(--em-zemin) !important;
  color: var(--em-metin) !important;
  font-family: Inter, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Arial, sans-serif !important;
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: -.008em;
  -webkit-font-smoothing: antialiased;
}
/* Rakamlar sutun halinde hizali dursun (teknik gorunum) */
td, th, .tabulator-cell, .em-sayi, .stat-card h4, .stat-card h3 {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
a { color: var(--em-ana-koyu); text-decoration: none; }
a:hover { color: var(--em-ana); }
h1,h2,h3,h4,h5,h6 { color: var(--em-metin); font-weight: 650; letter-spacing: -.02em; }
hr { border-color: var(--em-cizgi); opacity: 1; }
::selection { background: var(--em-ana-acik); color: var(--em-ana-koyu); }

* { scrollbar-width: thin; scrollbar-color: var(--em-cizgi-koyu) transparent; }
*::-webkit-scrollbar { width: 7px; height: 7px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--em-cizgi-koyu); border-radius: 99px; }

/* ============================================================ GIRIS EKRANI */
.em-giris-sayfa { margin: 0; background: var(--em-yuzey); }
.em-giris { display: grid; grid-template-columns: minmax(360px, 40%) 1fr; min-height: 100vh; }

/* --- sol: form --- */
.em-giris__sol {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 32px; background: var(--em-yuzey);
}
.em-giris__kutu { width: 100%; max-width: 380px; }
.em-giris__marka { margin-bottom: 40px; }
.em-giris__logo img { height: 34px; width: auto; display: block; }
.em-giris__baslik {
  font-size: 1.4rem; font-weight: 700; letter-spacing: -.03em;
  color: var(--em-metin); margin: 0 0 4px;
}
.em-giris__alt { font-size: .84rem; color: var(--em-metin-3); margin: 0 0 26px; }

.em-giris__etiket {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--em-metin-2); margin: 0 0 6px;
}
.em-giris__alan {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--em-cizgi-koyu); border-radius: var(--em-r);
  padding: 0 10px; margin-bottom: 16px; background: var(--em-yuzey);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.em-giris__alan:focus-within {
  border-color: var(--em-ana); box-shadow: 0 0 0 3px rgba(16,185,129,.14);
}
.em-giris__alan i { color: var(--em-metin-3); font-size: 17px; flex: 0 0 auto; }
.em-giris__alan input {
  flex: 1 1 auto; border: 0; outline: 0; background: transparent;
  padding: 10px 0; font-size: .875rem; color: var(--em-metin);
  font-family: inherit; min-width: 0;
}
.em-giris__alan input::placeholder { color: var(--em-metin-3); font-size: .82rem; }
.em-giris__goz {
  border: 0; background: transparent; color: var(--em-metin-3);
  cursor: pointer; padding: 4px; line-height: 1;
}
.em-giris__goz:hover { color: var(--em-ana-koyu); }

.em-giris__satir { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.em-giris__hatirla {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: .82rem; color: var(--em-metin-2); margin: 0;
}
.em-giris__hatirla input { accent-color: var(--em-ana); width: 15px; height: 15px; }

.em-giris__dugme {
  width: 100%; border: 0; border-radius: var(--em-r);
  background: var(--em-ana); color: #fff;
  font-size: .875rem; font-weight: 650; font-family: inherit;
  padding: 11px 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .12s ease;
}
.em-giris__dugme:hover { background: var(--em-ana-koyu); }
.em-giris__dugme i { font-size: 17px; }

.em-giris__uyari {
  display: flex; align-items: flex-start; gap: 8px;
  border-radius: 0 var(--em-r) var(--em-r) 0;
  padding: 10px 12px; margin-bottom: 18px; font-size: .82rem; line-height: 1.45;
}
.em-giris__uyari i { font-size: 16px; flex: 0 0 auto; margin-top: 1px; }
.em-giris__uyari--hata  { background: var(--em-hata-acik); border-left: 2px solid var(--em-hata); color: #991b1b; }
.em-giris__uyari--bilgi { background: var(--em-ana-acik); border-left: 2px solid var(--em-ana); color: #065f46; }
.em-giris__uyari a { color: inherit; text-decoration: underline; }

.em-giris__yardim {
  font-size: .76rem; color: var(--em-metin-3); margin: 18px 0 0; line-height: 1.5;
}
.em-giris__yardim code {
  background: var(--em-yuzey-2); padding: 1px 5px; border-radius: 3px;
  color: var(--em-metin-2); font-size: .74rem;
}
.em-giris__dip {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--em-cizgi);
  font-size: .7rem; color: var(--em-metin-3); letter-spacing: .03em;
}

/* --- sag: gorsel --- */
.em-giris__sag {
  position: relative; overflow: hidden;
  background: var(--em-serit);
  display: flex; align-items: center; padding: 48px;
}
.em-giris__ag { position: absolute; inset: 0; width: 100%; height: 100%; }
/* MARKA LOGOSU: sag paneldeki gorselin ve yazilarin ARKASINDA durur.
   Sol taraftaki kucuk logo kaldirildi; marka artik burada. Rengine
   dokunulmaz (logo.png kendi renklerindedir), yalnizca saydamlik verilir
   ki uzerindeki baslik ve metin okunabilsin. */
.em-giris__sag::after {
  content: '';
  position: absolute; inset: 0;
  /* Saha sahnesi alt şeride geldiği için filigran biraz YUKARI çekildi ve
     soluklaştırıldı; ikisi üst üste binip karmaşa yaratmasın. */
  background: url('/assets/img/logo.png') no-repeat center 34%;
  background-size: min(60%, 430px) auto;
  opacity: .11;
  pointer-events: none;
  z-index: 0;
}
/* ==================================================== FİRMA GİRİŞ EKRANI
   (2026-09-06 yeniden tasarım) Önceki iki sütunlu düzen kullanıcıya
   "çocukça/basit" geldiği için komple değişti: tam ekran koyu zemin,
   ortada tek bir cam kart, altta sessiz referans şeridi.
   AYRI İSİM ALANI (.em-gr*) KULLANILIYOR -- yukarıdaki .em-giris*
   kuralları YÖNETİM giriş ekranının (lib/yonetim-giris.js, 27 yerde aynı
   sınıflar) da kullandığı ortak koddur, ona dokunulmadı. */
.em-gr-sayfa { margin: 0; background: #070c15; }
/* KAPIYA GORE TEMA RENGI (25.09.2026)
   Kullanici: "her birine tiklayinca ekran tema rengi farkli olsun."
   Firma yesil, Satici turkuaz, Taseron mavi -- kapi dugmelerindeki simge
   renkleriyle AYNI. Giris ekraninin butun vurgu renkleri (dugme, odak
   halkasi, secili kapi, modul etiketleri, direk hattindaki akim, logo)
   bu degiskenlerden okur; kapi degisince ekranin tamami o renge doner.
   Varsayilan firma: sinif gelmezse ekran eskisi gibi yesil kalir. */
.em-gr {
  --gr-rgb: 16,185,129;  --gr-rgb2: 52,211,153;
  --gr-ana: #10b981; --gr-koyu: #059669; --gr-dugme1: #12c88c;
  --gr-acik: #34d399; --gr-acik2: #6ee7b7; --gr-yazi: #d1fae5;
  --gr-logo-don: 0deg;
}
.em-gr--satici {
  --gr-rgb: 20,184,166;  --gr-rgb2: 45,212,191;
  --gr-ana: #14b8a6; --gr-koyu: #0f766e; --gr-dugme1: #1cc7b4;
  --gr-acik: #2dd4bf; --gr-acik2: #5eead4; --gr-yazi: #ccfbf1;
  --gr-logo-don: 14deg;
}
.em-gr--taseron {
  --gr-rgb: 59,130,246;  --gr-rgb2: 96,165,250;
  --gr-ana: #3b82f6; --gr-koyu: #1d4ed8; --gr-dugme1: #4f8ff8;
  --gr-acik: #60a5fa; --gr-acik2: #93c5fd; --gr-yazi: #dbeafe;
  --gr-logo-don: 58deg;
}
/* Logo tek renkli bir gorsel; tonu kapiya gore kaydirilir. */
.em-gr .em-gr__logo { filter: hue-rotate(var(--gr-logo-don)); transition: filter .3s ease; }
.em-gr {
  position: relative; min-height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* ALT PAY = referans isimlerinin aktigi serit.
     Olculdu 2026-09-07: 620px yuksekliginde guven seridi 503-524, firma
     adi 493-509 -> UST USTE biniyordu; ilk duzeltme yetmedi, bu kez de
     telif satiri (577-594) isimle (584-600) cakisti. Tel bandi ekranin
     alt min(30vh,200px) kismi; isimler bandin ust ucte birinde akiyor.
     Buraya o kadar pay birakilinca icerik bandin uzerinde kalir ama yine
     direklere yakin durur (kullanici istegi 2026-09-07: "direklere
     yaklastir") -- pay bandin TAMAMI degil, yarisi kadardir. */
  /* BANT = alttaki direk/akim seridi. Alt pay bandan KUCUK olursa icerik
     bandin icine tasar ve referans adlari giris kartinin uzerine biner
     (olculdu 2026-09-10, mobil 375x812). Ikisi ayri sabitlerde durdukca
     bu hata tekrar ediyordu; artik TEK degiskene bagli. */
  --em-gr-bant: min(26vh, 180px);
  padding: 30px 20px calc(var(--em-gr-bant) + 10px);
  background:
    radial-gradient(900px 520px at 50% 18%, rgba(var(--gr-rgb),.10), transparent 70%),
    radial-gradient(700px 420px at 82% 88%, rgba(56,189,248,.05), transparent 70%),
    linear-gradient(180deg, #070c15 0%, #0b1220 55%, #070c15 100%);
}
/* Arka plan dokusu: çok ince ızgara + alt kenarda enerji hattı silueti. */
.em-gr__fon { position: absolute; inset: 0; pointer-events: none; }
.em-gr__fon::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(148,163,184,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.055) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(760px 520px at 50% 30%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(760px 520px at 50% 30%, #000 35%, transparent 78%);
}
.em-gr__hat {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%;
  height: var(--em-gr-bant); fill: none; opacity: .5;
  stroke-linecap: round; stroke-linejoin: round;
}
.em-gr__hat-cizgi { stroke: rgba(148,163,184,.22); stroke-width: 2.4; }
.em-gr__hat-tel   { stroke: rgba(148,163,184,.16); stroke-width: 1.6; }
.em-gr__hat-akim {
  stroke: rgba(var(--gr-rgb),.75); stroke-width: 2.2;
  stroke-dasharray: 3 240; filter: drop-shadow(0 0 6px rgba(var(--gr-rgb),.6));
  animation: em-gr-akim 9s linear infinite;
}
@keyframes em-gr-akim { to { stroke-dashoffset: -486; } }

/* ---- REFERANS AKIMI: hattin uzerinden gecen akimin KENDISI referans
   firmadir (kullanici istegi 2026-09-07: "surekli akan referans olmasi
   lazim, KUTU ICINDE DEGIL AKIM ICINDE, daha guzel kurumsal ve sempatik").

   Onceki surumde beyaz plakali dikdortgen bir rozet vardi; tele yapistirilmis
   bir etiket gibi duruyordu. Burada hicbir sey kutu DEGIL: yumusak bir
   kuyruk, parlak bir cekirdek ve akkor bir isim -- hepsi isik olarak okunur.
   Sert kenar / cerceve / dolgu kutusu EKLEMEYIN, istegin tamami buydu.

   Katman siluetle AYNI kutuyu ve AYNI preserveAspectRatio degerini kullanir;
   biri degisirse digeri de degismeli, yoksa dugumler telden kayar. */
.em-gr__akim {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%;
  height: var(--em-gr-bant);
  /* Sirasini bekleyen referanslar yolun sonunda (viewBox disi, x=2020)
     park eder; overflow gizli olmazsa disarida gorunurler. */
  overflow: hidden;
  pointer-events: none;              /* bos alan tiklamayi yutmasin */
  z-index: 2;
}
.em-gr__ref-bag { pointer-events: auto; cursor: pointer; }
.em-gr__ref-bag--pasif { cursor: default; pointer-events: none; }

/* Kuyruk: akimin arkasinda biraktigi sonuk iz. Kenari olmadigi icin
   telin egimi ile arasindaki kucuk aci farki gorunmez. */
.em-gr__ref-kuyruk { fill: rgba(var(--gr-rgb),.16); filter: blur(7px); }
/* Hale: cekirdegin etrafindaki yumusak parlama. */
.em-gr__ref-hale   { fill: rgba(var(--gr-rgb),.20); filter: blur(5px); }
/* Oz: akimin en parlak noktasi. */
.em-gr__ref-oz {
  fill: var(--gr-acik2);
  filter: drop-shadow(0 0 7px rgba(var(--gr-rgb2),.95));
}
/* Logo daireye kirpilir -- plaka/cerceve YOK. */
.em-gr__ref-logo { opacity: .88; }
/* Logosuz kayitta bas harfler cekirdegin yerini alir. */
.em-gr__ref-kod {
  fill: var(--gr-yazi); font-size: 13px; font-weight: 700;
  letter-spacing: .08em; font-family: inherit;
  filter: drop-shadow(0 0 6px rgba(var(--gr-rgb2),.8));
}
/* Firma adi: akimin onunde akkor gibi. Kurumsal okunsun diye seyrek
   harfli, kucuk ve BUYUK harf. */
.em-gr__ref-ad {
  fill: rgba(209,250,229,.92); font-size: 12.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; font-family: inherit;
  filter: drop-shadow(0 0 8px rgba(var(--gr-rgb),.55));
}
.em-gr__ref { transition: opacity .25s ease; }
/* Uzerine gelince akim parlar -- tiklanabilir oldugu boyle anlasilir. */
.em-gr__ref:hover .em-gr__ref-ad,
.em-gr__ref:focus-within .em-gr__ref-ad { fill: #ecfdf5; }
.em-gr__ref:hover .em-gr__ref-hale,
.em-gr__ref:focus-within .em-gr__ref-hale { fill: rgba(var(--gr-rgb),.38); }
.em-gr__ref:hover .em-gr__ref-logo,
.em-gr__ref:focus-within .em-gr__ref-logo { opacity: 1; }
.em-gr__ref-bag:focus-visible .em-gr__ref-oz { fill: #ecfdf5; }
/* Dar ekranda hat zaten kirpiliyor; uzun firma adi tasmasin diye kisilir. */
@media (max-width: 720px) {
  .em-gr__ref-ad { font-size: 11px; letter-spacing: .1em; }
}


/* DUZEN (kullanici istegi 2026-09-07): "giris kutulari ekranin solunda
   olacak, ekranin saginda fm logosunu koy, temayi bozma".
   Iki sutun: SOL = cam kart (form), SAG = marka. Tema/renkler DEGISMEDI,
   yalniz yerlesim degisti. Guven seridi iki sutunun altinda tam genislikte
   kalir (grid-column: 1 / -1). */
.em-gr__ic {
  /* 1000 -> 1200px (25.09.2026, kullanici: "sagdaki bosluga dogru dagit ki
     asagidaki elektrik direkleri tam gorunsun"). Sag sutun en fazla ~508px
     olabiliyordu; modul etiketleri o dar sutunda 7 satira diziliyor ve kart
     sayfayi asagi itip direkleri kapatiyordu. Sol kart (420px) degismedi. */
  position: relative; z-index: 1; width: 100%; max-width: 1200px;
  display: grid; gap: 26px 72px; align-items: center;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  /* DIKEY YERLESIM (kullanici istegi 2026-09-07: "cok yukarda oldu
     direklere yaklastir"). Alt bandin `margin-top:auto`u butun bos alani
     yutuyor ve blok sayfanin tepesine yapisiyordu (olculdu: blok 40px'te
     bitiyor, direk silueti 700px'te basliyor -- arada 196px bosluk).
     Buraya da `auto` verilince bos alan IKIYE bolunur; blok asagi iner ve
     direklerin hemen ustune oturur. Icerik ekrandan uzunsa auto marjlar
     kendiliginden sifirlanir, tasma olmaz. */
  margin-top: auto;
}
.em-gr__ic > .em-gr__kart  { grid-column: 1; }
.em-gr__ic > .em-gr__marka { grid-column: 2; }
/* TANITIM PANOSU SAG SUTUNDA. Kendi kodundaki tanim da boyle diyor:
   "giris ekraninin SAG tarafindaki bos alanda donen tanitim panosu".
   Sutun verilmeyince izgara onu kendiliginden 2. satirin 1. sutununa,
   yani GIRIS KUTUSUNUN ALTINA koyuyordu: sayfa 362px tasiyor, pano
   ekranin altindan tasarak yarim gorunuyordu (olculdu 17.09.2026,
   1348x695). Sagda logonun altinda zaten bos alan var. */
.em-gr__ic > .em-gr__medya { grid-column: 2; }
/* Guven seridi her zaman TAM GENISLIK, en altta. */
.em-gr__ic > .em-gr__guven { grid-column: 1 / -1; }

/* Marka sag sutunda buyur: logo artik sayfanin ikinci yarisini tasiyor,
   kartin ustundeki kucuk basliktan cok daha buyuk olmali. */
.em-gr__marka { text-align: center; }
.em-gr__logo { height: clamp(92px, 14vw, 170px); width: auto; display: inline-block; }
.em-gr__ustyazi {
  display: block; margin-top: 16px;
  font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--em-gri-5);
}

/* TEK SUTUNA DUSUS: dar ekranda yan yana durmaz. Marka GORSEL OLARAK uste
   alinir (kaynakta formdan sonra durur, cunku klavye sirasinda form once
   gelmeli) -- tek sutunda once kimin ekraninda oldugunuzu gormek gerekir. */
@media (max-width: 900px) {
  .em-gr__ic { grid-template-columns: minmax(0, 420px); justify-content: center; gap: 22px; }
  .em-gr__ic > .em-gr__kart,
  .em-gr__ic > .em-gr__medya,
  .em-gr__ic > .em-gr__guven,
  .em-gr__ic > .em-gr__marka { grid-column: 1; }
  .em-gr__ic > .em-gr__marka { order: -1; }
  .em-gr__logo { height: 74px; }
  .em-gr__ustyazi { margin-top: 10px; font-size: .66rem; }
}

/* Cam kart: yüzey, ince kenar, derin ve yumuşak gölge. */
.em-gr__kart {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022));
  border: 1px solid rgba(255,255,255,.09); border-radius: 18px;
  padding: 30px 30px 26px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.em-gr__baslik {
  font-size: 1.32rem; font-weight: 680; letter-spacing: -.02em;
  color: #f1f5f9; margin: 0 0 6px;
}
.em-gr__alt { font-size: .82rem; color: #8b98ab; margin: 0 0 24px; }

.em-gr__etiket {
  display: block; font-size: .69rem; font-weight: 650; letter-spacing: .1em;
  text-transform: uppercase; color: #7d8a9d; margin-bottom: 7px;
}
.em-gr__alan {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
  background: rgba(2,6,15,.55); border: 1px solid rgba(255,255,255,.1);
  border-radius: 11px; padding: 0 13px; height: 46px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.em-gr__alan:focus-within {
  border-color: rgba(var(--gr-rgb),.6); background: rgba(2,6,15,.75);
  box-shadow: 0 0 0 3px rgba(var(--gr-rgb),.13);
}
.em-gr__alan i { color: var(--em-gri-5); font-size: 17px; flex: 0 0 auto; }
.em-gr__alan input {
  flex: 1; border: 0; background: transparent; outline: none;
  color: #e8eef6; font-size: .88rem; min-width: 0;
}
.em-gr__alan input::placeholder { color: #55627a; font-size: .82rem; }
/* TARAYICI OTOMATIK DOLDURMASI
   Chrome doldurdugu alana KENDI acik zeminini basar ve bu zemin `background`
   ile EZILEMEZ -- tarayici onu kullanici-ajani katmaninda uygular.
   Kullanici bulgusu (6 Eylul 2026): kullanici adi kutusu bembeyaz kaliyor,
   parola kutusu koyu duruyordu; ikisi yan yana uyumsuzdu.
   Cozum icten golgedir: alanin ustu 1000px'lik ic golgeyle boyanir. Metin
   rengi de ayrica -webkit-text-fill-color ile verilmeli, `color` da ezilemez.
   Ton SABITTIR: alanin kendi zemini yari saydam (rgba(2,6,15,.55)) ama ic
   golge saydam kabul etmez. Asagidaki deger goz karariyla degil, ekranda
   BOYANAN katmanlardan hesaplandi:
     zemin  linear-gradient(#070c15 -> #0b1220)      ~ rgb(10,16,29)
     kart   rgba(255,255,255,.055..024) cam          ~ rgb(20,30,41)
     alan   rgba(2,6,15,.55) bunun uzerinde          ~ rgb(10,17,27)
   transition 9999s: Chrome doldurdugu an bir kare beyaz cakmasin. */
.em-gr__alan input:-webkit-autofill,
.em-gr__alan input:-webkit-autofill:hover,
.em-gr__alan input:-webkit-autofill:focus,
.em-gr__alan input:-webkit-autofill:active {
  -webkit-text-fill-color: #e8eef6;
  caret-color: #e8eef6;
  -webkit-box-shadow: 0 0 0 1000px #0a111b inset;
          box-shadow: 0 0 0 1000px #0a111b inset;
  border-radius: 11px;
  transition: background-color 9999s ease-out 0s;
}
.em-gr__goz { border: 0; background: transparent; color: var(--em-gri-5); padding: 4px; cursor: pointer; }
.em-gr__goz:hover { color: var(--gr-ana); }

.em-gr__hatirla {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: .8rem; color: #8b98ab; margin-bottom: 22px;
}
.em-gr__hatirla input { accent-color: var(--gr-ana); width: 15px; height: 15px; }
.em-gr__dugme {
  width: 100%; height: 46px; border: 0; border-radius: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, var(--gr-dugme1), var(--gr-koyu));
  color: #04140e; font-size: .92rem; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 10px 26px rgba(var(--gr-rgb),.28);
  transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
}
.em-gr__dugme:hover { filter: brightness(1.06); transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(var(--gr-rgb),.34); }
.em-gr__dugme:active { transform: translateY(0); }

/* PORTAL KARTLARI  (17.09.2026)
   Giriş ekranında satıcı portalının HİÇ kapısı yoktu; taşeronunki de tek
   satırlık soluk bir bağlantıydı. Adresi bilmeyen satıcı/taşeron, ERP
   girişinde parolasını deneyip hata alıyordu.
   Kartlar formun ALTINDA durur; giriş kutusunun yerini değiştirmez, dar
   ekranda alt alta iner. Giriş ekranı koyu zeminlidir -- renkler oraya
   göre seçildi, marka yeşili yalnızca vurguda kullanılır. */
/* İKİSİ YAN YANA, GİRİŞ DÜĞMESİ YÜKSEKLİĞİNDE (kullanıcı 17.09.2026:
   "çok büyük olmuş, daha kibar yap, giriş butonunun büyüklüğünde olsun,
   hemen altına yan yana sığsın, sayfayı genişletip bozmasın").
   İlk sürüm alt alta İKİ BÜYÜK karttı ve giriş kutusunu uzatıyordu.
   minmax(0,1fr): dar ekranda taşma olmasın diye taban 0 -- aksi halde
   içerik kutuyu genişletir ve kart formu dışarı iter. */
/* UC KAPI (17.09.2026): firma + satici + taseron. Kullanici "taseron veya
   saticiya gecince farkli sayfaya geciyor gibi oluyor" dedi; cozum, ayni
   satirin UC EKRANDA DA durmasi ve bulunulan kapinin isaretli olmasi.
   Uc sutun dar ekranda sikisir -> 560px altinda alt alta iner. */
.em-gr__portal {
  margin: 14px 0 0; padding-top: 14px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.em-gr__pk {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 42px; padding: 0 10px; min-width: 0;
  border-radius: 10px; text-decoration: none;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.em-gr__pk:hover {
  background: rgba(255,255,255,.08); border-color: rgba(var(--gr-rgb),.45);
  transform: translateY(-1px);
}
.em-gr__pk-ikon {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; color: #fff;
}
.em-gr__pk-ikon--pazar,
.em-gr__pk-ikon--satici  { background: linear-gradient(140deg,#0f766e,#14b8a6); }
.em-gr__pk-ikon--taseron { background: linear-gradient(140deg,#1d4ed8,#3b82f6); }
.em-gr__pk-ikon--firma   { background: linear-gradient(140deg,#047857,#10b981); }

/* BULUNULAN KAPI: baglanti DEGIL, isaretli bir etiket. Kendine giden bir
   link tiklayinca "hicbir sey olmadi" hissi verir. Imlec de degismez. */
.em-gr__pk--secili {
  background: rgba(var(--gr-rgb),.14);
  border-color: rgba(var(--gr-rgb),.55);
  cursor: default;
}
.em-gr__pk--secili:hover { transform: none; background: rgba(var(--gr-rgb),.14); }
.em-gr__pk--secili .em-gr__pk-yazi { color: var(--gr-yazi); font-weight: 700; }
/* TEK SATIR: ad görünür, uzun ekranlarda taşmaz. Açıklama artık title
   niteliğinde durur -- yer kaplamadan bilgi kaybolmasın. */
.em-gr__pk-yazi {
  min-width: 0; color: #cbd5e1; font-size: .82rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.em-gr__pk:hover .em-gr__pk-yazi { color: #e2e8f0; }
/* Çok dar ekranda alt alta insin; yan yana sıkışıp okunmaz olmasın. */
@media (max-width: 560px) {
  .em-gr__portal { grid-template-columns: 1fr; }
}


.em-gr__yardim {
  margin: 20px 0 0; padding-top: 16px; font-size: .74rem; line-height: 1.6;
  color: #6b7789; border-top: 1px solid rgba(255,255,255,.07);
}
.em-gr__yardim code {
  color: #cbd5e1; background: rgba(255,255,255,.06);
  padding: 1px 6px; border-radius: 5px; font-size: .72rem;
}

.em-gr__uyari {
  display: flex; align-items: flex-start; gap: 9px; margin-bottom: 18px;
  padding: 11px 13px; border-radius: 10px; font-size: .8rem; line-height: 1.5;
}
.em-gr__uyari i { font-size: 16px; flex: 0 0 auto; margin-top: 1px; }
.em-gr__uyari--hata {
  background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); color: #fca5a5;
}
.em-gr__uyari--bilgi {
  background: rgba(var(--gr-rgb),.1); border: 1px solid rgba(var(--gr-rgb),.28); color: var(--gr-acik2);
}
.em-gr__uyari a { color: inherit; text-decoration: underline; }
.em-gr__uyari b { color: #fff; }

/* Guvence seridi: TASERON PORTALI ve PAZAR girisinde kullanilir
   (lib/giris-kabugu.js  yuvasi). Firma girisinde artik YOK --
   orada yerini slogan aldi (bkz. .em-gr__slogan). */
.em-gr__guven {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px;
  margin-top: 22px;
}
.em-gr__guven span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; color: #67748a;
}
.em-gr__guven i { font-size: 14px; color: rgba(var(--gr-rgb),.7); }

/* SLOGAN — eski dort satirlik "guvence" seridinin yerinde (kullanici
   2026-09-10 kaldirtti, yerine kendi slogani geldi).
   UC SATIR, UC KADEME: ilk satir BUYUK harf ve seyrek harfli (marka sesi),
   ikincisi normal cumle (konumlandirma), ucuncusu daha yumusak ve soluk
   (samimi kapanis). Ucu ayni boyda olsa hicbiri one cikmazdi. */
.em-gr__slogan {
  margin: 20px auto 0;
  max-width: 46ch;
  display: flex; flex-direction: column; gap: 7px;
  text-align: center;
  text-wrap: balance;
}
/* YAZI KADEMESI DUZELTILDI (22.09.2026, kullanici: "su yazi tiplerini daha
   guzel yapar misin, uyumsuz gibi"). Iki gercek kusur vardi:
   1) ORTA satir BASLIKTAN BUYUKTU (1.02rem > .96rem): goz once ortaya
      gidiyor, ust satir "kucuk kalmis baslik" gibi duruyordu.
   2) RENKLER ACIK TEMA GRILERINDENDI (--em-gri-5/6 = #475569 gibi). Bu panel
      KOYU; o griler koyu zeminde sonuk ve camurlu cikiyordu, uc satir uc ayri
      aileden gibi duruyordu.
   Simdi kademe acik: kucuk-sonuk ETIKET -> parlak ANA CUMLE -> yumusak
   kapanis. Renkler panelin kendi paletinden (#e2e8f0 / #94a3b8 / #64748b;
   ayni degerler .em-gr__pk-yazi ve .em-gr__yardim icinde de kullaniliyor). */
.em-gr__slogan-bas {
  font-size: clamp(.68rem, .95vw, .78rem);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: #64748b;
}
.em-gr__slogan-orta {
  font-size: clamp(.98rem, 1.5vw, 1.18rem);
  font-weight: 600;
  line-height: 1.45;
  color: #e2e8f0;
}
.em-gr__slogan-alt {
  font-size: clamp(.8rem, 1.1vw, .9rem);
  font-weight: 400;
  line-height: 1.55;
  color: #94a3b8;
}
@media (max-width: 900px) {
  .em-gr__slogan { margin-top: 14px; gap: 4px; }
}

.em-gr__dip {
  position: relative; z-index: 1; margin-top: auto;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  /* Alt pay 22px degil 0: kapsayicinin kendi alt payi (bant kadar) zaten
     ayrilmis durumda. 22px eklenince telif satiri alcak ekranlarda banda
     giriyor ve akan referans adlariyla cakisiyordu (olculdu 1366x620). */
  padding: 30px 0 0;
}
.em-gr__telif { font-size: .7rem; color: #4d5871; }

/* Referans şeridi bu sayfada akış içinde durur (koyu panelde mutlak
   konumlanıyordu); panel yine YUKARI doğru açılır. */
.em-gr .em-referans { position: relative; left: auto; bottom: auto; transform: none; }

@media (max-width: 560px) {
  /* ALT PAYI SIFIRLAMA: bandi (direk/akim seridi) icerigin uzerine
     bindiriyordu -- olculdu 2026-09-10, 375x812: referans adi giris
     kartinin son satirini kesiyordu. Pay DAIMA bant kadar olmali. */
  .em-gr { padding: 24px 16px calc(var(--em-gr-bant) + 8px); }
  .em-gr__kart { padding: 24px 20px 22px; }
  .em-gr__guven { gap: 6px 14px; }
  .em-gr__slogan-bas { letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  /* DONDURMUYORUZ, YAVASLATIYORUZ.
     Olculdu 2026-09-07: bu makinede Windows "animasyonlari goster" kapali
     (MinAnimate=0), Chrome da prefers-reduced-motion: reduce yayinliyor.
     Eski kural "animation: none" idi; bu yuzden hattaki akim izi HIC
     akmadi ve kullanici "hareket etmiyor" dedi. Akim, giris ekraninin
     acikca istenen ana ogesi -- tumden kapatmak ozelligi iptal etmek
     olur. Yavaslatmak rahatsizligi azaltir, ozelligi yasatir.
     (Referans dugumleri CSS ile degil, requestAnimationFrame ile surulur;
     hiz karari giris-sayfasi.js icindeki emRefAkisiBaslat fonksiyonunda.) */
  .em-gr__hat-akim { animation-duration: 22s; }
}

/* KISA EKRAN (dizustu + tarayici cubuklari: 1366x768 ekranda kullanilabilir
   yukseklik cogu zaman 600-660px kalir). Genislik degil YUKSEKLIK olcutu:
   sorun dar ekranda degil, ALCAK ekranda cikiyor. Bant ve logo kuculur,
   dikey paylar sikilir; duzen ayni kalir. */
/* MODUL KARTI GELINCE (25.09.2026): firma kartindaki 23 modul etiketi
   sag sutunu ~260px uzatti ve 1366x768 ekranda sayfa 67px tasti -- alttaki
   elektrik direklerinin yalnizca tepeleri gorunuyordu (kullanici: "asagidaki
   elektrik direkleri tam gorunsun"). 860px'ten alcak ekranda logo kuculur
   ve kart sikilasir; genis/yuksek ekranda hicbir sey degismez. */
@media (max-height: 900px) {
  /* Satici ve taseron ekranlarinda tasmayi SOL KART ve alttaki guven seridi
     yapiyordu (olculdu 1366x768: satici 70px, taseron 102px tasma; sag
     sutun 364px, sol kart 502-534px). Guven seridi alcak ekranda
     gizlenir. Sol kartin
     dikey paylari da biraz sikilir -- alan yukseklikleri degismez, yazi
     ve dokunma alani ayni kalir. */
  .em-gr__guven { display: none; }
  /* "Firma girisine donun" satiri hemen altindaki kapi seciciyle (Firma
     dugmesi) AYNI isi yapiyor; alcak ekranda ikisinden biri yeter. */
  .em-gr__kapi--donus { display: none; }
  .em-gr__kart { padding: 24px 28px 20px; }
  .em-gr__alt { margin-bottom: 16px; }
  .em-gr__alan { margin-bottom: 12px; }
  .em-gr__logo { height: clamp(72px, 8.5vw, 118px); }
  .em-gr__ustyazi { margin-top: 10px; }
  .em-gr__slogan { margin-top: 12px; }
}
@media (max-height: 720px) {
  .em-gr { --em-gr-bant: min(22vh, 132px); padding-top: 18px; }
  /* GERCEK LAPTOP YUKSEKLIGI (1366x768 ekranda tarayici cubuklariyla
     ~650px kalir). Olculdu 25.09.2026: bu yukseklikte taseron 72px,
     satici 40px tasiyordu. Alanlar ve dugmeler biraz alcalir; yazi boyu
     ve tiklama alani kullanilabilir kalir (40px). */
  .em-gr__kart { padding: 18px 24px 16px; }
  .em-gr__alt { margin-bottom: 10px; }
  .em-gr__alan { height: 40px; margin-bottom: 10px; }
  .em-gr__dugme { height: 42px; }
  .em-gr__pk { height: 36px; }
  .em-gr__portal { margin-top: 10px; padding-top: 10px; }
  .em-gr__kapi, .em-gr__taseron { margin-top: 8px; font-size: .76rem; line-height: 1.45; }
  .em-gr__logo { height: clamp(64px, 9vw, 104px); }
  .em-gr__ustyazi { margin-top: 10px; }
  .em-gr__slogan { margin-top: 12px; gap: 3px; }
  .em-gr__ic { gap: 18px 56px; }
  .em-gr__dip { margin-top: 14px; }
}
@media (max-height: 620px) {
  .em-gr { --em-gr-bant: min(18vh, 104px); padding-top: 12px; }
  .em-gr__logo { height: clamp(52px, 7.5vw, 84px); }
  .em-gr__slogan-alt { display: none; }   /* en dar durumda ucuncu satir feda */
}


.em-giris__sag-ic { position: relative; z-index: 1; max-width: 480px; }
.em-giris__rozet {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(16,185,129,.35); border-radius: 99px;
  padding: 4px 11px; font-size: .72rem; font-weight: 600;
  color: var(--em-ana); margin-bottom: 22px;
}
/* Üst yazı (eyebrow): başlığın üstünde, seyrek harfli kurumsal tanım. */
.em-giris__ustyazi {
  display: block; font-size: .68rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(16,185,129,.9); margin-bottom: 14px;
}
.em-giris__slogan {
  font-size: 2rem; font-weight: 700; line-height: 1.22; letter-spacing: -.035em;
  color: #fff; margin: 0 0 14px;
}
.em-giris__slogan-alt {
  font-size: .875rem; line-height: 1.6; color: #94a3b8; margin: 0 0 32px;
}
/* Üç sütun: ikonlu, hafif kartlı — düz metin listesi yerine kurumsal bir
   "yetenek şeridi" (kullanıcı talebi 2026-09-06: "daha kurumsal daha
   samimi bir şeyler"). */
/* Üç modül kartı: ikon + başlık + kısa FAYDA cümlesi (nokta ayraçlı
   anahtar kelime listesi yerine -- kullanıcı talebi 2026-09-06: "daha
   samimi yazı dili, ilk bakışta profesyonellik"). */
.em-giris__olcu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.em-giris__olcu > div {
  display: flex; flex-direction: column; gap: 5px;
  padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.em-giris__olcu > div:hover {
  background: linear-gradient(180deg, rgba(16,185,129,.13), rgba(16,185,129,.04));
  border-color: rgba(16,185,129,.35); transform: translateY(-2px);
}
.em-giris__olcu i { font-size: 19px; color: var(--em-ana); margin-bottom: 2px; }
.em-giris__olcu b { font-size: .88rem; color: #fff; font-weight: 650; }
.em-giris__olcu span { font-size: .73rem; line-height: 1.5; color: #8892a4; }

/* Güven satırı: abartısız, DOĞRULANABİLİR güvenceler + canlı durum. */
.em-giris__guven {
  display: flex; gap: 10px 22px; flex-wrap: wrap; margin-top: 26px;
  padding-top: 18px; border-top: 1px solid rgba(255,255,255,.07);
}
.em-giris__guven span {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .74rem; color: #8b96a8;
}
.em-giris__guven i { font-size: 15px; color: rgba(16,185,129,.85); }
/* Canlı durum: küçük nabız atan nokta -- sistemin ayakta olduğunu söyler. */
.em-giris__canli { color: #cbd5e1 !important; font-weight: 600; }
.em-giris__canli i { font-size: 9px !important; animation: em-nabiz 2.4s ease-in-out infinite; }
@keyframes em-nabiz {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}
/* Panel dar kalınca (küçük dizüstü) kartlar alt alta iner. */
@media (max-width: 1080px) {
  .em-giris__olcu { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .em-giris__canli i { animation: none; } }

/* ---------------------------------------------------------- REFERANSLAR
   Kullanıcı talebi (2026-09-06): "Logonun altında yukarı yöne bakan
   kurumsal profesyonel ok işareti olsun, üzerine gelince altta referans
   firmalar logoları az sönük ışık üstüne gelince parlar." Sağ panelin
   ALT-ORTASINA sabitlenir (logo su panelin tamamına yayılan bir filigran
   olduğu için "logonun altı" en doğal olarak panelin alt kenarıdır); panel
   YUKARI doğru açılır ki koyu zeminin dışına taşmasın. bkz.
   lib/giris-sayfasi.js `referansVitrini()`. */
.em-referans {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px;
}
/* TETİKLEYİCİ: ikon/ok YOK -- iki yanı ince çizgili, seyrek harfli kurumsal
   başlık şeridi (kullanıcı talebi 2026-09-06: "ok işareti gibi olmasın,
   daha kurumsal prof sistematik firma havası"). */
.em-referans__ac {
  display: flex; align-items: center; gap: 12px;
  background: none; border: 0; padding: 6px 2px; cursor: pointer;
}
.em-referans__cizgi {
  width: 38px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(203,213,225,.6));
  transition: background .22s ease, width .22s ease;
}
.em-referans__cizgi:last-child { background: linear-gradient(90deg, rgba(203,213,225,.6), transparent); }
.em-referans:hover .em-referans__cizgi:last-child, .em-referans--acik .em-referans__cizgi:last-child {
  background: linear-gradient(90deg, rgba(16,185,129,.85), transparent);
}
.em-referans__yazi {
  font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: #dbe3ec; white-space: nowrap; transition: color .18s ease, text-shadow .18s ease;
  text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
.em-referans:hover .em-referans__yazi, .em-referans--acik .em-referans__yazi { color: #fff; }
.em-referans:hover .em-referans__cizgi, .em-referans--acik .em-referans__cizgi {
  background: linear-gradient(90deg, transparent, rgba(16,185,129,.85)); width: 50px;
}
.em-referans__panel {
  position: absolute; bottom: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(8px) scale(.985);
  /* YAN YANA TEK SIRA (kullanıcı talebi 2026-09-06: "Logolar yan yana
     sıralanacak ... Toroslar, yanına Armin Elektrik, yanına BEDAŞ").
     Panel içeriğe göre genişler; ekrana sığmazsa alt satıra taşar. */
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
  max-width: min(92vw, 780px); width: max-content;
  padding: 16px 18px; border-radius: 16px;
  /* Cam (glass) yüzey: koyu panelin üstünde yumuşak, pahalı bir katman. */
  background: linear-gradient(180deg, rgba(30,41,59,.96), rgba(15,23,42,.96));
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 18px 44px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s cubic-bezier(.2,.7,.3,1), transform .22s cubic-bezier(.2,.7,.3,1), visibility .22s;
}
/* Panelin ucundaki minik ok: paneli alttaki başlığa görsel olarak bağlar. */
.em-referans__panel::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: rgba(15,23,42,.96);
}
/* Üst kenarda ince marka vurgusu (yeşil ışık çizgisi). */
.em-referans__panel::before {
  content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(16,185,129,.75), transparent);
}
.em-referans:hover .em-referans__panel, .em-referans--acik .em-referans__panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
/* TEK TİP KUTU: logo da metin de AYNI ölçüdeki çerçeveye oturur -- şerit
   böylece derme çatma değil, sistematik/kurumsal bir dizilim gibi okunur.
   Sönük dururlar, üzerine gelince parlar (kullanıcı talebi 2026-09-06:
   "az sönük ışık üstüne gelince parlar"). */
.em-referans__logo {
  display: flex; align-items: center; justify-content: center;
  height: 58px; min-width: 140px; padding: 0 18px;
  border: 1px solid rgba(255,255,255,.09); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  opacity: .55; filter: grayscale(.35) brightness(.95);
  /* Sırayla süzülerek gelir (aşağıdaki nth-child gecikmeleri) -- panel
     açılınca hepsi birden "patlamaz", sakin/pahalı bir giriş yapar. */
  transform: translateY(6px);
  transition: opacity .3s ease, filter .3s ease, transform .3s cubic-bezier(.2,.7,.3,1),
              border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.em-referans:hover .em-referans__logo, .em-referans--acik .em-referans__logo { transform: translateY(0); }
.em-referans:hover .em-referans__logo:nth-child(1), .em-referans--acik .em-referans__logo:nth-child(1) { transition-delay: .02s; }
.em-referans:hover .em-referans__logo:nth-child(2), .em-referans--acik .em-referans__logo:nth-child(2) { transition-delay: .06s; }
.em-referans:hover .em-referans__logo:nth-child(3), .em-referans--acik .em-referans__logo:nth-child(3) { transition-delay: .10s; }
.em-referans:hover .em-referans__logo:nth-child(4), .em-referans--acik .em-referans__logo:nth-child(4) { transition-delay: .14s; }
.em-referans:hover .em-referans__logo:nth-child(5), .em-referans--acik .em-referans__logo:nth-child(5) { transition-delay: .18s; }
.em-referans:hover .em-referans__logo:nth-child(6), .em-referans--acik .em-referans__logo:nth-child(6) { transition-delay: .22s; }
.em-referans__logo:hover {
  opacity: 1; filter: grayscale(0) brightness(1.1);
  transform: translateY(-3px) !important; transition-delay: 0s !important;
  border-color: rgba(16,185,129,.5);
  background: linear-gradient(180deg, rgba(16,185,129,.14), rgba(16,185,129,.05));
  box-shadow: 0 10px 22px rgba(16,185,129,.16), inset 0 1px 0 rgba(255,255,255,.08);
}
/* GERÇEK LOGO KUTUSU: beyaz kart. Firma logolarının çoğu beyaz zeminli
   (JPG) ya da koyu mürekkeplidir; koyu panelde doğrudan gösterilirse ya
   kaybolur ya da çirkin bir beyaz dikdörtgen olur. Beyaz kart ikisini de
   düzgün gösterir (kurumsal sitelerin standart "logo kartı" çözümü). */
.em-referans__logo--gorsel {
  background: var(--em-yuzey); border-color: rgba(255,255,255,.22);
  padding: 8px 14px; min-width: 124px;
}
.em-referans__logo--gorsel:hover {
  background: var(--em-yuzey); border-color: rgba(16,185,129,.65);
  box-shadow: 0 10px 24px rgba(16,185,129,.22), inset 0 1px 0 rgba(255,255,255,.6);
}
.em-referans__logo img {
  max-height: 100%; max-width: 118px; width: auto; height: auto;
  object-fit: contain; display: block;
}
/* Logo henüz yüklenmemiş referanslar için kurumsal kelime-işaret (wordmark). */
.em-referans__metin {
  font-size: .72rem; font-weight: 700; color: #cbd5e1;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  transition: color .15s ease;
}
.em-referans__logo:hover .em-referans__metin { color: #fff; }

/* ---------------------------------------------------------- DUYURU BANDI
   Kullanıcı talebi (2026-09-06): "Resmi bayramlarda login ekranına resimli
   mesaj veya duyuru yayınlamak için bir panel ekle." Sayfanın en üstünde,
   kapatılabilir; renk paleti `.em-giris__uyari--bilgi` ile TUTARLI (aynı
   marka yeşili), yalnızca tam genişlik ve görsel destekli. */
.em-duyuru-bant {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 20px; background: linear-gradient(90deg, var(--em-ana-acik), #f0fdfa);
  border-bottom: 1px solid rgba(16,185,129,.25);
}
.em-duyuru-bant__ic { display: flex; align-items: center; gap: 12px; min-width: 0; }
.em-duyuru-bant__gorsel { height: 32px; width: 32px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.em-duyuru-bant__ikon { font-size: 20px; color: var(--em-ana-koyu); flex: 0 0 auto; }
.em-duyuru-bant__metin { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; }
.em-duyuru-bant__metin b { color: #065f46; font-size: .86rem; }
.em-duyuru-bant__metin span { color: #047857; font-size: .8rem; opacity: .9; }
.em-duyuru-bant__kapat {
  border: none; background: transparent; color: #059669; font-size: 18px; line-height: 1;
  padding: 4px; border-radius: 6px; flex: 0 0 auto; cursor: pointer;
}
.em-duyuru-bant__kapat:hover { background: rgba(16,185,129,.15); }

@media (max-width: 900px) {
  .em-giris { grid-template-columns: 1fr; }
  .em-giris__sag { display: none; }
}

/* ================================================================== KABUK */
/* Kopyalanan sayfanin ust bari ve genis menusu GIZLENIR; yerine
   ikon seridi + panel gelir (lib/sayfa-veri.js uretir). */
/* :not(.em-ust) ZORUNLU: bizim üst menümüz de bir <header>'dır; muaf
   tutulmazsa bu kural onu da gizler (ölçüldü: DOM'da vardı, display:none).
   :not([class]) DA ZORUNLU: eski sistemin kabuk header'ı HER ZAMAN class'sız
   duz <header>'dir; sayfa İÇERİĞİNDEKİ başlıklar (personel-page-header,
   dashboard-hero, santiye-header, yetki-header...) HEPSİ class taşır.
   Bu ayrım olmadan kural 52 sayfadaki içerik başlığını da gizliyordu --
   "Yeni Personel Ekle" gibi butonlar o başlığın İÇİNDE olduğu için DOM'da
   var ama görünmez oluyordu, kullanıcı butona hiç tıklayamıyordu. */
header:not(.em-ust):not([class]), .topbar { display: none !important; }

.wrapper { background: var(--em-zemin) !important; }

/* --- 1) Dar ikon seridi --- */
.em-serit {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--em-serit-g);
  background: var(--em-serit); z-index: 1040;
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 0; gap: 2px;
}
/* --- LOGO ---
   RENK FİLTRESİ YOK. Eski logo turuncu çizilmişti ve tema yeşile geçince
   hue-rotate ile döndürülüyordu. Yeni logo (logo.png) ZATEN kendi
   renklerinde; filtre bırakılsaydı onu MORA çeviriyordu (ölçüldü:
   giriş ekranında mor görünüyordu). Logonun rengi hiçbir yerde
   değiştirilmez. */
.em-marka-filtre, .em-serit__logo img, .em-panel__logo img, .em-giris__logo img {
  filter: none;
}
.em-serit__logo {
  width: 36px; height: 36px; border-radius: var(--em-r);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px; flex: 0 0 auto; padding: 2px;
}
.em-serit__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Yatay logonun YAZISI BEYAZ (koyu zemin icin cizilmis); acik gri panelde
   kayboluyordu. Panelde yalnizca simge kullanilir, ad metin olarak yazilir. */
.em-panel__logo {
  display: flex; align-items: center; gap: 7px; margin-bottom: 6px;
  text-decoration: none;
}
.em-panel__logo img { height: 22px; width: 22px; object-fit: contain; display: block; }
.em-panel__logo span {
  font-size: .92rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--em-metin);
}
.em-serit__liste {
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto; overflow-x: hidden;      /* yatay cubuk cikmasin */
  flex: 1 1 auto; width: 100%; align-items: center;
  scrollbar-width: none; -ms-overflow-style: none;
}
.em-serit__liste::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Seridin kendisi de hicbir yonde kaymamali */
.em-serit { overflow: hidden; }
.em-panel { overflow-x: hidden; }
.em-serit a {
  width: 40px; height: 38px; border-radius: var(--em-r);
  display: flex; align-items: center; justify-content: center;
  color: var(--em-metin-2); font-size: 19px; position: relative;
  transition: background .12s ease, color .12s ease;
}
.em-serit a:hover { background: var(--em-serit-2); color: #e5e7eb; }
.em-serit a.etkin { background: var(--em-serit-2); color: var(--em-ana); }
.em-serit a.etkin::before {
  content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--em-ana);
}
/* Ipucu balonu seridin DISINA tasar; serit overflow:hidden oldugu icin
   kesilirdi. `fixed` konumlandirma kapsayicidan bagimsiz calisir. */
.em-serit__ipucu {
  position: fixed; left: calc(var(--em-serit-g) + 6px);
  transform: translateY(-50%);
  background: var(--em-serit-2); color: #e5e7eb; font-size: 12px;
  padding: 5px 9px; border-radius: var(--em-r); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 1060;
}
.em-serit a { position: relative; }
.em-serit a:hover .em-serit__ipucu { opacity: 1; }
.em-serit__alt { margin-top: auto; }

/* --- 2) Ikincil panel (secili bolumun alt sayfalari) --- */
.em-panel {
  position: fixed; top: 0; left: var(--em-serit-g); bottom: 0; width: var(--em-panel-g);
  background: var(--em-panel); border-right: 1px solid var(--em-panel-cizgi);
  z-index: 1039; overflow-y: auto; padding: 16px 10px 24px;
}
.em-panel__ust { padding: 0 6px 12px; }
.em-panel__etiket {
  font-size: .62rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--em-metin-3);
}
.em-panel__ad { font-size: .96rem; font-weight: 700; color: var(--em-metin); letter-spacing: -.02em; }
.em-panel__baslik {
  font-size: .62rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--em-metin-3); padding: 14px 6px 5px;
}
.em-panel a {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--em-r);
  font-size: .8125rem; color: var(--em-metin-2); font-weight: 500;
  transition: background .12s ease, color .12s ease;
}
.em-panel a:hover { background: #eef1f5; color: var(--em-metin); }
.em-panel a.etkin { background: var(--em-ana-acik); color: var(--em-ana-koyu); font-weight: 600; }
.em-panel a i { font-size: 15px; opacity: .75; }
.em-panel .menu-yeni-rozet {
  margin-left: auto; font-size: .55rem; font-weight: 800; letter-spacing: .04em;
  padding: .08rem .28rem; border-radius: 3px; background: var(--em-ana); color: #fff;
}

/* --- 3) Icerik alani --- */
.page-wrapper, .content-wrapper {
  margin-left: calc(var(--em-serit-g) + var(--em-panel-g)) !important;
  background: var(--em-zemin) !important;
  min-height: 100vh;
}
.page-content {
  background: var(--em-zemin) !important;
  padding: 20px 24px 40px !important;
  /* Genis/4K monitorlerde icerik sabit 1600px'de kirpilip sagda BOS ALAN
     birakiyordu (kullanici kendi ekraninda kanitladi: eski sistem TAM
     oturuyor, ErpMerkez'de sag taraf bombos kaliyor, TUM sayfalarda).
     Eski sistem gibi mevcut genisligi TAMAMEN kullanir; sayfa icerigi zaten
     Bootstrap .row/.col grid'i oldugu icin cok genis ekranlarda da
     bicimi bozulmaz, yalnizca sutunlar daha fazla nefes alir. */
  max-width: 100%;
}

/* Sayfa basligi seridi (ust barin yerine) */
.em-baslik {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding-bottom: 16px; margin-bottom: 18px;
  border-bottom: 1px solid var(--em-cizgi); flex-wrap: wrap;
}
.em-baslik__ad { font-size: 1.3rem; font-weight: 700; letter-spacing: -.03em; margin: 0; }
.em-baslik__alt { font-size: .8rem; color: var(--em-metin-3); margin: 2px 0 0; }
.em-baslik__araclar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.em-baslik__araclar select {
  border: 1px solid var(--em-cizgi-koyu) !important; border-radius: var(--em-r) !important;
  background: var(--em-yuzey) !important; color: var(--em-metin) !important;
  font-size: .78rem !important; font-weight: 500 !important; padding: .34rem .5rem !important;
  max-width: 190px;
}
/* DEPO/SANTIYE ROZETI -- santiye adi + kilitli donem yili + Degistir, tek
   parca kurumsal bir buton. Yil ARTIK SECILEMEZ (kullanici karari: "hangi
   depoya hangi yilla girdiyse orada kilitlensin"); donem yalnizca santiye
   secim ekranindan degisir. */
.em-baslik__depo {
  display: inline-flex; align-items: stretch; overflow: hidden;
  border: 1px solid var(--em-cizgi-koyu); border-radius: var(--em-r);
  background: var(--em-yuzey); text-decoration: none; line-height: 1;
  transition: border-color .12s, box-shadow .12s;
}
.em-baslik__depo:hover { border-color: var(--em-ana); box-shadow: 0 0 0 3px rgba(16,185,129,.10); }
.em-baslik__depo > span { display: inline-flex; align-items: center; gap: 5px; padding: .42rem .7rem; }
.em-baslik__depo-ad { font-size: .8rem; font-weight: 650; color: var(--em-metin); }
.em-baslik__depo-ad i { font-size: 15px; color: var(--em-ana); }
.em-baslik__depo-yil {
  font-size: .76rem; font-weight: 650; color: var(--em-metin-2);
  background: var(--em-yuzey-2); border-left: 1px solid var(--em-cizgi);
  border-right: 1px solid var(--em-cizgi); letter-spacing: .02em;
}
.em-baslik__depo-degistir {
  font-size: .72rem; font-weight: 600; color: var(--em-metin-3);
}
.em-baslik__depo-degistir i { font-size: 14px; }
.em-baslik__depo:hover .em-baslik__depo-degistir { color: var(--em-ana-koyu); }

.em-baslik__firma {
  font-size: .78rem; color: var(--em-metin-2); font-weight: 600;
  padding: .34rem .6rem; border: 1px solid var(--em-cizgi-koyu); border-radius: var(--em-r);
}
.em-baslik__kisi { text-align: right; line-height: 1.25; }
.em-baslik__kisi b { font-size: .8rem; display: block; color: var(--em-metin); }
.em-baslik__kisi span { font-size: .7rem; color: var(--em-metin-3); }

/* Eski sayfalarda kalan breadcrumb seridi: sadelestir */
.page-breadcrumb { margin-bottom: 14px !important; }
.breadcrumb-title { font-size: 1.15rem !important; font-weight: 700 !important;
  color: var(--em-metin) !important; letter-spacing: -.02em; }
.breadcrumb { background: transparent !important; padding: 0 !important; margin: 0 !important; }
.breadcrumb-item, .breadcrumb-item a { color: var(--em-metin-3) !important; font-size: .78rem; }
.breadcrumb-item.active { color: var(--em-metin-2) !important; }

@media (max-width: 1100px) {
  .em-panel { display: none; }
  .page-wrapper, .content-wrapper { margin-left: var(--em-serit-g) !important; }
}

/* --- Eski kabuktan kalan parcalar --- */
/* Sol ust logo kutusu (hover'da eski menu kutusu aciliyordu) ve
   menuyu daraltan "hareket bari" artik kullanilmiyor. */
.sidebar-header, .toggle-icon, .switcher-wrapper, .sidebar-bottom,
.mobile-toggle-menu, .overlay { display: none !important; }
/* Eski menunun kaydirma cubuklari (simplebar) gorunmesin — sol altta
   bos yere duran ince "hareket bari" bunlardi. */
.sidebar-wrapper .simplebar-track,
.sidebar-wrapper .simplebar-scrollbar,
.sidebar-wrapper .simplebar-horizontal,
.sidebar-wrapper .simplebar-vertical,
.sidebar-wrapper > .simplebar-wrapper > .simplebar-height-auto-observer-wrapper,
.sidebar-wrapper .simplebar-placeholder { display: none !important; }
/* Eski menu kabugu artik yalnizca serit+paneli tasiyor: kendisi gorunmesin */
.sidebar-wrapper, .left-sidebar, .vertical-menu {
  background: transparent !important; border: 0 !important;
  box-shadow: none !important; width: 0 !important; overflow: visible !important;
}

/* ================================================================ KARTLAR */
/* Kopyalanan sayfalarda kart BASLIKLARI koyu zeminliydi ve uzerindeki
   dugmeler soluk griydi -> okunmuyordu. Baslik seridi duzlestirilir,
   icindeki her sey koyu metne cevrilir. */
.page-content .card-header,
.page-content .content-card > .card-header,
.crud-table-page .content-card .card-header,
.page-content .card > .card-header {
  background: transparent !important;
  background-image: none !important;
  color: var(--em-metin) !important;
  border-bottom: 1px solid var(--em-cizgi) !important;
}
.page-content .card-header,
.page-content .card-header h1, .page-content .card-header h2,
.page-content .card-header h3, .page-content .card-header h4,
.page-content .card-header h5, .page-content .card-header h6,
.page-content .card-header span, .page-content .card-header small,
.page-content .card-header label, .page-content .card-header .card-title {
  color: var(--em-metin) !important;
}
.page-content .card-header i { color: var(--em-metin-2) !important; }
/* Baslik seridindeki dugmeler: koyu zemin varsayimiyla soluk yazilmislardi */
.page-content .card-header .btn {
  border-color: var(--em-cizgi-koyu) !important;
  color: var(--em-metin) !important;
  background: var(--em-yuzey) !important;
}
.page-content .card-header .btn:hover {
  background: var(--em-yuzey-2) !important; border-color: var(--em-ana-kenar) !important;
  color: var(--em-ana-koyu) !important;
}
.page-content .card-header .btn i { color: inherit !important; }
/* Ana eylem dugmeleri yesil (kart basligindaki .btn kuralini ezmeli:
   ayni ozgullukte olduklari icin BU BLOK SONRA gelir) */
html body .action-btn,
html body .page-content .card-header .action-btn,
html body .page-content .card-header .btn-primary,
html body .btn-yeni, html body .content-btn {
  background: var(--em-ana) !important; border-color: var(--em-ana) !important;
  color: #fff !important;
}
html body .action-btn:hover,
html body .page-content .card-header .action-btn:hover,
html body .page-content .card-header .btn-primary:hover {
  background: var(--em-ana-koyu) !important; border-color: var(--em-ana-koyu) !important;
  color: #fff !important;
}
html body .action-btn i,
html body .page-content .card-header .action-btn i,
html body .page-content .card-header .btn-primary i { color: #fff !important; }


/* Kenarlik ve golge YOK; ayrim hafif zemin ve tipografi ile. */
.card, .content-card {
  background: var(--em-yuzey) !important;
  border: 0 !important;
  border-radius: var(--em-r-l) !important;
  box-shadow: none !important;
}
.card + .card { margin-top: 14px; }
.card-header, .content-card > .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--em-cizgi) !important;
  padding: 0 0 10px !important; margin-bottom: 12px;
  border-radius: 0 !important;
}
.card-title {
  color: var(--em-metin) !important; font-weight: 650 !important;
  margin: 0 !important; font-size: .875rem !important; letter-spacing: -.01em;
}
/* KART GOVDESI ICINDE BOSLUK -- 22.09.2026
   ----------------------------------------------------------------------
   KULLANICI: "burdada yazilar birlesik kutuyla, genel olarak tara duzelt
   bunlari" + "sana gorduklerimi atiyorum ama gormediklerimde var"
   + "temayi bozma sakin".

   ESKI HALI:  .card-body { padding: 0 !important; }   <-- HER SAYFADA
   Bu satir kopyalanan eski sistem sayfalarinin agir ic bosluklarini silmek
   icin yazilmis; hemen ardindan ERP kabugu icin .9rem geri veriliyor
   (asagida "body .page-wrapper .card > .card-body"). Ama geri verme
   YALNIZCA .page-wrapper / .page-content icindeki sayfalari kapsiyordu.

   OLCULDU (22.09.2026):
     /isg/personel-durumu, /gorevler (page-wrapper)  -> 14.4px  DOGRU
     /sistem/pazar (kendi kabugu, body.bg-light)     ->    0px  YAPISIK
   Yani ERP DISINDAKI butun kabuklar -- sistem paneli, pazar yonetimi,
   satici paneli, taseron portali, giris ekranlari -- kart kenarina
   yapisik yazi gosteriyordu. Kullanicinin gonderdigi iki ekran (Huni /
   Satici-abonelik kutulari ve "Yeni hizmet ilani" formu) bunun ornegi;
   "gormediklerim de var" demesi de dogru, sinif butun kabuklari kapsiyor.

   DUZELTME: sifirlama KENDI ALANINA kapatildi (kopya sayfalar), geri
   kalan kabuklar ERP ile AYNI olcuye (.9rem) cekildi. Tema degismedi:
   - kopya sayfalarin ic ice kartlari eskisi gibi 0 (ust ozgulluk),
   - ERP kartlari eskisi gibi .9rem,
   - `p-0` yazan yerler eskisi gibi yapisik (Bootstrap !important).
   ---------------------------------------------------------------------- */
body .page-wrapper .card-body,
body .page-content .card-body { padding: 0 !important; }
.card > .card-body { padding: .9rem !important; }
.card-footer { background: transparent !important; border-top: 1px solid var(--em-cizgi) !important; }

/* Ozet kartlari: sol kenarda ince renkli cizgi, kenarlik yok */
.stat-card, .widget-card, .info-card {
  background: var(--em-yuzey-2) !important;
  border: 0 !important; border-left: 2px solid var(--em-ana) !important;
  border-radius: 0 var(--em-r) var(--em-r) 0 !important;
  box-shadow: none !important; padding: 12px 14px !important;
}
.stat-card:hover, .widget-card:hover { background: #f3f5f8 !important; }
.stat-card h4, .stat-card h3, .stat-card .stat-deger {
  font-weight: 700 !important; letter-spacing: -.035em; font-size: 1.5rem !important;
  color: var(--em-metin) !important; margin: 0 !important;
  overflow-wrap: anywhere; word-break: break-word;
}
/* Dar ekranlarda (2 kart/satır) uzun kod/tutar degerleri (ör. "ORN.00.00.Y003")
   tasip kirpiliyordu -- font kucultulup satir kirmaya izin verilir. */
@media (max-width: 575.98px) {
  .stat-card h4, .stat-card h3, .stat-card .stat-deger { font-size: 1.15rem !important; }
}

/* ============================================================== ANA SAYFA */
/* Kopyalanan anasayfa cok parcaliydi (gradient bantlar, ic ice kutular,
   degisken bosluklar). Burada tek bir izgaraya oturtulur. */
.dashboard-page, .page-content > .dashboard-page { padding: 0 !important; }

/* Onay bekleyenler seridi.
   `.onay-bekleyen` BILEREK YOK: o ad bir BOLUM degil, sayacin yazildigi
   JS KANCASI olarak kullaniliyor (arac_dosyalar.html h4, personel_dosyalar.html
   strong). Kural oraya da uyunca sayinin etrafinda kutu cikiyor ve kart
   komsularindan 35px uzuyordu -- kullanici bulgusu 5 Eylul 2026:
   "hepsi ayni boyutta arka plan belirgin olmali biraz".
   Serit sinifi `.pending-header`tir; dashboard/index/santiye_1 onu kullanir. */
.pending-header, .pending-section {
  background: var(--em-yuzey-2) !important; background-image: none !important;
  border: 0 !important; border-left: 2px solid var(--em-ana) !important;
  border-radius: 0 var(--em-r) var(--em-r) 0 !important;
  padding: 12px 14px !important; margin-bottom: 16px !important;
}
.pending-header *, .pending-section > *:not(.badge) { color: var(--em-metin) !important; }

/* Modul kutulari (Proje / Depo / Muhasebe ... kisayol gruplari) */
.menu-module {
  background: var(--em-yuzey) !important; background-image: none !important;
  border: 1px solid var(--em-cizgi) !important;
  border-radius: var(--em-r) !important;
  padding: 14px !important; margin-bottom: 14px !important;
  box-shadow: none !important;
}
.menu-module__title, .menu-module h5, .menu-module h6 {
  font-size: .78rem !important; font-weight: 700 !important;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--em-metin-2) !important; margin: 0 0 10px !important;
}
.menu-module > div:first-child > i, .menu-module__icon {
  color: var(--em-ana) !important; font-size: 17px !important;
}
/* Kisayol baglantilari: esit yukseklikte sade kutucuklar */
.menu-module a, .modul-link, .quick-link {
  display: flex !important; align-items: center !important; gap: 8px !important;
  padding: 9px 11px !important;
  background: var(--em-yuzey-2) !important;
  border: 1px solid transparent !important;
  border-radius: var(--em-r) !important;
  color: var(--em-metin) !important; font-size: .8125rem !important; font-weight: 500 !important;
  min-height: 40px; text-decoration: none !important;
  transition: background .12s ease, border-color .12s ease;
}
.menu-module a:hover, .modul-link:hover, .quick-link:hover {
  background: var(--em-ana-acik) !important;
  border-color: var(--em-ana-kenar) !important;
  color: var(--em-ana-koyu) !important;
}
.menu-module a i { font-size: 16px !important; color: var(--em-ana) !important; flex: 0 0 auto; }

/* Anasayfa widget/kart baslıklari */
.mod-widget, .act-widget, .dash-card {
  background: var(--em-yuzey) !important; background-image: none !important;
  border: 1px solid var(--em-cizgi) !important; border-radius: var(--em-r) !important;
  box-shadow: none !important; padding: 14px !important; margin-bottom: 14px !important;
}
.mod-widget__header, .act-widget__header, .dash-card__header {
  background: transparent !important; color: var(--em-metin) !important;
  font-size: .8rem !important; font-weight: 700 !important;
  padding: 0 0 10px !important; margin-bottom: 10px !important;
  border-bottom: 1px solid var(--em-cizgi) !important;
  display: flex; align-items: center; gap: 7px;
}
.mod-widget__header i, .act-widget__header i { color: var(--em-ana) !important; }

/* Proje takvimi kartinin koyu ust seridi duzlestirilir */
.project-calendar-card, .project-calendar-card__intro {
  background: var(--em-yuzey) !important; background-image: none !important;
  color: var(--em-metin) !important; border-radius: var(--em-r) !important;
}
.project-calendar-card__intro * { color: var(--em-metin) !important; }
.project-calendar-card { border: 1px solid var(--em-cizgi) !important; padding: 14px !important; }

/* =============================================================== TABLOLAR */
.table { --bs-table-bg: transparent; color: var(--em-metin) !important; margin-bottom: 0 !important; }
/* YAZI KIMLIGI ESKI SISTEM IZGARASIYLA ESITLENDI  (kullanici 11.09.2026:
   "goruntu ve islevsellik ayni olsun, tema bizimki gibi olsun ancak bizim
   temamizda kotu olan yazi goruntusu degissin, eski sistem tablosu gibi olsun
   ayni" / "erpmerkez yazi stilleri kotu, onu duzelt")

   Eski sistemin UC AYRI ekranindan olculdu (proje/depo/19/7, proje/kesif/10,
   proje/projeler) ve UCUNDE DE AYNI cikti -- yani bu, tek bir ekranin
   bicimi degil, sistemin izgara kimligi:

     hucre   12px · 5.6/8 dolgu · satir yuksekligi 18px · SOLA hizali
             renk rgb(44,51,64)
     satir   40px · alt cizgi #f1f5f9 · zebra beyaz / #e9ecef
     baslik  11px · 600 · rgb(71,85,105) · BUYUK HARF DEGIL · harf arasi .5px
             zemin #f8fafc

   BIZDE NE VARDI (olculdu, ayni gun):
     baslik  10.9px · BUYUK HARF · harf arasi .07em · #8a93a3 · zemin yok
     hucre   12.96px · #6b7280 (yani METNIN KENDISI de gri)
   Iki sorun uretiyordu: (1) buyuk harfe cevrilmis 10.9px baslik okunmuyor,
   (2) hucre metni #6b7280 oldugu icin DOLU deger ile SOLUK deger arasinda
   kontrast kalmiyordu -- tablo tek parca gri lekeye donuyordu.

   Renkler DEGISKEN uzerinden verilir; koyu tema kendi karsiligini koyar. */
.table > thead th, .table thead th {
  background: var(--em-tablo-baslik-zemin) !important;
  color: var(--em-tablo-baslik) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: .5px; text-transform: none;
  border-bottom: 1px solid var(--em-cizgi) !important;
  padding: 5px 8px !important; white-space: nowrap;
}
.table > tbody > tr > td, .table tbody td {
  border-bottom: 1px solid var(--em-gri-100) !important;
  /* 11+11 dolgu + 18px satir yuksekligi = 40px satir (eski sistem ile ayni). */
  padding: 11px 8px !important;
  vertical-align: middle !important;
  font-size: 12px !important;
  line-height: 18px !important;
  color: var(--em-tablo-metin) !important;
}
/* ZEBRA `tr` uzerinde durur, `td` uzerinde DEGIL: Bootstrap'in
   .table-danger / .table-warning gibi durum siniflari hucreye renk verir;
   zebra hucreye yazilsaydi onlari ezer ve durum renkleri kaybolurdu. */
.table > tbody > tr:nth-of-type(even) { background-color: var(--em-tablo-zebra); }
.table > tbody > tr > td strong, .table tbody td strong {
  color: var(--em-metin) !important; font-weight: 600 !important;
}
.table > tbody > tr:last-child > td { border-bottom: 0 !important; }
.table-hover > tbody > tr:hover > * { background: var(--em-yuzey-2) !important; }

/* SUZGEC KUTUSU: eski sistemde her sutun basliginin ALTINDA, HER ZAMAN
   gorunur, cerceveli bir "Ara..." kutusu var (25px · 1px #ced4da · 4px
   kose · beyaz · 11px). Bizde kutular "hayalet"ti -- uzerine gelinene
   kadar cercevesiz ve zeminsizdi; kullanici sutun basina arama yapilabildigini
   ekrana bakarak goremiyordu. */
.es-suzgec-satir th { padding: 3px 5px !important;
  background: var(--em-tablo-baslik-zemin) !important;
  border-bottom: 1px solid var(--em-cizgi) !important; }
.es-suz { height: 25px !important; font-size: 11px !important;
  padding: 3px 6px !important; border-radius: 4px !important;
  border: 1px solid var(--em-cizgi-koyu) !important;
  background: var(--em-yuzey) !important; color: var(--em-metin) !important;
  box-shadow: none !important; transition: border-color .12s; }
.es-suz::placeholder { color: var(--em-metin-3); opacity: .9; }
.es-suz:focus, .es-suz.es-dolu { border-color: var(--em-ana) !important; }
.es-suz.es-dolu { font-weight: 600; }

/* ================================================================ FORMLAR */
.form-control, .form-select, .form-input, .input-group-text, textarea.form-control {
  border: 1px solid var(--em-cizgi-koyu) !important;
  border-radius: var(--em-r) !important;
  padding: .42rem .6rem !important;
  font-size: .82rem !important;
  color: var(--em-metin) !important;
  background-color: var(--em-yuzey) !important;
  box-shadow: none !important;
  transition: border-color .12s ease, box-shadow .12s ease !important;
}
/* ACILIR LISTE OKU YAZININ USTUNE BINMESIN (kullanici bildirdi 2026-08-27:
   "aktif personel yazisinin ustunde de ok kalmis kotu duruyor").
   Yukaridaki kural TUM form alanlarina .6rem sag bosluk veriyor; ama
   .form-select okunu SAG TARAFA arka plan resmi olarak cizer ve Bootstrap
   normalde 2.25rem sag bosluk birakir. !important ile ezilince ok metnin
   uzerine geliyordu. Yalnizca select icin ok payi geri verilir. */
.form-select { padding-right: 2.1rem !important; }
.form-select-sm { padding-right: 1.9rem !important; }

.form-control:focus, .form-select:focus, .form-input:focus, textarea.form-control:focus {
  border-color: var(--em-ana) !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,.14) !important;
  outline: none !important;
}
.form-control::placeholder { color: var(--em-metin-3) !important; }
.form-label { color: var(--em-metin-2) !important; font-weight: 600 !important;
  font-size: .74rem !important; margin-bottom: .25rem !important;
  letter-spacing: .02em; text-transform: uppercase; }
.form-check-input:checked { background-color: var(--em-ana) !important; border-color: var(--em-ana) !important; }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(16,185,129,.14) !important; }

/* =============================================================== BUTONLAR */
.btn {
  border-radius: var(--em-r) !important;
  font-weight: 600 !important;
  font-size: .79rem !important;
  padding: .44rem .8rem !important;
  box-shadow: none !important;
  transition: background .12s ease, border-color .12s ease !important;
}
.btn-primary, .content-btn, .btn-yeni {
  background: var(--em-ana) !important; border-color: var(--em-ana) !important; color: #fff !important;
}
.btn-primary:hover, .content-btn:hover, .btn-yeni:hover {
  background: var(--em-ana-koyu) !important; border-color: var(--em-ana-koyu) !important;
}
.btn-success { background: var(--em-ana) !important; border-color: var(--em-ana) !important; }
.btn-danger  { background: var(--em-hata) !important; border-color: var(--em-hata) !important; }
.btn-warning { background: var(--em-uyari) !important; border-color: var(--em-uyari) !important; color:#fff !important; }
.btn-info    { background: var(--em-bilgi) !important; border-color: var(--em-bilgi) !important; color:#fff !important; }
.btn-secondary { background: var(--em-metin) !important; border-color: var(--em-metin) !important; }
.btn-light   { background: var(--em-yuzey-2) !important; border-color: var(--em-cizgi-koyu) !important;
               color: var(--em-metin) !important; }
.btn-outline-primary   { color: var(--em-ana-koyu) !important; border-color: var(--em-ana-kenar) !important; }
.btn-outline-primary:hover { background: var(--em-ana) !important; color:#fff !important; border-color: var(--em-ana) !important; }
.btn-outline-secondary { color: var(--em-metin-2) !important; border-color: var(--em-cizgi-koyu) !important; }
.btn-outline-secondary:hover { background: var(--em-yuzey-2) !important; color: var(--em-metin) !important; }
/* SECILI SUZGEC DUGMESI (acik tema). Bootstrap secili .btn-outline-secondary'ye
   kendi gri zeminini (#6c757d) veriyor; yukaridaki kural yaziyi !important ile
   ikincil griye cektigi icin gri uzerine gri cikiyordu -- Giris-Cikis
   ekraninin "Tumu" suzgeci bos bir kutu gibi gorunuyordu (kullanici gosterdi,
   14 Eylul 2026). Secili durum marka rengiyle dolar, yazi beyaz. Koyu temanin
   karsiligi erpmerkez-koyu.css icinde (7 Eylul 2026'da orada duzeltilmisti,
   acik tema unutulmustu). Hover da kapsanir; yoksa ustune gelince acik
   zemine donup goz kirpiyordu. */
.btn-check:checked + .btn-outline-secondary,
.btn-check:active + .btn-outline-secondary,
.btn-outline-secondary.active,
.btn-outline-secondary.active:hover {
  background: var(--em-ana) !important;
  border-color: var(--em-ana) !important;
  color: #fff !important;
}
.btn-outline-danger    { color: var(--em-hata) !important; border-color: #fecaca !important; }
.btn-outline-danger:hover { background: var(--em-hata) !important; color:#fff !important; }
.btn-sm { padding: .28rem .55rem !important; font-size: .74rem !important; }

.yetki-icon-btn, .santiye-btn-view {
  border-radius: var(--em-r) !important; border: 1px solid var(--em-cizgi-koyu) !important;
  background: var(--em-yuzey) !important; color: var(--em-metin-2) !important;
}
.yetki-icon-btn:hover, .santiye-btn-view:hover {
  background: var(--em-ana-acik) !important; color: var(--em-ana-koyu) !important;
  border-color: var(--em-ana-kenar) !important;
}

/* =============================================================== ROZETLER */
.badge {
  font-weight: 700 !important; font-size: .62rem !important;
  padding: .22rem .42rem !important; border-radius: 3px !important;
  letter-spacing: .05em; text-transform: uppercase;
}
.badge.bg-success, .badge-aktif { background: var(--em-ana-acik) !important; color: var(--em-rozet-basari) !important; }
.badge.bg-danger              { background: var(--em-hata-acik) !important; color: var(--em-rozet-hata) !important; }
.badge.bg-warning             { background: var(--em-uyari-acik) !important; color: var(--em-rozet-uyari) !important; }
.badge.bg-info                { background: var(--em-bilgi-acik) !important; color: var(--em-rozet-bilgi) !important; }
.badge.bg-primary             { background: var(--em-ana-acik) !important; color: var(--em-rozet-basari) !important; }
.badge.bg-secondary, .badge-pasif { background: var(--em-gri-160) !important; color: var(--em-metin-2) !important; }
.badge.bg-light               { background: var(--em-yuzey-2) !important; color: var(--em-metin-2) !important; }
.badge-kategori, .santiye-badge { background: var(--em-ana-acik) !important; color: var(--em-rozet-basari) !important;
  text-transform: none; letter-spacing: 0; }

.accordion-item, .santiye-kategori-accordion {
  border: 0 !important; border-bottom: 1px solid var(--em-cizgi) !important;
  border-radius: 0 !important; margin-bottom: 0 !important;
}
.accordion-button, .santiye-kategori-btn {
  background: transparent !important; color: var(--em-metin) !important;
  font-weight: 650 !important; padding: .7rem .2rem !important; box-shadow: none !important;
  font-size: .84rem !important;
}
.accordion-button:not(.collapsed), .santiye-kategori-btn:not(.collapsed) {
  background: transparent !important; color: var(--em-ana-koyu) !important; border-left: 0 !important;
}

/* ============================================================= EKLENTILER */
.tabulator {
  background: var(--em-yuzey) !important; border: 0 !important;
  border-radius: 0 !important; font-size: .81rem !important;
}
/* TABULATOR IZGARASI = ESKI SISTEM IZGARASI  (kullanici 11.09.2026:
   "erpmerkez yazi stilleri kotu, onu duzelt" / "Eski sistem tablosu gibi olsun
   ayni"). ErpMerkez'de IKI tur izgara var: sunucuda uretilen
   <table class="table"> ve KOPYALANAN sayfalardaki Tabulator. Ustteki genel
   .table blogu yalnizca birincisini duzeltir; bu blok Tabulator tarafidir.

   Kopyalanan sayfalar eski sistemin Tabulator CSS'ini de getirdigi icin OLCU
   zaten dogruydu (12px hucre, 5.6/8 dolgu, 40px satir -- olculdu, birebir).
   BOZAN SEY RENK VE BASLIKTI:
     hucre basligi  10.88px · 650 · #8a93a3 · BUYUK HARFE CEVRILMIS
                    (eski sistem: 11px · 600 · #475569 · normal harf)
     hucre metni    #6b7280  (eski sistem: #2c3340)
   Yani izgaranin yazisi hem kucuk hem gri basiliyordu; dolu deger ile soluk
   deger arasinda kontrast kalmiyordu. Olculer korunur, renk/baslik duzelir. */
.tabulator .tabulator-header {
  background: var(--em-tablo-baslik-zemin) !important;
  border-bottom: 1px solid var(--em-cizgi) !important;
}
.tabulator .tabulator-header .tabulator-col {
  background: var(--em-tablo-baslik-zemin) !important;
  border-right: 1px solid var(--em-gri-100) !important;
}
.tabulator .tabulator-header .tabulator-col-title {
  color: var(--em-tablo-baslik) !important; font-weight: 600 !important;
  font-size: 11px !important; text-transform: none; letter-spacing: .5px;
}
.tabulator-row { border-bottom: 1px solid var(--em-gri-100) !important; }
/* Zebra: eski sistem beyaz / #e9ecef kullaniyor; bizde ayni is icin
   --em-tablo-zebra. Onceden cift satir da BEYAZ yapiliyordu, yani zebra
   hic yoktu ve 9-17 sutunda goz satirdan kayiyordu. */
.tabulator-row.tabulator-row-even { background: var(--em-tablo-zebra) !important; }
.tabulator-row.tabulator-row-odd  { background: var(--em-yuzey) !important; }
.tabulator-row:hover { background: var(--em-yuzey-2) !important; }
.tabulator-row .tabulator-cell {
  border-right: 1px solid var(--em-gri-100) !important;
  padding: 5.6px 8px !important; font-size: 12px !important; line-height: 18px !important;
  color: var(--em-tablo-metin) !important;
}
.tabulator .tabulator-footer {
  background: transparent !important; border-top: 1px solid var(--em-cizgi) !important;
}
.tabulator .tabulator-footer .tabulator-page.active {
  background: var(--em-ana) !important; color:#fff !important; border-color: var(--em-ana) !important;
}

.ts-control {
  border: 1px solid var(--em-cizgi-koyu) !important; border-radius: var(--em-r) !important;
  background: var(--em-yuzey) !important; min-height: 34px !important; box-shadow: none !important;
}
.ts-wrapper.focus .ts-control {
  border-color: var(--em-ana) !important; box-shadow: 0 0 0 3px rgba(16,185,129,.14) !important;
}
.ts-dropdown {
  border: 1px solid var(--em-cizgi-koyu) !important; border-radius: var(--em-r) !important;
  box-shadow: 0 8px 24px rgba(17,24,39,.10) !important;
}
.ts-dropdown .active { background: var(--em-ana-acik) !important; color: var(--em-ana-koyu) !important; }

/* ---------------------------------------------------------------------------
   BILDIRIM PENCERESI  --  ERPMERKEZ KIMLIGI
   Kullanici istegi (4 Eylul 2026): "daha guzel bir sey yap, animasyonlu
   dikkat cekici olsun, erpmerkez logomuzu da kullanabilirsin".

   TASARIM FIKRI: kutu bir "bildirim karti" gibi davranir --
     * ustte MARKA SERIDI: kurumsal yesil gecis, acilirken soldan saga cizilir
     * SOL ALTTA logo filigrani (cok soluk) -- kimlik hissi, gurultu yok
     * SIMGE canli: once halka acilir, sonra tik KENDINI CIZER, cevresine
       bir kez dalga yayilir
     * kart hafif yukaridan, cok az esneyerek gelir (ziplama degil)
     * otomatik kapanan bildirimlerde altta SURE CUBUGU akar

   Sinif adlari ve davranis DEGISMEZ: ekranlarin ve test paketinin okudugu
   .swal2-popup / .swal2-confirm aynen durur. Renkler PALETTEN gelir.
   --------------------------------------------------------------------------- */
/* DUZEN NEDEN IZGARA DEGIL:
   Ilk surumde `display:grid` + `grid-template-areas` kullaniliyordu ve
   yalnizca simge/baslik/metin/dugmeler icin yer tanimliydi. Bildirim
   kutusunda BUNLARDAN BASKA parca varsa (girdi kutusu, acilir liste,
   dogrulama mesaji, yukleniyor halkasi, dipnot) o parcalar izgaraya
   rastgele yerlesip yazilari DAGITIYORDU. Kullanici masraf fisi onayinda
   yakaladi (4 Eylul 2026): o pencereler `input: 'textarea'`,
   `input: 'select'` ve `Swal.showLoading()` kullaniyor.
   Simdi simge SOLA YASLANIR, geri kalan her sey DOM sirasiyla normal akar;
   ileride eklenecek parcalar da kendiliginden dogru yere duser. */
.swal2-popup {
  position: relative;
  display: block !important;
  /* KIRPILMAYA KARSI UC KORUMA (kullanici bildirdi 4 Eylul 2026:
     "yazilar tam gorunmuyor"):
       1) Olculer EKRANI ASAMAZ. min-width 23rem sabitti; dar pencerede
          kutu ekrandan tasip yaziyi kirpiyordu.
       2) Cok uzun metinde kutu ekrani asarsa KAYDIRILIR, kirpilmaz.
          Yatayda gizli kalir (yuvarlak koseler ve logo filigrani icin).
       3) Bolunmeyen uzun bir dizi (IBAN, fatura no, e-posta) satira
          sigmazsa KIRILIR -- asagida overflow-wrap. */
  width: auto !important;
  max-width: min(31rem, calc(100vw - 2rem)) !important;
  min-width: min(23rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 26px 24px 18px !important;
  /* KUTU KENDISI KAYDIRILMAZ. `overflow-y: auto` denendi ve kisa
     bildirimlerde bile ince bir kaydirma cubugu cikiyordu: kutunun
     kaydirma alani, gorunen hicbir oge tasmadigi halde ~20px daha
     buyuk hesaplaniyor (olculdu 4 Eylul 2026). Cok uzun metinlerde
     kaydirma METIN ALANINDA yapilir -- asagiya bakiniz. */
  overflow: hidden !important;
  border: 1px solid var(--em-cizgi) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(17, 24, 39, .22), 0 2px 8px rgba(17, 24, 39, .06) !important;
  font-family: inherit !important;
  text-align: left !important;
}
/* LOGO FILIGRANI -- KONUM VE BOYUT KULLANICININ BEGENDIGI GIBI.
   Once sag ust koseye kucuk bir "antet" isareti denendi; kullanici
   begenmedi: "logonun yeri buyuklugu ayni kalacak". Bu yuzden ILK
   surumdeki yer (sol alt kose) ve olcu (96px) korunuyor.
   Tek fark: logo artik KENDI katmaninda, uzerine beyaz perde cekilmiyor;
   boylece belirginligi tek sayiyla (opacity) ayarlanabiliyor ve "biraz
   daha belirgin olsun" istegi, metni/simgeyi bogmadan karsilaniyor. */
.swal2-popup::after {
  content: ''; position: absolute; left: -18px; bottom: -20px;
  width: 96px; height: 96px; pointer-events: none; z-index: 0;
  background: url('/assets/img/logo.png') no-repeat left bottom / contain;
  opacity: .42;
  /* Logo KOSEDE en belirgin, iceri dogru ERIYIP kaybolur. Boylece tikin ve
     metnin arkasina hic girmez -- kullanici "goruntu kirliligi" dedigi
     durum tam olarak logonun icerige tasmasiydi. */
  -webkit-mask-image: linear-gradient(to top right, #000 42%, transparent 82%);
          mask-image: linear-gradient(to top right, #000 42%, transparent 82%);
}
.swal2-popup > * { position: relative; z-index: 1; }

/* --- USTTE MARKA SERIDI (acilirken soldan saga cizilir) --- */
.swal2-popup::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  z-index: 2;
  background: linear-gradient(90deg, var(--em-ana), var(--em-ana-koyu));
  transform-origin: left;
  animation: emSeritCiz .42s cubic-bezier(.22, 1, .36, 1) .06s backwards;
}
.swal2-popup.swal2-icon-error::before   { background: linear-gradient(90deg, var(--em-hata), #b91c1c); }
.swal2-popup.swal2-icon-warning::before { background: linear-gradient(90deg, var(--em-uyari), #b45309); }
.swal2-popup.swal2-icon-info::before,
.swal2-popup.swal2-icon-question::before { background: linear-gradient(90deg, var(--em-metin-3), var(--em-metin-2)); }
@keyframes emSeritCiz { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- SIMGE: kutuphanenin kendi cizim animasyonu KULLANILIR, kucultulur --- */
/* SIMGE KUCULTULURKEN width/height DEGISTIRILMEZ.
   Kutuphanenin tik/carpi cizgileri 80px'e gore hesaplanmis konumlar
   kullanir; kutuyu 52px yapinca cizgiler kayiyor ve tik bozuk gorunuyordu
   (olculdu 4 Eylul 2026). Dogrusu: kutu 80px kalir, TRANSFORM ile
   olceklenir; kaplayacagi yer negatif kenar boslugu ile geri alinir. */
.swal2-popup .swal2-icon {
  /* SOLA YASLANIR (izgara alani degil -- bkz. yukaridaki duzen notu).
     Kutu 80px, ekranda .65 olcekle 52px gorunur; kapladigi yer negatif
     kenar boslugu ile geri alinir: sagda 80-52=28'den 16px'lik bosluk
     birakacak sekilde -12px, altta tamami -28px. */
  float: left;
  width: 80px !important; height: 80px !important;
  min-width: 80px; margin: 2px -12px -28px 0 !important;
  border-width: 3px !important;
  transform: scale(.65); transform-origin: top left;
  /* Simge dairesinin ARKASI DOLU: arkadaki logo/desen tikin icinden
     gecmesin, cizgiler birbirine karismasin. */
  background-color: var(--em-yuzey) !important;
}
.swal2-popup .swal2-icon.swal2-success { border-color: var(--em-ana-kenar) !important; }
.swal2-popup .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--em-ana-koyu) !important; }
.swal2-popup .swal2-icon.swal2-success .swal2-success-ring { border-color: var(--em-ana-kenar) !important; }
.swal2-popup .swal2-icon.swal2-error { border-color: #fecaca !important; color: var(--em-hata) !important; }
.swal2-popup .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--em-hata) !important; }
.swal2-popup .swal2-icon.swal2-warning { border-color: #fde68a !important; color: var(--em-uyari) !important; }
.swal2-popup .swal2-icon.swal2-info,
.swal2-popup .swal2-icon.swal2-question { border-color: var(--em-cizgi-koyu) !important; color: var(--em-metin-2) !important; }
.swal2-popup .swal2-icon .swal2-icon-content { font-size: 1.6rem !important; font-weight: 700; }

/* Simgeden bir kez yayilan dalga: dikkat ceker, tekrar etmez. */
.swal2-popup .swal2-icon > .em-dalga { display: none; }
.swal2-popup.swal2-show .swal2-icon::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid currentColor; opacity: .5;
  animation: emDalga .75s cubic-bezier(.22, 1, .36, 1) .12s 1 backwards;
}
@keyframes emDalga {
  from { transform: scale(.72); opacity: .55; }
  to   { transform: scale(1.35); opacity: 0; }
}

.swal2-popup .swal2-title {
  /* KENDI SUTUNUNDA KALIR (display: flow-root).
     Akis duzeninde metin, simgenin ALTINDAN devam ediyordu: uc satirlik bir
     bildirimde son satir simgenin altina sarkip logo filigraninin uzerine
     biniyor, kutu dibinden sikisiyordu -- kullanici bildirdi 4 Eylul 2026
     ("yazilar tam gorunmuyor"). flow-root kendi bicimlendirme baglamini
     kurar; kutu artik yanindaki float'in uzerine binmez, metin duzgun bir
     sutun olarak akar. Izgaraya donmuyoruz: bilinmeyen cocuklar yine
     dogru yere duser (bkz. yukaridaki duzen notu). */
  /* !important SART: SweetAlert bu ogenin display'ini SATIR ICI yaziyor
     (style="display: block"), normal kural eziliyordu. */
  display: flow-root !important;
  margin: 2px 0 0 !important; padding: 0 !important;
  font-size: 1.06rem !important; font-weight: 700 !important;
  line-height: 1.3; color: var(--em-metin) !important; text-align: left !important;
  overflow-wrap: anywhere;      /* uzun fatura no / IBAN satira sigmazsa kirilir */
}
.swal2-popup .swal2-html-container {
  display: flow-root !important;   /* bkz. baslik: simgenin altina sarkmaz */
  /* COK UZUN METIN KIRPILMAZ, KAYDIRILIR. Sinir asilmadikca cubuk cikmaz. */
  max-height: min(58vh, 20rem);
  overflow-y: auto !important;
  margin: 5px 0 0 !important; padding: 0 !important;
  font-size: .92rem !important; line-height: 1.5;
  color: var(--em-metin-2) !important; text-align: left !important;
  overflow-x: hidden;
  overflow-wrap: anywhere;      /* uzun e-posta / IBAN kutuyu tasirmaz */
}
.swal2-popup .swal2-title:empty { display: none !important; }
.swal2-popup .swal2-title:empty + .swal2-html-container {
  margin-top: 12px !important;
  font-size: .98rem !important; color: var(--em-metin) !important;
}

.swal2-popup .swal2-actions {
  clear: both;
  margin: 18px 0 0 !important; padding: 0 !important;
  justify-content: flex-end !important; gap: 8px;
}
/* OPSIYONEL PARCALAR -- hepsi tam genislikte ve simgenin ALTINDA.
   `clear: both` olmadan kisa metinli pencerelerde bunlar simgenin yanina
   sikisiyor, kutu dagilmis gorunuyordu. */
.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select,
.swal2-popup .swal2-file,
.swal2-popup .swal2-range,
.swal2-popup .swal2-radio,
.swal2-popup .swal2-checkbox,
.swal2-popup .swal2-validation-message,
.swal2-popup .swal2-footer,
.swal2-popup .swal2-image,
.swal2-popup .swal2-loader {
  clear: both;
  float: none;
  margin-left: 0 !important; margin-right: 0 !important;
}
.swal2-popup .swal2-input,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-select,
.swal2-popup .swal2-file {
  width: 100% !important; box-sizing: border-box;
  margin-top: 14px !important; margin-bottom: 0 !important;
  padding: .55rem .75rem !important;
  font-size: .92rem !important; font-family: inherit !important;
  color: var(--em-metin) !important;
  background: var(--em-yuzey) !important;
  border: 1px solid var(--em-cizgi-koyu) !important;
  border-radius: var(--em-r) !important;
  box-shadow: none !important;
}
.swal2-popup .swal2-textarea { min-height: 96px; resize: vertical; }
.swal2-popup .swal2-input:focus,
.swal2-popup .swal2-textarea:focus,
.swal2-popup .swal2-select:focus {
  outline: none !important;
  border-color: var(--em-ana) !important;
  box-shadow: 0 0 0 3px var(--em-ana-golge, rgba(16, 148, 96, .15)) !important;
}
.swal2-popup .swal2-validation-message {
  margin-top: 12px !important; padding: .5rem .7rem !important;
  font-size: .85rem !important; border-radius: var(--em-r) !important;
  color: var(--em-hata) !important; background: #fef2f2 !important;
}
.swal2-popup .swal2-footer {
  margin-top: 16px !important; padding-top: 12px !important;
  font-size: .85rem !important; color: var(--em-metin-3) !important;
  border-top: 1px solid var(--em-cizgi) !important;
}
/* YUKLENIYOR HALKASI: kutuphanenin varsayilani MAVI geliyordu, sistemin
   hicbir yerinde olmayan bir renk. Markaya cekildi ("Fis okunuyor..."
   penceresinde gorunuyor). */
.swal2-popup .swal2-loader {
  margin: 16px auto 4px !important;
  border-color: var(--em-ana) transparent var(--em-ana) transparent !important;
}
.swal2-popup .swal2-image { margin: 14px auto 0 !important; border-radius: 10px; }
.swal2-popup .swal2-styled {
  margin: 0 !important; padding: .55rem 1.3rem !important;
  font-size: .875rem !important; font-weight: 600 !important;
  border-radius: var(--em-r) !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .08) !important;
  transition: transform .12s ease, background .12s ease !important;
}
.swal2-popup .swal2-styled:active { transform: translateY(1px); }
.swal2-styled.swal2-confirm { background: var(--em-ana) !important; }
.swal2-styled.swal2-confirm:hover { background: var(--em-ana-koyu) !important; }
.swal2-styled.swal2-cancel {
  background: var(--em-yuzey) !important; color: var(--em-metin) !important;
  border: 1px solid var(--em-cizgi-koyu) !important;
}
.swal2-styled.swal2-cancel:hover { background: var(--em-yuzey-2) !important; }

/* --- OTOMATIK KAPANMA SURE CUBUGU --- */
.swal2-timer-progress-bar-container { height: 3px !important; }
.swal2-timer-progress-bar {
  background: linear-gradient(90deg, var(--em-ana), var(--em-ana-koyu)) !important;
}

/* --- KART GIRISI / CIKISI --- */
@keyframes emBildirimGir {
  0%   { opacity: 0; transform: translateY(-16px) scale(.96); }
  60%  { opacity: 1; transform: translateY(2px)   scale(1.008); }
  100% { opacity: 1; transform: translateY(0)     scale(1); }
}
@keyframes emBildirimCik {
  from { opacity: 1; transform: translateY(0)   scale(1); }
  to   { opacity: 0; transform: translateY(-10px) scale(.98); }
}
.swal2-popup.swal2-show { animation: emBildirimGir .3s cubic-bezier(.22, 1, .36, 1) !important; }
.swal2-popup.swal2-hide { animation: emBildirimCik .16s ease-in !important; }

/* SWEETALERT EN USTTE (28.09.2026, gercek tiklamayla olculdu): sunucunun urettigi
   ekranlar yalniz bu dosyayi yukluyor; "SweetAlert modal ustunde" kurali yalniz
   erp-tema.css'te (eski sayfalar) vardi. Ozel pencereler (em-pd-modal, em-tp-modal
   1090; 1200'e kadar) SweetAlert'in 1060'ini ortuyordu: Proje Duzenle'de "Kaydet"
   basarili oldugu halde onay penceresi ALTTA kaliyor, kullanici hicbir sey olmadi
   saniyordu (sayfa da o pencerede "Tamam"a basinca yenileniyor). */
.swal2-container { z-index: 99999 !important; }

.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-shown {
  background: rgba(15, 23, 42, .42) !important;
  backdrop-filter: blur(3px) !important;
}
.swal2-backdrop-show { animation: none !important; transition: background-color .16s ease !important; }

/* KOSE BILDIRIMINDE KARARTMA YOK (16.09.2026, kullanici puantajda: "bildirim
   dusuyor ama bu siyahlik ne kotu duruyor"). Yukaridaki karartma kurali
   SweetAlert kaplarinin HEPSINE koyu zemin ve bulaniklik veriyordu. Kose
   bildiriminin (toast) kabi 360 px genisliginde ve ekran boyunca uzanir;
   olculdu: sagda 360x820 koyu, bulanik bir sutun olusuyordu. Karartma yalniz
   ONAY PENCERELERINDE anlamlidir (ekrani kaplar, kullanicidan cevap bekler);
   kose bildirimi isi kesmez, arkasi karartilmaz. SweetAlert kose bildirimi
   acikken govdeye swal2-toast-shown yazar; ayrim onunla yapilir. Tiklamalar
   bildirimin arkasindaki hucrelere gecer, bildirimin kendisi tiklanabilir kalir. */
body.swal2-toast-shown .swal2-container {
  background: transparent !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  pointer-events: none;
}
body.swal2-toast-shown .swal2-container .swal2-popup { pointer-events: auto; }

.modal-content { border: 0 !important; border-radius: var(--em-r) !important;
  box-shadow: 0 16px 48px rgba(17,24,39,.16) !important; }
.modal-header { border-bottom: 1px solid var(--em-cizgi) !important; padding: .9rem 1rem !important; }
.modal-footer { border-top: 1px solid var(--em-cizgi) !important; }

.nav-tabs { border-bottom: 1px solid var(--em-cizgi) !important; gap: .1rem; }
.nav-tabs .nav-link {
  border: 0 !important; border-bottom: 2px solid transparent !important;
  color: var(--em-metin-3) !important; font-weight: 600 !important;
  border-radius: 0 !important; padding: .5rem .8rem !important; font-size: .8rem !important;
}
.nav-tabs .nav-link:hover { color: var(--em-metin) !important; }
.nav-tabs .nav-link.active {
  color: var(--em-ana-koyu) !important; background: transparent !important;
  border-bottom-color: var(--em-ana) !important;
}

.alert { border: 0 !important; border-left: 2px solid transparent !important;
  border-radius: 0 var(--em-r) var(--em-r) 0 !important;
  padding: .7rem .9rem !important; font-size: .82rem !important; }
.alert-success { background: var(--em-ana-acik) !important; border-left-color: var(--em-ana) !important; color:var(--em-uyarikutu-basari) !important; }
.alert-danger  { background: var(--em-hata-acik) !important; border-left-color: var(--em-hata) !important; color:var(--em-uyarikutu-hata) !important; }
.alert-warning { background: var(--em-uyari-acik) !important; border-left-color: var(--em-uyari) !important; color:var(--em-uyarikutu-uyari) !important; }
.alert-info    { background: var(--em-bilgi-acik) !important; border-left-color: var(--em-bilgi) !important; color:var(--em-uyarikutu-bilgi) !important; }

.progress { background: #eef1f5 !important; border-radius: 2px !important; height: 4px !important; }
.progress-bar { background: var(--em-ana) !important; border-radius: 2px !important; }

/* ================================================================ TAŞMALAR */
/* Kopyalanan sayfalar genis ekrana gore yazilmisti; kabuk daraldigi icin
   bazi kart basliklari ve olcu kutulari kapsayiciyi asip ICERIGI KESIYORDU
   (ilk harfler ve rakamlar gorunmuyordu). Asagidaki kurallar tasan
   satirlarin ALT SATIRA GECMESINI saglar — icerik kirpilmaz. */

/* Flex/grid cocuklari varsayilan olarak kucultulemez; min-width:0 bunu acar */
.page-content .card, .page-content .content-card,
.page-content [class*="widget"], .page-content [class*="stat-"],
.page-content [class*="__header"], .page-content [class*="__body"],
.page-content [class*="-card"], .page-content .row > [class*="col"] {
  min-width: 0;
}

/* Baslik seritleri: baslik + dugmeler sigmazsa alt satira insin */
.page-content .card-header,
.page-content [class*="card__header"],
.page-content [class*="widget__header"],
.page-content [class*="-header"]:not(header) {
  flex-wrap: wrap !important;
  gap: 8px;
  row-gap: 8px;
}

/* Olcu/rozet gruplari da sarsin */
.page-content [class*="__summary"], .page-content [class*="-summary"],
.page-content [class*="__chips"], .page-content [class*="-chips"],
.page-content [class*="__meta"], .page-content [class*="-actions"],
.page-content [class*="__actions"], .page-content .d-flex.gap-2 {
  flex-wrap: wrap !important;
}

/* Uzun kelimeler (poz kodu, e-posta, dosya adi) kutuyu tasirmasin */
.page-content .card, .page-content td, .page-content th,
.page-content [class*="widget"], .page-content [class*="-card"] {
  overflow-wrap: anywhere;
}

/* Olcu kartlarindaki buyuk rakam kesilmesin */
.page-content [class*="stat"] h1, .page-content [class*="stat"] h2,
.page-content [class*="stat"] h3, .page-content [class*="stat"] h4,
.page-content [class*="stat"] strong, .page-content [class*="kpi"] strong {
  white-space: nowrap; min-width: 0;
}

/* Sayfanin kendisi asla yatay kaymasin */
.page-wrapper, .page-content { overflow-x: hidden; }

/* ============================================================ YARDIMCILAR */
.text-muted { color: var(--em-metin-3) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--em-cizgi) !important; }
.shadow-sm, .shadow, .shadow-lg { box-shadow: none !important; }
.bg-light  { background: var(--em-yuzey-2) !important; }
.bg-white  { background: var(--em-yuzey) !important; }
.rounded   { border-radius: var(--em-r) !important; }
.dropdown-menu {
  border: 1px solid var(--em-cizgi-koyu) !important; border-radius: var(--em-r) !important;
  box-shadow: 0 8px 24px rgba(17,24,39,.10) !important; padding: .25rem !important;
}
.dropdown-item { border-radius: var(--em-r-s) !important; font-size: .81rem !important;
  padding: .4rem .55rem !important; }
.dropdown-item:hover { background: var(--em-ana-acik) !important; color: var(--em-ana-koyu) !important; }

.mod-widget-empty, .empty-state { color: var(--em-metin-3) !important; text-align: center; padding: 2rem 1rem; }

@media print {
  .em-serit, .em-panel, .em-baslik__araclar, .btn { display: none !important; }
  .page-wrapper, .content-wrapper { margin-left: 0 !important; }
  .page-content { padding: 0 !important; }
}

/* ===========================================================================
   ÜST MENÜ DÜZENİ  (Google Stitch - "Beyaz Yatay Menü", 10.08.2026)
   ---------------------------------------------------------------------------
   Sol şerit + ikincil panel yerine ÜSTTE yatay menü. 17 bölüm yan yana
   sığmadığı için 7 gruba toplandı; her grup, üzerine gelince açılan geniş
   menüde alt sayfalarını sütunlar hâlinde gösterir (bkz. lib/menu.js).

   Sayfaların HTML'i ve işleyişi DEĞİŞMEZ: yalnızca kabuk ve ortak görsel
   dil burada tanımlanır. Eski sol menü kuralları aşağıda kapatılır.
   Geri dönmek gerekirse: git geçmişindeki tasarim-yedek-solmenu/ klasörü.
   =========================================================================== */
:root {
  --em-ust-y: 56px;              /* üst menü yüksekliği */
  /* ZEMİN BELİRGİNLEŞTİRİLDİ (2026-08-18, kullanıcı: "arka planlar belirgin
     değil, yerine göre hafif renk olsun, yazılar belirgin olsun").
     Ölçüm: eski sistem sayfa zemini #f1f5f9 ve kartlarında gölge var; bizde
     zemin #f7f7f8 (neredeyse beyaz) ve gölge YOKTU — kartlar zeminden hiç
     ayrışmıyordu. */
  --em-zemin: #f1f5f9;           /* sayfa zemini — kartlar üstünde dursun */
  --em-kart: #ffffff;
  --em-cizgi-sicak: #e2e8f0;     /* kenarlık: zeminden ayrışan nötr çizgi */
  --em-golge:   0 1px 2px rgba(15, 23, 42, .04), 0 6px 18px rgba(15, 23, 42, .06);
  --em-golge-s: 0 1px 2px rgba(15, 23, 42, .05);
}

/* Eski sol kabuk kapatılır */
.em-serit, .em-panel { display: none !important; }
/* SABIT UST MENU, KAYDIRMA HEDEFINI YUTUYORDU  (olculdu 17.09.2026)
   ------------------------------------------------------------------
   Tarayici bir ogeyi kendiliginden gorunur kilarken (form dogrulama
   balonu, ic baglanti capasi, scrollIntoView) sayfayi o ogenin ustu
   y=0 olacak sekilde kaydiriyor. Ust menu `position: fixed`, 56px ve
   z-index 1045 oldugu icin hedef TAMAMEN MENUNUN ALTINDA kaliyordu.

   Birebir olculdu: Malzeme Girisi ekraninda zorunlu EVRAK dosyasi
   secilmeden Kaydet'e basildiginda sayfa `reportValidity()` cagiriyor,
   tarayici alani y=0'a kaydiriyor (top=0, alt=34) ve menunun alt kenari
   56px oldugu icin hem alan hem uyari balonu menunun ardinda kaliyordu.
   Sonuc: kullanici Kaydet'e basiyor, HICBIR SEY OLMAMIS gibi goruyor ve
   neyin eksik oldugunu bilemiyor. (Ilk olcumumde ben de "sessizce
   kayboluyor" sandim; ekran goruntusu alinca balonun menunun altinda
   kirpildigi gorundu.)

   `scroll-padding-top` kaydirma KOKUNE yazilir ve tarayicinin KENDI
   yaptigi her kaydirmaya uygulanir -- tek kural butun formlari,
   capalari ve hata odaklarini birden duzeltir. Menu yuksekligi zaten
   bir degisken (--em-ust-y); sabit sayi yazilmadi ki menu boyu
   degisirse burasi da kendiliginden dogru kalsin. */
html {
  scroll-padding-top: calc(var(--em-ust-y, 56px) + 12px);
}

.page-wrapper, .content-wrapper {
  margin-left: 0 !important;
  /* Kopyadan gelen tema, ARTIK OLMAYAN üst bar için 60px margin bırakıyordu;
     menü ile sayfa başlığı arasında boşuna 60px boşluk oluşuyordu (ölçüldü).
     padding-top KALIR: menü fixed, içerik altına girmemeli. */
  margin-top: 0 !important;
  padding-top: var(--em-ust-y) !important;
}
/* KABUKSUZ (TAM EKRAN) SAYFALAR: ust menu HIC BASILMIYOR, dolayisiyla ona
   ayrilan 56px'lik pay bos bir serit olarak kaliyordu (kullanici 9 Eylul
   2026'da ErpTeams toplanti ekraninda gosterdi). Menu yoksa pay da olmamali.
   Kural yalnizca <body data-em-kabuksuz> olan sayfalari etkiler; digerleri
   bire bir ayni kalir. */
body[data-em-kabuksuz] .page-wrapper,
body[data-em-kabuksuz] .content-wrapper {
  padding-top: 0 !important;
  min-height: 100vh;
}
body[data-em-kabuksuz] .page-content {
  padding: 12px 16px 16px !important;
}
/* KABUKSUZ SAYFADA SOL MENU KUTUSU DA BASILMAMALI. kabuk() sidebar-wrapper
   kutusunu her sayfaya yaziyor; kabuksuz sayfada icerigi bos ama kutu
   250px genisliginde, sabit konumlu ve SAYDAM kaliyordu -- gorunmuyor ama
   sol seridin uzerine oturup tiklamayi yutuyordu (olculdu 14 Eylul 2026:
   ErpTeams toplanti ekraninda Kisiler/Onay serit ikonlari ve cekmecedeki
   Kabul/Kapat dugmeleri fareyle tiklanamiyordu; elementsFromPoint
   simplebar-content-wrapper dondu). */
body[data-em-kabuksuz] .sidebar-wrapper { display: none !important; }
body { background: var(--em-zemin) !important; }
.page-content, .content-page { background: transparent !important; }

/* --- Üst bant --- */
.em-ust {
  position: fixed; top: 0; left: 0; right: 0; height: var(--em-ust-y);
  background: var(--em-yuzey); border-bottom: 1px solid var(--em-cizgi-sicak);
  display: flex; align-items: center; gap: 18px; padding: 0 18px;
  z-index: 1045;
}
.em-ust__marka { display: flex; align-items: center; gap: 8px; text-decoration: none; flex: none; }
.em-ust__marka img { width: 26px; height: 26px; object-fit: contain; }
.em-ust__marka span { font-weight: 800; font-size: 15px; color: var(--em-metin); letter-spacing: -.02em; }
.em-ust__menu { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }

.em-ust__tek, .em-ust__baslik {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  padding: 0 11px; height: var(--em-ust-y);
  font-size: 13.5px; font-weight: 500; color: var(--em-soluk);
  text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.em-ust__tek i, .em-ust__baslik i { font-size: 17px; }
.em-ust__ok { font-size: 15px !important; opacity: .55; }
.em-ust__tek:hover, .em-ust__baslik:hover { color: var(--em-metin); background: #f1f1f3; }
.em-ust__tek.etkin, .em-ust__oge.etkin .em-ust__baslik {
  color: var(--em-ana); border-bottom-color: var(--em-ana); font-weight: 700;
}

/* --- Açılır geniş menü --- */
.em-ust__oge { position: relative; }
.em-ust__acilir {
  position: absolute; top: var(--em-ust-y); left: 0;
  background: var(--em-yuzey); border: 1px solid var(--em-cizgi-sicak);
  border-radius: 0 0 var(--em-r) var(--em-r);
  padding: 14px 16px; display: none; gap: 24px;
  box-shadow: 0 8px 22px rgba(24,32,28,.10);
  max-height: calc(100vh - var(--em-ust-y) - 16px); overflow-y: auto;
}
.em-ust__acilir[data-sutun="1"] { grid-template-columns: repeat(1, minmax(190px, auto)); }
.em-ust__acilir[data-sutun="2"] { grid-template-columns: repeat(2, minmax(190px, auto)); }
.em-ust__acilir[data-sutun="3"] { grid-template-columns: repeat(3, minmax(190px, auto)); }
/* MENU TIKLAMA ILE YONETILIR. Onceden :hover ve :focus-within de menuyu
   acik tutuyordu; bu yuzden sekmeye tekrar tiklayinca betik `.acik` sinifini
   kaldirsa bile menu KAPANMIYORDU (fare hala uzerinde, dugme hala odakta).
   Gorunurluk yalnizca `.acik`e baglidir. Klavye erisimi kaybolmaz: Enter ve
   Space `click` uretir, betik sinifi cevirir ve aria-expanded yazar; Escape
   ile de kapanir (bkz. lib/menu.js). */
.em-ust__oge.acik .em-ust__acilir { display: grid; }
.em-ust__oge.acik > .em-ust__baslik { color: var(--em-metin); background: #f1f1f3; }
.em-ust__oge.acik .em-ust__ok { transform: rotate(180deg); }
.em-ust__acilir--sag { left: auto; right: 0; }

.em-ust__kol-baslik {
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--em-soluk2);
  padding: 2px 8px 7px;
}
.em-ust__acilir a {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: var(--em-r);
  color: var(--em-metin); text-decoration: none; font-size: 13.5px;
  white-space: nowrap;
}
.em-ust__acilir a i { font-size: 16px; color: var(--em-soluk2); width: 18px; text-align: center; }
.em-ust__acilir a:hover { background: #f2f7f4; color: var(--em-ana-koyu); }
.em-ust__acilir a:hover i { color: var(--em-ana); }
.em-ust__acilir a.etkin { background: #eaf6f0; color: var(--em-ana-koyu); font-weight: 600; }
.em-ust__acilir a.etkin i { color: var(--em-ana); }

/* --- Sağ taraf --- */
.em-ust__sag { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.em-ust__firma {
  font-size: 12.5px; font-weight: 600; color: var(--em-soluk);
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding-right: 6px;
}
.em-ust__ikon {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--em-r);
  background: none; border: 0; cursor: pointer;
  color: var(--em-soluk); font-size: 19px; text-decoration: none;
}
.em-ust__ikon:hover { background: #f1f1f3; color: var(--em-metin); }
/* Posta zarfi ve okunmamis rozeti (lib/menu.js postaIkonu, sayiyi lib/sohbet-arayuz.js doldurur) */
.em-ust__ikon--posta { position: relative; }
.em-ust__rozet {
  position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--em-ana-koyu, #059669); color: #fff; font-size: 10px; font-weight: 700;
  line-height: 16px; text-align: center; pointer-events: none;
}
.em-ust__rozet[hidden] { display: none; }

/* --- Kartlar/tablolar kırık beyaz zeminde --- */
.card, .content-card, .tabulator { background: var(--em-kart) !important; }
.card, .content-card { border-color: var(--em-cizgi-sicak) !important; }

/* ===================================================================
   UST MENU KADEME MERDIVENI  --  MENU SAGDAKI BLOGA BINMEZ
   ===================================================================
   Menu iki kez sagdaki bloga (firma adi / ikonlar) bindi ve ikisini de
   KULLANICI gordu:
     · "Rapor" firma adiyla ust uste (dizustu genisligi)
     · "ErpTeams" firma adiyla ust uste (1707 px, 9 Eylul 2026)
   Sebep her ikisinde de ayni: MODUL SAYISI ARTTI (artik 12 oge) ve
   merdiven o genisligi kapsamiyordu.

   9 Eylul 2026'da merdivenin TAMAMI tarayicida yeniden olculdu (gercek
   piksel, tahmin degil). Her kademede "menunun istedigi genislik" ile
   "kalan yer" karsilastirildi:

     kademe      menu ister   kalan yer   pay
     992-1279       760 px      816 px    56 px   (Anasayfa gizli)
     1280-1399      841 px      919 px    78 px
     1400-1599      899 px     1039 px   140 px
     1600+         1044 px     1227 px   183 px

   YONTEM: yazidan ve bosluktan yer kazanilir. HICBIR MODUL GIZLENMEZ --
   tek istisna 992-1279'da "Anasayfa", cunku SOL USTTEKI LOGO zaten
   /dashboard'a gidiyor; islev kaybolmuyor.

   Menuye overflow VERILMEZ: acilir listeler absolute konumlu, kirpilirdi.
   Denetim: test-paketi/ust-menu-denetimi.js (yeni modul eklenince uyarir).
   =================================================================== */

/* --- 992-1279 px (kucuk dizustu) --- */
@media (min-width: 992px) and (max-width: 1279.98px) {
  .em-ust { padding-left: 12px; padding-right: 12px; gap: 6px; }
  .em-ust__marka span { display: none; }
  .em-ust__firma { display: none; }
  .em-ust__menu { gap: 1px; }
  /* ANASAYFA GIZLENIR: sol ustteki ErpMerkez logosu zaten /dashboard'a
     gider, yani hicbir yere erisim kaybolmaz. 12 oge bu genislige
     okunur bir yazi boyuyla sigmiyor; bir modulu kaybetmektense
     KOPYASI OLAN bagi gizlemek dogru olan. */
  .em-ust__menu > .em-ust__tek { display: none; }
  .em-ust__tek, .em-ust__baslik { padding: 0 5px; font-size: 11.5px; gap: 4px; }
  .em-ust__tek i, .em-ust__baslik i { font-size: 15px; }
  .em-ust__ok { display: none; }
}

/* --- 1280-1399 px --- */
@media (min-width: 1280px) and (max-width: 1399.98px) {
  .em-ust { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .em-ust__menu { gap: 1px; }
  .em-ust__tek, .em-ust__baslik { padding: 0 5px; font-size: 11.5px; gap: 4px; }
  .em-ust__tek i, .em-ust__baslik i { font-size: 15px; }
  .em-ust__ok { display: none; }
  .em-ust__firma { max-width: 110px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
}

/* --- 1400-1599 px --- */
@media (min-width: 1400px) and (max-width: 1599.98px) {
  .em-ust { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .em-ust__menu { gap: 1px; }
  .em-ust__tek, .em-ust__baslik { padding: 0 6px; font-size: 12px; gap: 4px; }
  .em-ust__tek i, .em-ust__baslik i { font-size: 16px; }
  .em-ust__ok { display: none; }
  .em-ust__firma { max-width: 120px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
}

/* --- 1600 px VE USTU  (UST SINIR YOK: konursa hata geri doner) ---
   ACILIR OK ISARETI BURADA DURUR. Ilk denemede onu da gizlemistim ve
   kullanici hemen fark etti (9 Eylul 2026: "modullerde kucuk ok isareti
   yok olmus"). Ok, o modulun ALT MENUSU OLDUGUNU soyleyen tek isaret --
   gizlenince menu tiklanabilir gorunmuyor. Bu genislikte ona yer VAR:
   olculdu (tarayicida, gercek piksel): menu 1160 px istiyor, 1600'de
   1227 px yer var (67 px pay), 1707'de 174 px pay kaliyor.
   Ok yalnizca 1599 ve ALTINDA gizlenir -- orada gercekten yer yok
   (olculdu: 1400 kademesinde ok acikken 55 px tasiyor) ve zaten bu
   dosyada en bastan beri oyleydi. */
@media (min-width: 1600px) {
  .em-ust { gap: 12px; }
  .em-ust__menu { gap: 1px; }
  .em-ust__tek, .em-ust__baslik { padding: 0 6px; font-size: 13px; gap: 4px; }
  .em-ust__ok { margin-left: 0; }
  .em-ust__firma { max-width: 150px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
}
/* --- ErpMail ile 14 OGE (19.09.2026, kullanici: "ErpMail neden ana ekranda
   modullerde yok oldu") ---
   ErpMail kendi ust grubuna donunce menu, sagdaki bloga BINDI (olculdu,
   gercek piksel: 1024 -86, 1280 -103, 1366 -17, 1440 -16, 1600 -175,
   1707 -68; 1536 ve 1920 sigiyordu). Kural degismedi: HICBIR MODUL
   GIZLENMEZ. Yer iki kopyadan kazanilir:
     · FIRMA ADI: ust cubukta ve hemen alttaki modul seridinde (firma
       rozeti) IKI KEZ yaziyor -> 1900 px altinda ust cubuktan kalkar.
     · ANASAYFA: sol ustteki logo zaten /dashboard'a gider (992-1279'da
       bu yuzden zaten gizli) -> 1600-1699'da da gizlenir; o kademede
       acilir oklar duruyor (kullanici oku istedi), yer yalniz oradan cikar. */
@media (min-width: 992px) and (max-width: 1899.98px) {
  .em-ust__firma { display: none; }
}
@media (min-width: 1600px) and (max-width: 1699.98px) {
  .em-ust__menu > .em-ust__tek { display: none; }
}
@media (min-width: 992px) and (max-width: 1279.98px) {
  .em-ust__tek, .em-ust__baslik { padding: 0 4px; font-size: 11px; gap: 3px; }
  .em-ust__tek i, .em-ust__baslik i { font-size: 14px; }
  .em-ust__menu { gap: 0; }
}
/* En dar dizustu (992-1149): 14 modul yaziyla ancak simgesiz sigar
   (olculdu 1000 px -25, 1024 px -1). Yazi okunur kalir, simge gider. */
@media (min-width: 992px) and (max-width: 1149.98px) {
  .em-ust__baslik > i:first-child { display: none; }
}
@media (min-width: 1280px) and (max-width: 1399.98px) {
  .em-ust__tek, .em-ust__baslik { padding: 0 4px; }
}
/* KADEME SINIRLARI BOSLUKSUZ (…1279.98 / 1280…): Windows %125 olcekte
   pencere genisligi kusuratli olabiliyor (1279,2 px); eski "1279px /
   1280px" sinirlarinin arasina dusen genislikte HICBIR kademe uygulanmiyor,
   menu yuzlerce piksel tasiyordu (olculdu: 1279 -626, 1399 -506, 1599 -306). */
/* Menü öğeleri sıkışıp okunmaz hâle gelmesin; yer yoksa kademe devreye girer */
.em-ust__menu > * { flex: none; }

/* --- Dar ekran: menü sarılır, açılırlar tam genişlik --- */
@media (max-width: 991.98px) {
  .em-ust { height: auto; flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  /* flex:1 (temel kural) flex-basis'i 0 yapar ve `width:100%` sarmaya
     yetmez; alt satira inmesi icin flex-basis 100% verilmeli. */
  .em-ust__menu { order: 3; flex: 1 0 100%; width: 100%; overflow-x: auto; }
  .em-ust__tek, .em-ust__baslik { height: 40px; }
  /* Dar ekranda acilir ekrana sabitlenir; gorunurluk kurali temel kuralla
     AYNI (.acik). Onceden burada ":hover/:focus-within -> display:none"
     yaziyordu; o, sorunun dar ekranda fark edilip yamandiginin izidir.
     Geniş ekranda yamanmadigi icin hata orada kalmisti -- artik temel
     kuraldan kaldirildi, bu gecici cozume gerek yok. */
  .em-ust__acilir {
    position: fixed; left: 8px; right: 8px; top: auto; display: none;
    max-height: 60vh; overflow-y: auto; grid-template-columns: 1fr !important;
  }
  .em-ust__oge.acik .em-ust__acilir { display: grid; }
  .page-wrapper, .content-wrapper { padding-top: 104px !important; }
}
@media print { .em-ust { display: none !important; }
  .page-wrapper, .content-wrapper { padding-top: 0 !important; } }

/* ===========================================================================
   KİŞİSEL MASAÜSTÜ  (anasayfadaki kısayol tahtası)
   Üst menüden bir sayfa tutulup buraya bırakılır. Sayfanın kendi blokları
   değişmez; bu bölüm onların üstünde durur (bkz. lib/sayfa-veri.js).
   =========================================================================== */
.em-masa {
  background: var(--em-kart);
  border: 1px solid var(--em-cizgi-sicak);
  border-radius: 10px;
  padding: 14px 16px 16px;
  margin: 0 0 18px;
  transition: border-color .12s ease, background .12s ease;
}
.em-masa__ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.em-masa__baslik {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--em-metin-2);
}
.em-masa__baslik i { font-size: 18px; color: var(--em-ana); }
.em-masa__araclar { display: flex; align-items: center; gap: 10px; }
.em-masa__ipucu { font-size: 12px; color: var(--em-metin-3); }
.em-masa__dugme {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--em-cizgi-sicak); background: var(--em-zemin);
  color: var(--em-metin-2); border-radius: 7px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 11px;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.em-masa__dugme:hover {
  background: var(--em-ana-acik); color: var(--em-ana-koyu);
  border-color: var(--em-ana-kenar);
}
.em-masa__dugme i { font-size: 16px; }

/* --- kısayol ızgarası --- */
/* SERBEST YERLEŞİM TUVALİ (Windows masaüstü gibi)
   Öğeler mutlak konumdadır; yerlerini kullanıcı belirler. Dar ekranda
   (aşağıdaki medya kuralı) bu kapanır ve öğeler alt alta dizilir. */
.em-masa__izgara { position: relative; min-height: 0; }
.em-masa__oge {
  position: absolute;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px; min-height: 58px;
  background: var(--em-zemin);
  border: 1px solid var(--em-cizgi-sicak); border-radius: 9px;
  color: var(--em-metin) !important; text-decoration: none;
  cursor: pointer; user-select: none;
  transition: transform .1s ease, box-shadow .12s ease,
              border-color .12s ease, background .12s ease;
}
.em-masa__oge:hover {
  background: var(--em-yuzey); border-color: var(--em-ana-kenar);
  box-shadow: 0 2px 10px rgba(16,24,40,.07);
  transform: translateY(-1px);
}
.em-masa__oge > i:first-child {
  font-size: 21px; color: var(--em-ana); flex: none;
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--em-ana-acik);
}
.em-masa__ad {
  font-size: 12.8px; font-weight: 600; line-height: 1.3;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.em-masa__oge--tasiniyor { opacity: .45; }

/* kaldırma çarpısı: yalnız üstüne gelince görünür, yanlışlıkla basılmasın */
.em-masa__sil {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border: 0; border-radius: 6px;
  background: transparent; color: var(--em-metin-3);
  cursor: pointer; opacity: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .12s ease, background .12s ease, color .12s ease;
}
.em-masa__oge:hover .em-masa__sil,
.em-masa__sil:focus-visible { opacity: 1; }
.em-masa__sil:hover { background: var(--em-hata-acik); color: var(--em-hata); }
.em-masa__sil i { font-size: 15px; }

/* --- boş durum --- */
.em-masa__bos {
  display: flex; align-items: center; gap: 14px;
  border: 1.5px dashed var(--em-cizgi-sicak); border-radius: 9px;
  padding: 18px 18px; color: var(--em-metin-2); background: var(--em-zemin);
}
.em-masa__bos[hidden] { display: none; }
.em-masa__izgara[hidden] { display: none; }
.em-masa__bos i { font-size: 26px; color: var(--em-metin-3); flex: none; }
.em-masa__bos b { font-size: 13.5px; color: var(--em-metin); }
.em-masa__bos p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; }

/* --- sürükleme sırasında bırakma hedefi --- */
.em-masa--hedef {
  border-color: var(--em-ana); background: var(--em-ana-acik);
  box-shadow: 0 0 0 3px rgba(16,185,129,.13);
}
.em-masa--hedef .em-masa__bos { border-color: var(--em-ana); background: transparent; }

/* --- "Kısayol Ekle" penceresi --- */
.em-masa-pencere {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(17,24,39,.42);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 16px 16px;
}
.em-masa-pencere[hidden] { display: none; }
.em-masa-pencere__kutu {
  width: 100%; max-width: 520px; max-height: 76vh;
  background: var(--em-kart); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(17,24,39,.24);
  display: flex; flex-direction: column; overflow: hidden;
}
.em-masa-pencere__ust {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--em-cizgi-sicak);
  font-size: 14px;
}
.em-masa-pencere__kapat {
  border: 0; background: transparent; cursor: pointer; padding: 4px;
  color: var(--em-metin-3); border-radius: 6px; line-height: 1;
}
.em-masa-pencere__kapat:hover { background: var(--em-zemin); color: var(--em-metin); }
.em-masa-pencere__kapat i { font-size: 20px; }
.em-masa-pencere__ara {
  margin: 12px 16px 8px; padding: 9px 11px; font: inherit; font-size: 13px;
  border: 1px solid var(--em-cizgi-sicak); border-radius: 8px; outline: 0;
  background: var(--em-zemin); color: var(--em-metin);
}
.em-masa-pencere__ara:focus {
  border-color: var(--em-ana); box-shadow: 0 0 0 3px rgba(16,185,129,.13);
  background: var(--em-yuzey);
}
.em-masa-pencere__liste { overflow-y: auto; padding: 4px 10px 12px; }
.em-masa-pencere__oge {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border: 0; background: transparent; border-radius: 8px;
  cursor: pointer; font: inherit; text-align: left; color: var(--em-metin);
}
.em-masa-pencere__oge:hover:not(:disabled) { background: var(--em-ana-acik); }
.em-masa-pencere__oge:disabled { opacity: .5; cursor: default; }
.em-masa-pencere__oge > i:first-child { font-size: 18px; color: var(--em-ana); flex: none; }
.em-masa-pencere__oge > i:last-child { margin-left: auto; font-size: 17px; color: var(--em-metin-3); }
.em-masa-pencere__oge span { display: flex; flex-direction: column; min-width: 0; }
.em-masa-pencere__oge b { font-size: 13px; font-weight: 600; }
.em-masa-pencere__oge em {
  font-style: normal; font-size: 11.5px; color: var(--em-metin-3);
}
.em-masa-pencere__bos {
  padding: 22px 10px; text-align: center; color: var(--em-metin-3); font-size: 13px;
}

@media (max-width: 575px) {
  .em-masa__ipucu { display: none; }
  .em-masa__izgara { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
  .em-masa__sil { opacity: 1; }   /* dokunmatikte "üstüne gelme" yok */
}
@media print { .em-masa, .em-masa-pencere { display: none !important; } }

/* --- sürükleme sırasında: imleci takip eden etiket --- */
.em-masa-hayalet {
  position: fixed; z-index: 2000; pointer-events: none;
  transform: translate(14px, 14px);
  display: flex; align-items: center; gap: 8px;
  max-width: 240px; padding: 8px 12px;
  background: var(--em-kart); color: var(--em-metin);
  border: 1px solid var(--em-ana); border-radius: 9px;
  box-shadow: 0 10px 26px rgba(17,24,39,.20);
  font-size: 12.8px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.em-masa-hayalet i { font-size: 17px; color: var(--em-ana); flex: none; }
/* Sürüklerken metin seçilmesin, imleç "taşıma" olsun */
body.em-surukleniyor { user-select: none; -webkit-user-select: none; cursor: grabbing !important; }
body.em-surukleniyor * { cursor: grabbing !important; }
/* Tarayıcının kendi link sürüklemesi kapalı (bizimki pointer tabanlı) */
.em-ust a, .em-masa__oge { -webkit-user-drag: none; }
.em-masa__oge { cursor: grab; }

/* --- masaüstü bildirimi (sağ alt, kendiliğinden kaybolur) --- */
.em-masa-bildirim {
  position: fixed; right: 18px; bottom: 18px; z-index: 2100;
  max-width: 320px; padding: 10px 14px;
  background: var(--em-metin); color: #fff;
  border-radius: 9px; font-size: 12.8px; font-weight: 600;
  box-shadow: 0 10px 26px rgba(17,24,39,.24);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.em-masa-bildirim.gorunur { opacity: 1; transform: translateY(0); }
.em-masa-bildirim--hata { background: var(--em-hata); }

/* Sürüklerken menü AÇIK KALMAMALI: açık menü tahtayı örter, kullanıcı
   nereye bırakacağını göremez (ölçüldü: Depo menüsü ekranın yarısını
   kaplıyordu). .acik sınıfını JS kaldırıyor ama fare menünün üstündeyken
   :hover onu yeniden açıyor; sürükleme boyunca hover devre dışı. */
body.em-surukleniyor .em-ust__oge:hover .em-ust__acilir,
body.em-surukleniyor .em-ust__oge:focus-within .em-ust__acilir,
body.em-surukleniyor .em-ust__oge.acik .em-ust__acilir,
body.em-menu-bekle .em-ust__oge:hover .em-ust__acilir,
body.em-menu-bekle .em-ust__oge:focus-within .em-ust__acilir,
body.em-menu-bekle .em-ust__oge.acik .em-ust__acilir { display: none !important; }

/* Dokunmatikte kutuyu parmakla taşıyabilmek için: kutunun üstünde tarayıcı
   kaydırmayı devralmasın (devralırsa pointer olayları iptal edilir ve
   sıralama hiç başlamaz). Kutular küçük, etrafta kaydırmak için bol yer var.
   MENÜ bağlantılarına bu VERİLMEZ: orada uzun listeleri parmakla kaydırmak
   gerekiyor; dokunmatik kullanıcı kısayolu "Kısayol Ekle" ile ekler. */
.em-masa__oge { touch-action: none; }



/* ===========================================================================
   MASAÜSTÜ — PARÇALAR ve BULANIK LOGO ZEMİNİ
   Anasayfa artık boş bir tahtadır. Kullanıcı hem sayfa kısayolu hem de hazır
   PARÇA (takvim, onay bekleyenler) koyar. Parçalar tam satır kaplar.
   =========================================================================== */

/* Tahta: sayfanın tamamını kaplasın, zeminde logo dursun */
.em-masa {
  position: relative;
  /* Üst menü (56px) + sayfa başlığı + kenar boşlukları düşülür; kalan
     yükseklik tahtanındır. İçerik uzarsa kutu da uzar (min-height). */
  min-height: calc(100vh - var(--em-ust-y) - 150px);
  overflow: hidden;                 /* bulanık logo dışarı taşmasın */
}
/* ARKA PLAN LOGOSU
   Masaüstü, ekranın kalanını KAPLAR: tahta boşken bile logo küçük bir beyaz
   kutunun içinde sıkışmasın. Logo o alanın ortasında, ÇOK AZ bulanık durur.
   Rengi olduğu gibidir (logo.png şeffaf zeminli, kendi renklerinde);
   burada yalnızca saydamlık verilir ki üstteki yazılar okunabilsin. */
.em-masa::before {
  content: '';
  position: absolute; inset: 0;
  background: url('/assets/img/logo.png') no-repeat center center;
  background-size: min(62%, 520px) auto;
  filter: blur(1.5px);
  opacity: .16;
  pointer-events: none;
  z-index: 0;
}
.em-masa > * { position: relative; z-index: 1; }

@media (max-width: 575px) {
  .em-masa::before { background-size: 76% auto; }
}
/* Hareket azaltma tercihi: bulanıklık ağır bir efekt, sadeleştirilir */
@media (prefers-reduced-motion: reduce) { .em-masa::before { filter: none; opacity: .06; } }

/* --- PARÇA (takvim / onay bekleyenler) --- */
.em-masa__parca {
  position: absolute;
  display: flex; flex-direction: column;
  border: 1px solid var(--em-cizgi-sicak); border-radius: 10px;
  background: var(--em-kart);
  overflow: hidden;
}
.em-masa__parca-ust {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-bottom: 1px solid var(--em-cizgi-sicak);
  background: var(--em-zemin);
  cursor: grab; touch-action: none;   /* başlıktan tutup taşınır */
}
.em-masa__parca-ad {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--em-metin-2);
}
.em-masa__parca-ad i { font-size: 16px; color: var(--em-ana); }
.em-masa__parca .em-masa__sil { position: static; opacity: .55; }
.em-masa__parca:hover .em-masa__sil { opacity: 1; }
/* Parçanın içindeki blok, kendi kenarlığını tekrar çizmesin */
.em-masa__parca > .dashboard-section,
.em-masa__parca > .project-calendar-card {
  margin: 0 !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; width: 100%; max-width: none;
}
.em-masa__parca.em-masa__oge--tasiniyor { opacity: .45; }

/* --- Ekle penceresinde grup başlıkları --- */
.em-masa-pencere__grup {
  padding: 10px 10px 4px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--em-metin-3);
}
.em-masa-pencere__oge.parca > i:first-child { color: var(--em-ana-koyu); }
.em-masa-pencere__oge.parca b::after {
  content: 'PARÇA'; margin-left: 7px; font-size: 9px; font-weight: 700;
  letter-spacing: .06em; color: var(--em-ana-koyu);
  background: var(--em-ana-acik); border-radius: 4px; padding: 2px 5px;
  vertical-align: middle;
}

/* ===========================================================================
   SERBEST YERLEŞİM — taşıma tutamağı, boyutlandırma, dar ekran davranışı
   =========================================================================== */

/* Parçanın gövdesi başlığın altında kalan alanı doldurur ve kendi içinde
   kaydırılır; kutu küçültülünce içerik taşmaz. */
.em-masa__parca-ic { flex: 1 1 auto; min-height: 0; overflow: auto; }
.em-masa__parca > .em-masa__parca-ust { flex: 0 0 auto; }

/* Boyutlandırma tutamağı: sağ alt köşe. Yalnız üstüne gelince belirir. */
.em-masa__boyut {
  position: absolute; right: 0; bottom: 0;
  /* 16 px fazla küçüktü: fare ile tutturmak zordu (ölçüldü). 22 px ve
     hafif görünür -> kullanıcı boyutlandırılabildiğini görür. */
  width: 22px; height: 22px; cursor: nwse-resize;
  opacity: .28; transition: opacity .12s ease; z-index: 3;
}
.em-masa__boyut::after {
  content: ''; position: absolute; right: 3px; bottom: 3px;
  width: 10px; height: 10px;
  border-right: 2px solid var(--em-ana); border-bottom: 2px solid var(--em-ana);
  border-bottom-right-radius: 3px;
}
.em-masa__oge:hover .em-masa__boyut,
.em-masa__parca:hover .em-masa__boyut { opacity: .8; }
.em-masa__boyut:hover { opacity: 1 !important; }

/* Taşınan öğe üstte dursun ve gölgelensin (Windows'taki gibi "elde") */
.em-masa__oge--tasiniyor {
  opacity: 1 !important;
  z-index: 5;
  box-shadow: 0 10px 28px rgba(17,24,39,.18) !important;
  cursor: grabbing;
}
.em-masa__parca { cursor: default; }
.em-masa__oge { cursor: grab; }

/* Dar ekran: serbest yerleşim KAPALI. Parmakla piksel piksel yerleştirmek
   kullanışlı değil; öğeler alt alta dizilir, konum bilgisi korunur
   (geniş ekrana dönünce yerleri geri gelir). */
@media (max-width: 991px) {
  .em-masa__izgara {
    display: flex; flex-direction: column; gap: 10px; min-height: 0 !important;
  }
  .em-masa__oge, .em-masa__parca {
    position: static !important;
    left: auto !important; top: auto !important;
    width: auto !important; height: auto !important;
  }
  .em-masa__boyut { display: none; }
  .em-masa__ipucu { display: none; }
}

/* Şantiye detayında takvim kendi bölümünde (bkz. santiyeDetayiSadelestir) */
.em-santiye-takvim { display: block; margin: 0 0 18px; }
.em-santiye-takvim .project-calendar-card {
  width: 100%; max-width: none; margin: 0;
  background: var(--em-kart); border: 1px solid var(--em-cizgi-sicak);
  border-radius: 10px;
}

/* ============================================================ FORM HATASI */
/* Doğrulama hatasında ayrı bir "422" sayfasına düşmek yerine yanlış alan
   kırmızı çerçevelenir ve nedeni hemen altında küçük bir kutuda yazar
   (kullanıcı isteği, 2026-08-18). Renkler tema değişkenlerinden gelir. */
.em-hatali,
.em-hatali.form-control,
.em-hatali.form-select,
.em-hatali .ts-control,
.em-hatali.ts-wrapper .ts-control,
.em-hatali.select2-selection {
  border-color: var(--em-hata) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .14) !important;
  background-color: var(--em-hata-acik) !important;
}

.em-hata-kutu {
  margin-top: 5px;
  padding: 6px 9px;
  background: var(--em-hata-acik);
  border: 1px solid #fecaca;
  border-left: 3px solid var(--em-hata);
  border-radius: var(--em-r, 6px);
  color: #991b1b;
  font-size: 12px;
  line-height: 1.45;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.em-hata-kutu::before {
  content: "!";
  flex: 0 0 auto;
  width: 14px; height: 14px; margin-top: 1px;
  border-radius: 50%;
  background: var(--em-hata); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 14px; text-align: center;
}

/* Alana bağlanamayan (formun tamamını ilgilendiren) hatalar formun başında */
.em-hata-genel {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: var(--em-hata-acik);
  border: 1px solid #fecaca;
  border-left: 3px solid var(--em-hata);
  border-radius: var(--em-r, 6px);
  color: #991b1b;
  font-size: 13px;
  line-height: 1.5;
}

/* Başarılı kayıtta kısa bildirim (sağ altta, kendiliğinden kaybolur) */
.em-basari-bildirim {
  position: fixed; right: 18px; bottom: 18px; z-index: 2147483000;
  padding: 10px 14px;
  background: var(--em-basari-acik, #ecfdf5);
  border: 1px solid var(--em-ana-kenar, #a7f3d0);
  border-left: 3px solid var(--em-ana, #10b981);
  border-radius: var(--em-r, 6px);
  color: #065f46; font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .10);
}

/* ------------------------------------------------- ÖZLÜK SAYAÇ İKONLARI */
/* Kopyalanan sayfada bu ikonlar Bootstrap'in canlı mavi/sarı tonlarındaydı
   ve temanın dışında duruyordu. Renkler tema değişkenlerine bağlandı;
   ikon şekilleri lib/sayfa-veri.js → ozlukKutuIkonlari() ile anlamına göre
   değiştirilir (kullanıcı isteği, 2026-08-18). */
/* ÖZET KUTUSU İKONLARI — MİNİMAL, ROZET İÇİNDE.
   Kullanıcı isteği (4 Eylül 2026): "şurdaki simgeleri daha minimal
   profesyonel bir görünüme ulaştır".
   Önceden ikonlar `fs-1` ile (≈2.5rem) çıplak ve doygun renkteydi; dört
   kutu yan yana gelince ekranın en dikkat çeken şeyi RAKAM değil İKON
   oluyordu. Oysa bu kutularda okunması gereken sayıdır.
   Yeni düzen: ikon 38px'lik yumuşak zeminli bir rozetin içinde, boyutu
   ölçülü — bildirim penceresindeki rozet diliyle aynı. */
.em-ozet-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 10px;
  font-size: 1.15rem !important;   /* fs-1'i (2.5rem) ezer */
  line-height: 1;
  opacity: 1;
}
.em-ozet-ikon--notr {
  color: var(--em-ana-koyu); background: var(--em-basari-acik);
  box-shadow: inset 0 0 0 1px var(--em-ana-kenar);
}
.em-ozet-ikon--bekleyen {
  color: var(--em-uyari); background: var(--em-uyari-acik);
  box-shadow: inset 0 0 0 1px #fde68a;
}
.em-ozet-ikon--yaklasan {
  color: var(--em-uyari); background: var(--em-uyari-acik);
  box-shadow: inset 0 0 0 1px #fde68a;
}
.em-ozet-ikon--gecen {
  color: var(--em-hata); background: var(--em-hata-acik);
  box-shadow: inset 0 0 0 1px #fecaca;
}

/* ------------------------------------- AÇILIR KUTUDAKİ ARAMA ALANI (TomSelect)
   Seçili bir değer varken kutuya tıklayınca değerin yanında ikinci bir
   "kutu" beliriyordu: TomSelect'in arama input'u kendi kenarlığı ve beyaz
   zeminiyle görünüyor, kullanıcıya iki ayrı alan varmış izlenimi veriyordu
   (kullanıcı bildirdi, 2026-08-18: "arama kutusu gizli olarak çıksın").
   Arama YETENEĞİ duruyor — yazınca liste yine süzülür — yalnız kutu görünmez:
   metin doğrudan seçili değerin yanında yazılır. */
.ts-control > input,
.ts-wrapper .ts-control > input {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  line-height: inherit !important;
  color: var(--em-metin) !important;
}
/* ÖZGÜLLÜK NOTU: kopyalanan sayfaların gömülü <style> bloğunda
     .ts-wrapper.single .ts-control input { border:1px solid ... !important }
   kuralı var ve yukarıdaki kuralımızdan daha özgül olduğu için kazanıyordu
   (ölçüldü: hesaplanan kenarlık 0.8px solid kalıyordu). Aşağıdaki seçici o
   kuralı aşacak özgüllükte yazıldı; `body` öneki bilerek eklendi. */
body .ts-wrapper.single .ts-control > input,
body .ts-wrapper:not(.multi) .ts-control > input,
body .ts-wrapper.single .ts-control input,
body .ts-wrapper:not(.multi) .ts-control input {
  border: 0 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Seçili değer varken imleç yanıp sönmesin, kutu boş görünmesin */
.ts-wrapper.single.has-items .ts-control > input {
  caret-color: var(--em-metin);
  width: 1px !important;      /* yazınca kendiliğinden genişler */
  opacity: 0;
}
.ts-wrapper.single.focus.has-items .ts-control > input {
  opacity: 1;
  width: auto !important;
}

/* =================================================== SEKMELER (aktif belli olsun)
   Kullanıcı bildirdi (2026-08-18): "sekmelerde gezerken renkler birbirine çok
   yakın, her şey aynı gibi". Ölçüldü: aktif sekmenin tek işareti 2px'lik bir
   alt çizgiydi; kopyalanan sayfanın gömülü stili ise açık sarı (#fef3c7) dolgu
   veriyordu — tema dışı ve yine silik.
   Yeni düzen Google Stitch'te üretilen "Kurumsal Personel Detay Paneli"
   tasarımından alındı: AKTİF sekme dolu vurgu rengi + beyaz metin, pasifler
   nötr gri. Böylece hangi sekmede olunduğu bir bakışta anlaşılıyor.
   `body` öneki ZORUNLU: kopyalanan sayfaların gömülü stili daha özgül. */
body .nav-tabs,
body .personel-tabs { border-bottom-color: var(--em-cizgi) !important; }

body .nav-tabs .nav-link,
body .personel-tabs .nav-link {
  color: var(--em-metin-2) !important;
  background: transparent !important;
  border-radius: var(--em-r) !important;
  border-bottom-color: transparent !important;
  transition: background .15s, color .15s;
}
body .nav-tabs .nav-link:hover:not(.active),
body .personel-tabs .nav-link:hover:not(.active) {
  background: var(--em-yuzey-2) !important;
  color: var(--em-metin) !important;
}
/* Kullanıcı 3. alternatifi seçti (2026-08-18): HAP görünüm — açık yeşil
   zemin + yeşil çerçeve + koyu yeşil metin. Dolu zemine göre daha yumuşak,
   ama aktif sekme yine bir bakışta ayırt ediliyor. */
body .nav-tabs .nav-link,
body .personel-tabs .nav-link { border-radius: 999px !important; }
body .nav-tabs .nav-link.active,
body .personel-tabs .nav-link.active {
  background: var(--em-ana-acik) !important;
  color: var(--em-ana-koyu) !important;
  font-weight: 650 !important;
  border: 1px solid var(--em-ana-kenar) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
/* Sekme ikonunun kutusu da aktifken beyaza döner (kopyada turuncuydu) */
body .personel-tabs .nav-link .tab-icon-wrapper {
  background: var(--em-yuzey-2) !important;
}
body .personel-tabs .nav-link.active .tab-icon-wrapper {
  background: rgba(16, 185, 129, .16) !important;
}
body .personel-tabs .nav-link.active .tab-icon-wrapper i,
body .personel-tabs .nav-link.active .tab-text { color: var(--em-ana-koyu) !important; }

/* ============================================ YÜZEY AYRIMI (kart / bölüm)
   Kullanıcı: "Eski sistemde arka planlar belirgin, bizde değil; yerine göre
   hafif renk olsun, arkadaki yazılar belirgin olsun" (2026-08-18).
   Ölçülen fark: eski sistem kartlarında gölge var (0 10px 30px rgba(15,23,42,.1)),
   bizde hiç yoktu; ayrıca sayfa zemini neredeyse beyazdı. Zemin koyulaştı,
   kartlara YUMUŞAK gölge ve belirgin kenarlık verildi, bölüm başlıkları
   hafif renkli zemine alındı. */
body .card,
body .content-card,
body .personel-tabs-wrapper {
  background: var(--em-kart) !important;
  border: 1px solid var(--em-cizgi-sicak) !important;
  box-shadow: var(--em-golge) !important;
}

/* Bölüm başlıkları: hafif zemin + koyu metin (üstündeki yazı belirgin olsun) */
body .card > .card-header,
body .content-card > .card-header {
  background: var(--em-yuzey-2) !important;
  border-bottom: 1px solid var(--em-cizgi-sicak) !important;
  color: var(--em-metin) !important;
  font-weight: 650 !important;
}
body .card > .card-header h5,
body .card > .card-header h6,
body .card > .card-header .card-title { color: var(--em-metin) !important; }

/* Tablo başlık satırı da zeminden ayrılsın */
/* NOT: bu kural eskiden `body .tabulator .tabulator-header`i de kapsiyordu
   ve yukaridaki eski sisteme es baslik zeminini/rengini GERI ALIYORDU (daha
   gec geldigi icin kazaniyordu). Tabulator basligi listeden cikarildi --
   bicimi tek yerde, "TABULATOR IZGARASI" blogunda durur. */
body table thead th {
  background: var(--em-tablo-baslik-zemin) !important;
  color: var(--em-tablo-baslik) !important;
  border-bottom: 1px solid var(--em-cizgi) !important;
}

/* Form bölümleri (İş & Organizasyon, Kimlik Bilgileri, İletişim...) ayrışsın */
body .page-content > .card + .card { margin-top: 1rem !important; }

/* Sayfa zemini gerçekten uygulansın (bazı kopyalanan sayfalar body'ye beyaz
   veriyordu; kart-zemin farkı o yüzden kayboluyordu) */
body, body .wrapper, body .page-wrapper, body .page-content {
  background-color: var(--em-zemin) !important;
}
body .card, body .content-card { background-color: var(--em-kart) !important; }

/* ÖZGÜLLÜK DÜZELTMESİ (ölçüldü 2026-08-18):
   Kopyalanan sayfaların gömülü stilinde `.page-wrapper .card { box-shadow:none }`
   ve `.personel-show-page .content-card { box-shadow:none }` var; bunlar
   (0,2,0) özgüllükte olduğu için yukarıdaki `body .card` (0,1,1) kuralını
   eziyordu — kartlar gölgesiz kalıyor, zeminden ayrışmıyordu.
   Aşağıdaki seçiciler o kuralları aşacak özgüllükte yazıldı. */
body .page-wrapper .card,
body .page-wrapper .content-card,
body .page-content .card,
body .page-content .content-card,
body .personel-show-page .content-card,
body .page-wrapper .personel-tabs-wrapper {
  box-shadow: var(--em-golge) !important;
  border: 1px solid var(--em-cizgi-sicak) !important;
  background: var(--em-kart) !important;
}

/* Bölüm başlığı: hafif zemin (gömülü "transparent" kuralını aşar) */
body .page-wrapper .card > .card-header,
body .page-content .card > .card-header,
body .personel-show-page .content-card > .card-header {
  background: var(--em-yuzey-2) !important;
  border-bottom: 1px solid var(--em-cizgi-sicak) !important;
  padding: .7rem .9rem !important;
  margin-bottom: 0 !important;
  border-radius: var(--em-r) var(--em-r) 0 0 !important;
}
/* Başlık zemini geldiği için gövdeye iç boşluk gerekir */
body .page-wrapper .card > .card-body,
body .page-content .card > .card-body { padding: .9rem !important; }

/* ================================== FORM BÖLÜMLERİ (İş & Organizasyon, Adres…)
   Kullanıcı: "Eski sistemde arka planlar belirgin, bizde değil; yerine göre
   hafif renk olmalı, arkadaki yazılar belirgin olsun" (2026-08-18).

   ÖLÇÜM: eski sistemde beyaz kartın İÇİNDEKİ her bölüm ayrı bir blok —
   zemin #f8fafc, kenarlık #e2e8f0. Kopyalanan sayfada bu tanım ZATEN VAR
   (`.form-section`), ama tema katmanı gömülü stilleri işlerken açık gri
   zeminleri beyaza çeviriyordu; bölümler kartla aynı renge düşüp
   kayboluyordu. Burada kendi paletimizle geri getiriliyor. */
body .page-wrapper .form-section,
body .page-content .form-section,
body .card .form-section,
body .content-card .form-section {
  background: var(--em-yuzey-2) !important;
  border: 1px solid var(--em-cizgi-sicak) !important;
  border-radius: var(--em-r) !important;
  padding: 1rem 1.1rem !important;
  margin-bottom: 1rem !important;
  box-shadow: none !important;
}
/* Bölüm başlığı: koyu ve kalın (arkadaki yazı belirgin olsun) */
body .form-section-title,
body .page-wrapper .form-section-title {
  color: var(--em-metin) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--em-cizgi-sicak) !important;
  margin-bottom: .9rem !important;
}
/* Bölüm ikonu kopyada turuncuydu (#f59e0b); tema rengine çekildi */
body .form-section-title i { color: var(--em-ana) !important; }

/* Bölüm içindeki alanlar beyaz kalsın ki gri zeminden ayrışsın */
body .form-section .form-control,
body .form-section .form-select,
body .form-section .ts-control {
  background: var(--em-kart) !important;
}

/* ====================================== YÖNETİM GİRİŞİ — TEK KOLON, ORTALI
   Kullanıcı isteği (2026-08-18): yönetim giriş ekranında sağdaki koyu
   tanıtım paneli kaldırıldı, yalnızca ortada tek bir giriş kutusu kalacak.
   Firma giriş ekranı aynı `.em-giris` sınıflarını paylaştığı için ona
   dokunulmadı; kural YALNIZ `.em-giris--tek` taşıyan sayfada geçerli. */
.em-giris.em-giris--tek {
  grid-template-columns: 1fr;
  place-items: center;
  background: var(--em-zemin);
}
.em-giris--tek .em-giris__sol {
  width: 100%;
  max-width: 460px;
  background: var(--em-kart);
  border: 1px solid var(--em-cizgi-sicak);
  border-radius: 12px;
  box-shadow: var(--em-golge);
  padding: 36px 32px 28px;
}
.em-giris--tek .em-giris__kutu { max-width: none; }

/* ============================================================
   YETKI EKRANI - TOPLU SECIM CUBUGU
   Sayfa yetkileri tek tek isaretleniyordu; secim sutunu ve bu
   cubuk eklendi (bkz. lib/sayfa-veri.js -> yetkiTopluSecim).
   ============================================================ */
.em-yetki-ustsatir {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.em-yetki-ustsatir .em-yetki-arama { flex: 0 0 auto; margin-bottom: 0; }
.em-yetki-ustsatir .em-toplu-cubuk { flex: 1 1 420px; margin-bottom: 0; }
.em-toplu-cubuk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--em-yuzey-2);
  border: 1px solid var(--em-cizgi);
  border-radius: 10px;
}
.em-toplu-bilgi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
  color: var(--em-metin);
  padding-right: 6px;
  border-right: 1px solid var(--em-cizgi);
  margin-right: 2px;
}
.em-toplu-bilgi i { color: var(--em-ana); font-size: 16px; }
.em-toplu-cubuk .em-toplu-tur { width: auto; min-width: 150px; }
.em-toplu-cubuk .btn { font-size: 13px; font-weight: 600; }
.em-toplu-ver {
  background: var(--em-ana); border-color: var(--em-ana); color: #fff;
}
.em-toplu-ver:hover:not(:disabled) { background: var(--em-ana-koyu); color: #fff; }
.em-toplu-kaldir {
  background: var(--em-hata-acik); border: 1px solid var(--em-hata); color: var(--em-hata);
}
.em-toplu-kaldir:hover:not(:disabled) { background: var(--em-hata); color: #fff; }
.em-toplu-temizle {
  background: transparent; border: 1px solid var(--em-cizgi); color: var(--em-metin-2);
}
.em-toplu-temizle:hover:not(:disabled) { background: var(--em-yuzey); color: var(--em-metin); }
.em-toplu-cubuk .btn:disabled { opacity: .45; }
.em-toplu-ipucu {
  margin-left: auto;
  font-size: 12px;
  color: var(--em-metin-3);
}
/* secim sutunu dar kalsin, satir tiklamasiyla karismasin */
.yetki-tablo th.em-yetki-sec,
.yetki-tablo td.em-yetki-sec { width: 42px; padding-left: 10px; padding-right: 4px; }
.em-yetki-sec .form-check-input { cursor: pointer; margin: 0; }
@media (max-width: 720px) {
  .em-toplu-ipucu { display: none; }
}

/* ============================================================
   YETKI EKRANI - HESAP ROLU SERIDI
   Yonetici rolundeki hesaba tikler uygulanmaz; ekran bunu
   soylemiyordu (bkz. lib/sayfa-veri.js -> yetkiRolSeridi).
   ============================================================ */
.em-rol-serit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  border: 1px solid var(--em-cizgi);
  background: var(--em-yuzey-2);
  color: var(--em-metin);
}
.em-rol-serit i { font-size: 20px; flex: 0 0 auto; }
.em-rol-serit > div { flex: 1 1 auto; }
.em-rol-serit--uyari {
  background: var(--em-uyari-acik);
  border-color: #fcd9a5;
  color: #7c4a03;
}
.em-rol-serit--uyari i { color: var(--em-uyari); }
.em-rol-serit--bilgi { background: var(--em-ana-acik); border-color: var(--em-ana-kenar); }
.em-rol-serit--bilgi i { color: var(--em-ana-koyu); }
.em-rol-serit--yok { background: var(--em-hata-acik); border-color: #f6c9c9; color: #8a1c1c; }
.em-rol-serit--yok i { color: var(--em-hata); }
.em-rol-dugme {
  flex: 0 0 auto;
  background: var(--em-ana);
  border: 1px solid var(--em-ana);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}
.em-rol-dugme:hover:not(:disabled) { background: var(--em-ana-koyu); color: #fff; }
.em-rol-dugme--sade {
  background: transparent;
  border-color: var(--em-cizgi);
  color: var(--em-metin-2);
}
.em-rol-dugme--sade:hover:not(:disabled) { background: var(--em-yuzey); color: var(--em-metin); }
@media (max-width: 720px) {
  .em-rol-serit { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
   KOYU BASLIK BANDI  (eski sistemin imza gorunumu)
   Kopyalanan statik sayfalarda `.content-toolbar` olarak vardi ama YALNIZCA
   o dosyalarin kendi <style> blogundaydi; kabuk() ile URETILEN sayfalar
   (kitap, taseron kitabi, proje...) bu stile erisemedigi icin duz beyaz
   Bootstrap karti gibi goruluyordu -- kullanici "eski sistem ile aynı olmamış"
   diye bildirdi. Ortak temaya alindi; artik uretilen sayfalar da kullanabilir.
   --------------------------------------------------------------------------- */
.em-bant {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
  border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1rem;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .2);
}
.em-bant__baslik { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0;
  display: flex; align-items: center; gap: .5rem; letter-spacing: -.01em; }
.em-bant__alt { font-size: .8rem; color: #94a3b8; margin: 2px 0 0; }
.em-bant__araclar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
/* Koyu bandin icindeki dugmeler: seffaf/acik, koyu zeminde okunur */
.em-bant .btn-outline-secondary {
  border-color: rgba(255,255,255,.25) !important; color: #e2e8f0 !important;
  background: rgba(255,255,255,.06) !important;
}
.em-bant .btn-outline-secondary:hover {
  background: rgba(255,255,255,.14) !important; color: #fff !important;
}
/* Kart basligi da ayni bant (eski sistemde "Kitaplar", "... - Pozlar" boyle) */
.em-bant--kart { border-radius: 12px 12px 0 0; margin-bottom: 0; }
.em-bant--kart + .card { border-top-left-radius: 0; border-top-right-radius: 0; }
/* Koyu bant icindeki bilgi notu: koyu zeminde OKUNUR olmali (onceki
   text-muted gri, lacivert zeminde neredeyse gorunmuyordu). */
.em-bant__not { font-size: .78rem; color: #cbd5e1; display: inline-flex;
  align-items: center; gap: .25rem; }

/* ---------------------------------------------------------------------------
   VIP MENU OGESI  --  .em-menu-vip
   Kullanici istegi (2026-08-28): "Mutabakat Merkezi butonu dikkat cekici
   olsun, etrafi akan yesil enerji formatinda". ErpMerkez'e OZEL ozellikleri
   menude ayirt eder. Menu satiri dar oldugu icin kart cerceveden farkli bir
   yol izlenir: satirin cevresinde ince akan bir kusak + sol kenarda enerji
   cizgisi + ikonda nabiz. Isaretlenmesi lib/menu.js'te { vip: true }.
--------------------------------------------------------------------------- */
@property --em-vip-aci { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.metismenu li.em-menu-vip {
  /* Gradient DEGISKENDE: lib/sayfa-veri.js gorselAyikla() doygun zeminleri
     tema yuzeyine indiriyor; degisken uzerinden verilince dokunmuyor. */
  --em-vip-kusak: conic-gradient(from var(--em-vip-aci),
    rgba(34,197,94,0) 0deg, rgba(34,197,94,0) 240deg,
    #16a34a 280deg, #bef264 305deg, #ffffff 312deg, #bef264 320deg,
    #16a34a 345deg, rgba(34,197,94,0) 360deg);
  position: relative;
  border-radius: 8px;
  padding: 1.5px;
  background: var(--em-vip-kusak);
  animation: em-vip-akim 4s linear infinite;
  margin: .18rem .35rem;
}
.metismenu li.em-menu-vip > a {
  /* Kusagin icinde kalan gercek satir: menu zeminiyle ayni. */
  border-radius: 7px;
  background: var(--em-yan, #fff);
  position: relative;
  z-index: 1;
}
.metismenu li.em-menu-vip > a .menu-title {
  font-weight: 600;
}
.metismenu li.em-menu-vip > a .parent-icon i {
  color: #16a34a;
  filter: drop-shadow(0 0 2px rgba(34,197,94,.5));
  animation: em-vip-nabiz 4s ease-in-out infinite;
}
@keyframes em-vip-akim  { to { --em-vip-aci: 360deg; } }
@keyframes em-vip-nabiz {
  0%, 62%, 100% { filter: drop-shadow(0 0 2px rgba(34,197,94,.5)); }
  /* akim ikonun uzerinden gecerken ANLIK parlar */
  78% { filter: drop-shadow(0 0 7px rgba(190,242,100,1))
                drop-shadow(0 0 12px rgba(34,197,94,.85)); }
}

/* conic-gradient desteklenmiyorsa: duz yesil kusak kalir. */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .metismenu li.em-menu-vip { background: #16a34a; animation: none; }
}
/* Hareketi azalt tercihinde AKIM DURUR, kusak KALIR. */
@media (prefers-reduced-motion: reduce) {
  .metismenu li.em-menu-vip {
    animation: none;
    --em-vip-kusak: linear-gradient(120deg, #16a34a, #bef264 45%, #16a34a);
  }
  .metismenu li.em-menu-vip > a .parent-icon i { animation: none; }
}

/* ---------------------------------------------------------------------------
   VIP OGE - UST MENU ACILIR LISTESI  --  .em-ust-vip
   "Depo" dugmesine basinca acilan listede Mutabakat Merkezi satiri
   (kullanici istegi 2026-08-28: "dikkat cekici olsun, etrafi akan yesil").
   Satir dar oldugu icin kart cerceveden farkli: satirin cevresini saran
   ince akan kusak + ikonda nabiz + ERPMERKEZ isareti.
--------------------------------------------------------------------------- */
.em-ust__acilir a.em-ust-vip {
  --em-vip-kusak: conic-gradient(from var(--em-vip-aci),
    rgba(34,197,94,0) 0deg, rgba(34,197,94,0) 235deg,
    #16a34a 275deg, #bef264 302deg, #ffffff 310deg, #bef264 318deg,
    #16a34a 345deg, rgba(34,197,94,0) 360deg);
  position: relative;
  border-radius: 8px;
  background: var(--em-vip-kusak);
  animation: em-vip-akim 4s linear infinite;
  padding: 1.5px !important;
  overflow: visible;
}
/* Kusagin ICI: gercek satir zemini. ::before ile kaplanir ki <a> icindeki
   ikon/metin yerlesimi bozulmasin. */
.em-ust__acilir a.em-ust-vip::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  border-radius: 7px;
  background: var(--em-yuzey);
  z-index: 0;
}
.em-ust__acilir a.em-ust-vip > * { position: relative; z-index: 1; }
.em-ust__acilir a.em-ust-vip i { color: #16a34a;
  filter: drop-shadow(0 0 2px rgba(34,197,94,.5));
  animation: em-vip-nabiz 4s ease-in-out infinite; }
.em-ust__acilir a.em-ust-vip span { font-weight: 600; }
/* Sisteme ozel isareti */
.em-ust__acilir a.em-ust-vip span::after {
  content: 'ERPMERKEZ';
  display: inline-block;
  margin-left: .45rem;
  padding: .05rem .3rem;
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #86efac;
  border-radius: 3px;
  vertical-align: middle;
}
.em-ust__acilir a.em-ust-vip:hover::before { background: #f0fdf4; }

@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .em-ust__acilir a.em-ust-vip { background: #16a34a; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .em-ust__acilir a.em-ust-vip {
    animation: none;
    --em-vip-kusak: linear-gradient(120deg, #16a34a, #bef264 45%, #16a34a);
  }
  .em-ust__acilir a.em-ust-vip i { animation: none; }
}

/* ==========================================================================
   ERPMERKEZ EXCEL DUGMESI  --  .em-xls
   --------------------------------------------------------------------------
   Kullanici istegi 2026-09-01: "her excel indir/yukle tek tusla olsun,
   1 butona basilsin icinden indir veya yukle olsun, ErpMerkez VIP olarak."

   Ust menudeki .em-ust-vip ile AYNI DIL: akan yesil kusak + beyaz ic.
   Orada satir dardi, burada dugme; ayni degiskenler, ayni animasyon.

   Sinif adlari BILEREK 'em-xls-' onekli: 'em-ust', 'em-kpi' gibi kisa
   adlar kopyalanan temayla cakisip baska bir bilesenin kuralini kapmisti
   (olculdu 2026-09-01, .em-ust ust menuyu ortmustu).
   ========================================================================== */
.em-xls { vertical-align: middle; }

.em-xls .em-xls-btn {
  --em-vip-kusak: conic-gradient(from var(--em-vip-aci),
    rgba(34,197,94,0) 0deg, rgba(34,197,94,0) 235deg,
    #16a34a 275deg, #bef264 302deg, #ffffff 310deg, #bef264 318deg,
    #16a34a 345deg, rgba(34,197,94,0) 360deg);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 1.5px !important;
  border: 0;
  border-radius: 8px;
  background: var(--em-vip-kusak);
  animation: em-vip-akim 4s linear infinite;
  font-weight: 600;
  color: #15803d;
  overflow: visible;
}
/* Kusagin ICI. ::before ile kaplanir ki ikon/metin yerlesimi bozulmasin. */
.em-xls .em-xls-btn::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  border-radius: 7px;
  background: var(--em-yuzey);
  z-index: 0;
}
.em-xls .em-xls-btn > * { position: relative; z-index: 1; }
/* Dugmenin kendi dolgusu 1.5px'lik KUSAGA ayrildi; ic dolgu cocuklarda.
   Yoksa dugme 21px yuksekliginde ezilip diger .btn-sm'lerle hizasiz kalir
   (olculdu 2026-09-01: h=21px, komsu dugmeler 31px). */
.em-xls .em-xls-btn > i {
  padding: .36rem 0 .36rem .6rem;
  font-size: 1.05rem;
  line-height: 1;
  color: #16a34a;
  animation: em-vip-nabiz 4s ease-in-out infinite;
}
.em-xls .em-xls-btn > span {
  padding: .34rem .15rem .34rem 0;
  font-size: .82rem;
  line-height: 1.2;
}
/* Bootstrap'in ok isareti kusagin disina tasmasin */
.em-xls .em-xls-btn.dropdown-toggle::after {
  position: relative;
  z-index: 1;
  margin-right: .55rem;
  margin-left: .1rem;
  color: #15803d;
}
.em-xls .em-xls-btn:hover::before { background: #f0fdf4; }
.em-xls .em-xls-btn:focus { box-shadow: 0 0 0 .18rem rgba(34,197,94,.25); }

/* ErpMerkez isareti -- bu dugmenin sisteme ozel oldugunu soyler. */
.em-xls .em-xls-btn > span::after {
  content: 'ERPMERKEZ';
  display: inline-block;
  margin-left: .4rem;
  padding: .05rem .3rem;
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #15803d;
  background: #dcfce7;
  border: 1px solid #86efac;
  border-radius: 3px;
  vertical-align: middle;
}

/* ---- ACILIR LISTE ---- */
.em-xls .em-xls-menu {
  min-width: 268px;
  padding: .35rem;
  border: 1px solid #d1fae5;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(16,24,40,.12);
}
.em-xls .em-xls-baslik {
  padding: .3rem .55rem .45rem;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #15803d;
}
.em-xls .em-xls-oge {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .5rem .55rem;
  border-radius: 7px;
  white-space: normal;
}
.em-xls .em-xls-oge > i {
  flex: 0 0 auto;
  margin-top: .1rem;
  font-size: 1.05rem;
  color: #16a34a;
}
.em-xls .em-xls-oge > span { display: block; line-height: 1.25; }
.em-xls .em-xls-oge small {
  display: block;
  font-size: .72rem;
  color: var(--em-metin-2);
}
.em-xls .em-xls-oge:hover,
.em-xls .em-xls-oge:focus { background: #f0fdf4; color: inherit; }

.em-xls-modal-bas { border-top: 3px solid #16a34a; }

@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .em-xls .em-xls-btn { background: #16a34a; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .em-xls .em-xls-btn {
    animation: none;
    --em-vip-kusak: linear-gradient(120deg, #16a34a, #bef264 45%, #16a34a);
  }
  .em-xls .em-xls-btn > i { animation: none; }
}

/* ==========================================================================
   ISG GORSEL GORUNTULEYICI ZEMINI  --  .em-gs-zemin
   --------------------------------------------------------------------------
   Fotograf koyu zeminde bakilir; acik gri zemin acik renkli gorsellerin
   kenarini yutuyor. Satir ici `background` sayfa boru hattinda tema rengine
   CEVRILDIGI icin (bkz. lib/sayfa-veri.js gorselAyikla) renk BURADA,
   tema dosyasinda verilir -- gomulu style ya da style="" ile verilirse
   silinir (bu tuzaga 2026-09-01'de uc kez dusuldu).
   ========================================================================== */
.em-gs-zemin { background: #525659 !important; }
.em-gs-zemin img { box-shadow: 0 2px 12px rgba(0,0,0,.35); }

/* ==========================================================================
   PROJE OZET KARTLARI  --  .projeler-stats
   --------------------------------------------------------------------------
   Kullanici 2026-09-01: "buraya guzel bi gorunum yapalim, cok sade olmus."
   Kartlarin stili sayfanin GOMULU <style> blogundaydi; boru hatti gomulu
   stilden zemin/renk/golge/kenarlik bildirimlerini ayikliyor
   (lib/sayfa-veri.js gorselAyikla) -- bu yuzden ikon karesi, koyu "toplam"
   karti ve kehribar vurgu SILINIYORDU, geriye duz beyaz kutular kaliyordu.
   Gorunum bu yuzden TEMA DOSYASINDA tanimlanir.

   TASMA: 12 haneli tutar (587.326.806.428,37 ₺) karta sigmiyor ve
   kesiliyordu. Rakam artik kirilmadan kuculur (font-size: clamp) ve
   gerekirse alt satira gecer; tam degeri baslik (title) tasir.
   ========================================================================== */
.projeler-stats { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }

.projeler-stats__box {
  flex: 1 1 190px; min-width: 190px;
  display: flex; align-items: center; gap: .9rem;
  background: var(--em-yuzey, #fff);
  border: 1px solid var(--em-cizgi, #e2e8f0);
  border-radius: 12px; padding: 1rem 1.15rem;
  box-shadow: 0 1px 3px rgba(15,23,42,.06);
  transition: box-shadow .15s ease, transform .15s ease;
}
.projeler-stats__box:hover { box-shadow: 0 6px 18px rgba(15,23,42,.10); transform: translateY(-1px); }

/* ===================================================================
   KPI KARTI PALETI — ERPMERKEZ YESILI
   Kullanici (11.09.2026): "Eski sistem ile ayni renkleri kullanma, bizim
   tema rengimiz yesili kullan; arka plan ve yazi rengi ayni olmasin."

   ESKISI BIREBIR ESKI SISTEM IDI: lacivert kart (#0f172a -> #1e293b) +
   ALTIN yazi (#fbbf24). Renkler BURADA ve !important ile duruyor; bu
   yuzden sayfanin kendi gomulu stili onlari ezemiyordu (olculdu: sayfada
   yesil yazildi, ekranda lacivert kaldi).
   =================================================================== */
.projeler-stats__icon,
.content-page--projeler .projeler-stats__icon {
  flex: 0 0 auto;
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #ecfdf5 0%, #d1fae5 100%) !important;
  border: 1px solid #a7f3d0;
  border-radius: 11px; color: #0b5345 !important; font-size: 1.3rem;
}

.projeler-stats__content { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.projeler-stats__label {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--em-metin-2, #64748b); font-weight: 700;
}
/* Buyuk tutar kartin disina TASMAZ: yazi tipi genislige gore kuculur,
   gerekirse satir kirilir. Kesme (ellipsis) YAPILMAZ -- para rakaminin
   yarisini gostermek yanlis okumaya davetiye cikarir. */
.projeler-stats__val {
  font-size: clamp(.9rem, 1.3vw, 1.3rem);
  font-weight: 700; color: var(--em-metin, #0f172a);
  line-height: 1.15; font-variant-numeric: tabular-nums;
  /* Rakam ORTADAN BOLUNMEZ. Tutarlar artik kisaltildigi icin (587,33 Mr)
     satira sigar; "587,3 / 3 Mr" gibi bir kirilma yanlis okunur. */
  white-space: nowrap;
}
.projeler-stats__expansion { font-size: .68rem; color: var(--em-metin-3, #94a3b8); font-weight: 500; }

/* SON KART VURGULU: gozun tutunacagi tek nokta. Zemin KOYU YESIL, yazi
   ACIK YESIL -- eski sistemin lacivert+altin ikilisiyle hicbir tonu ortak
   degil. */
.projeler-stats__box--total,
.content-page--projeler .projeler-stats__box--total {
  background: linear-gradient(145deg, #052e26 0%, #0b5345 100%) !important;
  border-color: #0b5345 !important;
}
.projeler-stats__box--total .projeler-stats__label,
.content-page--projeler .projeler-stats__box--total .projeler-stats__label { color: rgba(209,250,229,.80) !important; }
.projeler-stats__box--total .projeler-stats__val,
.content-page--projeler .projeler-stats__box--total .projeler-stats__val { color: #6ee7b7 !important; }
.projeler-stats__box--total .projeler-stats__expansion { color: rgba(209,250,229,.72); }
.projeler-stats__box--total .projeler-stats__icon,
.content-page--projeler .projeler-stats__box--total .projeler-stats__icon { background: rgba(52,211,153,.18) !important; border-color: rgba(110,231,183,.35); color: #6ee7b7 !important; }

@media (max-width: 991.98px) {
  .projeler-stats__box { flex: 1 1 100%; }
}

/* ==========================================================================
   PROJE DETAY BASLIGI  --  .em-proje-ozet / .em-proje-bilgi
   --------------------------------------------------------------------------
   Kullanici 2026-09-01: "aynı şekilde buralara" (proje detay başlığı da sade).
   Ozet paneli ONCEDEN satir ici style ile koyu gradyan aliyordu; sayfa boru
   hatti satir ici zemini de tema rengine ceviriyor -- panel acik gri zemin
   uzerinde acik gri yaziya donusup GORUNMEZ oluyordu. Renk artik burada.
   (Ayni tuzak bugun dorduncu kez: kenarlik rengi, yazdirma olcegi, gorsel
   goruntuleyici zemini, simdi bu. SATIR ICI RENK GUVENILIR DEGIL.)
   ========================================================================== */
/* RENK: ERPMERKEZ YESILI (kullanici 11.09.2026 -- "bizim kpi kartlar
   renklerini uygula"). Projeler ekranindaki --total kartiyla AYNI palet:
   koyu yesil zemin, acik yesil rakam. Eski sistemin lacivert+altin ikilisi
   sistemin hicbir yerinde kalmadi. */
.em-proje-ozet {
  background: linear-gradient(135deg, #052e26 0%, #0b5345 100%) !important;
  color: #d1fae5 !important;
  border: 1px solid #0b5345;
  border-radius: 12px;
  padding: 1rem 1.15rem;
  display: flex; flex-direction: column; justify-content: center; gap: .15rem;
  overflow: hidden;   /* uzun rakam kartin kenarini tasimaz */
}
.em-proje-ozet__et {
  font-size: .64rem; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(209,250,229,.72) !important; font-weight: 700;
}
/* RAKAM ORTADAN BOLUNMEZ (temanin kendi kurali, bkz. projeler-stats__val):
   "587.326.806.4 / 28,37" gibi bir kirilma yanlis okunur. Onun yerine
   punto genislige gore kucultulur ve sigmayan kisim kaydirilir. */
.em-proje-ozet__dg {
  font-size: clamp(.95rem, 1.55vw, 1.4rem);
  font-weight: 700; line-height: 1.25;
  color: #6ee7b7 !important; font-variant-numeric: tabular-nums;
  letter-spacing: -.015em;
  white-space: nowrap; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.em-proje-ozet__dg::-webkit-scrollbar { display: none; }
/* Ikinci deger ayri bir olcumdur: ince bir cizgi ile ayrilir. */
.em-proje-ozet__et.mt-3 {
  margin-top: .85rem !important; padding-top: .75rem;
  border-top: 1px solid rgba(110,231,183,.22);
}
.em-proje-ozet__dg--kucuk {
  font-size: clamp(.85rem, 1.2vw, 1.1rem);
  color: #d1fae5 !important;
}

/* ==========================================================================
   PROJE DETAYI — KART BASLIKLARI, KPI KARTLARI, DEPO HAREKETLERI
   Kullanici (11.09.2026): "Proje Ozeti basliklarin arkasina da eski sistemde
   gordugun gibi renk uygula ama bizimki ErpMerkez'e ozel olsun" ·
   "ekrandaki diger kpi kartlarina da [bize] ozel yap" ·
   "depo hareketleri daha detayli".
   ========================================================================== */
/* Kart basligi: acik yesil zemin + koyu yesil yazi. Eski sistemin koyu
   lacivert seridiyle ayni tonu yok. */
/* OZGULLUK SART: temanin YUKARISINDA
     body .page-wrapper .card > .card-header { background: var(--em-yuzey-2) !important }
   gibi UC SECICILI ve !important kurallar duruyor. Tek sinifli bir kural
   (.card-header.em-kart-bas) onlari EZEMEZ -- olculdu 11.09.2026: sinif
   uygulandigi halde zemin rgb(249,250,251) kaliyor, serit beyaz gorunuyordu.
   Ayni derinlikteki seciciler bu yuzden acikca yazildi. */
body .page-wrapper .card > .card-header.em-kart-bas,
body .page-content .card > .card-header.em-kart-bas,
body .content-card > .card-header.em-kart-bas,
body .card > .card-header.em-kart-bas,
.card-header.em-kart-bas {
  background: linear-gradient(90deg, #ecfdf5 0%, #f0fdf9 100%) !important;
  border-bottom: 1px solid #a7f3d0 !important;
  padding: .7rem 1rem;
}
/* BASLIK h5 DE OLABILIR (18.09.2026, kullanici bildirdi: "Proje Mesajlari
   bu yazinin arkasinda temamiz yok"). Kural yalnizca h6 yaziyordu; kart
   basligini <h5 class="card-title"> ile yazan ekranlarda zemin yesil
   oluyor ama YAZI temasiz kaliyordu. Ayni bandin icindeki iki baslik
   duzeyi de ayni tonu alir. */
body .card > .card-header.em-kart-bas h5,
body .card > .card-header.em-kart-bas h6,
.card-header.em-kart-bas h5,
.card-header.em-kart-bas h6 { color: #0b5345 !important; font-weight: 700; letter-spacing: .01em; }
body .card > .card-header.em-kart-bas h5 i,
body .card > .card-header.em-kart-bas h6 i,
.card-header.em-kart-bas h5 i,
.card-header.em-kart-bas h6 i { color: #10b981 !important; }
body .card > .card-header.em-kart-bas p,
.card-header.em-kart-bas p { color: #4b7d6e !important; }

/* MARKA SERIDI -- koyu yesil baslik cubugu.
   Kullanici 12.09.2026: "bu bolumun arkasi renkli, bizde de kendi renk
   temamizi uygulayalim, profosyenel bi iscilik ciksin". Kaynak sistemde
   ayni serit koyu lacivert; bizde marka yesilinin koyu tonu kullanilir --
   /proje/projeler'deki "Ilerleme" kartiyla AYNI yuzey, boylece sistemde
   tek bir "koyu marka zemini" dili olur.
   Ozgullukler ustteki kuralla AYNI derinlikte yazilmak zorunda (bkz. not). */
body .page-wrapper .card > .card-header.em-kart-bas--marka,
body .page-content .card > .card-header.em-kart-bas--marka,
body .content-card > .card-header.em-kart-bas--marka,
body .card > .card-header.em-kart-bas--marka,
.card-header.em-kart-bas--marka {
  background: linear-gradient(145deg, #052e26 0%, #0b5345 100%) !important;
  border-bottom: 1px solid #0b5345 !important;
  padding: .75rem 1rem;
}
/* BASLIK h5 DE OLABILIR: kopyalanan sayfalar .card-title'i h5 ile yaziyor
   (or. depo_transfer.html). Kural yalnizca h6 kapsayinca koyu seritte
   koyu yazi kaliyor ve baslik OKUNMUYORDU (olculdu 12.09.2026). */
body .card > .card-header.em-kart-bas--marka h1,
body .card > .card-header.em-kart-bas--marka h2,
body .card > .card-header.em-kart-bas--marka h3,
body .card > .card-header.em-kart-bas--marka h4,
body .card > .card-header.em-kart-bas--marka h5,
body .card > .card-header.em-kart-bas--marka h6,
body .card > .card-header.em-kart-bas--marka .card-title,
body .page-wrapper .card .card-header.em-kart-bas--marka .card-title,
body .page-wrapper .card .card-header.em-kart-bas--marka h5,
.card-header.em-kart-bas--marka h5,
.card-header.em-kart-bas--marka h6,
.card-header.em-kart-bas--marka .card-title {
  color: #ffffff !important; font-weight: 700; letter-spacing: .015em; }
body .card > .card-header.em-kart-bas--marka h5 i,
body .card > .card-header.em-kart-bas--marka h6 i,
body .page-wrapper .card .card-header.em-kart-bas--marka h5 i,
.card-header.em-kart-bas--marka h5 i,
.card-header.em-kart-bas--marka h6 i,
.card-header.em-kart-bas--marka .card-title i { color: #6ee7b7 !important; }
/* Koyu seritteki anahat dugmeler beyaz zeminde okunmaz; acilir. */
.card-header.em-kart-bas--marka .btn-outline-secondary,
.card-header.em-kart-bas--marka .btn-outline-danger,
.card-header.em-kart-bas--marka .btn-light {
  background: rgba(255,255,255,.94) !important; border-color: transparent !important; }

/* --- Dort KPI karti --- */
.em-pk {
  display: flex; align-items: center; gap: .8rem;
  background: var(--em-kart, #fff);
  border: 1px solid var(--em-cizgi, #e2e8f0);
  border-left: 4px solid #10b981;
  border-radius: 12px; padding: .85rem 1rem;
  box-shadow: 0 1px 3px rgba(15,23,42,.06);
  transition: box-shadow .15s ease, transform .15s ease;
}
.em-pk:hover { box-shadow: 0 6px 18px rgba(15,23,42,.10); transform: translateY(-1px); }

/* TIKLANABİLİR KART (23.09.2026, kullanıcı: "bunlar iyi olmamış daha iyi
   buton yap kpi kartı bunlar").
   Kart bir pencere açıyorsa AÇTIĞI BELLİ OLMALI. Eskiden tıklanan kart ile
   tıklanmayan kart birbirinin aynısıydı; tek fark alttaki minik "Ayrıntı"
   yazısıydı ve kimse onu görmüyordu.
   Sağ üst köşedeki ok, üzerine gelince sağa kayar; kart hafifçe kalkar ve
   sol şeridi kalınlaşır. Klavye odağı da görünür (erişilebilirlik).
   YALNIZ bu varyantı etkiler -- `em-pk` kullanan diğer bütün ekranlar
   olduğu gibi kalır. */
button.em-pk { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.em-pk--dugme { position: relative; padding-right: 2.1rem; }
.em-pk--dugme::after {
  content: "\203A";                     /* › */
  position: absolute; top: .55rem; right: .85rem;
  font-size: 1.25rem; line-height: 1;
  color: var(--em-metin-3, #8a93a3);
  transition: transform .15s ease, color .15s ease;
}
.em-pk--dugme:hover { border-left-width: 6px; }
.em-pk--dugme:hover::after { transform: translateX(3px); color: var(--em-basari, #10b981); }
.em-pk--dugme:focus-visible { outline: 2px solid var(--em-basari, #10b981); outline-offset: 2px; }
/* Sayı, bekleyen iş olduğunda dikkat çeker. Renk SABİT YAZILMAZ: sistemin
   kendi anlam belirteci kullanılır, böylece tema değişince birlikte döner. */
.em-pk__dg--uyari { color: var(--em-hata, #dc2626); }

/* ===================================================================
   SATIN ALMA · FATURALAR — İŞ ALANI VE DURUM ŞERİDİ (23.09.2026)
   Kullanıcı: "bu ekran böyle çok excel gibi duruyor, butonlar yan yana
   excel sayfası gibi ... uygulama gibi çalışan, çözüm odaklı".
   Beş eşit KPI kutusu yerine: önce YAPILACAK İŞ (tek ve baskın), sonra
   genel durum (tek şerit içinde dört küçük ölçü).
   Renkler sistemin kendi belirteçlerinden; sabit değer yazılmaz.

   ÖN EK `em-fkp-` (fatura kuyruk paneli) BİLEREK SEÇİLDİ. İlk denemede
   `em-fat-durum` yazılmıştı; dosyanın altında AYNI ADLA bir rozet sınıfı
   çıktı (display:inline-block; border-radius:99px) ve ızgarayı SESSİZCE
   ezdi -- şerit tek sütuna indi, hata da vermedi. Yeni bir `em-*` sınıfı
   açmadan önce adı bu dosyada ARA.
   =================================================================== */
/* GENİŞ PENCERE. Bootstrap'in `modal-xl`i YALNIZ 1200px üstünde devreye
   girer; altında `.modal-dialog`in 500px'ine düşer. Sekiz sütunlu bir tablo
   500px'e sığmaz: sütunlar taşar, yatay kaydırma çıkar ve yazılar kesilir
   (kullanıcı: "bu ekran çok küçük sığmıyor, yazılar sığsın").
   Burada genişlik EKRANA GÖRE verilir, kırılım noktasına göre değil. */
.modal-dialog.em-fkp-genis { max-width: min(1320px, 96vw); }
/* Başlık bloğu esnemeyince kapatma düğmesi ALT SATIRA düşüyordu.
   SEÇİCİ `.page-content` İLE BAŞLAR, çünkü bu dosyada şu genel kural var:
       .page-content [class*="-header"]:not(header) { flex-wrap: wrap !important }
   `modal-header` o kalıba takılıyor ve özgüllüğü (0,2,1) `.em-fkp-genis
   .modal-header`ınkinden (0,2,0) YÜKSEK -- iki taraf da `!important`
   olunca özgüllük kazanıyor. `.page-content` eklenince 0,3,0 olur.
   (Ölçüldü: `gap` uygulanıyordu ama `flex-wrap` uygulanmıyordu; kuralın
   kendisi geçiyor, yalnız o bildirim eziliyordu.) */
.page-content .em-fkp-genis .modal-header { flex-wrap: nowrap !important; gap: .75rem !important; }
.page-content .em-fkp-genis .modal-header > div:first-child { flex: 1 1 auto !important; min-width: 0 !important; }
.page-content .em-fkp-genis .modal-header .btn-close { flex: 0 0 auto !important; margin: 0 !important; }

/* BÖLÜM DÜĞMELERİ (eski `nav-tabs` yerine).
   Kullanıcı: "yan yana talepler teklifler yazmasın, hepsi butonlu olsun".
   Dar ekranda şerit yatay kayar; düğmeler kırpılmaz, küçülmez. */
.em-sek {
  display: flex; gap: .4rem; margin-bottom: 1rem;
  overflow-x: auto; padding-bottom: .2rem;
  scrollbar-width: thin;
}
.em-sek__d {
  display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto;
  padding: .5rem .85rem; border-radius: 10px;
  border: 1px solid var(--em-cizgi, #e2e8f0);
  background: var(--em-kart, #fff);
  color: var(--em-metin-2, #6b7280);
  font-size: .82rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.em-sek__d i { font-size: 1rem; }
.em-sek__d:hover { color: var(--em-metin, #111827); border-color: var(--em-basari, #10b981); }
.em-sek__d--aktif,
.em-sek__d--aktif:hover {
  background: var(--em-basari, #10b981); border-color: var(--em-basari, #10b981);
  color: #fff; box-shadow: 0 2px 8px rgba(16,185,129,.25);
}
.em-sek__d:focus-visible { outline: 2px solid var(--em-basari, #10b981); outline-offset: 2px; }
/* Bekleyen iş rozeti: aktif düğmede de okunur kalsın diye iki ton. */
.em-sek__rozet {
  min-width: 1.25rem; padding: 0 .35rem; border-radius: 99px;
  background: var(--em-hata, #dc2626); color: #fff;
  font-size: .7rem; font-weight: 700; line-height: 1.25rem; text-align: center;
}
.em-sek__d--aktif .em-sek__rozet { background: #fff; color: var(--em-hata, #dc2626); }

/* EŞLEŞTİRME ADIMLARI. Sıra göze çarpsın: numaralı daire + kart.
   Kimlikler değişmedi, yalnız kabuk eklendi. */
.em-fkp-adim {
  display: flex; gap: .7rem; height: 100%;
  border: 1px solid var(--em-cizgi, #e2e8f0); border-radius: 12px;
  padding: .85rem; background: var(--em-kart, #fff);
}
.em-fkp-adim__no {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--em-basari, #10b981); color: #fff;
  font-size: .82rem; font-weight: 700; line-height: 26px; text-align: center;
}
.em-fkp-adim__ic { flex: 1 1 auto; min-width: 0; }
.em-fkp-adim__et {
  display: block; font-weight: 600; font-size: .88rem; margin-bottom: .4rem;
  color: var(--em-metin, #111827);
}

.em-fkp-is {
  display: flex; align-items: center; gap: 1rem;
  background: var(--em-kart, #fff);
  border: 1px solid var(--em-cizgi, #e2e8f0);
  border-radius: 14px; padding: 1.1rem 1.25rem; margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(15,23,42,.06);
}
.em-fkp-is--var  { border-left: 5px solid var(--em-uyari, #d97706); }
.em-fkp-is--bos  { border-left: 5px solid var(--em-basari, #10b981); }
.em-fkp-is__ikon {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.em-fkp-is--var .em-fkp-is__ikon {
  background: var(--em-uyari-acik, #fffbeb); color: var(--em-uyari, #d97706);
}
.em-fkp-is--bos .em-fkp-is__ikon {
  background: var(--em-basari-acik, #ecfdf5); color: var(--em-basari, #10b981);
}
.em-fkp-is__ic     { flex: 1 1 auto; min-width: 0; }
.em-fkp-is__baslik { font-size: 1.05rem; font-weight: 600; margin: 0 0 .15rem; }
.em-fkp-is__metin  { margin: 0; font-size: .85rem; color: var(--em-metin-2, #6b7280); }
.em-fkp-is__sag    { flex: 0 0 auto; text-align: right; display: flex;
                     flex-direction: column; align-items: flex-end; gap: .45rem; }
.em-fkp-is__tutar  { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .em-fkp-is     { flex-wrap: wrap; }
  .em-fkp-is__sag { width: 100%; align-items: stretch; text-align: left; }
}

/* Sütun sayısı ölçü adedinden gelir (`--em-sa-sutun`): iki ölçülü sekme
   sayfanın yarısını boş bırakmasın, dört ölçülü sekme sıkışmasın. */
/* NEDEN AYRI KUTULAR (25.09.2026): kullanıcı dört beyaz hücreli şeridi
   "güzel bir renklendir" dedi. Şerit tek beyaz kaptı, hücreler ince
   çizgiyle ayrılıyordu; renkli zeminler bitişik dursa birbirine akardı.
   Kap artık yalnız ızgara (zeminsiz, çizgisiz), her ölçü kendi tonlu
   kutusu. Yükseklik 23.09 sadeleştirmesindeki gibi DÜŞÜK kaldı: şişman
   KPI kartlarına geri dönülmedi. */
.em-sa-durum {
  display: grid; grid-template-columns: repeat(var(--em-sa-sutun, 4), minmax(0, 1fr));
  gap: .75rem; margin-bottom: 1rem;
}
@media (max-width: 900px) { .em-sa-durum { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .em-sa-durum { grid-template-columns: minmax(0, 1fr); } }

/* Yönerge satırı: başlıktan indirilen kısa açıklama, uygulanacağı yerde. */
.em-sa-ipucu {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .8rem; color: var(--em-metin-2, #6b7280);
  background: var(--em-bilgi-acik, #ecfeff);
  border: 1px solid var(--em-cizgi, #e2e8f0);
  border-left: 3px solid var(--em-bilgi, #0891b2);
  border-radius: 10px; padding: .5rem .75rem; margin-bottom: .75rem;
}
.em-sa-ipucu i { color: var(--em-bilgi, #0891b2); font-size: 1rem; line-height: 1.35; }
/* SATIN ALMA ÖLÇÜ KUTULARI — RENK DİLİ (25.09.2026).
   Kullanıcı: "güzel bir renklendir". Görsel dil İSG ve Pazar kutularıyla
   aynı: tonlu degrade zemin, solda 4px ton çizgisi, simge, büyük kalın
   rakam. Renk anlam taşır:
     yesil   = toplam (marka yeşili)      turuncu = bekleyen iş
     mavi    = onaylı / açık / tutar      mor     = karşılanan / tamamlanan
     kirmizi = iade / red
   Turuncu ve kırmızı ölçü `--belirgin` (bekleyen > 0) iken öne çıkar,
   `--sakin` (0) iken rakam griye döner, zemin soluklaşır: "0 karar
   bekliyor" alarm gibi durmasın.

   Tonlar `--em-sa-*` değişkenleriyle verilir; koyu karşılıkları hemen
   aşağıda, html[data-tema="koyu"] altında. Tonu olmayan ölçü nötr kalır.

   NEDEN SEÇİCİ `body .page-content ...` (25.09.2026): tema katmanı sayfa
   içindeki kutuları `body .page-content .card { background: ... !important }`
   ile beyaza eziyor. Bu kutular .card DEĞİL (o kural onlara değmez), ama
   kutulardan biri <button>; genel düğme kuralları zemini/kenarı ezmesin
   diye zemin ve kenar (0,3,1) özgüllükle yazıldı. Değişken tanımları ise
   bilerek DÜŞÜK özgüllükte: tonu, ton sınıfı ezebilsin. */
.em-sa-olcu {
  --em-sa-t: var(--em-metin-2, #64748b);
  --em-sa-t-z1: #f8fafc; --em-sa-t-z2: #eef2f7;
  --em-sa-t-kenar: var(--em-cizgi, #e2e8f0);
  --em-sa-t-yazi: var(--em-metin, #111827);
  --em-sa-t-ikon: #ffffff;
  /* Etiket ve alt yazı: --em-metin-2 tonlu zeminde 3.96-4.34 ölçüldü
     (4.5 altı); bir kademe koyu gri 6+ verir. (25.09.2026) */
  --em-sa-t-soluk: #475569;
}
.em-sa-durum > .em-sa-olcu--yesil {
  --em-sa-t: #059669; --em-sa-t-z1: #ecfdf5; --em-sa-t-z2: #d1fae5;
  --em-sa-t-kenar: #a7f3d0; --em-sa-t-yazi: #047857;
}
.em-sa-durum > .em-sa-olcu--turuncu {
  --em-sa-t: #d97706; --em-sa-t-z1: #fffbeb; --em-sa-t-z2: #fef3c7;
  --em-sa-t-kenar: #fde68a; --em-sa-t-yazi: #b45309;
}
.em-sa-durum > .em-sa-olcu--mavi {
  --em-sa-t: #2563eb; --em-sa-t-z1: #eff6ff; --em-sa-t-z2: #dbeafe;
  --em-sa-t-kenar: #bfdbfe; --em-sa-t-yazi: #1d4ed8;
}
.em-sa-durum > .em-sa-olcu--mor {
  --em-sa-t: #7c3aed; --em-sa-t-z1: #f5f3ff; --em-sa-t-z2: #ede9fe;
  --em-sa-t-kenar: #ddd6fe; --em-sa-t-yazi: #6d28d9;
}
.em-sa-durum > .em-sa-olcu--kirmizi {
  --em-sa-t: #dc2626; --em-sa-t-z1: #fef2f2; --em-sa-t-z2: #fee2e2;
  --em-sa-t-kenar: #fecaca; --em-sa-t-yazi: #b91c1c;
}
/* Koyu tema: zemin koyu tonlu, rakam açık tonlu (koyu zeminde koyu renk
   yazı okunmaz); simge çipinin içi koyu lacivert. */
html[data-tema="koyu"] .em-sa-olcu {
  --em-sa-t: #9dabc0; --em-sa-t-z1: #131d2b; --em-sa-t-z2: #182436;
  --em-sa-t-kenar: #24334a; --em-sa-t-yazi: #e6edf6; --em-sa-t-ikon: #0b1220;
  --em-sa-t-soluk: var(--em-metin-2, #9dabc0);
}
html[data-tema="koyu"] .em-sa-durum > .em-sa-olcu--yesil {
  --em-sa-t: #10b981; --em-sa-t-z1: #0c241d; --em-sa-t-z2: #0f3327;
  --em-sa-t-kenar: #1d5c47; --em-sa-t-yazi: #6ee7b7;
}
html[data-tema="koyu"] .em-sa-durum > .em-sa-olcu--turuncu {
  --em-sa-t: #f59e0b; --em-sa-t-z1: #241b0d; --em-sa-t-z2: #33260f;
  --em-sa-t-kenar: #7c5510; --em-sa-t-yazi: #fcd34d;
}
html[data-tema="koyu"] .em-sa-durum > .em-sa-olcu--mavi {
  --em-sa-t: #60a5fa; --em-sa-t-z1: #0e1a33; --em-sa-t-z2: #132449;
  --em-sa-t-kenar: #1e3a8a; --em-sa-t-yazi: #93c5fd;
}
html[data-tema="koyu"] .em-sa-durum > .em-sa-olcu--mor {
  --em-sa-t: #a78bfa; --em-sa-t-z1: #1a1431; --em-sa-t-z2: #251a47;
  --em-sa-t-kenar: #4c1d95; --em-sa-t-yazi: #c4b5fd;
}
html[data-tema="koyu"] .em-sa-durum > .em-sa-olcu--kirmizi {
  --em-sa-t: #f87171; --em-sa-t-z1: #241214; --em-sa-t-z2: #35181b;
  --em-sa-t-kenar: #7f2a2a; --em-sa-t-yazi: #fca5a5;
}

body .page-content .em-sa-durum > .em-sa-olcu {
  position: relative; display: flex; align-items: center; gap: .75rem;
  width: 100%; min-width: 0; min-height: 76px; margin: 0;
  text-align: left; padding: .75rem 1rem .75rem .9rem;
  background: linear-gradient(135deg, var(--em-sa-t-z1), var(--em-sa-t-z2));
  border: 1px solid var(--em-sa-t-kenar);
  border-left: 4px solid var(--em-sa-t);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
  font: inherit; color: var(--em-metin, #111827);
}
.em-sa-olcu__ikon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; line-height: 1;
  background: var(--em-sa-t); color: var(--em-sa-t-ikon);
}
.em-sa-olcu__ic  { flex: 1 1 auto; min-width: 0; }
.em-sa-olcu__et  { font-size: .7rem; font-weight: 700; text-transform: uppercase;
                    letter-spacing: .06em; color: var(--em-sa-t-soluk); }
.em-sa-olcu__dg  { font-size: 1.5rem; font-weight: 800; line-height: 1.15;
                    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
                    color: var(--em-sa-t-yazi); }
.em-sa-olcu__alt { font-size: .75rem; line-height: 1.3; color: var(--em-sa-t-soluk); }
/* Eskiden vurgulu rakam kırmızıydı; artık kutunun kendi tonunda. */
.em-sa-olcu__dg--uyari { color: var(--em-sa-t-yazi); }

/* Sakin (bekleyen iş yok): zemin tek tonlu ve soluk, çip içi boş, rakam gri. */
body .page-content .em-sa-durum > .em-sa-olcu--sakin {
  background: var(--em-sa-t-z1); border-left-color: var(--em-sa-t-kenar);
}
/* Sakin çipin simgesi --em-sa-t değil --em-sa-t-yazi: açık turuncu zeminde
   #d97706 2.86 ölçüldü (grafik için 3 altı), koyu tonu 4.6 verir. */
.em-sa-olcu--sakin .em-sa-olcu__ikon { background: var(--em-sa-t-z2); color: var(--em-sa-t-yazi); }
.em-sa-olcu--sakin .em-sa-olcu__dg   { color: var(--em-sa-t-soluk); }
/* Belirgin (bekleyen iş var): kenar tonun kendisi, hafif ton halkası. */
body .page-content .em-sa-durum > .em-sa-olcu--belirgin {
  border-color: var(--em-sa-t); border-left-color: var(--em-sa-t);
  box-shadow: 0 0 0 1px var(--em-sa-t), 0 4px 12px rgba(15, 23, 42, .08);
}

/* Açılabilen ölçü: tıklanabildiği görünsün. */
body .page-content .em-sa-durum > .em-sa-olcu--ac {
  cursor: pointer; padding-right: 2rem;
  transition: transform .12s ease, box-shadow .12s ease;
}
body .page-content .em-sa-durum > .em-sa-olcu--ac:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--em-sa-t), 0 6px 16px rgba(15, 23, 42, .12);
}
.em-sa-olcu--ac:focus-visible { outline: 2px solid var(--em-sa-t); outline-offset: 2px; }
.em-sa-olcu__ok  { position: absolute; top: 50%; right: .6rem; transform: translateY(-50%);
                    color: var(--em-sa-t); font-size: 1.15rem; line-height: 1; opacity: .75; }
.em-sa-olcu--ac:hover .em-sa-olcu__ok { opacity: 1; }

/* SATIN ALMA TALEBİ — KALEM TABLOSU (25.09.2026, kullanıcı: "bu çarpıyı
   düzelt, sütun aralıklarını biraz daha incelt, güzelleştir").
   Çarpı boş kutu görünüyordu: .btn-sm ikonu 11.8px'e küçültüyor,
   .btn-outline-danger kenarlığı sabit soluk pembe (#fecaca), app.css
   .btn i:last-child ikonu 5.6px sağa itiyordu. Sütunlar: Poz dar, Malzeme
   kalan genişlik, Birim/Miktar dar, sil en dar. Başlık zemini ve rengi
   temanın .table > thead th kuralından gelmeye devam eder. Yalnız palet
   değişkenleri: koyu temada --em-hata / --em-hata-acik zaten yeniden tanımlı. */
.table.em-sa-kalem { table-layout: fixed; width: 100%; margin-bottom: 0; }
.table.em-sa-kalem > thead th { padding: 6px 10px !important; }
.table.em-sa-kalem > tbody > tr > td { padding: 5px 10px !important; overflow-wrap: anywhere; }
.table.em-sa-kalem .em-sa-kalem__poz    { width: 104px; }
.table.em-sa-kalem .em-sa-kalem__birim  { width: 64px; }
.table.em-sa-kalem .em-sa-kalem__miktar { width: 96px; }
.table.em-sa-kalem .em-sa-kalem__sil    { width: 44px; text-align: center; }
.table.em-sa-kalem .ta-miktar { height: 28px; padding: 2px 6px; text-align: right; }
.table.em-sa-kalem > tbody > tr.em-sa-kalem__bos > td {
  text-align: center; color: var(--em-metin-2) !important; padding: 12px 10px !important; }
.em-sa-kalem .em-sa-sil {
  width: 28px; height: 28px; padding: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  border: 1px solid var(--em-hata) !important; color: var(--em-hata) !important;
  background: var(--em-hata-acik) !important; border-radius: var(--em-r) !important;
  font-size: 1rem !important; line-height: 1; vertical-align: middle; }
.em-sa-kalem .em-sa-sil:hover { background: var(--em-hata) !important; color: #fff !important; }
.em-sa-kalem .em-sa-sil:focus-visible { outline: 2px solid var(--em-hata); outline-offset: 1px; }
.em-sa-kalem .em-sa-sil i { margin: 0 !important; font-size: 1.05rem; line-height: 1; }
/* Sil sutununda yatay dolgu YOK (25.09.2026, olculdu): 44px sutunda iki yana
   10px dolgu 24px birakiyordu, 28px dugme sag dolguya tasip 4px sağa kayik
   duruyordu. Dolgusuz sutunda dugme tam ortada; dar ekrandaki 40px de yeter. */
.table.em-sa-kalem > * > tr > .em-sa-kalem__sil { padding-left: 0 !important; padding-right: 0 !important; }
/* DAR EKRAN TABLO AGINDAN CIKIS (25.09.2026, olculdu): 900px ve altinda
   "DAR EKRAN TABLO AGI" (table.table:not(.yz) display:block + hucrede
   nowrap) bu tabloyu yakaliyordu; sabit sutunlar etkisiz kaliyor, uzun poz
   tanimi Malzeme'yi 750px'e uzatip Miktar ile carpiyi gorunur alanin disina
   itiyordu. Emsal: .em-isg tablo kurali. Tablo tablo olarak kalir, Malzeme
   metni kirilir; Miktar ve carpi hep gorunur. */
@media (max-width: 900px) {
  table.table.em-sa-kalem { display: table !important; width: 100% !important; }
  table.table.em-sa-kalem > thead > tr > th,
  table.table.em-sa-kalem > tbody > tr > td { white-space: normal !important; }
}
@media (max-width: 575.98px) {
  .table.em-sa-kalem > thead th, .table.em-sa-kalem > tbody > tr > td {
    padding-left: 6px !important; padding-right: 6px !important; }
  /* 360px telefonda olculdu: 76/50/78/40 Malzeme'ye 68px birakiyordu (satir
     300px'e uzuyordu). Sil sutunu dolgusuz oldugu icin 36px yeter. */
  .table.em-sa-kalem .em-sa-kalem__poz    { width: 72px; }
  .table.em-sa-kalem .em-sa-kalem__birim  { width: 44px; }
  .table.em-sa-kalem .em-sa-kalem__miktar { width: 66px; }
  .table.em-sa-kalem .em-sa-kalem__sil    { width: 36px; }
}

/* SATIN ALMA TEKLIFI — TICARI SARTLAR (25.09.2026). Teklif formundaki
   "Ticari Şartlar" bolum cizgisi (kart/baslik kutusu YOK), kalem tablosu
   alt toplamlari, siparis Kalemler penceresindeki sart seridi ve tutar
   altindaki nakliye uyarisi. NEDEN yalniz palet degiskeni (25.09.2026):
   koyu tema ayni degiskenleri ezdigi icin ek kural gerekmez. Siniflar tk-
   ile BASLAMAZ: tema .tk-* siniflarini taseron kartlarinda kullaniyor. */
.em-sa-bolum { display: flex; align-items: center; gap: .4rem; margin: .75rem 0 .5rem;
  padding-top: .6rem; border-top: 1px solid var(--em-cizgi, #e2e8f0);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--em-metin-2, #6b7280); }
.em-sa-bolum i { color: var(--em-bilgi, #0891b2); font-size: 1rem; }
.em-sa-toplam td { font-variant-numeric: tabular-nums; }
.em-sa-toplam .em-sa-toplam__genel td { font-weight: 700; border-top: 2px solid var(--em-cizgi, #e2e8f0); }
.em-sa-sart-serit { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: .6rem;
  padding: .5rem .75rem; border: 1px solid var(--em-cizgi, #e2e8f0); border-left: 3px solid var(--em-bilgi, #0891b2);
  border-radius: 10px; background: var(--em-bilgi-acik, #ecfeff); font-size: .8rem; color: var(--em-metin-2, #6b7280); text-align: left; }
.em-sa-uyari-metin { font-size: .72rem; color: var(--em-rozet-uyari, #b45309); }
/* TEKLIF KARSILASTIRMA PENCERESI GENIS (25.09.2026). NEDEN: yukaridaki
   .swal2-popup kurali her Swal'i 31rem'e kilitliyor; Talepler > "Teklifler (n)"
   penceresindeki 9 sutunlu tabloda Sec / Siparis Olustur dugmeleri ve
   "En uygun" rozeti gorunur alanin disinda kaliyordu (olculdu: kutu 496px,
   tablo 1182px). Yalniz em-sa-swal-genis sinifli pencere genisler; diger
   Swal'lar ayni kalir, dar ekranda 100vw - 2rem siniri korunur. Renk yok,
   acik/koyu tema ayni. */
/* 26.09.2026: 66rem (1056px) tabloya (1182px) yetmiyordu; son sutun
   ("Karsilastirma" + dugmeler) yatay kaydirmada kesik kaliyordu (canli
   gosterimde goruldu). Genislik de verilir: Swal'in satir ici width'i
   yalniz max-width ile buyumez. */
.swal2-popup.em-sa-swal-genis { width: min(78rem, calc(100vw - 2rem)) !important;
  max-width: min(78rem, calc(100vw - 2rem)) !important; }
/* Uzun tedarikci unvani tek satirda tabloyu 1339px'e itiyordu. YALNIZ
   Firma sutunu (2.) ve sart ozeti satiri (colspan) sozcuk sinirindan sarar;
   diger hucreler tek satir kalir (hepsini sardirinca "Duru-m", "Seçi-di"
   diye harf ortasindan boluyordu -- olculdu). */
.swal2-popup.em-sa-swal-genis table td,
.swal2-popup.em-sa-swal-genis table th { white-space: nowrap !important; }
.swal2-popup.em-sa-swal-genis table tr > td:nth-child(2),
.swal2-popup.em-sa-swal-genis table tr > th:nth-child(2),
.swal2-popup.em-sa-swal-genis table td[colspan] {
  white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; }
.swal2-popup.em-sa-swal-genis table tr > td:nth-child(2) { min-width: 11rem; }
.swal2-popup.em-sa-swal-genis .swal2-html-container { max-height: min(70vh, 36rem); }

/* GÜVENLİK GİRİŞ-ÇIKIŞ: ÖZET KARTLARI TEK SATIR (15.09.2026, kullanıcı:
   "altındaki kutuları yan yana koy", ardından "kutu düzenini sadece dediğim
   sayfada uygula"). Kartlar col-6 col-md-4 col-xl taşıyor; bu Bootstrap
   dosyasında .col-xl kuralı .col-md-4'ten önce geldiği için geniş ekranda da
   üçte bir genişlik kazanıyor ve 4 kart 3+1 diziliyordu (ölçüldü: 1707 px
   pencerede her kart 554 px). Aynı durum kartlar() yardımcısını kullanan başka
   ekranlarda da var, ama kullanıcı yalnız bu sayfayı istedi: kural yalnızca
   em-pk-kartlar--tek-satir işaretli satıra uygulanır (lib/yeni-ekranlar.js). */
@media (min-width: 1200px) {
  .em-pk-kartlar--tek-satir > .col-xl { flex: 1 0 0% !important; width: auto !important; }
}
.em-pk__ikon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; font-size: 1.2rem;
  background: linear-gradient(145deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #a7f3d0; color: #0b5345;
}
.em-pk__ic { min-width: 0; flex: 1 1 auto; }
.em-pk__et {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--em-metin-2, #64748b); font-weight: 700;
}
/* DEGER SESSIZCE KESILMEZ. Olculdu 21.09.2026: dar ekranda kart
   "ALINAN ÇEK 126.633.7" yaziyordu -- ne ucnokta ne kaydirma cubugu vardi
   (overflow-x:auto + scrollbar-width:none), 126 milyon 126 bin sanilabiliyordu.
   Artik: rakam ortadan BOLUNMEZ, sigmazsa ucnokta cikar ve tam degeri
   baslik (title) olarak durur; dar ekranda punto da kuculur. */
.em-pk__dg {
  font-size: clamp(.86rem, 1.25vw, 1.25rem); font-weight: 800; line-height: 1.2;
  color: var(--em-metin, #0f172a); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -.015em;
}
/* Telefonda KPI kartlari tam genislige gecer: iki sutunda para rakami
   sigmiyor, ucnokta ile bilgi kayboluyordu. */
@media (max-width: 575.98px) {
  .em-pk-kartlar > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}
.em-pk__dg::-webkit-scrollbar { display: none; }
/* Alt satir: kartin ne olctugunu soyler -- sabit etiket degil, aciklama. */
.em-pk__alt {
  font-size: .66rem; color: var(--em-metin-3, #94a3b8); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Her kartin kendi tonu: hepsi yesil ailesinden, biri otekini bastirmaz. */
.em-pk--ilerleme { border-left-color: #10b981; }
.em-pk--kalan    { border-left-color: #0e9f6e; }
.em-pk--montaj   { border-left-color: #34d399; }
.em-pk--tenzilat { border-left-color: #059669; }

/* --- Depo hareketleri: 12 sutun --- */
.em-dh-yon {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px; border-radius: 99px; font-size: 10.5px; font-weight: 700;
  white-space: nowrap;
}
.em-dh-yon--giris { background: #ecfdf5; color: #0b5345; }
.em-dh-yon--cikis { background: #fef3c7; color: #92400e; }
.em-dh-poz { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; }
.em-dh-sayi { font-variant-numeric: tabular-nums; white-space: nowrap; }
.em-dh-brm { font-size: 10px; color: #98a1b0; margin-left: 3px; }
.em-dh-alarm { color: #b45309; margin-left: 4px; }
.em-dh-taraf {
  display: inline-block; padding: 1px 7px; border-radius: 99px;
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.em-dh-taraf--isveren   { background: #eef2ff; color: #3949ab; }
.em-dh-taraf--muteahhit { background: #ecfdf5; color: #12705a; }
.em-dh-acik { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sutun arama satiri: basligin hemen altinda, eski sistemdeki gibi. */
.em-dh-ara th { padding: 3px 4px !important; background: #f8fafc; }
.em-dh-ara input {
  width: 100%; min-width: 0; border: 1px solid #e2e8f0; border-radius: 5px;
  padding: 2px 6px; font-size: 11px; font-weight: 400; background: #fff;
}
.em-dh-ara input:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,.14); }
/* Proje Ozeti "diger bilgileri goster" dugmesi */
.em-ozet-dgm {
  border: 1px solid #a7f3d0; background: #fff; color: #0b5345;
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  cursor: pointer; font-size: 1rem; line-height: 1; padding: 0;
  transition: background .15s, color .15s;
}
.em-ozet-dgm:hover { background: #ecfdf5; }
.em-ozet-dgm:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; }

/* --- PROJE / KESIF OZETI: cerceveli kutular, iki sutun --- */
.em-po-izgara {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem;
}
.em-po-kutu {
  border: 1px solid var(--em-cizgi, #e2e8f0); border-radius: 9px;
  padding: .55rem .75rem; background: var(--em-kart, #fff); min-width: 0;
}
.em-po-kutu--tam { grid-column: 1 / -1; display: flex; align-items: center;
  justify-content: space-between; gap: .75rem; }
.em-po-et {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--em-metin-3, #94a3b8); font-weight: 700; margin-bottom: 2px;
}
.em-po-dg {
  font-size: .88rem; font-weight: 600; color: var(--em-metin, #0f172a);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.em-po-dg--para { font-variant-numeric: tabular-nums; }
/* Ac/kapa: eski sistemde metin baglantisi. Bizde marka yesili. */
.em-po-ac {
  display: inline-flex; align-items: center; gap: .4rem;
  background: none; border: 0; padding: .7rem 0 .5rem;
  color: #0e9f6e; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.em-po-ac:hover { color: #0b5345; text-decoration: underline; }
.em-po-ac:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; border-radius: 4px; }
.em-po-ac__im {
  display: inline-grid; place-items: center; width: 15px; height: 15px;
  border: 1px solid currentColor; border-radius: 4px; font-size: 11px; line-height: 1;
}
@media (max-width: 575.98px) { .em-po-izgara { grid-template-columns: minmax(0, 1fr); } }

/* --- Baslik durum rozeti (buyuk blok yerine) --- */
.em-pd-rozet {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 99px;
  font-size: .76rem; font-weight: 700; white-space: nowrap;
  background: #ecfdf5; color: #0b5345; border: 1px solid #a7f3d0;
}
.em-pd-rozet i { font-size: .9rem; }
.em-pd-rozet--warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.em-pd-rozet--danger  { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.em-pd-rozet--info    { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.em-pd-rozet--secondary { background: #f8fafc; color: #475569; border-color: #e2e8f0; }

/* --- Durum penceresindeki kabul bilgileri --- */
.em-pd-kabul { margin: .5rem 0 .25rem; }
.em-pd-kabul > summary {
  cursor: pointer; font-size: .82rem; font-weight: 600; color: #0e9f6e;
  padding: .35rem 0; list-style: none;
}
.em-pd-kabul > summary::-webkit-details-marker { display: none; }
.em-pd-kabul > summary::before { content: '+ '; font-weight: 700; }
.em-pd-kabul[open] > summary::before { content: '– '; }
.em-pd-izgara { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem; }
.em-pd-izgara label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: .7rem; font-weight: 600; color: var(--em-metin-2, #64748b);
}
.em-pd-izgara input {
  border: 1px solid var(--em-cizgi, #e2e8f0); border-radius: 7px;
  padding: .35rem .55rem; font-size: .82rem; font-weight: 500;
}
.em-pd-izgara input:focus { outline: none; border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,.14); }
@media (max-width: 575.98px) { .em-pd-izgara { grid-template-columns: minmax(0,1fr); } }

/* ---- BILGI KUTULARI (Sozlesme / Grup / Sure / Yer Teslim / Bitis) ---- */
.em-proje-bilgi { display: flex; flex-wrap: wrap; gap: .6rem; }
.em-proje-bilgi__kutu {
  flex: 1 1 130px; min-width: 130px;
  border: 1px solid var(--em-cizgi, #e2e8f0);
  border-radius: 9px;
  padding: .55rem .75rem;
  background: var(--em-yuzey-2, #f9fafb);
}
.em-proje-bilgi__et {
  font-size: .64rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--em-metin-2, #6b7280); font-weight: 700; margin-bottom: .1rem;
}
.em-proje-bilgi__dg {
  font-size: .92rem; font-weight: 700; color: var(--em-metin, #111827);
  overflow-wrap: anywhere;
}

/* ==========================================================================
   SATIR ICI RENK TUZAGINDAN KURTARILAN OGELER
   --------------------------------------------------------------------------
   Boru hatti (lib/sayfa-veri.js) hem gomulu <style> hem de SATIR ICI
   style="..." icindeki zemin/renk/golge bildirimlerini tema degerine cevirir.
   KOYU ZEMIN + ACIK METIN yazan her oge, zemini silinince ACIK ZEMIN
   UZERINDE ACIK METIN olup GORUNMEZ hale geliyordu.
   Tarama (2026-09-01) sistemde 8 yuksek riskli oge buldu; renkleri buraya
   alindi. Yeni ekran yazarken renk SATIR ICI VERILMEZ, buraya yazilir.
   ========================================================================== */

/* 404 / hata sayfalarindaki "Ana Sayfaya Dön" dugmesi (6 sayfada ayni) */
.em-hata-dugme {
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(15,23,42,.3) !important;
}
.em-hata-dugme:hover { color: #fff !important; filter: brightness(1.15); }

/* Duyuru basligi (koyu gradyan uzerine beyaz metin) */
.em-duyuru-hero {
  background: linear-gradient(135deg, #0f1f38 0%, #234d70 62%, #438b96 100%) !important;
  color: #fff !important;
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(15,31,56,.25) !important;
}
.em-duyuru-hero * { color: inherit; }

/* Arac takip ekranindaki eylem dugmeleri (yesil zemin + koyu metin) */
.em-arac-dugme {
  background: #10b981 !important;
  color: #052e21 !important;
  font-weight: 700;
  border: none !important;
}
.em-arac-dugme:hover { background: #059669 !important; color: #fff !important; }

/* ==========================================================================
   TERMIN UYARISI  --  .em-termin-gecti / .em-termin-yakin
   --------------------------------------------------------------------------
   Kullanici istegi 2026-09-01: "termin tarihi yaklasinca ve gecince yanip
   sonen uyarilar versin."

   IKI SEVIYE, IKI RITIM:
     GECTI    kirmizi, 1,1 sn -- acil; goz kacirmasin
     YAKLASTI amber,   2,2 sn -- hatirlatma; sahayi panige sokmasin
   Yanip sonme YALNIZ ROZETTE; satirin tamami yanip sonerse tablo okunmaz
   hale gelir ve uzun listede rahatsiz eder.

   HAREKETI AZALT: isletim sisteminde animasyon kapaliysa yanip sonme durur,
   renk ve metin kalir -- uyari kaybolmaz, yalnizca sabitlenir.
   ========================================================================== */
@keyframes em-termin-carp {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
.em-termin-rozet {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .12rem .45rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap;
}
/* RENK SEMASI (kullanici karari 2026-09-02):
     KIRMIZI = KRITIK bulgu  -> satirin tamami
     SARI    = GECIKME       -> YALNIZ TARIH UZERINDE
   Renkler Excel ciktisiyla BIREBIR AYNI (bkz. lib/xlsx-yaz.js): ekranda
   kirmizi gorunen satiri kullanici Excel'de de kirmizi gorur. Iki yerde
   iki ayri kirmizi olsa hangisinin ne demek oldugu ogrenilemezdi.
   KIRMIZI ARTIK "GECIKME" DEMEK DEGIL -- gecikme sariya tasindi, kirmizi
   kritikligi anlatiyor. */
.em-termin-gecti {
  background: #ffeb9c !important; color: #9c6500 !important;
  animation: em-termin-carp 1.1s ease-in-out infinite;
}
.em-termin-yakin {
  background: #fff7d6 !important; color: #9c6500 !important;
  border: 1px solid #e9c766;
  animation: em-termin-carp 2.2s ease-in-out infinite;
}
/* KRITIK BULGU: satirin tamami kirmizi. Yanip SONMEZ -- kritiklik degismez
   bir niteliktir, termin gibi "yaklasan" bir sey degil; yanip sonerse uzun
   listede okumayi bozar. */
.em-satir-kritik { background: #ffc7ce !important; }
/* Ozgulluk BILEREK yuksek: tablo govdesindeki genel hucre rengi kurali
   (.table td) !important tasiyor ve tek sinifli secici ona yenilir --
   olculdu: satir kirmizi oluyor ama yazi gri kaliyordu. Ic metinler
   (small.text-muted dahil) de ayni koyu kirmiziya cekilir, yoksa aciklama
   satiri pembe zeminde soluk kalir. */
tr.em-satir-kritik > td,
tr.em-satir-kritik > td small,
tr.em-satir-kritik > td div,
tr.em-satir-kritik > td a { color: #9c0006 !important; }

@media (prefers-reduced-motion: reduce) {
  .em-termin-gecti, .em-termin-yakin { animation: none; }
}
/* Baskida yanip sonme anlamsiz; renk kalir. */
@media print {
  .em-termin-gecti, .em-termin-yakin { animation: none; }
}

/* ==========================================================================
   SECIM DUGMESI  --  .em-secim / .em-secim.secili
   --------------------------------------------------------------------------
   Kullanici istegi 2026-09-02: saha denetiminde "Aksiyonlu / Aksiyonsuz"
   secimi.

   NEDEN BOOTSTRAP SINIFI TAKAS EDILMIYOR: secili duruma gecerken
   btn-outline-primary -> btn-primary takasi denendi ve secili dugme BOS BEYAZ
   KUTU olarak cikti (olculdu). Iki sinifin kurallari da !important tasiyor ve
   kaynak sirasina gore biri digerini yiyor. Secim durumu KENDI sinifiyla
   tasinir; renk temada, tek yerde.
   ========================================================================== */
.em-secim {
  background: var(--em-yuzey) !important;
  color: var(--em-metin-2) !important;
  border: 1px solid var(--em-cizgi-koyu) !important;
  font-weight: 600;
}
.em-secim:hover {
  background: var(--em-yuzey-2) !important;
  color: var(--em-metin) !important;
}
.em-secim.secili,
.em-secim.secili:hover {
  background: var(--em-ana) !important;
  border-color: var(--em-ana) !important;
  color: #fff !important;
}

/* Uzun gerekce/aciklama hucresi: satir ici style ile verilemez (boru hatti
   ezer, bkz. lib/sayfa-veri.js). Metin sarar, tablo kaymaz. */
.em-gerekce {
  max-width: 320px; min-width: 180px;
  white-space: normal; overflow-wrap: anywhere;
}

/* ==========================================================================
   PAZAR YERI (Marketplace)  --  kullanici istegi 2026-09-02
   --------------------------------------------------------------------------
   "Ekranda sag altta marketplace gibi bir isimle gelsin, VIP butonlu."
   Renkler TEMADAN gelir; satir ici style KULLANILMAZ (sayfa boru hatti
   onlari eziyor -- bkz. lib/sayfa-veri.js).
   ========================================================================== */
.em-pazar-rozet {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem; border-radius: 999px;
  background: var(--em-ana) !important; color: #fff !important;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em;
}


/* --------------------------------------------------------------------------
   SAG ALT YUZEN SEPET DUGMESI
   --------------------------------------------------------------------------
   Kullanici karari 2026-09-03: "Sadece bu buton ErpMerkez'e ozel olacak,
   butonda alisveris sepeti gibi bir tema olsun."

   Iki isi birden yapar:
     · ErpMerkez VIP dili -- Excel dugmesindeki AYNI donen yesil kusak
       (--em-vip-kusak / em-vip-akim). Kullanici bu hareketi zaten
       "ErpMerkez'in kendi ozelligi" diye taniyor; pazar da ayni aileden.
     · Alisveris sepeti -- ikon sepet, uzerinde satir sayaci. Dugme yalnizca
       kapi degil, sepette ne oldugunu da soyler.

   Sol altta iletisim paneli duruyor; pazar SAGA alinir ki cakismasin.
   -------------------------------------------------------------------------- */
.em-pazar-dugme {
  position: fixed; right: 18px; bottom: 18px; z-index: 1035;
  display: inline-flex; align-items: center;
  padding: 2px; border-radius: 999px;
  background: var(--em-vip-kusak, conic-gradient(from var(--em-vip-aci),
    rgba(16,185,129,0) 0deg, rgba(16,185,129,0) 235deg,
    #059669 275deg, #bef264 302deg, #ffffff 310deg, #bef264 318deg,
    #059669 345deg, rgba(16,185,129,0) 360deg));
  animation: em-vip-akim 4s linear infinite;
  border: none; text-decoration: none;
  filter: drop-shadow(0 6px 16px rgba(5,150,105,.32));
  transition: transform .14s ease, filter .14s ease;
}
.em-pazar-dugme:hover { transform: translateY(-2px);
  filter: drop-shadow(0 10px 22px rgba(5,150,105,.42)); }

/* Ic yuzey: sepet dugmesi DOLU yesildir -- ekranin geri kalani beyaz oldugu
   icin bos bir hap kaybolur, dolu olan koseyi tutar. */
.em-pazar-dugme > .em-pazar-ic {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--em-ana-koyu) !important; color: #fff !important;
  border-radius: 999px; padding: .55rem .9rem;
  font-weight: 700; font-size: .84rem; white-space: nowrap;
}
.em-pazar-dugme .em-pazar-sepet-ikon { font-size: 1.15rem; line-height: 1; }
.em-pazar-dugme .em-pazar-vip {
  background: var(--em-yuzey) !important; color: var(--em-ana-koyu) !important;
  border-radius: 4px; padding: .05rem .35rem;
  font-size: .58rem; font-weight: 800; letter-spacing: .08em;
}

/* SEPET SAYACI: bos sepette hic basilmaz (JS gizler), doluyken kirmizi. */
.em-pazar-sayac {
  position: absolute; top: -6px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; border: 2px solid var(--em-yuzey);
  background: #dc2626 !important; color: #fff !important;
  font-size: .62rem; font-weight: 800; line-height: 16px; text-align: center;
}
@media print { .em-pazar-dugme { display: none !important; } }
@media (max-width: 640px) {
  /* Dar ekranda yalnizca ikon kalir; yazi yer kaplamasin. */
  .em-pazar-dugme .em-pazar-yazi, .em-pazar-dugme .em-pazar-vip { display: none; }
  .em-pazar-dugme > .em-pazar-ic { padding: .6rem; }
}

/* ==========================================================================
   PAZAR YERI  --  ALICI EKRANLARI  (/market)
   ========================================================================== */
.em-pz-ara-kutu {
  display: flex; gap: .5rem; align-items: center;
  background: var(--em-yuzey); border: 1px solid var(--em-ana-kenar);
  border-radius: 10px; padding: .45rem .7rem;
}
.em-pz-ara-kutu input {
  border: none; outline: none; flex: 1; font-size: .95rem; background: transparent;
}
.em-pz-ara-kutu i { color: var(--em-ana-koyu); font-size: 1.2rem; }

.em-pz-izgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.em-pz-kart {
  background: var(--em-yuzey); border: 1px solid #e5e7eb; border-radius: 12px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.em-pz-kart:hover {
  border-color: var(--em-ana-kenar); box-shadow: 0 6px 18px rgba(16,185,129,.12);
}
.em-pz-gorsel {
  height: 150px; background: var(--em-gri-50); display: flex;
  align-items: center; justify-content: center; overflow: hidden;
  border-bottom: 1px solid var(--em-zemin);
}
.em-pz-gorsel img { width: 100%; height: 100%; object-fit: contain; }
.em-pz-gorsel i { font-size: 2.4rem; color: #cbd5e1; }
.em-pz-govde { padding: .7rem .8rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.em-pz-poz {
  align-self: flex-start; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  background: var(--em-ana-acik) !important; color: var(--em-ana-koyu) !important;
  border: 1px solid var(--em-ana-kenar); border-radius: 4px; padding: .1rem .35rem;
}
.em-pz-ad { font-weight: 700; font-size: .88rem; line-height: 1.3; }
.em-pz-satici { font-size: .74rem; color: var(--em-gri-5) !important; }
.em-pz-fiyat { font-size: 1.05rem; font-weight: 800; color: var(--em-ana-koyu) !important; }
.em-pz-kdv { font-size: .68rem; color: #94a3b8 !important; font-weight: 600; }
.em-pz-cok-satici {
  font-size: .68rem; font-weight: 700; cursor: pointer;
  background: #eff6ff !important; color: #1d4ed8 !important;
  border: 1px solid #bfdbfe; border-radius: 4px; padding: .1rem .35rem;
  align-self: flex-start;
}
.em-pz-alt { display: flex; gap: .35rem; padding: .6rem .8rem; border-top: 1px solid var(--em-zemin); }
.em-pz-alt input { width: 70px; }
.em-pz-bos {
  text-align: center; padding: 3rem 1rem; color: #94a3b8 !important;
}
.em-pz-bos i { font-size: 3rem; display: block; margin-bottom: .5rem; color: #cbd5e1 !important; }

.em-pz-ozet {
  background: var(--em-ana-acik) !important; border: 1px solid var(--em-ana-kenar);
  border-radius: 10px; padding: .9rem 1rem;
}
.em-pz-ozet-satir { display: flex; justify-content: space-between; font-size: .88rem; padding: .18rem 0; }
.em-pz-ozet-genel {
  display: flex; justify-content: space-between; font-size: 1.05rem; font-weight: 800;
  border-top: 1px dashed var(--em-ana-kenar); margin-top: .4rem; padding-top: .5rem;
  color: var(--em-ana-koyu) !important;
}
.em-pz-kucuk-gorsel {
  width: 46px; height: 46px; object-fit: contain; background: var(--em-gri-50);
  border: 1px solid var(--em-zemin); border-radius: 6px;
}
.em-pz-talep-kart {
  background: var(--em-yuzey); border: 1px solid #e5e7eb; border-radius: 10px;
  padding: .8rem .9rem; margin-bottom: .7rem;
}
.em-pz-teklif-satir {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--em-ana-acik) !important; border: 1px solid var(--em-ana-kenar);
  border-radius: 8px; padding: .45rem .7rem; margin-top: .4rem; font-size: .85rem;
}
.em-pz-teklif-en-iyi { border-color: var(--em-ana) !important; border-width: 2px; }
.em-pz-no {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .74rem;
  font-weight: 700; color: var(--em-gri-6) !important;
}

/* Vitrin/sepet bildirimi -- tarayici alert()'i yerine. alert kullanicinin
   sayfayi kilitliyor ve mobilde cirkin duruyor; kural ihlallerini (asgari
   siparis, yayindan kalkmis urun) bunun icinde soyluyoruz. */
.em-pz-uyari {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  z-index: 1040; max-width: 460px;
  padding: .6rem 1rem; border-radius: 10px;
  font-size: .86rem; font-weight: 600;
  box-shadow: 0 8px 24px rgba(15,23,42,.18);
  background: var(--em-ana-koyu) !important; color: #fff !important;
}
.em-pz-uyari.em-pz-kotu { background: #dc2626 !important; }

/* --------------------------------------------------------------------------
   PAZAR: TUR SEKMELERI (Tümü / Ürünler / Hizmetler)
   -------------------------------------------------------------------------- */
.em-pz-sekmeler { display: flex; gap: .4rem; flex-wrap: wrap; }
.em-pz-sekme {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .8rem; border-radius: 999px; text-decoration: none;
  border: 1px solid #e5e7eb;
  background: var(--em-yuzey) !important; color: var(--em-gri-6) !important;
  font-size: .84rem; font-weight: 600;
}
.em-pz-sekme:hover { border-color: var(--em-ana-kenar); color: var(--em-ana-koyu) !important; }
.em-pz-sekme.secili {
  background: var(--em-ana-koyu) !important; color: #fff !important;
  border-color: var(--em-ana-koyu);
}
.em-pz-sekme-say {
  font-size: .7rem; font-weight: 800; border-radius: 999px; padding: .05rem .4rem;
  background: var(--em-zemin) !important; color: var(--em-gri-6) !important;
}
.em-pz-sekme.secili .em-pz-sekme-say { background: rgba(255,255,255,.25) !important; color: #fff !important; }

/* HIZMET ILANI: poz kodu yerine kategori etiketi (mavi, urunden ayrissin) */
.em-pz-hizmet-etiket {
  display: inline-flex; align-items: center; gap: .25rem;
  align-self: flex-start; font-size: .68rem; font-weight: 700;
  background: #eff6ff !important; color: #1d4ed8 !important;
  border: 1px solid #bfdbfe; border-radius: 4px; padding: .1rem .35rem;
}
.em-pz-kart-hizmet .em-pz-gorsel { background: var(--em-gri-50); }
.em-pz-kart-hizmet .em-pz-gorsel i { color: #93c5fd; }
.em-pz-aciklama {
  font-size: .74rem; color: var(--em-gri-5) !important; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --------------------------------------------------------------------------
   PAZAR: GECMIS ALIM PANELI  (karsilastirma penceresinin altinda)
   --------------------------------------------------------------------------
   "Bu pozu daha once kaca almistik?" -- satin alma yapan kisinin her
   siparisten once sordugu soru. Karsilastirma bugunun tekliflerini gosterir;
   bu panel gecmisi koyar. Ikisi YAN YANA degil ALT ALTA: once bugunku
   secenekler, sonra "peki biz ne odemistik". Okuma sirasi karar sirasidir.
   -------------------------------------------------------------------------- */
.em-pz-gecmis {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px dashed var(--em-cizgi, #e5e7eb);
}
.em-pz-gecmis__bas {
  font-size: .82rem; font-weight: 700; color: var(--em-metin, #111827);
  margin-bottom: 10px; display: flex; align-items: center;
  flex-wrap: wrap; gap: 8px;
}
.em-pz-gecmis__bos {
  font-size: .8rem; color: var(--em-metin-2, #6b7280);
  background: var(--em-gri-50, #f9fafb); border-radius: 6px; padding: 10px 12px;
}
/* Ozet kutulari: dort sayi, esit genislikte, dar ekranda alt alta. */
.em-pz-gecmis__ozet {
  display: grid; gap: 1px; background: var(--em-cizgi, #e5e7eb);
  border: 1px solid var(--em-cizgi, #e5e7eb); border-radius: 8px;
  overflow: hidden; margin-bottom: 12px;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
.em-pz-gecmis__ozet > div {
  background: #fff; padding: 9px 11px; display: flex; flex-direction: column; gap: 1px;
}
.em-pz-gecmis__ozet span {
  font-size: .64rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--em-metin-2, #6b7280);
}
.em-pz-gecmis__ozet b {
  font-size: .98rem; font-weight: 800; color: var(--em-ana-koyu, #059669);
  font-variant-numeric: tabular-nums;
}
.em-pz-gecmis__ozet small { font-size: .66rem; color: var(--em-metin-2, #6b7280); }
/* FARK ROZETI: bugunku en iyi teklif, son odenen fiyata gore.
   Yesil = ucuzlamis (iyi haber), kirmizi = pahalanmis. */
.em-pz-fark {
  font-size: .68rem; font-weight: 700; border-radius: 4px; padding: .12rem .4rem;
  font-variant-numeric: tabular-nums;
}
.em-pz-fark--iyi  { background: var(--em-basari-acik, #ecfdf5); color: var(--em-ana-koyu, #059669); }
.em-pz-fark--kotu { background: #fef2f2; color: #b91c1c; }
.em-pz-gecmis__tablo { font-size: .76rem; }
.em-pz-gecmis__tablo th {
  font-size: .64rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--em-metin-2, #6b7280); font-weight: 600;
}
/* Iptal edilen alim SILINMEZ, SOLUR: "denedik, olmadi" da bilgidir. */
.em-pz-iptalli td { opacity: .5; text-decoration: line-through; }
.em-pz-iptalli td:last-child { text-decoration: none; }

/* --------------------------------------------------------------------------
   PAZAR: SEPET CEKMECESI  (yuzen dugmeden acilir)
   -------------------------------------------------------------------------- */
.em-pz-perde {
  position: fixed; inset: 0; z-index: 1040;
  background: rgba(15,23,42,.35);
}
.em-pz-cekmece {
  position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 92vw;
  z-index: 1045; background: var(--em-yuzey) !important;
  border-left: 1px solid #e5e7eb;
  box-shadow: -12px 0 32px rgba(15,23,42,.12);
  display: flex; flex-direction: column;
  transform: translateX(102%); transition: transform .22s ease;
}
.em-pz-cekmece.acik { transform: translateX(0); }
.em-pz-cekmece-bas {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1rem; border-bottom: 1px solid var(--em-zemin);
  font-weight: 800; font-size: .95rem; color: var(--em-ana-koyu) !important;
}
.em-pz-cekmece-govde { flex: 1; overflow-y: auto; padding: .5rem; }
.em-pz-cekmece-dip { border-top: 1px solid var(--em-zemin); padding: .8rem 1rem; }
.em-pz-cekmece-satir {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .55rem; border-bottom: 1px solid var(--em-gri-50);
}
.em-pz-cekmece-bilgi { flex: 1; min-width: 0; }
.em-pz-cekmece-ad { font-size: .84rem; font-weight: 700; line-height: 1.25; }
.em-pz-cekmece-alt { font-size: .72rem; color: var(--em-gri-5) !important; }
.em-pz-cekmece-sag { text-align: right; white-space: nowrap; }
.em-pz-cekmece-tutar { font-size: .86rem; font-weight: 800; color: var(--em-ana-koyu) !important; }
.em-pz-cekmece-bos { text-align: center; padding: 3rem 1rem; color: #94a3b8 !important; }
.em-pz-cekmece-bos i { font-size: 2.6rem; display: block; margin-bottom: .5rem; color: #cbd5e1 !important; }
@media print { .em-pz-cekmece, .em-pz-perde { display: none !important; } }

/* --------------------------------------------------------------------------
   PAZAR: ODEME KOSULU SECIMI
   -------------------------------------------------------------------------- */
.em-pz-odeme { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.em-pz-odeme-secenek {
  display: flex; align-items: center; gap: .35rem; cursor: pointer;
  border: 1px solid #e5e7eb; border-radius: 8px; padding: .4rem .5rem;
  font-size: .78rem; font-weight: 600;
  background: var(--em-yuzey) !important; color: var(--em-gri-6) !important;
}
.em-pz-odeme-secenek:hover { border-color: var(--em-ana-kenar); }
.em-pz-odeme-secenek.secili {
  border-color: var(--em-ana) !important; border-width: 2px;
  background: var(--em-ana-acik) !important; color: var(--em-ana-koyu) !important;
}
.em-pz-vade { display: flex; gap: .3rem; flex-wrap: wrap; }
.em-pz-vade-dugme {
  border: 1px solid #e5e7eb; border-radius: 8px; padding: .3rem .65rem;
  font-size: .8rem; font-weight: 700; cursor: pointer;
  background: var(--em-yuzey) !important; color: var(--em-gri-6) !important;
}
.em-pz-vade-dugme.secili {
  border-color: var(--em-ana) !important; border-width: 2px;
  background: var(--em-ana-acik) !important; color: var(--em-ana-koyu) !important;
}
.em-pz-odeme-rozet {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .7rem; font-weight: 700; border-radius: 4px; padding: .1rem .4rem;
  background: #fef3c7 !important; color: #92400e !important; border: 1px solid #fde68a;
}

/* --------------------------------------------------------------------------
   PAZAR: TEKLIF DURUMLARI VE SIPARIS SERIDI
   -------------------------------------------------------------------------- */
.em-pz-teklif-secili {
  border-color: #2563eb !important; border-width: 2px;
  background: #eff6ff !important;
}
.em-pz-teklif-elendi { opacity: .55; }
.em-pz-siparis-seridi {
  margin-top: .5rem; padding: .45rem .7rem; border-radius: 8px;
  font-size: .82rem; font-weight: 600;
  background: #eff6ff !important; color: #1d4ed8 !important;
  border: 1px solid #bfdbfe;
}

/* PAZAR: KATEGORI SERIDI VE KART ETIKETLERI ------------------------------- */
.em-pz-kat-seridi {
  display: flex; gap: .3rem; flex-wrap: wrap;
  padding-bottom: .2rem;
}
.em-pz-kat {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .6rem; border-radius: 6px; text-decoration: none;
  border: 1px solid #e5e7eb; font-size: .76rem; font-weight: 600;
  background: var(--em-yuzey) !important; color: var(--em-gri-5) !important;
}
.em-pz-kat:hover { border-color: var(--em-ana-kenar); color: var(--em-ana-koyu) !important; }
.em-pz-kat.secili {
  background: var(--em-ana-acik) !important; color: var(--em-ana-koyu) !important;
  border-color: var(--em-ana) !important;
}
.em-pz-kat-say { font-size: .68rem; opacity: .75; }
.em-pz-etiketler { display: flex; gap: .25rem; flex-wrap: wrap; align-items: center; }
.em-pz-kat-etiket {
  font-size: .66rem; font-weight: 700; border-radius: 4px; padding: .1rem .35rem;
  background: var(--em-zemin) !important; color: var(--em-gri-6) !important; border: 1px solid var(--em-cizgi);
}

/* PAZAR: KATEGORI SECICI (acilir menu) --------------------------------- */
/* Kullanici 2026-09-03: "kategori ekrani acilir olsun, su an cok karmasik
   olmus". Onceki rozet seridi 16+8 kategoriyle iki satiri doldurup ekranin
   yarisini yiyordu. */
.em-pz-suzgec {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: var(--em-yuzey) !important; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: .5rem .7rem;
}
.em-pz-kat-sec { width: auto; min-width: 190px; max-width: 320px; }
.em-pz-kat-temizle {
  display: inline-flex; align-items: center; gap: .25rem; text-decoration: none;
  font-size: .76rem; font-weight: 600; border-radius: 6px; padding: .25rem .5rem;
  background: var(--em-ana-acik) !important; color: var(--em-ana-koyu) !important;
  border: 1px solid var(--em-ana-kenar);
}
.em-pz-kat-temizle:hover { color: var(--em-ana-koyu) !important; border-color: var(--em-ana) !important; }
/* Alt tur etiketi (Forklift, Mobil vinc...) -- kategoriden bir ton koyu */
.em-pz-alt-etiket {
  font-size: .66rem; font-weight: 700; border-radius: 4px; padding: .1rem .35rem;
  background: #dbeafe !important; color: #1e40af !important; border: 1px solid #93c5fd;
}

/* PAZAR: SATICI PROFILI (aliciya acik) ------------------------------------ */
.em-pz-profil-bas {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--em-yuzey) !important; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 1rem 1.1rem;
}
.em-pz-profil-logo {
  width: 76px; height: 76px; flex: 0 0 76px; border-radius: 10px;
  background: var(--em-gri-50) !important; border: 1px solid var(--em-zemin);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.em-pz-profil-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.em-pz-profil-logo i { font-size: 2rem; color: #cbd5e1 !important; }
.em-pz-dogrulandi {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .74rem; font-weight: 700; border-radius: 999px; padding: .2rem .6rem;
  background: var(--em-ana-acik) !important; color: var(--em-ana-koyu) !important;
  border: 1px solid var(--em-ana-kenar);
}
.em-pz-dogrulanmadi {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .74rem; font-weight: 700; border-radius: 999px; padding: .2rem .6rem;
  background: #fef3c7 !important; color: #92400e !important; border: 1px solid #fde68a;
}
.em-pz-profil-satir {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: .84rem; padding: .28rem 0; border-bottom: 1px solid var(--em-gri-50);
}
.em-pz-profil-satir:last-child { border-bottom: none; }
.em-pz-profil-satir i { color: var(--em-ana-koyu) !important; font-size: 1rem; margin-top: .1rem; }
.em-pz-profil-et { color: var(--em-gri-5) !important; min-width: 118px; }
.em-pz-satici-bag { color: var(--em-gri-5) !important; text-decoration: none; font-weight: 600; }
.em-pz-satici-bag:hover { color: var(--em-ana-koyu) !important; text-decoration: underline; }

/* --- SATICI KARNESI ---
   Dort kutu, ayni yukseklik, rakam once. Kutular KART DEGIL: kart cercevesi
   "ayri nesne" der, bunlar ise tek bir olcumun dort yuzudur -- bu yuzden
   cerceve yok, yalnizca ortak zemin ve hiza var. Rakamlar alt alta
   okundugu icin tabular-nums. */
.em-pz-karne-kutu {
  background: var(--em-gri-50); border-radius: var(--em-r-l);
  padding: .6rem .7rem; height: 100%;
  display: flex; flex-direction: column; gap: .1rem;
}
.em-pz-karne-deger {
  font-size: 1.15rem; font-weight: 800; line-height: 1.1;
  color: var(--em-ana-koyu) !important; font-variant-numeric: tabular-nums;
}
.em-pz-karne-etiket { font-size: .76rem; font-weight: 600; color: var(--em-gri-6) !important; }
.em-pz-karne-alt { font-size: .7rem; color: var(--em-gri-5) !important; }

/* ==========================================================================
   PAZAR  --  SATICI PANELI KABUGU
   --------------------------------------------------------------------------
   Kullanici karari 2026-09-03: "ust taraf ErpMerkez temali degil, daha
   kurumsal profesyonel olsun, ErpMerkez temalarini gorelim."
   Satici paneli ERP ust bandinin (.em-ust) AYNI dilini kullanir; asagidakiler
   yalnizca ERP kabugunun getirdigi yerlesim kurallarinin (page-wrapper,
   sayfa zemini) satici tarafindaki karsiligidir.
   ========================================================================== */
body.em-pz-satici-govde {
  background: var(--em-zemin) !important;
  padding-top: var(--em-ust-y);
  margin: 0;
}
.em-pz-satici-sayfa {
  max-width: 1500px; margin: 0 auto; padding: 20px 22px 8px;
}
.em-pz-satici-dip {
  text-align: center; padding: 18px 0 26px;
  font-size: .76rem; color: var(--em-metin-3) !important;
}

/* Marka yanindaki "SATICI PANELI" isareti -- pazarin ERP'den ayri bir alan
   oldugunu bir bakista soyler; satici yanlislikla ERP'de sanmasin. */
.em-pz-satici-rozet {
  font-size: .58rem !important; font-weight: 800 !important; letter-spacing: .1em;
  background: var(--em-ana-acik) !important; color: var(--em-ana-koyu) !important;
  border: 1px solid var(--em-ana-kenar); border-radius: 4px;
  padding: .12rem .38rem; margin-left: .1rem;
}

/* Satici panelinde kartlar ERP kartlariyla ayni: beyaz, nazik golge. */
.em-pz-satici-govde .card {
  border: 1px solid var(--em-cizgi-sicak) !important;
  border-radius: 10px; box-shadow: var(--em-golge-s);
}
/* Satir araligi: .55/.6 rem cok siki duruyordu (kullanici 22.09.2026:
   "yazilar rakamlar cok sikisik"). Iki satirli hucreler -- urun adi + marka,
   fiyat + KDV -- birbirine yapisiyordu. */
.em-pz-satici-govde .table > :not(caption) > * > * { padding: .72rem .8rem; }
.em-pz-satici-govde .table td > div + div { margin-top: 2px; }
.em-pz-satici-govde .table thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--em-metin-3) !important; font-weight: 700;
  border-bottom: 1px solid var(--em-cizgi-sicak);
}

/* Dar ekranda ust bant zaten sariyor (.em-ust @media); sayfa da daralir. */
@media (max-width: 991px) {
  body.em-pz-satici-govde { padding-top: 104px; }
  .em-pz-satici-sayfa { padding: 14px 12px 8px; }
}

/* PAZAR: SATICI LISTE OKUNURLUGU ------------------------------------------
   Kullanici 2026-09-03: "ekranlar daha belirgin olsun, karmasalar olmasin;
   gelen siparişte ön planda firma adı belli olsun."
   Onceki halde her satirda alti bilgi ayni agirliktaydi ve goz nereye
   bakacagini bilmiyordu. Simdi FIRMA ADI listenin en buyuk yazisi. */
.em-pz-firma-ad {
  font-size: .96rem; font-weight: 700; line-height: 1.25;
  color: var(--em-metin) !important;
}
.em-pz-satir-alt {
  font-size: .74rem; color: var(--em-metin-3) !important; margin-top: .1rem;
}
.em-pz-tutar-genel {
  font-size: .95rem; font-weight: 800; color: var(--em-ana-koyu) !important;
}
/* Tiklanabilir satir: detay penceresi acilir. */
tr.pz-talep-satir { cursor: pointer; }
tr.pz-talep-satir:hover { background: var(--em-ana-acik) !important; }

/* Detay penceresindeki iki blok (alici / talep) */
.em-pz-detay-blok {
  background: var(--em-gri-50) !important; border: 1px solid #eef2f7;
  border-radius: 10px; padding: .7rem .85rem; height: 100%;
}
.em-pz-detay-blok h6 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--em-ana-koyu) !important; margin: 0 0 .5rem;
}
.em-pz-detay-satir {
  display: flex; justify-content: space-between; gap: .6rem;
  font-size: .84rem; padding: .22rem 0; border-bottom: 1px solid #eef2f7;
}
.em-pz-detay-satir:last-child { border-bottom: none; }
.em-pz-detay-satir > span:first-child { color: var(--em-metin-3) !important; white-space: nowrap; }
.em-pz-detay-satir > span:last-child { text-align: right; }

/* Teklif verirken canli tutar ozeti */
.em-pz-teklif-ozet {
  background: var(--em-ana-acik) !important; border: 1px solid var(--em-ana-kenar);
  border-radius: 10px; padding: .6rem .85rem; font-size: .88rem;
}

/* ---------------------------------------------------------------------------
   DUYURU / BILDIRIM KUTUSU  --  BILDIRIM PENCERESIYLE AYNI DIL
   Kullanici istegi (4 Eylul 2026): "tum bildirimlere bu tarzda uygula".

   Sag altta cikan duyuru kutusu ayri bir gorsel dil kullaniyordu
   (koyu slate baslik + amber vurgu). Bildirim penceresi ErpMerkez
   kimligine gecince ikisi ayni uygulamada iki farkli marka gibi
   durmaya basladi. Bu blok kutuyu ayni dile getirir:
     * ustte marka seridi (yesil gecis), soldan saga cizilir
     * sol alt kosede logo filigrani, ice dogru eriyen
     * simge kutusu ve baglanti rozeti marka renginde
     * ayni koseler, ayni golge, ayni hareket
   theme-override.css'teki eski kurallar EZILIR (bu dosya sonra yuklenir),
   boylece o dosyaya dokunulmadan tek yerden yonetilir.
   --------------------------------------------------------------------------- */
.toast.duyuru-toast {
  position: relative;
  /* ZEMIN BURADA TANIMLANIR: beyaz arka plan da theme-override.css'teydi ve
     o dosya kopya sayfalardan cikariliyor -- kutu saydam kaliyor, arkadaki
     tablo satirlari icinden okunuyordu (olculdu 4 Eylul 2026). */
  background: var(--em-yuzey) !important;
  border: 1px solid var(--em-cizgi) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 60px rgba(17, 24, 39, .22), 0 2px 8px rgba(17, 24, 39, .06) !important;
  overflow: hidden !important;
  animation: emBildirimGir .3s cubic-bezier(.22, 1, .36, 1);
}
.toast.duyuru-toast::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 3;
  background: linear-gradient(90deg, var(--em-ana), var(--em-ana-koyu));
  transform-origin: left;
  animation: emSeritCiz .42s cubic-bezier(.22, 1, .36, 1) .06s backwards;
}
.toast.duyuru-toast::after {
  content: ''; position: absolute; left: -18px; bottom: -20px;
  width: 96px; height: 96px; pointer-events: none; z-index: 0;
  background: url('/assets/img/logo.png') no-repeat left bottom / contain;
  opacity: .42;
  -webkit-mask-image: linear-gradient(to top right, #000 42%, transparent 82%);
          mask-image: linear-gradient(to top right, #000 42%, transparent 82%);
}
.toast.duyuru-toast .toast-header {
  background: var(--em-yuzey) !important;
  color: var(--em-metin-2) !important;
  border-bottom: 1px solid var(--em-cizgi) !important;
  padding: .6rem .8rem .55rem 1rem !important;
}
.toast.duyuru-toast .toast-header .btn-close { filter: none !important; opacity: .5; }
.toast.duyuru-toast .toast-header .btn-close:hover { opacity: .9; }
.toast.duyuru-toast .duyuru-toast__eyebrow { color: var(--em-metin-2) !important; }
.toast.duyuru-toast .duyuru-toast__eyebrow::before {
  background: var(--em-ana) !important;
  box-shadow: 0 0 0 4px var(--em-basari-acik) !important;
}
.toast.duyuru-toast .toast-body,
.toast.duyuru-toast .duyuru-toast__link { position: relative; z-index: 1; }
.toast.duyuru-toast .duyuru-toast__link:hover { background: var(--em-ana-acik) !important; }
.toast.duyuru-toast .duyuru-toast__icon {
  background: var(--em-basari-acik) !important;
  border: 1px solid var(--em-ana-kenar) !important;
  color: var(--em-ana-koyu) !important;
  border-radius: 12px !important;
}
.toast.duyuru-toast .duyuru-toast__title { color: var(--em-metin) !important; }
.toast.duyuru-toast .duyuru-toast__excerpt { color: var(--em-metin-2) !important; }
.toast.duyuru-toast .duyuru-toast__cta {
  background: var(--em-basari-acik) !important;
  border: 1px solid var(--em-ana-kenar) !important;
  color: var(--em-ana-koyu) !important;
}
.toast.duyuru-toast .duyuru-toast__cta:hover {
  background: var(--em-ana) !important; border-color: var(--em-ana) !important;
  color: #fff !important;
}

/* YERLESIM DE BURADA OLMALI.
   Duyuru kutusunun grid duzeni, ic bosluklari ve simge kutusu
   theme-override.css'te tanimliydi; sunucu o dosyayi kopya sayfalardan
   CIKARIYOR (bkz. sayfa-veri.js ESKI_TEMA_DOSYALARI). Yani kutu uygulamada
   duzensiz cikiyordu -- metinler ust uste biniyordu (olculdu 4 Eylul 2026).
   Duzen artik temanin kendi dosyasinda. */
.toast.duyuru-toast { width: min(390px, calc(100vw - 2rem)); max-width: 390px; }
.toast.duyuru-toast .toast-body { padding: 0 !important; background: transparent !important; border: 0 !important; }
.toast.duyuru-toast .duyuru-toast__link {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: .85rem; align-items: start;
  padding: 1rem 1.05rem 1.05rem !important;
  text-decoration: none !important; cursor: pointer;
  transition: background .16s ease;
}
.toast.duyuru-toast .duyuru-toast__icon {
  width: 46px; height: 46px; display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 1.45rem; flex: 0 0 46px;
}
.toast.duyuru-toast .duyuru-toast__content {
  min-width: 0; display: flex; flex-direction: column; align-items: flex-start;
}
.toast.duyuru-toast .duyuru-toast__title {
  display: block; font-size: .98rem; font-weight: 700;
  line-height: 1.32; margin-bottom: .3rem;
}
.toast.duyuru-toast .duyuru-toast__excerpt {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: .84rem; line-height: 1.42; margin-bottom: .75rem;
}
.toast.duyuru-toast .duyuru-toast__cta {
  display: inline-flex; align-items: center; gap: .3rem;
  min-height: 30px; padding: .35rem .75rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; line-height: 1;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.toast.duyuru-toast .duyuru-toast__eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.toast.duyuru-toast .duyuru-toast__eyebrow::before {
  content: ''; width: 8px; height: 8px; border-radius: 999px;
}


/* ==================================================== TASERON PORTALI
   Kullanici istegi 2026-09-07: "taseron logo ve temalarida erpmerkez ile
   ayni olsun."

   Ilk surumde renkler SABIT yazilmisti (#f4f6f9, #1e293b, turuncu rozet) ve
   portal ERP ile ayni sistemden gelmiyormus gibi duruyordu. Artik TEK renk
   kaynagi var: yukaridaki :root degiskenleri. Tema degistiginde portal da
   kendiliginden degisir; sabit renk EKLEMEYIN.

   Ust cubuk zaten ERP ile ayni sinif (.em-ust); logo da ayni dosya
   (/assets/img/logo.png) ve ayni "ErpMerkez" kelime-isareti. Portal
   oldugunu tek bir kucuk yesil rozet soyler. */
.em-tp-govde { background: var(--em-zemin); margin: 0; padding-top: var(--em-ust-y); }

/* Rozet: ERP ana rengi. Onceki turuncu, sistemin disinda bir renkti. */
.em-tp-rozet {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--em-ana-acik); color: var(--em-ana-koyu);
  border: 1px solid var(--em-ana-kenar); border-radius: 99px;
  padding: 3px 10px; font-size: .68rem; font-weight: 700; letter-spacing: .05em;
}
.em-tp-kim {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; font-weight: 600; color: var(--em-metin-2);
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.em-tp-icerik { max-width: 1180px; margin: 0 auto; padding: 20px 20px 40px; }
.em-tp-dip { max-width: 1180px; margin: 0 auto; padding: 0 20px 32px;
  font-size: .78rem; color: var(--em-metin-3); }

/* --- ozet kartlari --- */
.em-tp-kartlar { display: grid; gap: 14px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.em-tp-kart { display: flex; align-items: center; gap: 14px;
  background: var(--em-yuzey); border: 1px solid var(--em-cizgi);
  border-left: 3px solid var(--em-metin-3);
  border-radius: var(--em-r-l); box-shadow: var(--em-golge-s); padding: 16px 18px; }
.em-tp-kart i { font-size: 26px; color: var(--em-metin-2); }
.em-tp-kart > div { display: flex; flex-direction: column; min-width: 0; }
.em-tp-kart__deger { font-size: 1.45rem; font-weight: 700; line-height: 1.1;
  color: var(--em-metin); }
.em-tp-kart__etiket { font-size: .78rem; color: var(--em-metin-2); margin-top: 2px; }
.em-tp-kart__alt { font-size: .82rem; font-weight: 600; margin-top: 4px;
  color: var(--em-metin); }
.em-tp-kart--mavi { border-left-color: var(--em-bilgi); }
.em-tp-kart--mavi i { color: var(--em-bilgi); }
.em-tp-kart--sari { border-left-color: var(--em-uyari); }
.em-tp-kart--sari i { color: var(--em-uyari); }
.em-tp-kart--yesil { border-left-color: var(--em-ana); }
.em-tp-kart--yesil i { color: var(--em-ana); }
.em-tp-kart--mor { border-left-color: var(--em-baslik); }
.em-tp-kart--mor i { color: var(--em-baslik); }

/* --- bilgi seridi --- */
.em-tp-bilgi { display: flex; gap: 12px; align-items: flex-start;
  background: var(--em-bilgi-acik); border: 1px solid var(--em-cizgi);
  border-left: 3px solid var(--em-bilgi); border-radius: var(--em-r-l);
  padding: 13px 16px; margin-bottom: 18px; font-size: .86rem;
  color: var(--em-metin); }
.em-tp-bilgi i { font-size: 19px; color: var(--em-bilgi); flex: 0 0 auto; }

/* --- kisayollar --- */
.em-tp-kisayol { display: flex; flex-wrap: wrap; gap: 10px; }
.em-tp-kisayol a { display: inline-flex; align-items: center; gap: 7px;
  background: var(--em-yuzey); border: 1px solid var(--em-cizgi);
  border-radius: var(--em-r); padding: 9px 14px; font-size: .85rem;
  font-weight: 600; color: var(--em-gri-7); text-decoration: none; }
.em-tp-kisayol a:hover { border-color: var(--em-ana); color: var(--em-ana-koyu); }

/* --- suzgec --- */
.em-tp-suzgec { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.em-tp-suz { padding: 7px 15px; border-radius: 99px; font-size: .84rem;
  font-weight: 600; background: var(--em-yuzey); border: 1px solid var(--em-cizgi);
  color: var(--em-metin-2); text-decoration: none; }
.em-tp-suz.etkin { background: var(--em-ana); border-color: var(--em-ana);
  color: #fff; }

/* --- tablo --- */
.em-tp-tablo-kap { background: var(--em-yuzey); border: 1px solid var(--em-cizgi);
  border-radius: var(--em-r-l); box-shadow: var(--em-golge-s); overflow-x: auto; }
.em-tp-tablo { width: 100%; min-width: 640px; border-collapse: collapse;
  font-size: .87rem; color: var(--em-metin); }
.em-tp-tablo th { text-align: left; padding: 11px 14px; font-size: .72rem;
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--em-metin-2); background: var(--em-yuzey-2);
  border-bottom: 1px solid var(--em-cizgi); white-space: nowrap; }
.em-tp-tablo td { padding: 11px 14px; border-bottom: 1px solid var(--em-panel-cizgi);
  vertical-align: top; }
.em-tp-tablo tbody tr:last-child td { border-bottom: none; }
.em-tp-tablo tbody tr:hover { background: var(--em-gri-50); }
.em-tp-tablo td small { display: block; color: var(--em-metin-2); font-size: .76rem; }
.em-tp-sag { text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.em-tp-no { font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .82rem; color: var(--em-metin-2); white-space: nowrap; }
.em-tp-tablo tfoot td { background: var(--em-yuzey-2); font-weight: 600;
  border-top: 1px solid var(--em-cizgi); }
.em-tp-tablo tfoot tr.em-tp-toplam td { font-size: 1rem; color: var(--em-metin); }

/* --- durum rozetleri --- */
.em-tp-durum { display: inline-block; padding: 3px 9px; border-radius: 99px;
  font-size: .72rem; font-weight: 700; white-space: nowrap; }
.em-tp-durum--yesil { background: var(--em-basari-acik); color: var(--em-arti); }
.em-tp-durum--sari { background: var(--em-uyari-acik); color: var(--em-uyari); }
.em-tp-durum--kirmizi { background: var(--em-hata-acik); color: var(--em-eksi); }
.em-tp-durum--gri { background: var(--em-gri-100); color: var(--em-gri-6); }

/* --- dugme: ERP ana rengi --- */
.em-tp-dugme { display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--em-r); font-size: .82rem;
  font-weight: 600; background: var(--em-ana); color: #fff;
  border: 1px solid var(--em-ana); text-decoration: none; cursor: pointer; }
.em-tp-dugme:hover { background: var(--em-ana-koyu); border-color: var(--em-ana-koyu);
  color: #fff; }
.em-tp-dugme--sade { background: var(--em-yuzey); color: var(--em-gri-7);
  border-color: var(--em-cizgi); }
.em-tp-dugme--sade:hover { background: var(--em-gri-50); color: var(--em-metin);
  border-color: var(--em-cizgi-koyu); }
/* --ana: temel dugme ZATEN birincil (yesil); sinif ACIKCA tanimlanir ki
   ikincil dugmeler --sade ile ayrisirken niyet okunur kalsin. */
.em-tp-dugme--ana { background: var(--em-ana); border-color: var(--em-ana); color: #fff; }
.em-tp-dugme--uyari { background: var(--em-uyari); border-color: var(--em-uyari); }
.em-tp-dugme--uyari:hover { filter: brightness(.92); }

/* --- hakedis detay --- */
.em-tp-ozet-serit { display: grid; gap: 12px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  background: var(--em-yuzey); border: 1px solid var(--em-cizgi);
  border-radius: var(--em-r-l); box-shadow: var(--em-golge-s); padding: 16px 18px; }
.em-tp-ozet-serit span { display: block; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--em-metin-2);
  margin-bottom: 3px; }
.em-tp-ozet-serit b { font-size: .95rem; color: var(--em-metin); }
.em-tp-bildirim { background: var(--em-yuzey); border: 1px solid var(--em-cizgi);
  border-radius: var(--em-r-l); padding: 18px; margin-top: 16px; }
.em-tp-bildirim h3 { font-size: 1rem; font-weight: 700; margin: 0 0 6px; }
.em-tp-bildirim p { font-size: .85rem; color: var(--em-metin-2); margin: 0 0 12px; }
.em-tp-bildirim textarea { width: 100%; border: 1px solid var(--em-cizgi);
  border-radius: var(--em-r); padding: 10px 12px; font-size: .87rem;
  font-family: inherit; resize: vertical; color: var(--em-metin);
  background: var(--em-yuzey); }
.em-tp-bildirim__dugmeler { display: flex; gap: 10px; margin-top: 10px;
  flex-wrap: wrap; }
.em-tp-gecmis { list-style: none; margin: 16px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--em-panel-cizgi); }
.em-tp-gecmis li { padding: 7px 0; font-size: .84rem; }
.em-tp-gecmis li span { color: var(--em-metin-2); margin-left: 8px; font-size: .78rem; }
.em-tp-gecmis li p { margin: 4px 0 0; color: var(--em-metin-2); }

/* --- projeler --- */
.em-tp-projeler { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.em-tp-proje { background: var(--em-yuzey); border: 1px solid var(--em-cizgi);
  border-radius: var(--em-r-l); box-shadow: var(--em-golge-s); padding: 15px 17px; }
.em-tp-proje__ust { display: flex; align-items: baseline; gap: 10px;
  justify-content: space-between; margin-bottom: 10px; }
.em-tp-proje__ust b { font-size: .95rem; color: var(--em-metin); }
.em-tp-proje__alt { display: flex; flex-wrap: wrap; gap: 8px 16px;
  font-size: .8rem; color: var(--em-metin-2); }
.em-tp-proje__alt i { margin-right: 4px; color: var(--em-metin-3); }

/* --- bos durum --- */
.em-tp-bos { text-align: center; padding: 48px 20px; background: var(--em-yuzey);
  border: 1px solid var(--em-cizgi); border-radius: var(--em-r-l); }
.em-tp-bos i { font-size: 40px; color: var(--em-metin-3); }
.em-tp-bos p { margin: 12px 0 4px; font-weight: 600; color: var(--em-metin); }
.em-tp-bos small { color: var(--em-metin-2); }

/* --- sekme sayaci (okunmamis hakedis) --- */
.em-tp-sayac { display: inline-block; margin-left: 6px; min-width: 18px;
  padding: 1px 6px; border-radius: 99px; background: var(--em-hata); color: #fff;
  font-size: .68rem; font-weight: 700; line-height: 1.5; text-align: center; }

/* --- yeni hakedis uyarisi --- */
.em-tp-uyari { display: flex; gap: 12px; align-items: flex-start;
  background: var(--em-uyari-acik); border: 1px solid var(--em-cizgi);
  border-left: 3px solid var(--em-uyari); border-radius: var(--em-r-l);
  padding: 14px 16px; margin-bottom: 18px; }
.em-tp-uyari i { font-size: 20px; color: var(--em-uyari); flex: 0 0 auto; }
.em-tp-uyari b { font-size: .95rem; color: var(--em-metin); }
.em-tp-uyari ul { list-style: none; margin: 8px 0 0; padding: 0; }
.em-tp-uyari li { padding: 3px 0; font-size: .85rem; }
.em-tp-uyari a { color: var(--em-uyari); text-decoration: none; font-weight: 500; }
.em-tp-uyari a:hover { text-decoration: underline; }

/* --- mutabakat --- */
.em-tp-giris { width: 110px; padding: 6px 9px; border: 1px solid var(--em-cizgi);
  border-radius: var(--em-r); font-size: .85rem; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--em-metin);
  background: var(--em-yuzey); }
.em-tp-giris:focus { outline: 2px solid var(--em-ana); outline-offset: -1px; }
.em-tp-giris--not { width: 100%; min-width: 150px; text-align: left; }
.em-tp-fark { background: var(--em-hata-acik); }
.em-tp-fark td { color: var(--em-eksi); }
.em-tp-orta { margin-top: 16px; }

/* --- firma yonetim ekrani: portal ac/kapa --- */
.em-tp-anahtar { display: flex; align-items: center; justify-content: space-between;
  gap: 18px; background: var(--em-yuzey); border: 1px solid var(--em-cizgi);
  border-left: 3px solid var(--em-metin-3); border-radius: var(--em-r-l);
  box-shadow: var(--em-golge-s); padding: 18px 20px; margin-bottom: 16px; }
.em-tp-anahtar--acik { border-left-color: var(--em-ana); }
.em-tp-anahtar b { font-size: 1.05rem; color: var(--em-metin); }
.em-tp-anahtar p { margin: 4px 0 0; font-size: .85rem; color: var(--em-metin-2); }
.em-tp-anahtar code { display: inline-block; margin-top: 8px; padding: 4px 9px;
  background: var(--em-gri-100); border-radius: var(--em-r);
  font-size: .82rem; color: var(--em-metin); }
.em-tp-anahtar small { display: block; margin-top: 3px; font-size: .74rem;
  color: var(--em-metin-2); }
.em-tp-baslik2 { font-size: 1.05rem; font-weight: 700; margin: 24px 0 10px;
  color: var(--em-metin); }

@media (max-width: 860px) {
  .em-tp-kim { display: none; }
  .em-tp-icerik { padding: 14px 12px 32px; }
}

/* --- Excel / PDF cikti dugmeleri (baslik seridinin saginda) --- */
.em-tp-cikti { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- ERP girisinde taseron portali kapisi --- */
/* Giris ekranlarindaki "obur kapi" baglantilari (firma / satici /
   taseron). Uc ekranda da AYNI gorunur -- ayni sinif kullanilir. */
.em-gr__kapi, .em-gr__taseron { margin: 12px 0 0; font-size: .8rem;
  color: #8b98ab; text-align: center; line-height: 1.6; }
.em-gr__kapi b, .em-gr__taseron b { color: #b8c2d0; font-weight: 600; }
.em-gr__kapi a, .em-gr__taseron a { color: var(--gr-acik, #34d399); text-decoration: none;
  font-weight: 600; }
.em-gr__kapi a:hover, .em-gr__taseron a:hover { text-decoration: underline; }
.em-gr__taseron a { color: var(--gr-acik, #34d399); text-decoration: none; font-weight: 600; }

/* GIRIS EKRANINDAKI KAPI ETIKETLERI de kapinin renginde (25.09.2026).
   .em-pazar-rozet ve .em-tp-rozet satici paneli / taseron portali ICINDE de
   kullaniliyor; oralara dokunmamak icin yalnizca .em-gr altinda ezilir. */
.em-gr .em-pazar-rozet, .em-gr .em-tp-rozet {
  background: rgba(var(--gr-rgb), .16) !important; color: var(--gr-yazi) !important;
  border: 1px solid rgba(var(--gr-rgb), .45) !important;
}
.em-gr__taseron a:hover { text-decoration: underline; }

/* ==================================================== MASTER MUHASEBE
   ErpMerkez in kendi defteri (/sistem/muhasebe). Renkler tema
   degiskenlerinden gelir; sabit renk eklemeyin. */
.mm-bolum { background: var(--em-yuzey); border: 1px solid var(--em-cizgi);
  border-radius: var(--em-r-l); box-shadow: var(--em-golge-s);
  padding: 18px 20px; margin-bottom: 16px; }
.mm-bolum--uyari { border-left: 3px solid var(--em-hata); }
.mm-bolum h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px;
  font-size: 1.05rem; font-weight: 700; color: var(--em-metin); }
.mm-bolum h2 i { color: var(--em-metin-2); font-size: 20px; }
.mm-alt { font-size: .84rem; color: var(--em-metin-2); margin: 0 0 12px; }
.mm-not { font-size: .8rem; color: var(--em-metin-2); margin: 10px 0 0; }
.mm-adet { background: var(--em-hata); color: #fff; border-radius: 99px;
  padding: 1px 8px; font-size: .72rem; font-weight: 700; }
.mm-temiz { display: flex; align-items: center; gap: 10px; color: var(--em-arti);
  font-weight: 600; }
.mm-temiz i { font-size: 22px; }
.mm-kartlar { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.mm-kart { display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: var(--em-yuzey-2); border: 1px solid var(--em-cizgi);
  border-left: 3px solid var(--em-metin-3); border-radius: var(--em-r-l); }
.mm-kart i { font-size: 24px; color: var(--em-metin-2); }
.mm-kart > div { display: flex; flex-direction: column; min-width: 0; }
.mm-kart__deger { font-size: 1.15rem; font-weight: 700; line-height: 1.2;
  color: var(--em-metin); font-variant-numeric: tabular-nums; }
.mm-kart__etiket { font-size: .76rem; color: var(--em-metin-2); margin-top: 2px; }
.mm-kart__alt { font-size: .72rem; color: var(--em-metin-3); margin-top: 2px; }
.mm-kart--mavi { border-left-color: var(--em-bilgi); }
.mm-kart--mavi i { color: var(--em-bilgi); }
.mm-kart--yesil { border-left-color: var(--em-ana); }
.mm-kart--yesil i { color: var(--em-ana); }
.mm-kart--sari { border-left-color: var(--em-uyari); }
.mm-kart--sari i { color: var(--em-uyari); }
.mm-kart--turuncu { border-left-color: var(--em-uyari); }
.mm-kart--turuncu i { color: var(--em-uyari); }
.mm-kart--kirmizi { border-left-color: var(--em-hata); }
.mm-kart--kirmizi i { color: var(--em-hata); }
.mm-tablo-kap { overflow-x: auto; border: 1px solid var(--em-cizgi);
  border-radius: var(--em-r-l); }
.mm-tablo { width: 100%; min-width: 640px; border-collapse: collapse;
  font-size: .86rem; color: var(--em-metin); background: var(--em-yuzey); }
.mm-tablo th { text-align: left; padding: 10px 13px; font-size: .71rem;
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--em-metin-2); background: var(--em-yuzey-2);
  border-bottom: 1px solid var(--em-cizgi); white-space: nowrap; }
.mm-tablo td { padding: 10px 13px; border-bottom: 1px solid var(--em-panel-cizgi);
  vertical-align: top; }
.mm-tablo tbody tr:last-child td { border-bottom: none; }
.mm-tablo tbody tr:hover { background: var(--em-gri-50); }
.mm-tablo small { display: block; color: var(--em-metin-2); font-size: .74rem; }
.mm-sag { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mm-no { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem;
  color: var(--em-metin-2); white-space: nowrap; }
.mm-borc { color: var(--em-eksi); }
.mm-geciken { background: var(--em-hata-acik); }
.mm-rozet { display: inline-block; padding: 2px 8px; border-radius: 99px;
  font-size: .7rem; font-weight: 700; white-space: nowrap; }
.mm-rozet--kirmizi { background: var(--em-hata-acik); color: var(--em-eksi); }
.mm-rozet--sari { background: var(--em-uyari-acik); color: var(--em-uyari); }
.mm-rozet--yesil { background: var(--em-basari-acik); color: var(--em-arti); }
.mm-rozet--mavi { background: var(--em-bilgi-acik); color: var(--em-bilgi); }
.mm-rozet--gri { background: var(--em-gri-100); color: var(--em-gri-6); }
.mm-rozet--marka { background: var(--em-ana-acik); color: var(--em-ana-koyu);
  border: 1px solid var(--em-ana-kenar); }
.mm-arac { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.mm-dugme { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px;
  border-radius: var(--em-r); font-size: .82rem; font-weight: 600;
  background: var(--em-ana); color: #fff; border: 1px solid var(--em-ana);
  text-decoration: none; cursor: pointer; }
.mm-dugme:hover { background: var(--em-ana-koyu); border-color: var(--em-ana-koyu); }
.mm-dugme--kucuk { padding: 4px 9px; font-size: .76rem; }
.mm-dugme--sade { background: var(--em-yuzey); color: var(--em-gri-7);
  border-color: var(--em-cizgi); }
.mm-dugme--sade:hover { background: var(--em-gri-50); color: var(--em-metin); }

/* --- Tablo sayilari: hizalama ve sifir soluklugu --- */
.em-say { font-variant-numeric: tabular-nums; white-space: nowrap; }
.em-sifir { color: var(--em-metin-3); font-weight: 400; }

/* --- MASTER MUHASEBE: sekmeler, grafik, modal, yaslandirma --- */
.mm { max-width: 1500px; margin: 0 auto; }
.mm-sekmeler { background: var(--em-yuzey); border-bottom: 1px solid var(--em-cizgi); }
.mm-sekmeler__ic { max-width: 1500px; margin: 0 auto; display: flex;
  gap: 2px; padding: 0 12px; overflow-x: auto; }
.mm-sekme { display: flex; align-items: center; gap: 7px; padding: 12px 15px;
  font-size: .86rem; font-weight: 600; color: var(--em-metin-2);
  text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; }
.mm-sekme i { font-size: 17px; }
.mm-sekme:hover { color: var(--em-metin); background: var(--em-gri-50); }
.mm-sekme.etkin { color: var(--em-ana-koyu); border-bottom-color: var(--em-ana);
  font-weight: 700; }
.mm-sekme__sayac { background: var(--em-hata); color: #fff; border-radius: 99px;
  padding: 0 6px; font-size: .68rem; font-weight: 700; }

.mm-bas { margin-bottom: 14px; }
.mm-bas p { font-size: .84rem; color: var(--em-metin-2); margin: 4px 0 0; }
.mm-adet--sari { background: var(--em-uyari); }
.mm-soluk { color: var(--em-metin-3); }

/* kart: ikon ustte, deger buyuk */
.mm-kart { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }
.mm-kart__ust { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.mm-kart__ust i { font-size: 18px; }
.mm-kart__etiket { font-size: .74rem; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--em-metin-2); }
.mm-kart__deger { font-size: 1.35rem; font-weight: 700; line-height: 1.15;
  color: var(--em-metin); font-variant-numeric: tabular-nums; }

/* trend grafigi (kutuphanesiz) */
.mm-graf__gosterge { display: flex; gap: 16px; font-size: .78rem;
  color: var(--em-metin-2); margin-bottom: 10px; }
.mm-nokta { display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 5px; }
.mm-nokta--kesilen, .mm-graf__c--kesilen { background: var(--em-bilgi); }
.mm-nokta--tahsil,  .mm-graf__c--tahsil  { background: var(--em-ana); }
.mm-nokta--gider,   .mm-graf__c--gider   { background: var(--em-uyari); }
.mm-graf__alan { display: flex; align-items: flex-end; gap: 6px; height: 150px;
  padding: 8px 4px 0; border-bottom: 1px solid var(--em-cizgi); overflow-x: auto; }
.mm-graf__ay { display: flex; flex-direction: column; align-items: center;
  gap: 5px; flex: 1; min-width: 42px; height: 100%; }
.mm-graf__cubuklar { display: flex; align-items: flex-end; gap: 2px;
  height: 100%; width: 100%; justify-content: center; }
.mm-graf__c { width: 8px; border-radius: 2px 2px 0 0; min-height: 2px; }
.mm-graf__etiket { font-size: .68rem; color: var(--em-metin-3); }

/* gider dagilimi */
.mm-dagilim__satir { display: grid; grid-template-columns: 160px 1fr 120px;
  gap: 12px; align-items: center; padding: 6px 0; font-size: .85rem; }
.mm-dagilim__ad { color: var(--em-metin); font-weight: 600; }
.mm-dagilim__cubuk { background: var(--em-gri-100); border-radius: 99px; height: 9px; }
.mm-dagilim__cubuk i { display: block; height: 100%; border-radius: 99px;
  background: var(--em-uyari); }
.mm-dagilim__tutar { text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 600; }

/* yaslandirma renk siddeti */
.mm-y30  { color: var(--em-uyari); }
.mm-y60  { color: var(--em-uyari); font-weight: 600; }
.mm-y90  { color: var(--em-hata); font-weight: 600; }
.mm-y90u { color: var(--em-eksi); font-weight: 700; }

/* arac cubugu ve suzgec */
.mm-arac { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.mm-arac__sag { display: flex; gap: 8px; align-items: center; }
.mm-suzgec { display: flex; gap: 6px; flex-wrap: wrap; }
.mm-suz { padding: 6px 13px; border-radius: 99px; font-size: .82rem;
  font-weight: 600; background: var(--em-yuzey); border: 1px solid var(--em-cizgi);
  color: var(--em-metin-2); text-decoration: none; }
.mm-suz.etkin { background: var(--em-ana); border-color: var(--em-ana); color: #fff; }
.mm-bakiye { font-size: .9rem; color: var(--em-metin-2); }
.mm-bakiye b { font-size: 1.05rem; }
.mm-islem { display: flex; gap: 4px; justify-content: flex-end; }
.mm-tablo a { color: inherit; text-decoration: none; }
.mm-tablo a:hover b { color: var(--em-ana-koyu); text-decoration: underline; }

/* form alanlari */
.mm-alan { width: 100%; padding: 8px 11px; border: 1px solid var(--em-cizgi);
  border-radius: var(--em-r); font-size: .87rem; font-family: inherit;
  color: var(--em-metin); background: var(--em-yuzey); }
.mm-alan:focus { outline: 2px solid var(--em-ana); outline-offset: -1px; }
.mm-form-satir { display: flex; gap: 8px; align-items: center; }
.mm-form-satir .mm-alan { min-width: 260px; }

/* modal */
.mm-modal { position: fixed; inset: 0; background: rgba(15,23,42,.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; z-index: 1080; overflow-y: auto; }
.mm-modal__kutu { background: var(--em-yuzey); border-radius: var(--em-r-l);
  box-shadow: var(--em-golge); width: 100%; max-width: 560px; }
.mm-modal__bas { display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; border-bottom: 1px solid var(--em-cizgi); }
.mm-modal__bas h3 { display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 1rem; font-weight: 700; color: var(--em-metin); }
.mm-kapat { background: none; border: 0; font-size: 1.6rem; line-height: 1;
  color: var(--em-metin-3); cursor: pointer; }
.mm-modal__govde { padding: 18px; display: flex; flex-direction: column; gap: 13px; }
.mm-modal__govde label { display: flex; flex-direction: column; gap: 5px;
  font-size: .8rem; font-weight: 600; color: var(--em-metin-2); }
.mm-modal__govde label small { font-weight: 400; color: var(--em-metin-3);
  font-size: .74rem; }
.mm-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.mm-onay { flex-direction: row !important; align-items: center; gap: 8px !important;
  align-self: end; padding-bottom: 9px; }
.mm-onay input { width: auto; }
.mm-modal__alt { display: flex; gap: 8px; justify-content: flex-end;
  padding-top: 6px; border-top: 1px solid var(--em-panel-cizgi); margin-top: 4px; }

@media (max-width: 720px) {
  .mm-ikili { grid-template-columns: 1fr; }
  .mm-dagilim__satir { grid-template-columns: 110px 1fr 100px; }
}

/* --- PROJE/TASERON DEPOSU: ozet seridi ve sutun gruplari ---
   Kullanici istegi 2026-09-07: "ekran cok basit ve kolay duruyor, kurumsal
   ve profosyenelligi yansit". 15 kolonluk duz tablo veri yiginidir; ustte
   dort-alti sayilik ozet, altta sutun gruplari okumayi tasiyor. */
.pd-ozet { display: grid; gap: 10px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.pd-kart { background: var(--em-yuzey); border: 1px solid var(--em-cizgi);
  border-left: 3px solid var(--em-metin-3); border-radius: var(--em-r-l);
  box-shadow: var(--em-golge-s); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px; }
.pd-kart__ust { display: flex; align-items: center; gap: 6px; }
.pd-kart__ust i { font-size: 16px; color: var(--em-metin-2); }
.pd-kart__ust span { font-size: .71rem; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--em-metin-2); }
.pd-kart__deger { font-size: 1.25rem; font-weight: 700; line-height: 1.2;
  color: var(--em-metin); font-variant-numeric: tabular-nums; }
.pd-kart__alt { font-size: .73rem; color: var(--em-metin-3); line-height: 1.45; }
/* MIKTAR CIPI  (kullanici 2026-09-11: kart alt satirini okuyamadi)
   Alt satir "166.872.487,16 m. · 3.425.736 — · 130 Ad. +1 birim" diye
   tek dizi halinde basiliyordu; 210px'lik kartta uc satira boluyor ve
   sayi nerede bitiyor birim nerede basliyor secilmiyordu. Artik her
   miktar KALIN, birimi SOLUK ve kucuk; ikisi bir cip gibi birlikte
   duruyor. Tam dokum kartin title'inda (bkz. lib/yeni-ekranlar.js
   birimKirilimi -> tam). */
.pd-mik { display: inline-flex; align-items: baseline; gap: 3px;
  margin-right: 9px; white-space: nowrap; }
.pd-mik b { font-weight: 700; color: var(--em-metin-2); letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; }
.pd-mik em { font-style: normal; font-size: .93em; color: var(--em-metin-3); }
.pd-mik--art { color: var(--em-metin-3); font-size: .93em; margin-right: 0; }
.pd-kart--mavi { border-left-color: var(--em-bilgi); }
.pd-kart--mavi .pd-kart__ust i { color: var(--em-bilgi); }
.pd-kart--yesil { border-left-color: var(--em-ana); }
.pd-kart--yesil .pd-kart__ust i { color: var(--em-ana); }
.pd-kart--sari { border-left-color: var(--em-uyari); }
.pd-kart--sari .pd-kart__ust i { color: var(--em-uyari); }
.pd-kart--kirmizi { border-left-color: var(--em-hata); }
.pd-kart--kirmizi .pd-kart__ust i { color: var(--em-hata); }
.pd-kart--mor { border-left-color: var(--em-baslik); }
.pd-kart--mor .pd-kart__ust i { color: var(--em-baslik); }

/* sutun gruplari */
.pd-grup th { font-size: .64rem; font-weight: 700; letter-spacing: .1em;
  text-align: center; padding: 5px 6px; color: var(--em-metin-2);
  background: var(--em-gri-100); border-bottom: 1px solid var(--em-cizgi); }
.pd-grup__stok    { background: var(--em-bilgi-acik) !important;
  color: var(--em-bilgi) !important; }
.pd-grup__hareket { background: var(--em-gri-160) !important; }
.pd-grup__mali    { background: var(--em-uyari-acik) !important;
  color: var(--em-uyari) !important; }
.pd-grup__sonuc   { background: var(--em-ana-acik) !important;
  color: var(--em-ana-koyu) !important; }

/* ================================================================
   TABLO OKUNAKLILIGI  (kullanici 2026-09-07: "bu bolum cok okunakli
   degil, burayi daha guzel bi hale getirebiliriz")

   Ekrandaki uc somut sorun vardi:
     1) Basliklarin altinda 16 tane yan yana "Ara…" kutusu; tablonun
        kendi basliklarindan daha cok yer kapliyor, gozu bogiyordu.
     2) "26.042.593,08" gibi sayilarda ondalik, tam kisimla ayni
        agirlikta basiliyordu.
     3) 17 kolon arasinda hicbir gorsel sinir yoktu; hangi sayinin
        hangi gruba ait oldugu ancak basliga geri bakarak anlasiliyordu.
   ================================================================ */

/* --- 1) SUZGEC KUTULARI -- ARTIK GENEL KURALDA --------------------
   Kutular "hayalet" idi: bos haldeyken cercevesiz/zeminsiz duruyor,
   yalnizca uzerine gelince kutuya donusuyorlardi. Kullanici eski sistem ile
   yan yana bakinca farki yakaladi (11.09.2026): eski sistemde kutu HER ZAMAN
   gorunur ve cerceveli. Bicim artik bu dosyanin basindaki genel tablo
   blogunda (bkz. "YAZI KIMLIGI ESKI SISTEM IZGARASIYLA ESITLENDI"), boylece
   .es-suz kullanan BUTUN ekranlar ayni kutuyu gosterir. */

/* --- 2) ONDALIK SOLUK -------------------------------------------
   Deger degismez, agirligi degisir: goz once buyuklugu okur. */
.em-ond { color: var(--em-metin-3); font-weight: 400; font-size: .92em; }

/* --- 3) ARAC CUBUGU + SATIR SAYACI ------------------------------ */
.pd-arac { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; }
.pd-arac__sag { display: flex; gap: 8px; align-items: center; }
.pd-sayac { font-size: .8rem; color: var(--em-metin-2);
  font-variant-numeric: tabular-nums; }

/* --- 4) PROJE-TASERON DEPOSU TABLOSU ----------------------------
   Kullanici 11.09.2026: "Eski sistem ile ayni olmamis bu" / "goruntu ve
   islevsellik ayni olsun, tema bizimki gibi olsun ... Eski sistem tablosu gibi
   olsun ayni".

   Eski sistem /proje/depo/19/7 canli olculdu; izgara bicimi (12px hucre,
   40px satir, sola hizali sayilar, normal-harf 11px baslik) ARTIK GENEL
   KURALDA -- bkz. bu dosyanin basindaki "YAZI KIMLIGI ESKI SISTEM IZGARASIYLA
   ESITLENDI" blogu. Burada yalnizca BU EKRANA ozel olanlar kalir:
   sutun genislikleri, grup seridi ve sutun sinirlari.

   SUTUN GENISLIKLERI eski sistemden birebir alindi:
     sec 36 · Poz 110 · Malzeme 424 · Birim 106 · sayilar 106
     (uzun baslikli olanlar 116-120)
   Bizim FAZLADAN iki sutunumuz var (Santiye Stoku, Faturalanan) ve
   eski sistemin "Kesinti" sutunu bizde YOK (kullanici karari 2026-09-07) --
   toplam 17 sutun, ~2122px. Eski sistem de 16 sutunla ~1999px'tir ve dar
   pencerede AYNI SEKILDE yatay kayar.

   YAPISIK SUTUN YOK: ilk denemede TANIM grubu (sec/Poz/Malzeme/Birim)
   yatayda donduruluyordu; eski sistemin genislikleriyle bu 676px eder,
   1230px'lik kabin yarisindan fazlasi. Eski sistem de dondurmuyor. */
.pd-tablo { border-collapse: separate; border-spacing: 0;
  /* Sifir tonu: dolu sayidan belirgin sekilde geri. Bu ekranda 237 sayi
     hucresinin 159'u (%67) sifir; ayni tonda basilinca tablo tek parca
     gri lekeye donuyordu (olculdu 11.09.2026). */
  --pd-sifir: #c3ccda;
}
html[data-tema="koyu"] .pd-tablo { --pd-sifir: #3d4c64; }

/* ---- 4a) SUTUN GENISLIKLERI (eski sistem olculeri) ----------------- */
.pd-tablo th:nth-child(1),  .pd-tablo td:nth-child(1)  { width: 36px;  min-width: 36px; }
.pd-tablo thead tr:nth-child(2) th:nth-child(2), .pd-tablo td:nth-child(2)  { width: 110px; min-width: 110px; }
.pd-tablo thead tr:nth-child(2) th:nth-child(3), .pd-tablo td:nth-child(3)  { width: 424px; min-width: 424px; }
.pd-tablo thead tr:nth-child(2) th:nth-child(4), .pd-tablo td:nth-child(4)  { width: 106px; min-width: 106px; }
.pd-tablo thead tr:nth-child(2) th:nth-child(n+5) { width: 106px; min-width: 106px; }
/* Basligi uzun olan dordu biraz genis -- eski sistem de oyle yapiyor. */
.pd-tablo thead tr:nth-child(2) th:nth-child(5),
.pd-tablo thead tr:nth-child(2) th:nth-child(9),
.pd-tablo thead tr:nth-child(2) th:nth-child(10),
.pd-tablo thead tr:nth-child(2) th:nth-child(14),
.pd-tablo thead tr:nth-child(2) th:nth-child(15),
.pd-tablo thead tr:nth-child(2) th:nth-child(16) { width: 118px; min-width: 118px; }

/* ---- 4b) BASLIK: uc satirli yapisik blok ------------------------
   Sira: grup (TANIM/STOK/...) - sutun adi - suzgec kutulari. Ucu de
   yukarida kalir; yoksa 40. satirda hangi sutuna bakildigi bilinmez.
   `top` degerleri sabit yazildigi icin satir yuksekliklerine ACIK deger
   verilir: 26 / 30 / 33  ->  top 0 / 26 / 56. */
.pd-tablo thead th { position: sticky; z-index: 4; }
/* ARKA PLAN ZORUNLU VE !important.
   Bu dosyadaki genel kural `.table > thead th, .table thead th` baslik
   hucrelerini `background: ... !important` ile boyuyor ve ozgullugu
   (0,1,2). Iki sonucu olculdu (11.09.2026):
     - GRUP SERIDININ RENKLERI HIC GORUNMEDI: .pd-grup__stok vb. (0,1,0)
       + !important, genel kuralin (0,1,2) + !important'ini yenemiyordu;
       serit aylardir duz basiliyordu.
     - Yapisik baslik saydam kalinca altindan gecen sutunlar icinden goruldu.
   `table.pd-tablo ...` (0,1,3+) ile ikisi de cozulur. */
table.pd-tablo thead th { background: var(--em-yuzey) !important; }
table.pd-tablo thead tr.pd-grup th { background: var(--em-gri-100) !important; }
table.pd-tablo thead tr.pd-grup th.pd-grup__tanim   { background: var(--em-gri-50) !important;
  color: var(--em-metin-2) !important; }
table.pd-tablo thead tr.pd-grup th.pd-grup__stok    { background: var(--em-bilgi-acik) !important;
  color: var(--em-bilgi) !important; }
table.pd-tablo thead tr.pd-grup th.pd-grup__hareket { background: var(--em-gri-160) !important; }
table.pd-tablo thead tr.pd-grup th.pd-grup__mali    { background: var(--em-uyari-acik) !important;
  color: var(--em-uyari) !important; }
table.pd-tablo thead tr.pd-grup th.pd-grup__sonuc   { background: var(--em-ana-acik) !important;
  color: var(--em-ana-koyu) !important; }
table.pd-tablo thead tr.es-suzgec-satir th { background: var(--em-tablo-baslik-zemin) !important; }

.pd-tablo thead tr.pd-grup th { top: 0; height: 26px; z-index: 6; }
.pd-tablo thead tr:nth-child(2) th { top: 26px; height: 30px; z-index: 5; }
.pd-tablo thead tr.es-suzgec-satir th { top: 56px; height: 33px; z-index: 4; }

/* ---- 4c) GRUP SERIDI --------------------------------------------
   Bizim eklememiz (eski sistemde yok, kullanici istegi 2026-09-07:
   "15 kolon ayrimsiz duruyordu"). Alt kenarindaki 2px cizgi rengi,
   ait oldugu sutunlarin uzerinde "buradan buraya" hissini tasir. */
.pd-tablo tr.pd-grup th { border-bottom: 2px solid var(--em-cizgi) !important;
  font-size: .62rem !important; font-weight: 800 !important; letter-spacing: .14em;
  text-align: center; padding: 4px 6px !important; }
.pd-grup__tanim { text-align: left !important; padding-left: 12px !important; }
.pd-tablo .pd-grup__stok    { border-bottom-color: var(--em-bilgi) !important; }
.pd-tablo .pd-grup__hareket { border-bottom-color: var(--em-cizgi-koyu) !important; }
.pd-tablo .pd-grup__mali    { border-bottom-color: var(--em-uyari) !important; }
.pd-tablo .pd-grup__sonuc   { border-bottom-color: var(--em-ana) !important; }
.pd-tablo tr.pd-grup th > span { display: inline-block; }

/* ---- 4d) HUCRE -------------------------------------------------
   Bicim genel kuraldan gelir; burada yalnizca SOLA HIZALAMA zorlanir.
   Isaretleme `text-end` tasiyor (sayilar saga hizaliydi) ama eski sistem
   BUTUN sutunlari sola hizaliyor -- kullanici "ayni olsun" dedi. */
table.pd-tablo tbody tr > td,
table.pd-tablo thead tr:nth-child(2) th { text-align: left !important; }
table.pd-tablo tbody tr > td { white-space: nowrap; }
/* SIFIR gercekten geri ceksin -- tablonun %67'si bu. */
.pd-tablo .em-sifir { color: var(--pd-sifir) !important; font-weight: 400; }
.pd-tablo .em-ond { color: var(--em-metin-2); }
.pd-tablo .em-say { font-variant-numeric: tabular-nums; }

.pd-poz { font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
  font-size: 11.5px !important; color: var(--em-metin-2) !important;
  letter-spacing: -.02em; }
/* Malzeme adi SARILMAZ, kisalir. Eski sistem de boyle yapiyor ("TGKBB
   ATAYOLU SOKAK TR AG IYI..."); sarilinca satir 40px olmaktan cikip
   izgaranin ritmi bozuluyor. Tam ad, kirpilmis hucre ipucunda gorunur
   (public/assets/js/em-hucre-ipucu.js). */
.pd-ad { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 424px; font-weight: 500; color: var(--em-tablo-metin) !important; }
.pd-birim { color: var(--em-metin-3) !important; }

/* ---- 4e) GRUP SINIRLARI + SONUC VURGUSU -------------------------
   Kolon sirasi (16 kolon):
     1 sec | 2-4 tanim | 5-6 stok | 7-12 hareket | 13-14 mali | 15-16 sonuc
   (Kesinti sutunu 2026-09-07, tekrar eden "Stok" sutunu 12.09.2026
   kaldirildi -- bkz. lib/yeni-ekranlar.js colspan notu.)
   BU NUMARALAR ISARETLEMEYE BAGLIDIR: sutun eklenip cikarildiginda
   asagidakiler de kaydirilmali, yoksa grup cizgileri ve SONUC zemini
   YANLIS sutuna duser. */
.pd-tablo tbody td:nth-child(5),  .pd-tablo thead tr:nth-child(2) th:nth-child(5),
.pd-tablo tbody td:nth-child(7),  .pd-tablo thead tr:nth-child(2) th:nth-child(7),
.pd-tablo tbody td:nth-child(13), .pd-tablo thead tr:nth-child(2) th:nth-child(13),
.pd-tablo tbody td:nth-child(15), .pd-tablo thead tr:nth-child(2) th:nth-child(15) {
  border-left: 1px solid var(--em-cizgi-koyu) !important; }

/* SONUC grubu tablonun cevabidir: hafif zemin al, 15 sayinin arasinda
   kaybolmasin. Zebra `tr` uzerinde durdugu icin hucre zemini onu ezer. */
.pd-tablo tbody tr > td:nth-child(15),
.pd-tablo tbody tr > td:nth-child(16) { background: var(--em-ana-acik); }
.pd-tablo tbody td:nth-child(15) { font-weight: 700; }
/* Ustune gelince BUTUN satir tek renk -- eskiden SONUC sutunlari
   `transparent` yapiliyordu ve satirin ortasinda delik gibi duruyordu. */
.pd-tablo tbody tr:hover > td { background: var(--em-ana-acik) !important; }
.pd-tablo tbody tr:last-child > td { border-bottom: 0 !important; }

/* ---- 4f) GOVDE KENDI ICINDE KAYAR -------------------------------
   Eski sistemde tablo govdesi SABIT yukseklikte ve kendi icinde dikey
   kayar (olculdu: 544-674px); baslik hep gorunur, sayfa asagi kacmaz.
   Bizde tablo sayfayla birlikte uzuyordu. Sabit yukseklik + yapisik
   baslik ayni davranisi verir. */
.pd-tablo-kap { max-height: 62vh; overflow: auto; }

@media (max-width: 900px) {
  .pd-arac { justify-content: flex-end; }
  .pd-tablo thead tr:nth-child(2) th:nth-child(3),
  .pd-tablo td:nth-child(3) { width: 230px; min-width: 230px; }
}

/* --- FATURALANDIRMA (lib/taseron-fatura.js) --------------------- */
.pd-fat { font-weight: 600; color: var(--em-uyari); }
.pd-fat-bilgi { display: flex; gap: 10px; align-items: flex-start;
  background: var(--em-bilgi-acik); border: 1px solid var(--em-cizgi);
  border-left: 3px solid var(--em-bilgi); border-radius: var(--em-r);
  padding: 10px 13px; margin-bottom: 14px; font-size: .84rem;
  line-height: 1.45; color: var(--em-metin); }
.pd-fat-bilgi i { font-size: 19px; color: var(--em-bilgi); flex: 0 0 auto; }
.pd-fat-kalan { font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--em-metin-2); }
#pdFaturaTablo thead th { font-size: .74rem; text-transform: uppercase;
  letter-spacing: .03em; color: var(--em-metin-2); }

/* kart degerinin yanindaki birim etiketi ("5 kalem") */
.pd-kart__birim { font-size: .72rem; font-weight: 600; color: var(--em-metin-3);
  letter-spacing: 0; }

/* ================================================================
   TASERON PORTAL HESABI PENCERESI
   Kullanici istegi 2026-09-07: "hesap ver dedigin zaman ekranda
   duzgun kurumsal ve profosyenel hesap olusturma ekrani ciksin".
   Onceden tarayicinin ham prompt() kutulari kullaniliyordu.
   ================================================================ */
/* KATMAN (28.09.2026 e2e #44 ile ayni kok): 1090'da SweetAlert onayi
   (1060) pencerenin ARKASINDA kaliyordu. Tek kural :root --em-z-pencere. */
.em-tp-modal { position: fixed; inset: 0; z-index: var(--em-z-pencere, 1055);
  background: rgba(15,23,42,.5); display: flex; align-items: flex-start;
  justify-content: center; padding: 44px 16px; overflow-y: auto; }
.em-tp-modal[hidden] { display: none !important; }
.em-tp-modal__kutu { width: 100%; max-width: 540px; background: var(--em-yuzey);
  border-radius: var(--em-r-l); box-shadow: var(--em-golge);
  border: 1px solid var(--em-cizgi); }
.em-tp-modal__kutu--dar { max-width: 460px; }
.em-tp-modal__bas { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 15px 20px; border-bottom: 1px solid var(--em-cizgi); }
.em-tp-modal__bas h3 { display: flex; align-items: center; gap: 9px; margin: 0;
  font-size: 1.02rem; font-weight: 700; color: var(--em-metin); }
.em-tp-modal__bas h3 i { font-size: 21px; color: var(--em-ana); }
.em-tp-modal__kapat { background: none; border: 0; font-size: 1.7rem; line-height: 1;
  color: var(--em-metin-3); cursor: pointer; padding: 0 4px; }
.em-tp-modal__kapat:hover { color: var(--em-metin); }
.em-tp-modal__govde { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.em-tp-modal__alt { display: flex; gap: 8px; justify-content: flex-end;
  padding: 14px 20px; border-top: 1px solid var(--em-cizgi); }

/* kime aciliyor -- yanlis satira hesap acilmasin */
/* KIMLIK KARTI KENDI ADINI TASIR (21.09.2026, kullanici ekran goruntusu:
   "portal hesabi olusturda neden boyle bozuk goruntu var" -- TASERON rozeti
   unvanin ustune biniyordu). SEBEP: `.em-tp-kim` adi IKI AYRI bilesende
   kullaniliyordu: portal basligindaki kucuk etiket (yukarida, satir ~4627:
   inline-flex + max-width:240px + white-space:nowrap + overflow:hidden) ve
   bu pencere karti. Iki blok AYNI secicide birlesiyor; kart 240 pikselde
   kirpiliyor, tek satira zorlaniyor ve rozet unvani kapatiyordu. Ustelik
   mobil kuralindaki `.em-tp-kim { display:none }` bu karti da gizliyordu.
   Kart artik `em-tp-kimlik`; portal etiketi kendi kurallarinda kalir. */
.em-tp-kimlik { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--em-gri-50); border: 1px solid var(--em-cizgi);
  border-left: 3px solid var(--em-ana); border-radius: var(--em-r); }
.em-tp-kimlik__ikon { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%;
  background: var(--em-ana-acik); display: flex; align-items: center;
  justify-content: center; }
.em-tp-kimlik__ikon i { font-size: 20px; color: var(--em-ana-koyu); }
.em-tp-kimlik > div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
/* UZUN UNVAN ROZETIN ALTINA GIRMESIN (canli gorundu 2026-09-07:
   "ANADOLU ELEKTRİK TAAHHÜT LTD. ŞTİ." TASERON rozetiyle ust uste
   biniyordu). Ad sarar, rozet kendi genisligini korur. */
.em-tp-kimlik b { font-size: .92rem; color: var(--em-metin); line-height: 1.3;
  overflow-wrap: anywhere; }
.em-tp-kimlik__rozet { align-self: flex-start; }
.em-tp-kimlik span { font-size: .77rem; color: var(--em-metin-3); }
.em-tp-kimlik__rozet { flex: 0 0 auto; font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px;
  border-radius: 99px; background: var(--em-ana-acik); color: var(--em-ana-koyu); }

/* alanlar */
.em-tp-alan { display: flex; flex-direction: column; gap: 5px; }
.em-tp-alan[hidden] { display: none !important; }
.em-tp-alan label { font-size: .79rem; font-weight: 600; color: var(--em-metin-2); }
.em-tp-alan label span { font-weight: 400; color: var(--em-metin-3); }
.em-tp-alan input { width: 100%; padding: 9px 12px; font-size: .89rem;
  font-family: inherit; color: var(--em-metin); background: var(--em-yuzey);
  border: 1px solid var(--em-cizgi); border-radius: var(--em-r); }
.em-tp-alan input:focus { outline: 2px solid var(--em-ana); outline-offset: -1px; }
.em-tp-alan input:read-only { background: var(--em-gri-50); }
.em-tp-alan small { font-size: .74rem; color: var(--em-metin-3); line-height: 1.4; }
.em-tp-gecersiz { border-color: var(--em-hata) !important; }
.em-tp-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.em-tp-ikili[hidden] { display: none !important; }

/* parola satiri + guc cubugu */
.em-tp-sifre { display: flex; gap: 8px; }
.em-tp-sifre input { flex: 1; font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .02em; }
.em-tp-guc { height: 4px; border-radius: 99px; background: var(--em-gri-100);
  overflow: hidden; }
.em-tp-guc i { display: block; height: 100%; width: 0; border-radius: 99px;
  transition: width .18s, background .18s; }
.em-tp-guc i.zayif  { background: var(--em-hata); }
.em-tp-guc i.orta   { background: var(--em-uyari); }
.em-tp-guc i.guclu  { background: var(--em-ana); }

.em-tp-uyari { padding: 10px 13px; border-radius: var(--em-r); font-size: .84rem;
  line-height: 1.45; background: var(--em-hata-acik); color: var(--em-hata);
  border: 1px solid var(--em-hata); }
.em-tp-uyari[hidden] { display: none !important; }

.em-tp-kapsam { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px;
  background: var(--em-bilgi-acik); border: 1px solid var(--em-cizgi);
  border-left: 3px solid var(--em-bilgi); border-radius: var(--em-r);
  font-size: .81rem; line-height: 1.5; color: var(--em-metin); }
.em-tp-kapsam i { font-size: 18px; color: var(--em-bilgi); flex: 0 0 auto; }

/* teslim ekrani */
.em-tp-teslim__ust { font-size: .86rem; line-height: 1.5; margin: 0;
  color: var(--em-metin-2); }
.em-tp-teslim { display: flex; flex-direction: column; gap: 8px; }
.em-tp-teslim > div { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 9px 12px; background: var(--em-gri-50);
  border: 1px solid var(--em-cizgi); border-radius: var(--em-r); }
.em-tp-teslim span { font-size: .76rem; font-weight: 600; color: var(--em-metin-2); }
.em-tp-teslim code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .88rem; font-weight: 600; color: var(--em-metin);
  background: var(--em-yuzey); padding: 3px 9px; border-radius: 4px;
  border: 1px solid var(--em-cizgi); user-select: all; }

@media (max-width: 560px) {
  .em-tp-ikili { grid-template-columns: 1fr; }
  .em-tp-modal { padding: 16px 10px; }
}

.em-tp-alan textarea { width: 100%; padding: 9px 12px; font-size: .89rem;
  font-family: inherit; color: var(--em-metin); background: var(--em-yuzey);
  border: 1px solid var(--em-cizgi); border-radius: var(--em-r); resize: vertical; }
.em-tp-alan textarea:focus { outline: 2px solid var(--em-ana); outline-offset: -1px; }

/* --- KURUM PROJE DURUMU PENCERESI (lib/proje-durum.js) --- */
/* KATMAN (28.09.2026 e2e #44): 1090'da "Durum guncellendi" SweetAlert
   onayi (1060) pencerenin ARKASINDA kaliyordu, kullanici tekrar basip
   kaydi iki kez yaziyordu. Tek kural :root --em-z-pencere (1055). */
.em-pd-modal { position: fixed; inset: 0; z-index: var(--em-z-pencere, 1055); background: rgba(15,23,42,.5);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 44px 16px; overflow-y: auto; }
.em-pd-modal[hidden] { display: none !important; }
.em-pd-modal__kutu { width: 100%; max-width: 520px; background: var(--em-yuzey);
  border: 1px solid var(--em-cizgi); border-radius: var(--em-r-l);
  box-shadow: var(--em-golge); }
.em-pd-modal__bas { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--em-cizgi); }
.em-pd-modal__bas h3 { display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 1rem; font-weight: 700; color: var(--em-metin); }
.em-pd-modal__bas h3 i { font-size: 20px; color: var(--em-ana); }
.em-pd-kapat { background: none; border: 0; font-size: 1.7rem; line-height: 1;
  color: var(--em-metin-3); cursor: pointer; padding: 0 4px; }
.em-pd-modal__govde { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.em-pd-modal__alt { display: flex; gap: 8px; justify-content: flex-end;
  padding: 13px 18px; border-top: 1px solid var(--em-cizgi); }
.em-pd-kim { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px;
  background: var(--em-gri-50); border: 1px solid var(--em-cizgi);
  border-left: 3px solid var(--em-ana); border-radius: var(--em-r); }
.em-pd-kim b { font-size: .95rem; }
.em-pd-kim span { font-size: .8rem; color: var(--em-metin-2); }
.em-pd-simdi { margin-top: 4px; font-size: .78rem !important; color: var(--em-metin-3) !important; }
.em-pd-alan { display: flex; flex-direction: column; gap: 5px; }
.em-pd-alan label { font-size: .79rem; font-weight: 600; color: var(--em-metin-2); }
.em-pd-alan label span { font-weight: 400; color: var(--em-metin-3); }
.em-pd-alan select, .em-pd-alan input { width: 100%; padding: 9px 12px;
  font-size: .89rem; font-family: inherit; color: var(--em-metin);
  background: var(--em-yuzey); border: 1px solid var(--em-cizgi);
  border-radius: var(--em-r); }
.em-pd-alan select:focus, .em-pd-alan input:focus {
  outline: 2px solid var(--em-ana); outline-offset: -1px; }
.em-pd-uyari { padding: 10px 13px; border-radius: var(--em-r); font-size: .84rem;
  background: var(--em-hata-acik); color: var(--em-hata);
  border: 1px solid var(--em-hata); line-height: 1.45; }
.em-pd-uyari[hidden] { display: none !important; }
.em-pd-bilgi { display: flex; gap: 10px; align-items: flex-start; padding: 10px 13px;
  background: var(--em-bilgi-acik); border: 1px solid var(--em-cizgi);
  border-left: 3px solid var(--em-bilgi); border-radius: var(--em-r);
  font-size: .81rem; line-height: 1.5; }
.em-pd-bilgi i { font-size: 18px; color: var(--em-bilgi); flex: 0 0 auto; }
/* PROJE KAPANIS YOLU -- "Tamamlandi" diye tek bir durum yok; zincir
   ekranda gosterilir ki kullanici sirada ne oldugunu her seferinde
   birine sormasin. */
.em-pd-akis { border-top: 1px solid var(--em-cizgi); margin-top: 10px;
  padding-top: 10px; font-size: .78rem; }
.em-pd-akis__satir { display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px; margin: 6px 0; }
.em-pd-akis__satir > i { color: var(--em-metin-2); font-size: .9rem; }
.em-pd-adim { border: 1px solid var(--em-cizgi); border-radius: 999px;
  padding: 2px 9px; background: var(--em-yuzey-2); color: var(--em-metin-2);
  white-space: nowrap; }
.em-pd-adim--gecildi { background: #ecfdf5; border-color: #a7f3d0;
  color: #047857; }
.em-pd-adim--simdi { background: var(--em-vurgu); border-color: var(--em-vurgu);
  color: #fff; font-weight: 600; }
.em-pd-akis small { color: var(--em-metin-2); display: block; line-height: 1.5; }
.em-pd-gecmis { font-size: .78rem; color: var(--em-metin-2); }
.em-pd-gecmis b { display: block; margin-bottom: 6px; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--em-metin-3); }
.em-pd-gecmis > div { display: flex; gap: 8px; align-items: baseline;
  padding: 4px 0; border-top: 1px solid var(--em-panel-cizgi); }
.em-pd-gecmis span { color: var(--em-metin-3); font-variant-numeric: tabular-nums; }
.em-pd-gecmis small { margin-left: auto; color: var(--em-metin-3); }
/* rozet dugmesi normal rozet gibi dursun */
button.pd-durum-ac { cursor: pointer; font: inherit; font-size: .75em;
  font-weight: 600; }

/* --- PROJE DURUM SERIDI (kullanici 2026-09-07: "proje durumu belli olsun")
   Kucuk rozet yerine: ikon + durum adi + ne anlama geldigi. Tiklanabilir. */
.em-pd-serit { display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 12px; border-radius: var(--em-r);
  background: var(--em-yuzey); border: 1px solid var(--em-cizgi);
  border-left: 4px solid var(--em-metin-3); cursor: pointer;
  font: inherit; text-align: left; max-width: 100%; }
.em-pd-serit:hover { background: var(--em-gri-50); }
.em-pd-serit > i { font-size: 21px; flex: 0 0 auto; color: var(--em-metin-3); }
.em-pd-serit__ic { display: flex; flex-direction: column; min-width: 0; }
.em-pd-serit__ic b { font-size: .93rem; font-weight: 700; color: var(--em-metin);
  line-height: 1.25; }
.em-pd-serit__ic small { font-size: .76rem; color: var(--em-metin-2);
  line-height: 1.35; }
.em-pd-serit__kalem { font-size: 15px !important; color: var(--em-metin-3) !important;
  margin-left: 4px; opacity: .6; }
.em-pd-serit:hover .em-pd-serit__kalem { opacity: 1; }
/* durum ailesine gore renk: yuruyor / bekliyor / bitti / sorunlu */
.em-pd-serit--success   { border-left-color: var(--em-ana); }
.em-pd-serit--success > i { color: var(--em-ana); }
.em-pd-serit--warning   { border-left-color: var(--em-uyari); }
.em-pd-serit--warning > i { color: var(--em-uyari); }
.em-pd-serit--danger    { border-left-color: var(--em-hata); }
.em-pd-serit--danger > i { color: var(--em-hata); }
.em-pd-serit--secondary { border-left-color: var(--em-metin-3); }
.em-pd-serit--secondary > i { color: var(--em-metin-3); }
@media (max-width: 560px) { .em-pd-serit__ic small { display: none; } }

/* ================================================================
   TANITIM PANOSU  (giris ekrani, logonun yanindaki bos alan)
   Kullanici 10.09.2026: fotograf / GIF / video donsun, saniye ve dongu
   panelden ayarlansin. Medya YOKSA bu siniflar hic basilmaz ve duzen
   iki sutunlu haliyle kalir.
   ================================================================ */
.em-gr__ic--medya { max-width: 1400px; grid-template-columns: minmax(0,400px) minmax(0,300px) minmax(0,1fr); }
.em-gr__medya { position: relative; z-index: 1; min-width: 0; }
.em-gr__medya-cerceve {
  position: relative; width: 100%; aspect-ratio: 16/10;
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(148,163,184,.20);
  background: rgba(15,23,42,.55);
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
}
.em-gr__parca {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .55s ease, transform .55s ease;
}
.em-gr__parca.acik { opacity: 1; visibility: visible; }
.em-gr__parca[data-gecis="kaydir"] { transform: translateX(6%); }
.em-gr__parca[data-gecis="kaydir"].acik { transform: none; }
.em-gr__parca[data-gecis="yok"] { transition: none; }
.em-gr__mv { width: 100%; height: 100%; display: block; object-fit: cover; }
.em-gr__parca[data-oturma="sigdir"] .em-gr__mv { object-fit: contain; background: #0b1220; }
.em-gr__parca-bag { position: absolute; inset: 0; text-decoration: none; }
.em-gr__medya-yazi {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 13px;
  background: linear-gradient(transparent, rgba(2,6,18,.86));
  display: flex; flex-direction: column; gap: 2px;
}
.em-gr__medya-yazi b { color: #fff; font-size: .95rem; font-weight: 700; letter-spacing: .01em; }
.em-gr__medya-yazi span { color: rgba(226,232,240,.82); font-size: .78rem; line-height: 1.4; }
.em-gr__medya-nokta { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.em-gr__medya-nokta b { width: 20px; height: 3px; border-radius: 2px; background: rgba(148,163,184,.32); transition: background .2s; }
.em-gr__medya-nokta b.aktif { background: var(--em-ana); }

/* ===================================================================
   ERPMERKEZ OYNATICISI — "saha panosu"
   -------------------------------------------------------------------
   Tarayicinin kendi denetimleri KULLANILMAZ: Chrome'unkinde bir INDIR
   dugmesi var ve izleyicinin videoyu bilgisayarina almamasi isteniyor.
   Kendi cubugumuz hem o dugmeyi ortadan kaldirir hem de cerceve bizim
   kimligimiz olur.

   DIL: saha roper isaretleri (kose ayraclari), elektrik panosu etiket
   plakasi (baslik), cihaz gostergesi gibi tabular rakamlar. Tek vurgu
   marka yesilidir; kehribar YALNIZCA tampon seridindedir ve gercekten
   "henuz hazir degil" demektir.
   =================================================================== */
.em-oyn { position: absolute; inset: 0; }
.em-oyn__v { cursor: pointer; }

/* Kose ayraclari: dort kosede ince L parcalari (roper isareti). */
.em-oyn__kose { position: absolute; inset: 10px; pointer-events: none; }
.em-oyn__kose b {
  position: absolute; width: 16px; height: 16px;
  border: 1.5px solid rgba(16,185,129,.55);
}
.em-oyn__kose b:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.em-oyn__kose b:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.em-oyn__kose b:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.em-oyn__kose b:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* Kimlik plakasi: pano etiketi. */
.em-oyn__plaka {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  max-width: calc(100% - 52px);
  padding: 4px 9px; border-radius: 4px;
  background: rgba(2,6,18,.62); border: 1px solid rgba(16,185,129,.32);
  backdrop-filter: blur(6px);
  color: rgba(226,232,240,.92);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  pointer-events: none;
}
.em-oyn__plaka i { color: var(--em-ana); font-size: .82rem; letter-spacing: 0; }
.em-oyn__plaka span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Buyuk oynat dugmesi: YALNIZCA duruyorken gorunur. */
.em-oyn__buyuk {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 3; width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid rgba(16,185,129,.6);
  background: rgba(2,6,18,.55); backdrop-filter: blur(6px);
  color: #fff; font-size: 1.7rem; cursor: pointer;
  opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s;
}
.em-oyn.duruyor .em-oyn__buyuk { opacity: 1; visibility: visible; }
.em-oyn__buyuk:hover { background: rgba(16,185,129,.28); transform: translate(-50%,-50%) scale(1.06); }
.em-oyn__buyuk i { margin-left: 3px; }   /* ucgen optik olarak ortalanir */

/* Denetim rayi. */
.em-oyn__ray {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 9px;
  padding: 22px 13px 11px;
  background: linear-gradient(transparent, rgba(2,6,18,.9));
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.em-oyn:hover .em-oyn__ray,
.em-oyn:focus-within .em-oyn__ray,
.em-oyn.duruyor .em-oyn__ray { opacity: 1; transform: none; }
.em-oyn__dgm {
  flex: 0 0 auto; width: 27px; height: 27px; border-radius: 6px;
  display: grid; place-items: center; border: 0; cursor: pointer;
  background: rgba(148,163,184,.14); color: rgba(226,232,240,.95);
  font-size: 1rem; transition: background .18s, color .18s;
}
.em-oyn__dgm:hover { background: rgba(16,185,129,.32); color: #fff; }
.em-oyn__dgm:focus-visible { outline: 2px solid var(--em-ana); outline-offset: 2px; }

/* Serit: gri iz, kehribar tampon, yesil dolu. */
.em-oyn__iz {
  position: relative; flex: 1 1 auto; height: 4px; border-radius: 3px;
  background: rgba(148,163,184,.26); cursor: pointer; min-width: 40px;
}
.em-oyn__iz:focus-visible { outline: 2px solid var(--em-ana); outline-offset: 4px; }
.em-oyn__tampon, .em-oyn__dolu {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; width: 0;
}
.em-oyn__tampon { background: rgba(245,158,11,.38); }
.em-oyn__dolu   { background: var(--em-ana); }
.em-oyn__dolu::after {
  content: ''; position: absolute; right: -4px; top: 50%;
  width: 9px; height: 9px; border-radius: 50%;
  transform: translateY(-50%) scale(0);
  background: #fff; box-shadow: 0 0 0 2px var(--em-ana);
  transition: transform .18s ease;
}
.em-oyn:hover .em-oyn__dolu::after,
.em-oyn__iz:focus-visible .em-oyn__dolu::after { transform: translateY(-50%) scale(1); }

/* Sayac: cihaz gostergesi gibi, rakamlar ziplamaz. */
.em-oyn__saat {
  flex: 0 0 auto; color: rgba(226,232,240,.88);
  font-size: .68rem; font-weight: 600; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.em-oyn.tamekran { background: #020610; }
.em-oyn.tamekran .em-oyn__v { object-fit: contain; }

/* Dar ekranda ray sadelesir: sayac duser, dugmeler kalir. */
@media (max-width: 560px) {
  .em-oyn__ray { padding: 18px 9px 9px; gap: 7px; }
  .em-oyn__saat { display: none; }
  .em-oyn__plaka { top: 12px; left: 12px; font-size: .56rem; }
  .em-oyn__buyuk { width: 50px; height: 50px; font-size: 1.4rem; }
}
/* Dokunmatikte "hover" yoktur: ray hep gorunur, yoksa durdurulamaz. */
@media (hover: none) {
  .em-oyn__ray { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .em-oyn__ray, .em-oyn__buyuk, .em-oyn__dolu::after { transition: none; }
}

/* TANITIM PANOSU ALCAK EKRANDA KISALIR.
   Olculdu (10.09.2026): pano eklendikten sonra 1366x768'de 26px, 1280x720'de
   28px dikey tasma cikti -- kullanicinin daha once sikayet ettigi dizustu
   boyutu tam olarak burasi. Cerceve normalde 16/10; alcak ekranda once 16/9,
   daha da alcakta 2/1 olur. Genislik degismedigi icin duzen kaymaz, yalnizca
   yukseklik geri verilir.
   DIKKAT: bu blok, temel .em-gr__medya-cerceve kuralindan SONRA gelmelidir --
   ayni ozgullukte sonraki kural kazanir. Once yazilirsa hicbir sey olmaz
   (bir kez boyle yazildi ve olcum degismedi). */
@media (max-height: 800px) {
  .em-gr__medya-cerceve { aspect-ratio: 16 / 9; }
}
@media (max-height: 700px) {
  .em-gr__medya-cerceve { aspect-ratio: 2 / 1; }
}
@media (max-width: 1200px) {
  /* Uc sutun sigmiyor: tanitim panosu marka sutununun ALTINA gecer. */
  .em-gr__ic--medya { max-width: 1000px; grid-template-columns: minmax(0,420px) minmax(0,1fr); }
  .em-gr__medya { grid-column: 2; }
}
@media (max-width: 900px) {
  .em-gr__ic--medya { grid-template-columns: minmax(0, 460px); justify-content: center; }
  .em-gr__medya { grid-column: 1; }
  .em-gr__medya-cerceve { aspect-ratio: 16/9; }
}
@media (prefers-reduced-motion: reduce) {
  .em-gr__parca { transition: none; }
  .em-gr__parca[data-gecis="kaydir"] { transform: none; }
}

/* GIRIS BAGLANTILARI  (Instagram / YouTube / e-posta / site ...)
   Sloganin altinda, sade bir simge seridi. Simgeler Boxicons yazi
   tipinden gelir -- disaridan gorsel indirilmez. Yalnizca adresi girilmis
   ve acik olan platformlar basilir (suzme sunucuda).
   Dokunmatik hedefi 40px: telefonda parmakla rahat basilsin. */
.em-gr__baglar {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: 18px;
}
.em-gr__bag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  color: var(--em-gri-5);
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(148,163,184,.06);
  text-decoration: none;
  transition: color .16s, border-color .16s, background .16s, transform .16s;
}
.em-gr__bag i { font-size: 1.15rem; line-height: 1; }
.em-gr__bag:hover {
  color: var(--em-ana);
  border-color: var(--em-ana);
  background: rgba(16,185,129,.10);
  transform: translateY(-2px);
}
.em-gr__bag:focus-visible { outline: 2px solid var(--em-ana); outline-offset: 2px; }
@media (max-height: 720px) {
  .em-gr__baglar { margin-top: 12px; gap: 6px; }
  .em-gr__bag { width: 34px; height: 34px; border-radius: 9px; }
  .em-gr__bag i { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .em-gr__bag { transition: none; }
  .em-gr__bag:hover { transform: none; }
}

/* ================================================================
   DAR EKRAN TABLO AGI  (kullanici 10.09.2026: "her cihaza uygun olsun")

   Bu bir ERP; ekranlar 10-19 sutunlu tablolarla dolu. Kaydirma
   sarmalayicisi (.table-responsive) OLMAYAN bir tablo telefonda SAYFANIN
   TAMAMINI yana kaydirir: kullanici menuyu, formu ve dugmeleri kaybeder.
   Olculdu 10.09.2026: 167 ekran tablosunun 93'unde sarmalayici yoktu.

   93 cagri yerini tek tek sarmak yerine AG kuruluyor: dar ekranda her
   .table kendi icinde kayar. Sarmalayicisi ZATEN olan tablolara zarari
   yok (dista sarmalayici kayar, icte tablo kayar -- gorsel fark olusmaz).
   Yeni yazilacak tablolar da kendiliginden kapsama girer.

   YAZDIRMA TABLOLARI HARIC: table.yz kagit belgesidir (lib/yazdir.js),
   kendi kagit secimi ve otomatik sigdirmasi vardir; blok yapilirsa
   sayfa duzeni bozulur.

   NEDEN 900px: iki sutunlu duzenler bu esikte tek sutuna dusuyor
   (bkz. .em-gr__ic) -- tablo agi da ayni esikte devreye girsin.
   ================================================================ */
@media (max-width: 900px) {
  table.table:not(.yz) {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Blok olan tabloda hucreler daralip metni kirmasin; sutunlar okunakli
     genislikte kalsin ve tablo yana kaysin. */
  table.table:not(.yz) > thead > tr > th,
  table.table:not(.yz) > tbody > tr > td { white-space: nowrap; }
  /* Uzun metin sutunlari (aciklama, malzeme adi) kirilabilir kalsin --
     yoksa tek satir metrelerce uzar. */
  table.table:not(.yz) > tbody > tr > td.em-kir,
  table.table:not(.yz) > tbody > tr > td[data-kir] { white-space: normal; min-width: 180px; }
}

/* ================================================================
   RAPOR GRAFIKLERI (lib/rapor-grafik.js)
   Kullanici istegi 2026-09-07: "raporlama ekranlarinda gorsel olculer
   olsun, kurumsal profesyonel" -- Power BI ekraninda cizgi/sutun/halka/
   yatay cubuk grafiklerini isaretledi.
   ================================================================ */
.em-rg-izgara { display: grid; gap: 14px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.em-rg { background: var(--em-yuzey); border: 1px solid var(--em-cizgi);
  border-radius: var(--em-r-l); box-shadow: var(--em-golge-s);
  padding: 14px 16px 8px; min-width: 0; }
.em-rg--genis { grid-column: 1 / -1; }
.em-rg__bas { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.em-rg__baslik { font-size: .92rem; font-weight: 700; color: var(--em-metin); }
.em-rg__alt { font-size: .76rem; color: var(--em-metin-3); }
.em-rg__alan { width: 100%; }
/* ApexCharts kendi yazi tipini basar; tema yazi tipiyle hizalanir. */
.em-rg .apexcharts-text, .em-rg .apexcharts-legend-text {
  font-family: inherit !important; }
.em-rg .apexcharts-tooltip { border: 1px solid var(--em-cizgi) !important;
  box-shadow: var(--em-golge) !important; }
@media (max-width: 720px) {
  .em-rg-izgara { grid-template-columns: 1fr; }
}

/* Durum penceresi: konum ipucu ve notlar alani (11.09.2026) */
.em-pd-izgara label .em-pd-ipucu {
  font-weight: 500; color: var(--em-metin-3, #94a3b8); text-transform: none;
  font-size: .64rem; margin-left: 4px;
}
.em-pd-notlar {
  display: flex; flex-direction: column; gap: 3px; margin-top: .5rem;
  font-size: .7rem; font-weight: 600; color: var(--em-metin-2, #64748b);
}
.em-pd-notlar textarea {
  border: 1px solid var(--em-cizgi, #e2e8f0); border-radius: 7px;
  padding: .4rem .55rem; font-size: .82rem; font-weight: 500; resize: vertical;
}
.em-pd-notlar textarea:focus { outline: none; border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,.14); }

/* ============================================================
   PROJEYI BASKA IS EMRINE TASIMA PENCERESI  (.em-tasi-*)
   ------------------------------------------------------------
   Kullanici 11.09.2026: "guzel bi erpmerkeze yakisir bi degistirme
   yeri olsun". Eski sistemde bu islem duz bir acilir liste; bizde
   tasimanin IKI UCU (nereden -> nereye) yan yana gosterilir ki
   kullanici neyi degistirdigini gormeden onaylamasin.

   NEDEN BOOTSTRAP MODAL DEGIL: sunucuda uretilen bu ekranlarda
   bootstrap.bundle.js her zaman yuklu degil; modal acilmayinca
   dugme sessizce olu kalirdi. Perde + kutu saf CSS ile calisir.
   28.09.2026 duzeltme turu (K4 kalibinin ikinci kopyasi, #44 ile ayni):
   perde 1080'deydi, sonuc penceresi (SweetAlert 1060) ARKASINDA
   kaliyordu. Tek kural :root --em-z-pencere (1055).
   ============================================================ */
.em-tasi-perde {
  position: fixed; inset: 0; z-index: var(--em-z-pencere, 1055);
  background: rgba(15, 23, 42, .52);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.em-tasi-kutu {
  width: min(680px, 100%); max-height: calc(100vh - 2rem);
  display: flex; flex-direction: column;
  background: var(--em-yuzey, #fff);
  border: 1px solid var(--em-cizgi, #e2e8f0);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
}
.em-tasi-bas {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem;
  background: linear-gradient(135deg, #047857 0%, #10b981 100%);
  color: #fff;
}
.em-tasi-bas i { font-size: 1.3rem; }
.em-tasi-bas h6 { color: #fff; font-weight: 700; letter-spacing: .2px; }
.em-tasi-bas small { color: rgba(255, 255, 255, .82); font-size: .74rem; }
.em-tasi-kapat {
  margin-left: auto; border: 0; background: transparent; color: #fff;
  font-size: 1.5rem; line-height: 1; padding: 0 .25rem; cursor: pointer;
  opacity: .8;
}
.em-tasi-kapat:hover { opacity: 1; }
.em-tasi-govde { padding: 1rem; overflow: auto; }

/* nereden -> nereye */
.em-tasi-akis {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: stretch; gap: .6rem;
}
.em-tasi-uc {
  border: 1px solid var(--em-cizgi, #e2e8f0); border-radius: 10px;
  background: var(--em-yuzey-2, #f9fafb); padding: .6rem .7rem;
  min-width: 0;
}
.em-tasi-uc--hedef {
  border-color: var(--em-ana-kenar, #a7f3d0);
  background: var(--em-ana-acik, #ecfdf5);
}
.em-tasi-et {
  font-size: .68rem; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--em-metin-3, #8a93a3);
}
.em-tasi-dg {
  font-size: .95rem; font-weight: 700; color: var(--em-metin, #111827);
  margin-top: .15rem; overflow-wrap: anywhere;
}
.em-tasi-alt {
  font-size: .74rem; color: var(--em-metin-2, #6b7280);
  margin-top: .1rem; overflow-wrap: anywhere;
}
.em-tasi-ok {
  display: flex; align-items: center; color: var(--em-ana-koyu, #059669);
  font-size: 1.5rem;
}
.em-tasi-proje {
  margin-top: .7rem; padding: .5rem .65rem;
  border: 1px dashed var(--em-ana-kenar, #a7f3d0); border-radius: 9px;
  background: var(--em-ana-acik, #ecfdf5);
  font-size: .82rem; color: var(--em-metin, #111827);
}
.em-tasi-proje i { color: var(--em-ana-koyu, #059669); margin-right: .2rem; }
.em-tasi-not { font-size: .74rem; color: var(--em-metin-2, #6b7280); }
.em-tasi-ayak {
  display: flex; justify-content: flex-end; gap: .5rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--em-cizgi, #e2e8f0);
  background: var(--em-yuzey-2, #f9fafb);
}
@media (max-width: 560px) {
  .em-tasi-akis { grid-template-columns: 1fr; }
  .em-tasi-ok { justify-content: center; transform: rotate(90deg); }
}

/* Is emri detayindaki "Projeler" tablosu: para sutunlari hizali dursun */
.em-ie-projeler th { white-space: nowrap; }

/* ============================================================
   PROJE SECICI  (.em-psec)  —  100-200 PYP arasindan secim
   ------------------------------------------------------------
   Kullanici 11.09.2026: "proje arama yeri daha gelismis olsun,
   100 200 projede rahat arama yapilsin."  Bilesen <select>
   etiketini gizler; deger yine orada tutuldugu icin ekranlarin
   mevcut kodu degismez (bkz. em-proje-sec.js dosya basi notu).
   ============================================================ */
.em-psec { position: relative; }
.em-psec__gizli {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.em-psec__dugme {
  text-align: left; cursor: pointer; width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.em-psec__dugme--bos { color: var(--em-metin-3, #8a93a3); }
.em-psec__panel {
  position: absolute; z-index: 1060; top: calc(100% + 4px); left: 0;
  min-width: 100%; width: max(100%, 320px);
  background: var(--em-yuzey, #fff);
  border: 1px solid var(--em-cizgi, #e2e8f0); border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .16); overflow: hidden;
}
.em-psec__ust {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .55rem;
  border-bottom: 1px solid var(--em-cizgi, #e2e8f0);
  background: var(--em-yuzey-2, #f9fafb);
}
.em-psec__ara { flex: 1 1 auto; min-width: 0; }
.em-psec__sayac {
  flex: 0 0 auto; font-size: .7rem; font-weight: 600;
  color: var(--em-ana-koyu, #059669); white-space: nowrap;
}
.em-psec__liste { max-height: 290px; overflow-y: auto; }
.em-psec__satir {
  padding: .38rem .6rem; font-size: .8rem; cursor: pointer;
  color: var(--em-metin, #111827);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.em-psec__satir b { color: var(--em-ana-koyu, #059669); }
.em-psec__satir:hover,
.em-psec__satir.etkin { background: var(--em-ana-acik, #ecfdf5); }
.em-psec__satir.secili { font-weight: 700; }
.em-psec__bos {
  padding: .6rem; font-size: .76rem; text-align: center;
  color: var(--em-metin-2, #6b7280);
}

/* Haritada cerceve disinda kalan kayit rozeti */
.em-harita-uzak {
  display: inline-flex; align-items: center; gap: .3rem;
  margin-left: .4rem; padding: .22rem .5rem; border-radius: 999px;
  font-size: .7rem; font-weight: 600;
  background: var(--em-uyari-acik, #fffbeb);
  color: var(--em-uyarikutu-uyari, #92400e);
  border: 1px solid #fcd34d;
}
.em-harita-uzak a { color: inherit; text-decoration: underline; }

/* Harita ustu PYP arama kutusu */
.em-harita-pypara {
  position: relative; display: inline-flex; align-items: center; gap: .3rem;
  margin-left: .4rem; padding: .18rem .5rem;
  background: var(--em-yuzey, #fff);
  border: 1px solid var(--em-cizgi, #e2e8f0); border-radius: 999px;
}
.em-harita-pypara > i { color: var(--em-ana-koyu, #059669); font-size: .95rem; }
.em-harita-pypara input {
  border: 0; outline: none; background: transparent;
  font-size: .76rem; width: 150px; padding: .1rem 0;
  color: var(--em-metin, #111827);
}
.em-harita-pypara__liste {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 1060;
  min-width: 240px; max-height: 260px; overflow-y: auto;
  background: var(--em-yuzey, #fff);
  border: 1px solid var(--em-cizgi, #e2e8f0); border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15,23,42,.16);
}
.em-harita-pypara__satir {
  padding: .35rem .6rem; font-size: .78rem; cursor: pointer;
  display: flex; justify-content: space-between; gap: .6rem;
  color: var(--em-metin, #111827);
}
.em-harita-pypara__satir span { color: var(--em-metin-2, #6b7280); font-size: .7rem; }
.em-harita-pypara__satir:hover { background: var(--em-ana-acik, #ecfdf5); }
.em-harita-pypara__bos { padding: .5rem .6rem; font-size: .74rem; color: var(--em-metin-2,#6b7280); }

/* Telefondan/cihazdan gonderim kutusu (sef ve haritaci ekranlarinda) */
.em-saha-kutu {
  margin: 0 0 1rem; padding: .8rem .9rem; border-radius: 11px;
  background: var(--em-ana-acik, #ecfdf5);
  border: 1px solid var(--em-ana-kenar, #a7f3d0);
}
.em-saha-kutu__bas {
  display: flex; align-items: center; gap: .45rem; margin-bottom: .55rem;
  color: var(--em-ana-koyu, #059669); font-size: .88rem;
}
.em-saha-kutu__bas i { font-size: 1.15rem; }
.em-saha-kutu__bas span {
  margin-left: auto; font-size: .7rem; font-weight: 600;
  color: var(--em-metin-2, #6b7280);
}
.em-saha-kutu__adim {
  margin: .7rem 0 0; padding-left: 1.1rem;
  font-size: .78rem; color: var(--em-metin, #111827); line-height: 1.5;
}
.em-saha-kutu__adim li { margin-bottom: .2rem; }
.em-saha-kutu__not {
  margin-top: .6rem; padding-top: .5rem; font-size: .73rem;
  color: var(--em-metin-2, #6b7280);
  border-top: 1px dashed var(--em-ana-kenar, #a7f3d0);
}

/* ================================================================
   ARANABILIR ACILIR LISTE  (public/assets/js/aranabilir-liste.js)

   Kullanici 12.09.2026, eski sistem ile yan yana bakarken:
   "ozellikle il ilce butonlari farkli, bizdeki cok sacma olmus".
   Olculdu (/proje/isemri/detay/1): arama kutusu <select>'in USTUNE ayri
   bir satir olarak konuyordu; Il ve Ilce alanlari 97px, ayni satirdaki
   Ihale / Grup No / Isin Adi alanlari 58px. Iki farkli yukseklik yan yana
   durunca form tirtikli goruluyordu. Eski sistemde ayni alanlar TEK duz
   acilir listedir (olculdu: 35px, .form-select ile ayni).

   Cozum: arama KALDIRILMADI (668 secenekli listeler icin sart), acilir
   panelin ICINE alindi. Kapaliyken alan .form-select'in AYNISI; acilinca
   ustte arama, altinda suzulmus liste.
   ================================================================ */
.em-ara { position: relative; display: block; }

/* GERCEK <select> SILINMEZ, GIZLENIR: form gonderimi ve sayfalarin kendi
   `change` dinleyicileri onun uzerinden calismaya devam eder.
   `display:none` DEGIL -- gizli alanlar bazi tarayicilarda form dogrulamasi
   (`required`) sirasinda odaklanamadigi icin gonderimi sessizce durdurur. */
.em-ara__gercek {
  position: absolute !important; opacity: 0 !important;
  width: 1px !important; height: 1px !important; min-height: 0 !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important;
  pointer-events: none; z-index: -1; left: 12px; bottom: 0;
}

/* TETIK: kapali haldeki kutu. .form-select sinifini de tasidigi icin
   cerceve/kose/dolgu temadan gelir; burada yalnizca bir <button>'un
   <select> gibi gorunmesi icin gereken farklar var. */
.em-ara__tetik {
  text-align: left; width: 100%; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* .form-select okunu Bootstrap arka plan resmi olarak cizer; buton
     varsayilan zeminini ezmesin diye zemin acikca verilir. */
  background-color: var(--em-yuzey);
}
.em-ara__tetik--bos { color: var(--em-metin-3); }
.em-ara--acik .em-ara__tetik { border-color: var(--em-ana) !important; }
.em-ara__tetik:disabled { background-color: var(--em-gri-100); cursor: not-allowed; }

/* PANEL: `fixed` -- modal govdesi ve .table-responsive gibi overflow:hidden
   tasiyan kaplar `absolute` paneli keserdi. Konum JS'te hesaplanir. */
.em-ara__panel {
  position: fixed; z-index: 1090;
  display: flex; flex-direction: column;
  background: var(--em-yuzey);
  border: 1px solid var(--em-cizgi-koyu); border-radius: var(--em-r);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
  overflow: hidden;
}
.em-ara__panel[hidden] { display: none !important; }
/* ARAMA KUTUSU PANELIN UST SERIDIDIR (22.09.2026, kullanici: "ne kadar kotu
   duruyor arama yeri; 'baglanti yok' kismi arama yeri olsun").
   IKI SORUN VARDI:
    1) KOCAMAN BOS KUTU. Panel bir FLEX SUTUNDUR; sayfanin kendi arac cubugu
       kurali (.form-control { flex: 0 1 220px }) bu kutuya da uyuyor ve
       flex-basis DIKEY eksende calistigi icin arama kutusu 130px yuksekligine
       cikiyordu (olculdu /yetki/grup ekraninda). Ayni ozgullukte oldugu icin
       sonra gelen sayfa kurali kazaniyordu -- bu yuzden !important.
    2) AYRI BIR KUTU GIBI DURUYORDU. Artik kenarsiz, tam genislikte, panelin
       ust seridi gibi: kapali haldeki secim kutusunun devami gibi gorunur. */
.em-ara__panel .em-liste-arama {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  border: 0 !important;
  border-bottom: 1px solid var(--em-cizgi, #e2e8f0) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: .45rem .7rem !important;
  font-size: .82rem;
}
.em-ara__panel .em-liste-arama:focus {
  outline: none !important;
  border-bottom-color: var(--em-ana, #10b981) !important;
}
.em-ara__liste { overflow-y: auto; padding: 0 0 4px; }
.em-ara__satir {
  padding: 7px 12px; font-size: 12px; line-height: 18px;
  color: var(--em-tablo-metin); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.em-ara__satir:hover,
.em-ara__satir--vurgu { background: var(--em-gri-100); }
.em-ara__satir--secili {
  background: var(--em-ana-acik); color: var(--em-ana-koyu); font-weight: 600;
}
.em-ara__satir--kapali { color: var(--em-metin-3); cursor: not-allowed; }
.em-ara__yok {
  padding: 12px; font-size: 12px; color: var(--em-metin-3); text-align: center;
}

/* ================================================================
   IS EMRI DURUM CUBUGU   (lib/yeni-ekranlar.js isemriDetaySayfasi)

   Kullanici 12.09.2026: "durum cubugu eksik".
   Eski sistem ayni ekranda onayli is emri icin TEK SATIRLIK kehribar bir
   uyari basiyor: "Bu is emri onayli. Revizyon icin once durumu Onay
   Bekliyor yapip kaydedin." Bizde is akisi FARKLI -- durumu elle geri
   almak yok, degisiklik koordinator/proje muduru onayina gider. Ayni
   bilgi bu yuzden BIZIM mekanizmamizla yazilir; eski sistemin cumlesi
   oldugu gibi kopyalansaydi kullaniciyi OLMAYAN bir dugmeye yollardi.

   Serit ayrica NEREDE OLDUGUMUZU gosterir: dort adimli zincir. Eski sistemde
   bu yok; is emrinin hangi asamada oldugunu ancak forma bakip anlamak
   gerekiyordu.
   ================================================================ */
.em-durum-serit {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: var(--em-yuzey); border: 1px solid var(--em-cizgi);
  border-left: 3px solid var(--em-metin-3);
  border-radius: var(--em-r-l); box-shadow: var(--em-golge-s);
  padding: 12px 16px; margin-bottom: 14px;
}
.em-durum-serit--acik   { border-left-color: var(--em-bilgi); }
.em-durum-serit--onayli { border-left-color: var(--em-ana); }
.em-durum-serit--red    { border-left-color: var(--em-hata); }

.em-durum-adimlar { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
/* Adimlar arasindaki cizgi: zincirin kendisi. Ilk adimda cizilmez. */
.em-durum-adim {
  display: flex; align-items: center; gap: 7px;
  font-size: .76rem; font-weight: 600; color: var(--em-metin-3);
  white-space: nowrap; padding-right: 14px;
}
.em-durum-adim + .em-durum-adim { padding-left: 14px; position: relative; }
.em-durum-adim + .em-durum-adim::before {
  content: ''; position: absolute; left: -2px; top: 50%; width: 18px; height: 2px;
  transform: translateX(-100%); background: var(--em-cizgi-koyu); border-radius: 2px;
}
.em-durum-adim > span {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700;
  background: var(--em-gri-100); color: var(--em-metin-3);
  border: 1px solid var(--em-cizgi-koyu);
}
/* GECILEN adim: is bitti. */
.em-durum-adim--gecti { color: var(--em-metin-2); }
.em-durum-adim--gecti > span {
  background: var(--em-ana-acik); color: var(--em-ana-koyu);
  border-color: var(--em-ana-kenar);
}
.em-durum-adim--gecti + .em-durum-adim::before,
.em-durum-adim--simdi + .em-durum-adim::before { background: var(--em-ana-kenar); }
/* SIMDIKI adim: burada duruyoruz. */
.em-durum-adim--simdi { color: var(--em-metin); }
.em-durum-adim--simdi > span {
  background: var(--em-ana); color: #fff; border-color: var(--em-ana);
  box-shadow: 0 0 0 3px var(--em-ana-acik);
}
.em-durum-adim--red { color: var(--em-hata); }
.em-durum-adim--red > span {
  background: var(--em-hata-acik); color: var(--em-hata); border-color: var(--em-hata);
}

.em-durum-not {
  display: flex; align-items: center; gap: 7px; flex: 1 1 260px;
  font-size: .8rem; line-height: 1.45; color: var(--em-metin-2);
}
.em-durum-not i { font-size: 17px; flex: 0 0 auto; color: var(--em-metin-3); }
.em-durum-serit--onayli .em-durum-not i { color: var(--em-ana-koyu); }
.em-durum-serit--red    .em-durum-not i { color: var(--em-hata); }
.em-durum-serit--acik   .em-durum-not i { color: var(--em-bilgi); }
.em-durum-not strong { color: var(--em-metin); font-weight: 700; }

/* ---------------- PROJE TASIMA: ETKI PANELI ----------------------
   Kullanici 12.09.2026: "yapiyi bozmasin sistemde ... resmi sekilde
   aktarsin". Tasima YALNIZCA isemri.proje_id'yi degistirir; kesif,
   montaj, bono, hakedis, stok ve harita kayitlarinin hepsi PROJE
   kaydina baglidir (olculdu: projeye baglanan 39 tablonun tamami) ve
   yer degistirmez. Panel bunu hem YAZIYLA soyler hem de SAYILARLA
   gosterir -- "sadece bir baglanti degisiyor" demek, 1.200 kesif
   kalemi olan bir PYP'de yaniltici olurdu. */
.em-tasi-etki {
  margin-top: 12px; padding: 11px 13px;
  background: var(--em-ana-acik); border: 1px solid var(--em-ana-kenar);
  border-radius: var(--em-r);
}
.em-tasi-etki__bas {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: .79rem; line-height: 1.45; color: var(--em-metin-2);
}
.em-tasi-etki__bas i { font-size: 17px; color: var(--em-ana-koyu); flex: 0 0 auto; }
.em-tasi-etki__bas strong { color: var(--em-ana-koyu); }
.em-tasi-etki__sayilar {
  display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 9px;
}
.em-tasi-etki__sayilar span {
  background: var(--em-yuzey); border: 1px solid var(--em-ana-kenar);
  border-radius: 99px; padding: 3px 10px;
  font-size: .73rem; color: var(--em-metin-2); white-space: nowrap;
}
.em-tasi-etki__sayilar b {
  color: var(--em-ana-koyu); font-weight: 700;
  font-variant-numeric: tabular-nums; margin-right: 3px;
}

/* Hedef is emri secilince: orada NE VAR? Once bu bilgi yoktu; dolu bir
   is emri secilirse kullanici ancak "Tasi"ya bastiktan SONRA 409 hatasini
   goruyordu. */
.em-tasi-ozet {
  margin-top: 12px; padding: 10px 13px; border-radius: var(--em-r);
  font-size: .79rem; line-height: 1.45;
  display: flex; gap: 8px; align-items: flex-start;
}
.em-tasi-ozet i { font-size: 17px; flex: 0 0 auto; }
.em-tasi-ozet--bos  { background: var(--em-ana-acik); border: 1px solid var(--em-ana-kenar);
  color: var(--em-metin-2); }
.em-tasi-ozet--bos i { color: var(--em-ana-koyu); }
.em-tasi-ozet--dolu { background: var(--em-uyari-acik); border: 1px solid var(--em-uyari);
  color: var(--em-uyarikutu-uyari); }
.em-tasi-ozet--dolu i { color: var(--em-uyari); }

/* ================================================================
   TRANSFER EKRANI -- GIDEN / GELEN AYRIMI
   Kullanici 12.09.2026: "burayada farkli farkli giden gelen renkleri
   ekle". Ekranda uc kutu yan yana duruyor ve UCU DE AYNI griydi;
   hangisinin NEREDEN, hangisinin NEREYE oldugu ancak etiketi bastan
   sona okuyarak anlasiliyordu -- transferde en pahali hata da budur
   (yonun ters girilmesi stogu yanlis projeye tasir).
   Cikis KEHRIBAR (malzeme buradan ayriliyor), giris MARKA YESILI
   (buraya geliyor). Renk anlam tasir; ok simgesi renksiz ekranda da
   yonu gosterir (renk korlugu icin tek basina renge guvenilmez).
   ================================================================ */
.em-tr-et { display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; letter-spacing: .01em; }
.em-tr-et i { font-size: 15px; }
.em-tr-et--cikis { color: var(--em-uyari) !important; }
.em-tr-et--giris { color: var(--em-ana-koyu) !important; }
/* Kutunun kendisi de yonu tasir: sol kenarda ince bir serit. */
#transfer-cikisProje, .em-tr-et--cikis + .ts-wrapper .ts-control {
  border-left: 3px solid var(--em-uyari) !important; }
#transfer-girisProje, .em-tr-et--giris + .ts-wrapper .ts-control {
  border-left: 3px solid var(--em-ana) !important; }
/* Bos hedef kutusu "invalid" kirmizisiyla korkutmasin: hedef yoksa bu
   bir HATA degil, bilgi. Sebep zaten altindaki ipucunda yazili. */
.em-tr-et--giris + .ts-wrapper.invalid .ts-control {
  border-color: var(--em-cizgi-koyu) !important; }

/* ================================================================
   SAYFA BASLIGI SERIDI  (lib/yeni-ekranlar.js kabuk())
   Kullanici 12.09.2026: "bu ekranda yazi fontu daha iyi olmali, bunun
   arkasinda gene bizim temamiz yok, onu HER YERDE ayni yap".
   Baslik duz sayfa zemininde, cercevesiz/zeminsiz duruyordu ve 24px
   lacivert (#1d398d) bir <h4> idi -- ne kart, ne serit, ne hiyerarsi.
   Kaynak sistemde ayni baslik renkli bir seridin uzerinde durur.
   Burasi kabuk()'un ORTAK blogu: bu kural butun sunucu ekranlarini
   ayni anda kapsar.
   ================================================================ */
.em-sayfa-bas {
  display: flex; flex-direction: column; gap: 2px;
  background: linear-gradient(90deg, var(--em-ana-acik) 0%, var(--em-yuzey) 62%);
  border: 1px solid var(--em-ana-kenar);
  border-left: 4px solid var(--em-ana);
  border-radius: var(--em-r-l);
  box-shadow: var(--em-golge-s);
  padding: 12px 16px; margin-bottom: 14px;
}
.em-sayfa-bas__ad {
  margin: 0; font-size: 1.16rem; font-weight: 700;
  letter-spacing: -.015em; line-height: 1.25;
  color: var(--em-ana-koyu);
}
.em-sayfa-bas__alt {
  margin: 0; font-size: .8rem; font-weight: 500; line-height: 1.35;
  color: var(--em-metin-2);
}
@media (max-width: 700px) { .em-sayfa-bas { padding: 10px 12px; } }

/* Tablo kartinin TEK CUBUK basligi: solda ad, sagda butonlar.
   Kullanici 12.09.2026: "tus yerleri falan tam ayni yerde olsun".
   Kaynak sistemde bu ekranin ustunde tek koyu serit var; bizde uc ayri
   satir vardi (sayfa basligi + arac cubugu + tablo karti). */
.pd-serit { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; }
.pd-serit__araclar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Koyu seritte beyaz dugmeler; anahat dugme koyu zeminde okunmaz. */
.pd-serit__araclar .btn-light {
  background: rgba(255,255,255,.95) !important; border-color: transparent !important;
  color: var(--em-metin) !important; font-weight: 600; }
.pd-serit__araclar .btn-light:hover { background: #fff !important; }
@media (max-width: 700px) { .pd-serit { align-items: flex-start; } }

/* ================================================================
   SATIR TRANSFERI MODALI  (/proje/{p}/montaj/{t})
   Kullanici 12.09.2026: "islem miktarinin yanindaki transfer butonunu
   eski sistem gibi ErpMerkez'e uygula, calisir durumda olsun kesinlikle".
   Kaynak modal canli olculdu; ayni alanlar, bizim renklerimizle:
   cikis KEHRIBAR, giris MARKA YESILI (transfer ekraniyla AYNI dil).
   ================================================================ */
.em-tr-kimlik { background: var(--em-gri-50); border: 1px solid var(--em-cizgi);
  border-left: 3px solid var(--em-ana); border-radius: var(--em-r); padding: 10px 13px; }
.em-tr-kimlik__poz { display: flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--em-metin);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.em-tr-kimlik__ad { font-size: .82rem; color: var(--em-metin-2); margin-top: 3px; }

/* Yon secimi: iki dugme, secili olan dolu. Ok simgesi renksiz ekranda da
   yonu gosterir -- renge tek basina guvenilmez. */
.em-tr-yon { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.em-tr-yon__dugme { display: flex; align-items: center; justify-content: center;
  gap: 7px; padding: 10px 12px; font-size: .84rem; font-weight: 600;
  background: var(--em-yuzey); color: var(--em-metin-2);
  border: 1px solid var(--em-cizgi-koyu); border-radius: var(--em-r); cursor: pointer; }
.em-tr-yon__dugme i { font-size: 17px; }
.em-tr-yon__dugme:hover { border-color: var(--em-metin-3); }
/* Secili CIKIS kehribar, secili GIRIS yesil. */
.em-tr-yon__dugme[data-yon="cikis"].etkin { background: var(--em-uyari-acik);
  border-color: var(--em-uyari); color: var(--em-uyarikutu-uyari); }
.em-tr-yon__dugme[data-yon="giris"].etkin { background: var(--em-ana-acik);
  border-color: var(--em-ana); color: var(--em-ana-koyu); }

/* Yon seridi: nereden -> nereye, tek bakista. */
.em-tr-serit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--em-gri-50); border: 1px solid var(--em-cizgi);
  border-radius: var(--em-r); padding: 9px 12px; font-size: .8rem; }
.em-tr-serit > i { font-size: 18px; color: var(--em-metin-3); }
.em-tr-serit__uc { color: var(--em-metin-3); }
.em-tr-serit__uc b { display: block; font-weight: 700; color: var(--em-metin); }
.em-tr-serit__uc--cikis { color: var(--em-uyari); }
.em-tr-serit__uc--giris { color: var(--em-ana-koyu); }

.em-tr-miktar { display: flex; gap: 10px; align-items: stretch; }
.em-tr-miktar input { flex: 1 1 auto; }
.em-tr-miktar__tavan { flex: 0 0 auto; display: flex; flex-direction: column;
  justify-content: center; padding: 4px 14px; text-align: right;
  background: var(--em-gri-50); border: 1px solid var(--em-cizgi);
  border-radius: var(--em-r); font-size: .73rem; color: var(--em-metin-3); }
.em-tr-miktar__tavan b { font-size: 1rem; color: var(--em-metin);
  font-variant-numeric: tabular-nums; }

/* Satirdaki Transfer dugmesi -- kaynak sistemde kehribar, bizde marka yesili. */
.em-satir-tr { background: var(--em-ana-acik); border: 1px solid var(--em-ana-kenar);
  color: var(--em-ana-koyu); font-weight: 600; white-space: nowrap; }
.em-satir-tr:hover { background: var(--em-ana); border-color: var(--em-ana); color: #fff; }

/* TAKIM ESI SATIRI  (/proje/{p}/montaj/{t})
   "150 W armatur var ise armatur borusu ve 150 W lamba da vardir"
   kurali doldurunca satir isaretlenir -- kullanici NE kaydedecegini
   gormeden "Montaj Gir"e basmasin. */
#pm-tablo tbody tr.pm-takim > td { background: var(--em-uyari-acik) !important; }
#pm-tablo tbody tr.pm-takim > td:first-child { position: relative; }
#pm-tablo tbody tr.pm-takim > td:first-child::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--em-uyari); }
#pm-tablo tbody tr.pm-takim .pm-input { border-color: var(--em-uyari); font-weight: 600; }

/* ================================================================
   HAKEDIS OZET KARTLARI  (/hakedis/taseron)
   Kullanici 12.09.2026: "kartlara temalarimizi uygula, sade kalmasin".
   Kopyalanan sayfa kartlari duz beyaz kutulardi; sol serit renkleri de
   yabanci palettendi (#64748b / #2563eb / #f59e0b / #16a34a).
   Artik ekranin geri kalaniyla AYNI dil: yumusak degrade zemin, marka
   yesili golge, sol aksan seridi ve degeri tasiyan buyuk rakam.
   Anlam korunur: sayi notr · tutar mavi(bilgi) · kesinti kehribar ·
   toplam marka yesili.
   ================================================================ */
body .hakedis-ozeti .summary-card {
  background: linear-gradient(145deg, var(--em-yuzey) 0%, var(--em-gri-50) 100%) !important;
  border: 1px solid var(--em-cizgi) !important;
  border-radius: var(--em-r-l) !important;
  box-shadow: var(--em-golge-s) !important;
  overflow: hidden; position: relative;
  transition: box-shadow .15s ease, transform .15s ease; }
body .hakedis-ozeti .summary-card:hover {
  box-shadow: 0 6px 18px rgba(15,23,42,.10) !important; transform: translateY(-1px); }
/* Sol aksan seridi -- kopyanin ::before'u yeniden renklendirilir. */
body .hakedis-ozeti .summary-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
body .hakedis-ozeti .summary-card--count::before      { background: var(--em-metin-3) !important; }
body .hakedis-ozeti .summary-card--amount::before     { background: var(--em-bilgi) !important; }
body .hakedis-ozeti .summary-card--adjustment::before { background: var(--em-uyari) !important; }
body .hakedis-ozeti .summary-card--total::before      { background: var(--em-ana) !important; }
body .hakedis-ozeti .summary-card__label {
  font-size: .71rem; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--em-metin-2); }
body .hakedis-ozeti .summary-card__value {
  font-size: 1.45rem; font-weight: 700; line-height: 1.2;
  color: var(--em-metin); font-variant-numeric: tabular-nums; }
body .hakedis-ozeti .summary-card--total .summary-card__value { color: var(--em-ana-koyu); }
/* Ikon kutusu: renksiz daire yerine kartin kendi rengiyle. */
body .hakedis-ozeti .summary-card__icon {
  width: 42px; height: 42px; border-radius: 10px; display: flex;
  align-items: center; justify-content: center; font-size: 20px;
  background: var(--em-gri-100); color: var(--em-metin-2); }
body .hakedis-ozeti .summary-card--amount .summary-card__icon {
  background: var(--em-bilgi-acik); color: var(--em-bilgi); }
body .hakedis-ozeti .summary-card--adjustment .summary-card__icon {
  background: var(--em-uyari-acik); color: var(--em-uyari); }
body .hakedis-ozeti .summary-card--total .summary-card__icon {
  background: var(--em-ana-acik); color: var(--em-ana-koyu); }

/* ===========================================================================
   HARİTA RANDEVU TALEBİ  (.em-hrr-*)          12.09.2026
   ---------------------------------------------------------------------------
   Kullanıcı: "randevu sistemi 5 kuruş etmez, iğrenç... ekranlar biraz daha
   kaliteli ve kurumsal olmalı, bu hâliyle çok iyi değil, çok basit görüntü."

   Önceki sürüm düz bir Bootstrap tablosu + yan yana dizilmiş form kutularıydı.
   İki kusuru vardı: (1) talebin DURUMU okunmuyordu -- "açık mı, kim aldı,
   gecikti mi" satırı sonuna kadar okumadan anlaşılmıyordu; (2) hiyerarşi
   yoktu, her şey aynı ağırlıkta griydi.

   Bu blok üç şey getirir:
     · SOL DURUM ŞERİDİ — renk tek bakışta durumu söyler (açık/planlı/
       yapıldı/iptal). Renkler tema değişkenlerinden gelir, sabit değil.
     · ÖNCELİK ROZETİ — acil olan uzaktan görünür.
     · BOŞ DURUM — "henüz talep yok" yerine ne yapılacağını yazan bir alan.

   Sınıf adı: em- öneki tek başına yetmiyor (bkz. em-ust tuzağı), modül kısaltması
   eklendi: em-hrr = harita randevu. Dosya genelinde başka kullanımı yok.
   =========================================================================== */
.em-hrr-bas {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
}
.em-hrr-sayac { display: flex; gap: .4rem; flex-wrap: wrap; }
.em-hrr-sayac span {
  font-size: .72rem; font-weight: 600; padding: .2rem .55rem;
  border-radius: 999px; border: 1px solid var(--em-cizgi);
  background: var(--em-yuzey-2); color: var(--em-metin-2);
}
.em-hrr-sayac span.dolu { background: var(--em-uyari-acik);
  border-color: #fde68a; color: #92400e; }

/* --- talep açma paneli --- */
.em-hrr-form {
  border: 1px solid var(--em-ana-kenar); background: var(--em-ana-acik);
  border-radius: 10px; padding: .85rem .9rem; margin-bottom: .9rem;
}
.em-hrr-form h6 { font-size: .82rem; font-weight: 700; margin-bottom: .6rem;
  color: var(--em-metin); }
.em-hrr-oto {
  font-size: .72rem; color: var(--em-metin-2); background: var(--em-yuzey);
  border: 1px dashed var(--em-cizgi); border-radius: 8px;
  padding: .4rem .6rem; margin-bottom: .6rem;
}
.em-hrr-oto b { color: var(--em-metin); font-weight: 600; }

/* --- talep kartı --- */
.em-hrr-liste { display: flex; flex-direction: column; gap: .5rem; }
.em-hrr-kart {
  position: relative; display: flex; gap: .75rem; align-items: flex-start;
  border: 1px solid var(--em-cizgi); border-radius: 10px;
  background: var(--em-yuzey); padding: .6rem .8rem .6rem 1rem;
  overflow: hidden;
}
.em-hrr-kart::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--em-cizgi);
}
.em-hrr-kart--acik::before      { background: var(--em-uyari); }
.em-hrr-kart--planlandi::before { background: var(--em-bilgi); }
.em-hrr-kart--yapildi::before   { background: var(--em-basari); }
.em-hrr-kart--iptal::before     { background: var(--em-hata); }
.em-hrr-kart--ertelendi::before { background: var(--em-metin-3); }

.em-hrr-orta { flex: 1 1 auto; min-width: 0; }
.em-hrr-ust  { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin-bottom: .15rem; }
.em-hrr-tur  { font-size: .82rem; font-weight: 700; color: var(--em-metin); }
.em-hrr-ne   { font-size: .8rem; color: var(--em-metin); margin: .1rem 0 .25rem; }
.em-hrr-alt  { font-size: .72rem; color: var(--em-metin-2);
  display: flex; gap: .8rem; flex-wrap: wrap; }
.em-hrr-alt i { opacity: .7; }

.em-hrr-rozet {
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  padding: .12rem .5rem; border-radius: 999px; border: 1px solid transparent;
  text-transform: uppercase;
}
.em-hrr-rozet--acik      { background: var(--em-uyari-acik); color: #92400e;
  border-color: #fde68a; }
.em-hrr-rozet--planlandi { background: var(--em-bilgi-acik); color: #155e75;
  border-color: #a5f3fc; }
.em-hrr-rozet--yapildi   { background: var(--em-basari-acik); color: #065f46;
  border-color: var(--em-ana-kenar); }
.em-hrr-rozet--iptal     { background: var(--em-hata-acik); color: #991b1b;
  border-color: #fecaca; }
.em-hrr-rozet--ertelendi { background: var(--em-yuzey-2); color: var(--em-metin-2);
  border-color: var(--em-cizgi); }

.em-hrr-oncelik {
  font-size: .68rem; font-weight: 700; padding: .12rem .45rem;
  border-radius: 6px; border: 1px solid transparent;
}
.em-hrr-oncelik--acil   { background: var(--em-hata-acik); color: #991b1b;
  border-color: #fecaca; }
.em-hrr-oncelik--yuksek { background: var(--em-uyari-acik); color: #92400e;
  border-color: #fde68a; }

.em-hrr-sag { flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: flex-end; gap: .3rem; }
.em-hrr-tarih { font-size: .78rem; font-weight: 700; color: var(--em-metin);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.em-hrr-gecti { color: var(--em-hata); }

/* --- boş durum --- */
.em-hrr-bos {
  text-align: center; padding: 1.6rem 1rem; color: var(--em-metin-2);
  border: 1px dashed var(--em-cizgi); border-radius: 10px;
  background: var(--em-yuzey-2);
}
.em-hrr-bos i { font-size: 1.6rem; opacity: .45; display: block;
  margin-bottom: .35rem; }
.em-hrr-bos b { display: block; color: var(--em-metin); font-size: .84rem;
  margin-bottom: .15rem; }

@media (max-width: 575.98px) {
  .em-hrr-kart { flex-direction: column; }
  .em-hrr-sag  { align-items: flex-start; flex-direction: row; }
}

/* FIYAT FARKI / KESINTI SEKMESI (/taseronlar/farklar/{id})
   Ek odeme ARTI, kesinti EKSI. Isaret tek basina kolay kaciriliyor;
   renk ve isaret BIRLIKTE tasinir (renk korlugunde de okunsun). */
.em-farklar-ozet { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-bottom: 14px; }
.em-farklar-ozet__k { background: var(--em-yuzey); border: 1px solid var(--em-cizgi);
  border-left: 3px solid var(--em-metin-3); border-radius: var(--em-r-l);
  box-shadow: var(--em-golge-s); padding: 11px 14px;
  display: flex; flex-direction: column; gap: 2px; }
.em-farklar-ozet__k span { font-size: .71rem; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--em-metin-2); }
.em-farklar-ozet__k b { font-size: 1.15rem; font-weight: 700; color: var(--em-metin);
  font-variant-numeric: tabular-nums; }
.em-farklar-ozet__k--arti { border-left-color: var(--em-ana); }
.em-farklar-ozet__k--arti b { color: var(--em-ana-koyu); }
.em-farklar-ozet__k--eksi { border-left-color: var(--em-hata); }
.em-farklar-ozet__k--eksi b { color: var(--em-hata); }
.em-fark-arti { color: var(--em-ana-koyu); font-weight: 600; }
.em-fark-eksi { color: var(--em-hata); font-weight: 600; }

/* Ozet seridi artik DORT kutu tasiyor (faturalanan / bekleyen / iade / net).
   Sabit 3 sutunda dorduncu alt satira tek basina dusuyordu; auto-fit hepsini
   tek satira yayar, dar ekranda kendi kendine sarar. */
.em-farklar-ozet { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.em-farklar-ozet__k i { font-style: normal; font-size: .7rem; color: var(--em-metin-3); }
.em-farklar-ozet__k--bekle { border-left-color: var(--em-uyari); }
.em-farklar-ozet__k--bekle b { color: var(--em-uyari-koyu, #b45309); }

/* Bolum basligi: bir ekranda iki ayri defter varsa (depodan faturalanan
   malzeme / hakedise elle islenen fark) hangisine bakildigi yaziyla
   ayrilmali -- iki tablo ust uste gelince ayni sey saniliyor. */
.em-bolum-bas { display: flex; align-items: center; gap: 10px;
  margin: 18px 0 10px; padding-bottom: 7px;
  border-bottom: 1px solid var(--em-cizgi); }
.em-bolum-bas:first-child { margin-top: 0; }
.em-bolum-bas > i { font-size: 1.15rem; color: var(--em-ana); }
.em-bolum-bas b { display: block; font-size: .88rem; font-weight: 700;
  color: var(--em-metin); letter-spacing: .01em; }
.em-bolum-bas span > i { display: block; font-style: normal; font-size: .72rem;
  color: var(--em-metin-2); }

/* Belge durumu rozeti. Renk ANLAM tasir: yesil faturalandi (para yazildi),
   amber muhasebe bekliyor (cikti ama daha faturalanmadi), kirmizi iade. */
.em-fat-durum { display: inline-block; padding: 1px 8px; border-radius: 99px;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  background: var(--em-yuzey-2); color: var(--em-metin-2);
  border: 1px solid var(--em-cizgi); }
.em-fat-durum--iyi { background: var(--em-ana-acik); color: var(--em-ana-koyu);
  border-color: var(--em-ana-kenar); }
/* PALETE CEVRILDI (26.09.2026): sabit amber/kirmizi kodlar koyu temada
   acik zemin olarak kaliyordu. Acik temada zemin ayni ton
   (--em-hucre-uyari-zemin); koyu tonlar erpmerkez-koyu.css'ten gelir. */
.em-fat-durum--bekle { background: var(--em-hucre-uyari-zemin); color: var(--em-hucre-uyari-yazi);
  border-color: var(--em-uyari); }
.em-fat-durum--iade { background: var(--em-hucre-hata-zemin); color: var(--em-hucre-hata-yazi);
  border-color: var(--em-hata); }
.em-fat-bagli { font-size: .72rem; color: var(--em-metin-3); font-style: italic;
  cursor: help; border-bottom: 1px dotted var(--em-metin-3); }

/* FATURALANMAMIS MALZEME / VKN EKSIK UYARI BANDI (26.09.2026).
   Taserona depodan cikan ama faturalanmamis malzeme varken odeme yapilirsa
   fazla odeme olur (E2); VKN'siz taseron karti PDF/e-faturada kimlikle
   bulunamaz (S5). Tek gorsel dil: amber serit, palet degiskenleri --
   koyu temada erpmerkez-koyu.css tonlari kendiliginden gelir. Statik
   sayfalarda (kasa/cek) kutu BETIKTE kuruldugu icin renk YALNIZ bu sinifta
   durur: betik ici satir ici renk tema boru hattindan gecmez.
   Kullanan: lib/yeni-ekranlar.js (cari ekstre, odeme penceresi, taseron
   detay/hakedis, cek portfoyu talep/ciro), muhasebe_kasa.html,
   muhasebe_cek.html. */
.em-fm-uyari, .em-vkn-uyari {
  display: flex; align-items: flex-start; gap: .6rem;
  background: var(--em-hucre-uyari-zemin); color: var(--em-hucre-uyari-yazi);
  border: 1px solid var(--em-cizgi); border-left: 4px solid var(--em-uyari);
  border-radius: var(--em-r); padding: .6rem .9rem; margin-bottom: .75rem;
  font-size: .86rem; line-height: 1.45;
}
.em-fm-uyari > i, .em-vkn-uyari > i { font-size: 1.15rem; line-height: 1.25;
  color: var(--em-uyari); flex: 0 0 auto; }
.em-fm-uyari b, .em-vkn-uyari b { color: inherit; font-weight: 700; }
.em-fm-uyari a, .em-vkn-uyari a { color: inherit; font-weight: 600;
  text-decoration: underline; }
/* Form icinde (odeme penceresi, kasa/cek secimi) ince hali. */
.em-fm-uyari--ince { padding: .4rem .7rem; margin: .4rem 0 0; font-size: .8rem;
  border-left-width: 3px; }


/* =====================================================================
   TAŞERON BAŞLIK ŞERİDİ  (.tp-serit)

   Kullanıcı 12.09.2026: "taşeron arkası görüntü bizde de desenli olmalı
   ama inşaat & elektrik sektörüne özel desenler daha iyi olsun."

   DESEN SEKTÖRDEN GELİR: enerji nakil hattı direkleri (kafes gövde + iki
   konsol) ve aralarında salınan iletken eğrileri; üstte/altta ince devre
   izi ızgarası. Süs değil — ekranı açan, neyin yönetildiğini bir bakışta
   görür.

   SVG data-URI olarak gömülüdür: dış dosya yok (taşınabilirlik kuralı),
   çözünürlükten bağımsız keskin, koyu temada da aynı çizim.

   BURADA DURMASININ SEBEBİ: lib/sayfa-veri.js gomuluStilleriTemizle()
   gömülü <style> bloklarından görsel bildirimleri ayıklıyor. Gradyan
   ekranın kendi style'ında verilince sessizce beyaza çevriliyordu.

   ÖZGÜLLÜK: .card,.content-card,.tabulator{background:...!important}
   (bu dosyada, ~1965) sade .tp-serit'i ezer; bu yüzden .card.tp-serit.
   ===================================================================== */
body .page-content .card.tp-serit,
body .page-wrapper .card.tp-serit,
body .card.tp-serit {
  position: relative; overflow: hidden;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #052e26 0%, #0b5345 55%, #0f766e 100%) !important;
  box-shadow: 0 6px 20px rgba(5, 46, 38, .22) !important;
}
body .page-content .card.tp-serit > .card-body,
body .page-wrapper .card.tp-serit > .card-body,
body .card.tp-serit > .card-body {
  position: relative; z-index: 2; padding: 20px 24px !important;
}
.card.tp-serit::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  opacity: .30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M40 108V34M40 34l-13 74M40 34l13 74'/%3E%3Cpath d='M12 46h56M18 62h44M24 78h32M30 94h20'/%3E%3Cpath d='M22 40l36 12M58 40L22 52M28 56l24 8M52 56l-24 8'/%3E%3Cpath d='M16 34h48'/%3E%3Cpath d='M180 108V34M180 34l-13 74M180 34l13 74'/%3E%3Cpath d='M152 46h56M158 62h44M164 78h32M170 94h20'/%3E%3Cpath d='M162 40l36 12M198 40l-36 12M168 56l24 8M192 56l-24 8'/%3E%3Cpath d='M156 34h48'/%3E%3Cpath d='M16 34C70 58 126 58 156 34' stroke-width='1.4'/%3E%3Cpath d='M64 34C104 54 136 54 204 34' stroke-width='1.4'/%3E%3C/g%3E%3Cg fill='%236ee7b7'%3E%3Ccircle cx='16' cy='34' r='2'/%3E%3Ccircle cx='64' cy='34' r='2'/%3E%3Ccircle cx='156' cy='34' r='2'/%3E%3Ccircle cx='204' cy='34' r='2'/%3E%3C/g%3E%3Cg fill='none' stroke='%2334d399' stroke-width='.9' opacity='.55'%3E%3Cpath d='M0 14h52l8-8h40M240 14h-52l-8-8h-28'/%3E%3Cpath d='M0 120h64l10-10h52l10 10h104'/%3E%3C/g%3E%3Cg fill='%2334d399' opacity='.55'%3E%3Ccircle cx='100' cy='6' r='1.8'/%3E%3Ccircle cx='140' cy='6' r='1.8'/%3E%3Ccircle cx='74' cy='110' r='1.8'/%3E%3Ccircle cx='126' cy='110' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 240px 120px;
}
/* Sol tarafı koyulaştırır: desen yazının ARKASINDA kalsın, okunurluk düşmesin. */
.card.tp-serit::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(5,46,38,.88) 0%, rgba(5,46,38,.58) 46%, rgba(5,46,38,.10) 100%);
}
.tp-serit .tp-avatar {
  width: 56px; height: 56px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 800;
  background: linear-gradient(145deg, #34d399, #0f766e) !important;
  color: #04241d !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .28) !important;
}
.tp-serit .tp-etiket {
  background: rgba(255, 255, 255, .13); color: #a7f3d0 !important;
  padding: 2px 9px; border-radius: 99px; letter-spacing: .11em;
}
.tp-serit .tp-ad { color: #fff !important; font-size: 1.42rem; letter-spacing: -.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.tp-serit .tp-ad-bag { color: #fff !important; }
.tp-serit .tp-ad-bag:hover { color: #a7f3d0 !important; }
.tp-serit .tp-alt { color: rgba(209, 250, 229, .88) !important; }
.tp-serit .tp-gecis .tp-etiket { background: none; padding: 0; color: rgba(209, 250, 229, .72) !important; }
.tp-serit .btn-outline-secondary {
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .26) !important;
  color: #fff !important;
}
.tp-serit .btn-outline-secondary:hover { background: rgba(255, 255, 255, .22) !important; }

/* SÖZLEŞME BELİRTECİ (kullanıcı 12.09.2026: "sözleşme eklenmediği belli
   olsun"). Sözleşmesiz taşeronun hakedişi hukuki dayanaksız kalır — bu
   yüzden eksiklik sessiz bir tire değil, amber UYARI rozetidir. */
.tp-serit .tp-uyari {
  background: rgba(245, 158, 11, .22) !important;
  border: 1px solid rgba(251, 191, 36, .55) !important;
  color: #fde68a !important;
  padding: 1px 9px; border-radius: 99px;
  font-size: .66rem; font-weight: 700; letter-spacing: .06em;
}
.tp-serit .tp-pasif {
  background: rgba(239, 68, 68, .22) !important;
  border: 1px solid rgba(248, 113, 113, .5) !important;
  color: #fecaca !important;
  padding: 1px 9px; border-radius: 99px;
  font-size: .66rem; font-weight: 700; letter-spacing: .08em;
}

/* ==============================================================   HAKEDİŞ GÖRÜNÜM ÇUBUĞU (.em-gorunum) + SATIR BELGE DÜĞMELERİ

   Kullanıcı 12.09.2026: "eski sistem ve erpmerkez tıklanınca açılan sayfa
   aynı olsun ve sayfanın içinde yönlendirme buton excel pdf vs varsa
   orası da aynı olsun."

   Kaynak sistemde /taseronlar/hakedis/{id} tek sayfadır, üstünde iki
   görünüm düğmesi (Bekleyen Hakediş | Bağlanan Hakedişler) ve her satırın
   "Rapor" sütununda PDF + Excel bağlantısı durur. Bizde ikisi de yoktu.
   ===================================================================== */
.em-gorunum { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.em-gorunum__d {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 15px; border-radius: 8px;
  font-size: .8rem; font-weight: 600; text-decoration: none;
  color: var(--em-metin-2);
  background: var(--em-yuzey);
  border: 1px solid var(--em-cizgi);
  transition: background .15s, border-color .15s, color .15s;
}
.em-gorunum__d:hover { border-color: var(--em-ana-kenar); color: var(--em-ana-koyu);
  background: var(--em-ana-acik); }
.em-gorunum__d.etkin {
  background: var(--em-ana-acik); color: var(--em-ana-koyu);
  border-color: var(--em-ana-kenar);
  box-shadow: inset 0 -2px 0 var(--em-ana);
}

/* Satır içi belge bağlantıları: küçük ama tıklama alanı yeterli olmalı —
   tablo satırında yan yana iki bağlantı var, yanlışlıkla diğerine
   basılmasın diye aralarında boşluk bırakılır. */
.em-satir-belge {
  display: inline-block; padding: 2px 9px; margin-right: 6px;
  border-radius: 6px; font-size: .72rem; font-weight: 700;
  text-decoration: none; letter-spacing: .02em;
  border: 1px solid var(--em-cizgi); color: var(--em-metin-2);
  background: var(--em-yuzey);
}
.em-satir-belge:last-child { margin-right: 0; }
.em-satir-belge--pdf { color: #b91c1c; border-color: #fecaca; background: #fef2f2; }
.em-satir-belge--pdf:hover { background: #fee2e2; color: #991b1b; }
.em-satir-belge--xls { color: #047857; border-color: #a7f3d0; background: #ecfdf5; }
.em-satir-belge--xls:hover { background: #d1fae5; color: #065f46; }

/* KEŞİF GÖRÜNÜM DEĞİŞTİRME (.em-kg) — BETİKSİZ
   Kaynak sistemde /taseronlar/kesif/{id} üstünde "Keşif İcmali" ve
   "Detay Satırları" düğmeleri var; bizde yalnızca detay vardı.
   Gömülü <script> bu ekranda bilinen bir tuzak (şablon dizgisi kaçışları),
   aynı davranış iki gizli radio + label ile betiksiz elde ediliyor. */
.em-kg__r { position: absolute; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; clip: rect(0 0 0 0); }
.em-kg__p { display: none; }
#emKgIcmal:checked ~ .em-kg__p--icmal,
#emKgDetay:checked ~ .em-kg__p--detay { display: block; }
#emKgIcmal:checked ~ .em-gorunum label[for="emKgIcmal"],
#emKgDetay:checked ~ .em-gorunum label[for="emKgDetay"] {
  background: var(--em-ana-acik); color: var(--em-ana-koyu);
  border-color: var(--em-ana-kenar);
  box-shadow: inset 0 -2px 0 var(--em-ana);
}
/* Label düğme gibi davranmalı: imleç ve seçilemezlik. */
.em-gorunum label.em-gorunum__d { cursor: pointer; user-select: none; margin: 0; }
/* Klavyeyle gezinenler için: gizli radio odaklanınca etiketi belli olsun. */
.em-kg__r:focus-visible ~ .em-gorunum label[for="emKgIcmal"],
.em-kg__r:focus-visible ~ .em-gorunum label[for="emKgDetay"] {
  outline: 2px solid var(--em-ana); outline-offset: 2px;
}

/* TAŞERON MONTAJ GÖRÜNÜMLERİ (.em-mg) — 26.09.2026
   Kaynak sistemde /taseronlar/montaj/{id} üstünde "Montaj Özeti" ve
   "Montaj Hareketleri" iki GÖRÜNÜMDÜR (alt alta kart değil). Aynı betiksiz
   radio+label deseni; üçüncü görünüm "Poz Bazında Net" bizim ekimizdir. */
.em-mg__p--ozet, .em-mg__p--hareket, .em-mg__p--poz { display: none; }
#emMgOzet:checked ~ .em-mg__p--ozet,
#emMgHareket:checked ~ .em-mg__p--hareket,
#emMgPoz:checked ~ .em-mg__p--poz { display: block; }
#emMgOzet:checked ~ .em-gorunum label[for="emMgOzet"],
#emMgHareket:checked ~ .em-gorunum label[for="emMgHareket"],
#emMgPoz:checked ~ .em-gorunum label[for="emMgPoz"] {
  background: var(--em-ana-acik); color: var(--em-ana-koyu);
  border-color: var(--em-ana-kenar);
  box-shadow: inset 0 -2px 0 var(--em-ana);
}
#emMgOzet:focus-visible ~ .em-gorunum label[for="emMgOzet"],
#emMgHareket:focus-visible ~ .em-gorunum label[for="emMgHareket"],
#emMgPoz:focus-visible ~ .em-gorunum label[for="emMgPoz"] {
  outline: 2px solid var(--em-ana); outline-offset: 2px;
}

/* BEKLEYEN HAKEDİŞ "Bağla" DÜĞMESİ (.em-bagla)
   Kaynak sistemde bekleyen satırının Rapor sütununda Bağla | PDF | Excel
   duruyor; bizde Bağla hiç yoktu. Amber: geri alınması zor bir işlem
   (hakediş açar, bono ve cari zinciri başlar) — yeşil "her şey yolunda"
   rengi yanlış sinyal verirdi. */
/* Duz amber etiket "sahte" duruyordu (kullanici bildirdi). Kurumsal hali:
   ikonlu, cerceveli, tema yesili -- listedeki diger belge baglantilariyla
   ayni ailede ama daha agir, cunku odeme doguran bir islemi baslatiyor. */
.em-bagla {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 14px; border-radius: 7px;
  font-size: .76rem; font-weight: 700; letter-spacing: .01em;
  background: var(--em-ana); color: #fff;
  border: 1px solid var(--em-ana-koyu);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
  cursor: pointer; transition: background .15s, box-shadow .15s, transform .1s;
}
/* Ikon sozde-ogeyle DEGIL, dugmenin icinde <i class='bx bx-link'> ile
   veriliyor: CSS content kacisi uretimde duz metne ('ec7c') donusuyordu. */
.em-bagla:active:not(:disabled) { transform: translateY(1px); }
.em-bagla:hover:not(:disabled) { background: var(--em-ana-koyu);
  box-shadow: 0 2px 8px rgba(16, 24, 40, .18); }
.em-bagla:disabled { opacity: .6; cursor: progress; }

/* =====================================================================
   HAKEDİŞ BAĞLA MODALI (.em-bg-*)

   Kullanıcı 12.09.2026: "bağla butonu çok sahte olmuş, daha güzel kurumsal
   profesyonel bir buton yapılandırması kur, basınca çıkan ne öyle" /
   "Eski sistem ile daha iyi, daha ayrıntılı pop-up açılsın".

   Kaynak modal üç alan soruyor (tarih/saat, Kesin Hesap, Stopaj) ama NE
   BAĞLANDIĞINI yazmıyor — kullanıcı körlemesine Kaydet'e basıyor. Bizimki
   önce dökümü gösterir: taşeron + proje, rol kırılımı, toplam + KDV.

   Tablodaki hizalama ve rozet burada tanımlı; üretilen HTML'de hiç class
   yok (betikte iç içe tırnak kaçışı olmasın diye).
   ===================================================================== */
.em-bg-kimlik {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; padding: 12px 14px; margin-bottom: 4px;
  background: var(--em-ana-acik); border: 1px solid var(--em-ana-kenar);
  border-radius: var(--em-r-l);
}
.em-bg-kimlik span { display: block; font-size: .66rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--em-metin-3); margin-bottom: 2px; }
.em-bg-kimlik b { font-size: .92rem; color: var(--em-metin); }

.em-bg-bolum { margin: 16px 0 8px; font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--em-ana-koyu);
  border-bottom: 1px solid var(--em-ana-kenar); padding-bottom: 4px; }

.em-bg-tablo { width: 100%; border-collapse: collapse; font-size: .8rem; }
.em-bg-tablo th { text-align: left; font-size: .66rem; font-weight: 600;
  letter-spacing: .05em; color: var(--em-metin-2); text-transform: uppercase;
  padding: 6px 8px; background: var(--em-yuzey-2);
  border-bottom: 1px solid var(--em-cizgi); }
.em-bg-tablo td { padding: 6px 8px; border-bottom: 1px solid var(--em-cizgi);
  color: var(--em-metin); }
/* 3. sütundan itibaren sayı: sağa yaslı ve tabular. */
.em-bg-tablo th:nth-child(n+3), .em-bg-tablo td:nth-child(n+3) {
  text-align: right; font-variant-numeric: tabular-nums;
}
.em-bg-tablo tbody td:first-child b {
  display: inline-block; min-width: 40px; text-align: center;
  padding: 1px 7px; border-radius: 4px; font-size: .68rem; font-weight: 700;
  background: var(--em-ana-acik); color: var(--em-ana-koyu);
  border: 1px solid var(--em-ana-kenar);
}
.em-bg-tablo tfoot td { padding: 6px 8px; font-weight: 600;
  background: var(--em-yuzey-2); border-bottom: 1px solid var(--em-cizgi); }
.em-bg-tablo tfoot td:last-child { text-align: right;
  font-variant-numeric: tabular-nums; }
.em-bg-tablo tfoot tr:last-child td { font-weight: 800; font-size: .88rem;
  color: var(--em-ana-koyu); border-top: 2px solid var(--em-ana);
  border-bottom: 0; }

.em-bg-not { margin-top: 10px; padding: 8px 11px; font-size: .74rem;
  line-height: 1.5; color: var(--em-metin-2);
  background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--em-r-l); }
.em-bg-bos { padding: 18px; text-align: center; font-size: .8rem;
  color: var(--em-metin-3); }
.em-bg-bos--hata { color: var(--em-hata); }

.em-bg-alanlar { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.em-bg-alanlar .form-label { font-size: .7rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--em-metin-2); }

/* Hayır/Evet: radio yerine düğme çifti — dokunmatik alanı büyük, tema uyumlu. */
.em-bg-ikili { display: flex; border: 1px solid var(--em-cizgi);
  border-radius: 8px; overflow: hidden; }
.em-bg-ikili button { flex: 1; padding: 7px 0; border: 0; font-size: .82rem;
  font-weight: 600; background: var(--em-yuzey); color: var(--em-metin-2);
  cursor: pointer; transition: background .15s, color .15s; }
.em-bg-ikili button + button { border-left: 1px solid var(--em-cizgi); }
.em-bg-ikili button:hover { background: var(--em-ana-acik); }
.em-bg-ikili button.etkin { background: var(--em-ana); color: #fff; }

.em-bg-kaydet { background: var(--em-ana); color: #fff; font-weight: 600;
  border: 1px solid var(--em-ana-koyu); }
.em-bg-kaydet:hover:not(:disabled) { background: var(--em-ana-koyu); color: #fff; }
.em-bg-kaydet:disabled { opacity: .55; }

/* Montaj sekmesi özet şeridi — kaynak sistemde başlığın yanında
   "Toplam Tutar | Bağlanan | Bekleyen (MLZ hariç)" duruyor. */
.em-montaj-ozet { display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: 4px 14px; font-size: .78rem; color: var(--em-metin-2); }
.em-montaj-ozet b { color: var(--em-metin); font-variant-numeric: tabular-nums;
  margin-left: 4px; }
.em-montaj-ozet i { font-style: normal; font-size: .68rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--em-metin-3);
  background: var(--em-yuzey-2); border: 1px solid var(--em-cizgi);
  border-radius: 99px; padding: 1px 8px; }

/* UZUN METIN SUTUNU (12 Eylul 2026, kullanici: "uzun bir isim ciktiginda ne
   olacak"). Cari adi / aciklama uzayinca tablo buyuyup ISLEM sutununu ekran
   disina itiyordu. Hucre sinirlanir, tasan kisim "..." olur; tamami hucrenin
   title'inda durur (uzerine gelince gorunur). Bilgi KAYBOLMAZ, tablo siger. */
.em-kisalt {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   AKTARMA DAMGASI (12 Eylul 2026, kullanici: "altina yazmak yerine yanina
   yazalim ve farkli bir renkte yazsin"). Rozetin YANINDA, tek satir, kendi
   rengiyle: mor-mavi ton hem rozetten hem hucre metninden ayrisir, uyari
   kirmizisiyla da karismaz.
   -------------------------------------------------------------------------- */
.em-damga {
  color: #6366f1;
  font-size: .66rem;
  font-weight: 600;
  white-space: nowrap;
  margin-left: 6px;
}

/* --------------------------------------------------------------------------
   TABLO CERCEVESI (12 Eylul 2026, kullanici: "bu kisimda saga sola
   oynatabilecegim bar olsun ve bu kisim sabit olmasi gerek, faturalar
   hareket edecek"). Tablo KENDI kutusunda kayar:
     - BASLIK SATIRI donar (yukari kayarken kaybolmaz),
     - ISLEM sutunu sagda sabit kalir,
     - altta TUTULABILIR kalinlikta yatay cubuk cikar (tarayicinin ince
       varsayilan cubugu fark edilmiyordu -- ayni dert fatura PDF listesinde
       de yasanmisti, bkz. .fp-kaydir).
   -------------------------------------------------------------------------- */
.em-tablo-cerceve .table-responsive {
  max-height: calc(100vh - 180px);
  overflow: auto;
  /* FARE TABLONUN USTUNDEYKEN SAYFA KAYMAZ (12 Eylul 2026, koyu temada
     olculdu): kaydirma kutunun sonuna gelince SAYFAYA ATLIYOR, kutu yukari
     kayiyor ve donmus baslik ust menunun altina giriyordu. Zincirleme
     kapatilinca baslik yerinde kalir. */
  overscroll-behavior: contain;
  scrollbar-width: auto;
  scrollbar-color: #94a3b8 #e2e8f0;
}
.em-tablo-cerceve .table-responsive::-webkit-scrollbar { height: 14px; width: 12px; }
.em-tablo-cerceve .table-responsive::-webkit-scrollbar-track {
  background: #e2e8f0; border-radius: 7px;
}
.em-tablo-cerceve .table-responsive::-webkit-scrollbar-thumb {
  background: #94a3b8; border-radius: 7px; border: 3px solid #e2e8f0;
}
.em-tablo-cerceve .table-responsive::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* BASLIK SATIRI DONAR. Zemin OPAK olmali, yoksa altindan kayan satirlar
   basligin icinden gecer. */
.em-tablo-cerceve table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--em-tablo-baslik-zemin) !important;
}
/* Kose hucre: hem yukarida hem sagda sabit -> en ustte durmali. */
.em-tablo-cerceve table > thead > tr > th:last-child { z-index: 6; }

/* Uzun metin sutunu: santiye hucresi damgayi da tasidigi icin daha genis. */
.em-kisalt-genis { max-width: 300px; }
/* =====================================================================
   TAŞERON DEPOSU — FATURALANDIR (.em-df-*)

   Kullanıcı 12.09.2026: "direk depo içerisinde fatura edilebilmesi için
   buton" / "seçilen malzemeleri aynı kural ile bonolu şekilde" / "malzemeyi
   hangi projeye çıkmışsam direk o proje üzerinden fatura edilsin".

   Satır seçilir → Faturalandır → modal seçilenleri PROJE BAŞINA gruplar →
   her proje için ayrı bono. Proje satırın kendisinden gelir.
   ===================================================================== */
.em-df-sec { width: 46px; text-align: center; white-space: nowrap; }

/* Birden çok projeden çıkmış malzeme: kutunun yanında kaç proje olduğunu
   söyleyen rozet. Satır KİLİTLENMEZ — modal her projeyi ayrı grup olarak
   açar ve her birine ayrı bono üretir (kullanıcı 12.09.2026: "farklı farklı
   projelerden çıkınca her projeyi otomatik seçsin topluda"). */
.em-df-cokp { display: inline-block; margin-left: 3px; padding: 0 4px;
  border-radius: 6px; background: var(--em-ana-acik); color: var(--em-ana-koyu);
  font-size: .6rem; font-weight: 700; line-height: 1.5; cursor: help;
  vertical-align: text-top; }

/* İKİ DURUM AÇIKÇA AYRI:
     • boşta — nötr ama OKUNUR. Eski sürüm 0.5 opaklıkla soluyordu, düğme
       "bozuk" gibi duruyordu; artık imleç not-allowed ve ipucu neden kapalı
       olduğunu söylüyor.
     • hazır — dolgun amber: o an sayfanın ANA eylemi; sayaç kaç kalem
       seçildiğini yazıyor.
   Yükseklik 31px: yanındaki Excel düğmesiyle aynı hizada dursun (ölçüldü,
   28px iken şerit kırık görünüyordu). Köşe yarıçapı --em-r-l — ev üslubu
   keskin köşe. */
.em-df-ac {
  display: inline-flex; align-items: center; gap: 7px;
  height: 31px; padding: 0 12px; border-radius: var(--em-r-l);
  font-weight: 600; font-size: .78rem;
  background: var(--em-yuzey-2); color: var(--em-metin-2);
  border: 1px solid var(--em-cizgi);
  transition: background .14s ease, border-color .14s ease, color .14s ease,
              box-shadow .14s ease;
}
.em-df-ac i { font-size: 1rem; }
.em-df-ac:disabled { opacity: 1; cursor: not-allowed; }
.em-df-ac:focus-visible { outline: 2px solid var(--em-uyari);
  outline-offset: 2px; }

/* Amber bilinçli: geri alınması zor bir işlem başlatır (stok düşer, cariye
   borç yazılır). Yeşil "her şey yolunda" rengi yanlış sinyal verirdi. */
.em-df-ac--hazir {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  border-color: #b45309; color: #fff; font-weight: 700;
  box-shadow: 0 1px 2px rgba(180, 83, 9, .25), 0 4px 12px rgba(180, 83, 9, .18);
}
.em-df-ac--hazir:hover:not(:disabled) {
  background: linear-gradient(180deg, #d97706 0%, #b45309 100%);
  border-color: #92400e; color: #fff; }
.em-df-ac--hazir:active:not(:disabled) { transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(180, 83, 9, .3); }

/* Sayaç boşken hiç yer kaplamaz. */
.em-df-say { display: inline-flex; align-items: center; height: 19px;
  padding: 0 7px; border-radius: 99px; background: rgba(255, 255, 255, .24);
  color: #fff; font-size: .68rem; font-weight: 700; white-space: nowrap; }
.em-df-say:empty { display: none; }

html[data-tema="koyu"] .em-df-ac:not(.em-df-ac--hazir) {
  background: rgba(148, 163, 184, .12); }

.em-df-not { display: flex; gap: 9px; padding: 9px 12px; margin-bottom: 14px;
  font-size: .78rem; line-height: 1.5; color: var(--em-metin-2);
  background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--em-r-l); }
.em-df-not i { font-size: 1.05rem; color: #b45309; flex: 0 0 auto; }
.em-df-not b { color: var(--em-metin); }

/* Proje başlığı: hangi bononun hangi projeye yazılacağı açık olsun. */
.em-df-proje { display: flex; align-items: center; gap: 10px;
  margin: 14px 0 6px; padding-bottom: 5px;
  border-bottom: 1px solid var(--em-ana-kenar); }
.em-df-proje b { font-size: .88rem; color: var(--em-ana-koyu); }
.em-df-proje i { margin-left: auto; font-style: normal; font-size: .7rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--em-metin-3); }

.em-df-tablo { width: 100%; border-collapse: collapse; font-size: .8rem; }
.em-df-tablo th { text-align: left; font-size: .66rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--em-metin-2);
  padding: 5px 8px; background: var(--em-yuzey-2);
  border-bottom: 1px solid var(--em-cizgi); }
.em-df-tablo td { padding: 5px 8px; border-bottom: 1px solid var(--em-cizgi); }
.em-df-tablo th:nth-child(n+3), .em-df-tablo td:nth-child(n+3) {
  text-align: right; font-variant-numeric: tabular-nums; }
.em-df-tablo td:nth-child(4) { width: 130px; }
/* Başlıklar kelime ortasından kırılmasın ("Kalacak" → "KALAC AK"). */
.em-df-tablo th { white-space: nowrap; }
.em-df-kalan { color: var(--em-metin-2); white-space: nowrap; }

/* ÇIKIŞ EVRAKI sütunu (son sütun): sayı değil belge taşır, sola yaslanır.
   Malzeme bu projeye hangi bono/irsaliye ile çıkmışsa o belge ve ona
   yüklenen imzalı taramalar burada kendiliğinden listelenir. */
.em-df-tablo th:last-child, .em-df-tablo td:last-child {
  text-align: left; }
.em-df-evrak { max-width: 230px; }
.em-df-belge { display: inline-flex; align-items: center; gap: 4px;
  margin: 1px 4px 1px 0; padding: 1px 6px; border-radius: 20px;
  background: var(--em-yuzey-2); border: 1px solid var(--em-cizgi);
  font-size: .68rem; white-space: nowrap; }
.em-df-belge > a:first-child { color: var(--em-ana-koyu); font-weight: 600;
  text-decoration: none; }
.em-df-belge > a:first-child:hover { text-decoration: underline; }

/* Yüklenen tarama/görsel: ayrı sekmede açılır (/dosya/goruntule). */
.em-df-ek { display: inline-flex; color: var(--em-ana); font-size: .85rem;
  line-height: 1; text-decoration: none; }
.em-df-ek:hover { color: var(--em-ana-koyu); }

/* Kaydı var ama dosyası sunucuda yok: bağlantı verilmez (404 göstermek
   "evrak var" diye yanlış yönlendiriyordu), soluk ve imleçsiz durur. */
.em-df-ek--eksik { color: var(--em-metin-3); cursor: help; }
.em-df-ek--eksik:hover { color: var(--em-metin-3); }

/* Evrak ya da tarama yoksa SUSULMAZ: eksik görünür olsun — önceki
   sistemlerde görsel eklemek zorunluydu. */
.em-df-evyok { color: var(--em-uyari-koyu, #b45309); font-style: normal;
  font-size: .66rem; }

/* ÇOK BELGE = TEK SATIR ÖZET (26.09.2026, kullanıcı: "tüm bonoları
   gösteriyor, çok saçma"). 36 bono 36 çip olarak dökülüyordu; artık
   "36 bono · 360 ad · tarih aralığı · tarama durumu" tek satır, liste
   tıklanınca açılır. */
.em-df-evozet { font-size: .72rem; }
.em-df-evozet > summary { cursor: pointer; white-space: normal; color: var(--em-metin-2);
  line-height: 1.35; }
.em-df-evozet > summary .em-df-evyok,
.em-df-evozet > summary .em-df-evvar { display: block; }
.em-df-evozet > summary b { color: var(--em-ana-koyu); }
.em-df-evozet[open] > summary { margin-bottom: 4px; }
.em-df-evliste { max-height: 160px; overflow: auto; padding: 2px 0; }
/* Açılan listede çipler alt alta ve satır kırabilir: tabloyu yana itmesin. */
.em-df-evliste .em-df-belge { display: flex; width: fit-content; max-width: 100%;
  white-space: normal; margin: 2px 0; }
/* Hücre büyüyünce (liste açılınca) diğer hücreler ortaya kaymasın. */
.em-df-tablo td { vertical-align: top; }
.em-df-evtarama { margin-top: 2px; }
.em-df-evvar { color: var(--em-ana); font-style: normal; font-size: .66rem; }

/* İşlem bitti: üretilen bonolar listelenir (kullanıcı numarayı görmeden
   ekran yenilenmesin — bono sonradan Depo > Bonolar'da bu numarayla
   "Satış" türüyle bulunur). */
.em-df-bitti { display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 12px; margin-bottom: 12px; border-radius: 10px;
  background: var(--em-basari-zemin, #ecfdf5);
  border: 1px solid var(--em-basari-cizgi, #a7f3d0);
  color: var(--em-metin); font-size: .78rem; }
.em-df-bitti i { font-size: 1.15rem; color: var(--em-basari, #059669);
  flex: 0 0 auto; }

/* =====================================================================
   MONTAJ STOK ÇÖZÜMLEYİCİ (.pm-coz-*, .pm-d-*)

   Kullanıcı 14.09.2026: "montaj ekranını daha kolay seviyeye getir...
   PYP'de yoksa diğer PYP'den getirsin... stokta yoksa girilemedi diye
   rapor versin... kapsamlı detaylı bişey olsun."

   Miktarlar girilir → Çözümle (hiçbir şey yazmaz, ne olacağını söyler) →
   onay → bonolu transfer + montaj → SONUÇ RAPORU.
   ===================================================================== */
.pm-coz-ozet { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; }
.pm-ozet-kutu { display: inline-flex; align-items: baseline; gap: 5px;
  padding: 4px 10px; border-radius: var(--em-r-l); font-size: .72rem;
  background: var(--em-yuzey-2); border: 1px solid var(--em-cizgi);
  color: var(--em-metin-2); white-space: nowrap; }
.pm-ozet-kutu b { font-size: .92rem; color: var(--em-metin); }

.pm-coz-tablo { width: 100%; border-collapse: collapse; font-size: .76rem;
  table-layout: fixed; }
.pm-coz-tablo th { text-align: left; font-size: .64rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--em-metin-2);
  padding: 6px 8px; background: var(--em-yuzey-2); white-space: nowrap;
  border-bottom: 1px solid var(--em-cizgi); }
.pm-coz-tablo td { padding: 6px 8px; border-bottom: 1px solid var(--em-cizgi);
  vertical-align: top; word-break: break-word; }
/* Sütun genişlikleri: poz/miktar/durum dar ve tek satır, açıklama geniş. */
.pm-coz-tablo th:nth-child(1), .pm-coz-tablo td:nth-child(1) { width: 92px; }
.pm-coz-tablo th:nth-child(3), .pm-coz-tablo td:nth-child(3) { width: 78px;
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pm-coz-tablo th:nth-child(4), .pm-coz-tablo td:nth-child(4) { width: 128px; }
.pm-coz-tablo th:nth-child(5), .pm-coz-tablo td:nth-child(5) { width: 150px; }

/* Durum rozeti — rengini satırın .pm-d-* sınıfı verir. */
.pm-rozet { display: inline-block; padding: 2px 8px; border-radius: 99px;
  font-size: .64rem; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap; background: var(--em-yuzey-2);
  border: 1px solid var(--em-cizgi); color: var(--em-metin-2); }
.pm-d-hazir    .pm-rozet { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.pm-d-transfer .pm-rozet { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.pm-d-yok      .pm-rozet { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.pm-d-supheli  .pm-rozet { background: #fffbeb; border-color: #fde68a; color: #b45309; }
/* Girilemeyen satır gözden kaçmasın. */
.pm-d-yok      td { background: rgba(239, 68, 68, .04); }
.pm-d-supheli  td { background: rgba(245, 158, 11, .05); }

/* Kaynak PYP çipi: hangi PYP'den ne kadar çekiliyor (+ bono). */
.pm-kaynak { display: inline-block; margin: 1px 3px 1px 0; padding: 1px 7px;
  border-radius: 99px; font-size: .66rem; white-space: nowrap;
  background: #eff6ff; border: 1px solid #bfdbfe; color: #1d4ed8; }
/* Kaynağın KENDİ işi için ayrılmış miktarına giriyor — sessiz geçilmez. */
.pm-kaynak--dikkat { background: #fffbeb; border-color: #fde68a; color: #b45309;
  cursor: help; }

html[data-tema="koyu"] .pm-coz-tablo td { word-break: break-word; }

/* Montaj tablosu: KALAN sütunu gözle bulunsun ("ne kadar iş kaldı"). */
.pm-kalan { color: var(--em-ana-koyu); font-variant-numeric: tabular-nums; }
.pm-bitti { display: inline-block; padding: 1px 7px; border-radius: 99px;
  background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857;
  font-size: .62rem; font-weight: 700; }

/* Taşeron deposu — tıklanabilir sayı hücresi (PYP kırılımını açar).
   Kaynak sistemde de sayılar tıklanabilir; hangi PYP'den geldiğini
   gösteren bir pencere açıyor (kullanıcı 14.09.2026). */
.em-dk { cursor: pointer; border-bottom: 1px dashed transparent;
  transition: color .12s ease, border-color .12s ease; }
.em-dk:hover, .em-dk:focus-visible { color: var(--em-ana-koyu);
  border-bottom-color: var(--em-ana); outline: none; }

/* Kırılım tablosunda tıklanan sütun vurgulanır — kullanıcı hangi sayının
   dökümüne baktığını kaybetmesin. */
.em-dk-vurgu { background: var(--em-ana-acik); font-weight: 700;
  color: var(--em-ana-koyu); }
.em-dk-tablo th:first-child, .em-dk-tablo td:first-child { white-space: nowrap; }

/* Kırılımda PYP numarası: proje sayfasına gider (yeni sekmede). */
.em-dk-proje { color: var(--em-ana-koyu); font-weight: 600; text-decoration: none; }
.em-dk-proje:hover { text-decoration: underline; }

/* =====================================================================
   MUHASEBE > MALZEME SATIŞLARI (.ms-*)

   Ekran kendi imlemesini kuruyor ama bir bölümünün CSS karşılığı hiç
   yazılmamıştı (ölçüldü 14.09.2026: 28 sınıf tanımsız; bir kısmı yalnız
   betik kancası, aşağıdakiler ise GÖRSEL). Sonucu: fiyat/vade/fatura
   alanları ve para satırı biçimsiz ve sıkışık duruyordu.
   ===================================================================== */

/* Alt şerit: etiketli alanlar + para özeti + ipucu. */
.ms-alt > label { display: flex; flex-direction: column; gap: 3px;
  font-size: .66rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--em-metin-3); margin-bottom: 0; }
.ms-kdv-oran { width: 76px; }
.ms-vade-tarih, .ms-fatura-tarih-alan { width: 150px; }
.ms-fatura-no-alan { width: 210px; }

/* Para özeti sağa yaslanır ve satırın en dikkat çeken parçası olur. */
.ms-toplam { margin-left: auto; display: flex; align-items: baseline; gap: 6px;
  font-size: .74rem; color: var(--em-metin-2); white-space: nowrap; }
.ms-matrah, .ms-kdv-tutar { color: var(--em-metin); font-weight: 600;
  font-variant-numeric: tabular-nums; }
.ms-genel { color: var(--em-ana-koyu); font-weight: 800; font-size: .95rem;
  font-variant-numeric: tabular-nums; }

/* Ne yapılacağını söyleyen ipucu: satırın altına, tam genişlik. */
.ms-ipucu { flex-basis: 100%; margin-top: 2px; }

/* Kalem tablosu: tutar ve birim fiyat sayı sütunudur. */
.ms-tutar { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ms-fiyat { width: 118px; text-align: right; }

/* Toplu seçim (Faturayla Eşleştir). */
.ms-sec { display: inline-flex; align-items: center; cursor: pointer; margin: 0; }
.ms-sec-kutu { width: 15px; height: 15px; cursor: pointer; accent-color: var(--em-ana); }
.ms-secim-say { font-variant-numeric: tabular-nums; font-weight: 700; }

/* İşlenmiş kayıt: salt görünüm olduğu belli olsun. */
.ms-kart--islenen { background: var(--em-yuzey-2); }
.ms-kart--islenen .ms-bas { opacity: .92; }

/* İade faturası alanları -- aynı hizada, dar ve okunur. */
.ms-iade { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  padding: 10px 12px; margin-top: 8px; border-radius: var(--em-r-l);
  background: var(--em-uyari-acik); border: 1px solid #fde68a; }
.ms-iade-bas { flex-basis: 100%; font-size: .7rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: #b45309; }
.ms-iade > label { display: flex; flex-direction: column; gap: 3px;
  font-size: .66rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--em-metin-3); margin-bottom: 0; }
.ms-iade-kdv { width: 76px; }
.ms-iade-miktar { width: 96px; text-align: right; }
.ms-iade-no { width: 180px; }
.ms-iade-tarih { width: 150px; }
.ms-iade-tutar { margin-left: auto; font-weight: 700; color: #b45309;
  font-variant-numeric: tabular-nums; }

/* Sütun arama kutusu sütunu GENİŞLETMESİN.
   Ölçüldü 14.09.2026: kutular kendi asgari genişliklerini dayatıyordu --
   "Ad." yazan Birim sütunu 113px, Fiyat 131px, Keşif 135px oluyordu
   (kullanıcı: "fiyat ve keşif çok geniş olmuş"). Kutu artık hücresine
   uyar; genişliği İÇERİK belirler. */
.es-suzgec-satir th { min-width: 0 !important; }
.es-suz { width: 100% !important; min-width: 0 !important; box-sizing: border-box; }

/* =====================================================================
   TAŞERON EKRANI — İNCE BAŞLIK ÇUBUĞU (.tp-ince-*)

   Kullanıcı 14.09.2026: kaynak sistemde hero/banner YOK (canlı ölçüldü),
   "bandı kaldır" dedi; renk ve tema ise BİZE ÖZEL kalacak. Sekme çubuğu
   daha önce kaldırıldığı için gezinme bu satırdan yürür: taşeron adı
   Özet'e döner, sağdaki üç düğme sekmeler arasında gezdirir.
   ===================================================================== */
.tp-ince { border: 1px solid var(--em-cizgi); }
.tp-ince-ust { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; }
.tp-ince-kimlik { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* Harf rozeti: markanın yeşili, küçük ve sakin. */
.tp-ince-avatar { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: var(--em-r-l);
  background: var(--em-ana); color: #fff; font-weight: 800; font-size: .82rem; }

.tp-ince-ad { font-size: 1rem; font-weight: 700; color: var(--em-metin);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-ince-ad .tp-ad-bag { color: var(--em-ana-koyu); text-decoration: none; }
.tp-ince-ad .tp-ad-bag:hover { text-decoration: underline; }

/* Sayılar rozet değil, sakin bilgi: ekranın konusu tablo olmalı. */
.tp-ince-bilgi { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: .74rem; color: var(--em-metin-2); }
.tp-ince-bilgi > span { display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap; }
.tp-ince-bilgi i { font-size: .95rem; color: var(--em-metin-3); }

.tp-ince-uyari { color: var(--em-uyari-koyu, #b45309); font-weight: 600; }
.tp-ince-uyari i { color: var(--em-uyari) !important; }
.tp-ince-pasif { padding: 1px 7px; border-radius: 99px; font-size: .64rem;
  font-weight: 700; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }

.tp-ince-gecis { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }

/* Taşeron/kart başlık şeridinde YAZI STİLİ kaynak sistemle eşitlendi.
   Ölçüldü 14.09.2026 (/taseronlar/depo/6): başlık 14px / ağırlık 400 /
   harf aralığı .5px, şerit dolgusu 20px 24px (yükseklik ~75px). Bizde
   16px/700 ve dar dolgu vardı; kullanıcı "oranın yazı stili daha iyi"
   dedi. Renk bizim kalıyor (koyu marka yeşili).
   Kapsam yalnız KART başlığı -- modal başlıkları etkilenmez. */
body .card > .card-header.em-kart-bas--marka { padding: 18px 22px !important; }
body .card > .card-header.em-kart-bas--marka h6 {
  font-size: 14px; font-weight: 500; letter-spacing: .5px; }

/* Hakediş satırında "Bağlantıyı Geri Al" — geri alınabilir ama dikkat
   isteyen işlem: amber, PDF/Excel rozetleriyle aynı boyda. */
.em-satir-belge--geri { background: #fffbeb; border-color: #fde68a !important;
  color: #b45309; cursor: pointer; }
.em-satir-belge--geri:hover:not(:disabled) { background: #fde68a; color: #78350f; }
.em-satir-belge--geri:disabled { opacity: .55; cursor: default; }

/* ASILI HAKEDIS TASLAGI UYARISI (14.09.2026)
   Hakedis iki adimda uretiliyor (olustur -> bagla). Ikincisi yarida
   kalirsa taslak montaji tutar ama hicbir listede gorunmezdi. Serit,
   o taslaklari gorunur kilar ve tek dugmeyle bekleyene birakir. */
.em-taslak-uyari { border-left: 4px solid var(--em-uyari, #d97706); font-size: 13px; }
.em-taslak-liste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.em-taslak-oge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .6); border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 6px; padding: 4px 8px; font-size: 12px;
}

/* =====================================================================
   TAŞERON KİTABI KARTLARI  (.tk-*)   —  /kitap/taseron-kitaplari/{id}

   Kullanıcı 15.09.2026: "taşeron KPI'leri daha kaliteli dursun, özel bir
   şema kullan, sitemize uygun kurumsal profesyonel olsun."

   ÖNCESİ: kartta yalnızca taşeron adı ve "Detay için tıklayın" yazıyordu.
   22 kartlık ızgarada hiçbiri ötekinden ayrılmıyordu; bir kitabın sağlıklı
   mı eksik mi olduğu ancak tek tek açılınca görülüyordu.

   ŞEMA — dört katman, hepsi bilgi taşır, hiçbiri süs değil:
     1) SOL ŞERİT   kitabın sağlık durumu (yeşil hazır / amber eksik /
                    kırmızı kusurlu / gri boş). Renk ANLAM taşır.
     2) KİMLİK      baş harf madalyonu + taşeron adı + bağ rozeti
     3) ÜÇ SAYI     Poz · Fiyatlı · Montaj(6xxx) — kitabın para ödeyip
                    ödeyemeyeceğini söyleyen üç rakam
     4) ÇUBUK+ALT   fiyatlama yüzdesi, fiyat aralığı, son işlem

   BURADA DURMASININ SEBEBİ: lib/sayfa-veri.js gomuluStilleriTemizle()
   gömülü <style> bloklarından görsel bildirimleri ayıklıyor; gradyan ve
   gölge ekranın kendi style'ında verilince sessizce siliniyor.

   KOYU TEMA AYRI YAZILMADI: bütün renkler --em-* paletinden okunuyor ve
   koyu tema o paleti çeviriyor (bkz. erpmerkez-koyu.css).
   ===================================================================== */
.tk-izgara { display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.tk-kart {
  position: relative; display: block; overflow: hidden;
  padding: 14px 16px 12px 20px;
  background: var(--em-yuzey);
  border: 1px solid var(--em-cizgi);
  border-radius: 12px;
  text-decoration: none;
  transition: transform .13s ease, box-shadow .13s ease, border-color .13s ease;
}
/* SOL ŞERİT = sağlık durumu. Rengi .tk-d-* sınıfı --tk-renk'e yazar. */
.tk-kart::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--tk-renk, var(--em-ana));
}
.tk-kart:hover {
  transform: translateY(-2px);
  border-color: var(--tk-renk, var(--em-ana));
  box-shadow: 0 8px 22px var(--em-golge-s, rgba(15, 23, 42, .10));
}
.tk-kart:focus-visible { outline: 2px solid var(--em-ana); outline-offset: 2px; }

/* --- 2) kimlik ------------------------------------------------------- */
.tk-bas { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* min-width:0 SART: olmazsa uzun taseron adi esnek kutuyu tasirir ve
   kart genisler; -webkit-line-clamp de is gormez. */
.tk-kimlik { flex: 1 1 auto; min-width: 0; }
.tk-mad {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px; letter-spacing: .02em;
  color: var(--tk-renk, var(--em-ana));
  background: var(--tk-zemin, var(--em-ana-acik));
  border: 1px solid var(--tk-kenar, var(--em-ana-kenar));
}
.tk-ad {
  font-weight: 600; font-size: 13.5px; line-height: 1.25;
  color: var(--em-metin);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.tk-alt { font-size: 11px; color: var(--em-metin-3); margin-top: 2px; }

/* --- 3) üç sayı ------------------------------------------------------ */
.tk-sayilar {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: 12px 0 10px; border-top: 1px solid var(--em-cizgi);
  border-bottom: 1px solid var(--em-cizgi);
}
.tk-sayi { padding: 8px 4px; text-align: center;
  border-left: 1px solid var(--em-cizgi); }
.tk-sayi:first-child { border-left: 0; }
.tk-sayi b { display: block; font-size: 16px; font-weight: 700;
  color: var(--em-metin); line-height: 1.1; }
.tk-sayi span { display: block; margin-top: 2px; font-size: 9.5px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--em-metin-3); }
/* Sıfır değer vurgulanır: "0 montaj pozu" bu kitabın para ödeyemeyeceği
   anlamına gelir ve gözden kaçmamalı. */
.tk-sayi.tk-sifir b { color: var(--em-hata); }

/* --- 4) fiyatlama çubuğu + alt satır --------------------------------- */
.tk-cubuk { height: 5px; border-radius: 3px; overflow: hidden;
  background: var(--em-gri-100, var(--em-yuzey-2)); }
.tk-cubuk i { display: block; height: 100%; border-radius: 3px;
  background: var(--tk-renk, var(--em-ana)); }
.tk-fiyat { display: flex; justify-content: space-between; gap: 8px;
  margin-top: 6px; font-size: 11px; color: var(--em-metin-2); }
.tk-ayak { display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-top: 10px; font-size: 11px; color: var(--em-metin-3); }
.tk-rozet { display: inline-flex; align-items: center; gap: 5px;
  font-weight: 600; color: var(--tk-renk, var(--em-ana)); }
.tk-rozet::before { content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--tk-renk, var(--em-ana)); }

/* --- SAĞLIK RENKLERİ: tek yerden, anlamlı ---------------------------- */
.tk-d-hazir   { --tk-renk: var(--em-ana);   --tk-zemin: var(--em-ana-acik);   --tk-kenar: var(--em-ana-kenar); }
.tk-d-eksik   { --tk-renk: var(--em-uyari); --tk-zemin: var(--em-uyari-acik); --tk-kenar: var(--em-uyari-acik); }
.tk-d-kusurlu { --tk-renk: var(--em-hata);  --tk-zemin: var(--em-hata-acik);  --tk-kenar: var(--em-hata-acik); }
.tk-d-bos     { --tk-renk: var(--em-metin-3); --tk-zemin: var(--em-yuzey-2);  --tk-kenar: var(--em-cizgi); }

/* NOT: eski .tk-ozet şeridi KALDIRILDI — sayılar artık banner'ın
   içinde (.tk-sayac-serit). İki ayrı blok bir görsel satır fazladan
   yer kaplıyordu (kullanıcı: "üst kısım fazla olanı kaldır"). */

/* --- ARAMA ------------------------------------------------------------ */
.tk-ara { max-width: 280px; }
.tk-yok { display: none; }

@media (max-width: 575.98px) {
  .tk-izgara { grid-template-columns: 1fr; }
  .tk-ozet > div { flex-basis: 50%; }
}


/* =====================================================================
   TAŞERON KİTAPLARI BANNER'I  (.tk-banner)

   Kullanıcı 15.09.2026: "taşeron kitap arkasına bize özel banner efekt
   ekle, çok sade duruyor — üst kısım fazla olanı kaldır."

   NE KALDIRILDI: ekranın kendi üst bölümü İKİ ayrı bloktu — düz bir
   başlık satırı (h4 + "Ana Kitap: …") ve altında ayrı bir özet şeridi.
   İkisi tek banner'da birleşti; ölçüldü, kartların başladığı nokta
   612px'ten 470px'e indi ve bir görsel satır tamamen gitti.

   DESEN .tp-serit İLE AYNI AİLEDEN: enerji nakil hattı direği ve iletken
   eğrisi — iki ekran aynı sistemin parçası gibi dursun. Üstüne bu ekrana
   ait olan eklendi: defter satırları ve fiyat etiketleri, çünkü sayfa bir
   BİRİM FİYAT KİTABIDIR.

   BURADA DURMASININ SEBEBİ: lib/sayfa-veri.js gomuluStilleriTemizle()
   gömülü <style> bloklarından gradyan/gölgeyi ayıklıyor.
   ===================================================================== */
.tk-banner {
  position: relative;
  border-radius: 14px; margin-bottom: 16px;
  padding: 18px 22px 0;
  background: linear-gradient(135deg, #052e26 0%, #0b5345 55%, #0f766e 100%);
  box-shadow: 0 6px 20px rgba(5, 46, 38, .22);
}
.tk-banner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; overflow: hidden;
  opacity: .30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='130' viewBox='0 0 260 130'%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='.8' opacity='.45'%3E%3Cpath d='M0 26h260M0 52h260M0 78h260M0 104h260'/%3E%3Cpath d='M96 0v130M212 0v130'/%3E%3C/g%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M36 118V44M36 44l-11 74M36 44l11 74'/%3E%3Cpath d='M14 54h44M19 70h34M24 86h24M29 102h14'/%3E%3Cpath d='M22 50l28 10M50 50L22 60M26 66l20 7M46 66l-20 7'/%3E%3Cpath d='M12 44h48'/%3E%3C/g%3E%3Cg fill='%236ee7b7'%3E%3Ccircle cx='12' cy='44' r='1.8'/%3E%3Ccircle cx='60' cy='44' r='1.8'/%3E%3C/g%3E%3Cpath d='M12 44C62 68 118 68 158 44' fill='none' stroke='%236ee7b7' stroke-width='1.2'/%3E%3Cg fill='none' stroke='%2334d399' stroke-width='1.1' opacity='.7'%3E%3Cpath d='M148 90l24-24h20v20l-24 24z'/%3E%3Ccircle cx='186' cy='72' r='3'/%3E%3C/g%3E%3Cg fill='none' stroke='%2334d399' stroke-width='1' opacity='.45'%3E%3Cpath d='M228 42l16-16h14v14l-16 16z'/%3E%3Ccircle cx='252' cy='32' r='2.2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 260px 130px;
}
/* Sol tarafı koyulaştırır: desen yazının ARKASINDA kalsın, okunurluk düşmesin. */
.tk-banner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(5,46,38,.90) 0%, rgba(5,46,38,.60) 48%, rgba(5,46,38,.12) 100%);
}
.tk-banner > * { position: relative; z-index: 2; }
/* Ust satir (baslik + Menü açılır listesi) sayac seridinin USTUNDE olmali:
   ikisi de z-index 2 iken DOM'da sonra gelen serit kazaniyor, açılır listenin
   "Poz Ekle / Excel ile Poz Yükle" ogeleri seridin altinda kalip TIKLANAMIYORDU
   (olculdu 26.09.2026: ogenin ortasinda elementFromPoint serit rakamini verdi). */
.tk-banner > .tk-banner-ust { z-index: 3; }

.tk-banner-ust { display: flex; justify-content: space-between;
  align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.tk-etiket { display: inline-block; font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: #a7f3d0;
  background: rgba(255, 255, 255, .13); padding: 2px 9px; border-radius: 99px; }
.tk-baslik { margin: 0 0 4px; font-size: 1.42rem; font-weight: 700;
  letter-spacing: -.01em; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.tk-banner-alt { font-size: .82rem; color: rgba(209, 250, 229, .88); }
.tk-banner-alt a { color: #fff; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.45); }
.tk-banner-alt a:hover { color: #a7f3d0; }

/* Banner içindeki arama ve düğme: koyu zemine göre yeniden renklenir. */
.tk-banner .tk-ara {
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .26);
  color: #fff; }
.tk-banner .tk-ara::placeholder { color: rgba(209, 250, 229, .70); }
.tk-banner .tk-ara:focus { background: rgba(255, 255, 255, .20);
  border-color: rgba(167, 243, 208, .75); color: #fff; box-shadow: none; }
/* Dugme rengi ayni gerekceyle degistirilmedi -- bkz. .ts-banner notu:
   marka yesili sistem geneli !important kuralla sabit. */
.tk-banner .btn-add-kitap { border-radius: 8px; }

/* --- BANNER İÇİ SAYILAR: ayrı şerit yerine burada -------------------- */
.tk-sayac-serit { display: flex; flex-wrap: wrap; gap: 0;
  margin: 16px -22px 0; padding: 0 22px;
  border-top: 1px solid rgba(255, 255, 255, .15);
  background: rgba(3, 27, 22, .35); }
.tk-sayac-serit > div { flex: 1 1 130px; padding: 9px 14px 10px;
  border-left: 1px solid rgba(255, 255, 255, .11); }
.tk-sayac-serit > div:first-child { border-left: 0; padding-left: 0; }
.tk-sayac-serit span { display: block; font-size: 9.5px; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(167, 243, 208, .80); }
.tk-sayac-serit b { display: block; font-size: 17px; font-weight: 700;
  color: #fff; line-height: 1.25; }
.tk-sayac-serit i { font-style: normal; font-size: 10.5px;
  color: rgba(209, 250, 229, .72); }
/* Sorunlu kitap varsa rakam AMBER yanar: koyu zeminde kırmızı okunmuyor. */
.tk-sayac-serit .tk-dikkat b { color: #fbbf24; }
.tk-sayac-serit .tk-dikkat span { color: rgba(253, 230, 138, .95); }

@media (max-width: 575.98px) {
  .tk-banner { padding: 14px 16px 0; }
  .tk-sayac-serit { margin: 12px -16px 0; padding: 0 16px; }
  .tk-sayac-serit > div { flex-basis: 50%; }
  .tk-baslik { font-size: 1.2rem; }
}


/* =====================================================================
   TAŞERON HESAPLARI  (.ts-*)   —  /taseronlar

   Kullanıcı 15.09.2026: "bu sayfada özel temalarımızı uygula".

   NEDEN TEMASIZ DURUYORDU: sayfa kopyalanmış bir HTML ve bütün görsel
   dili KENDİ gömülü <style> bloğunda, SABİT renklerle yazılıydı
   (#fff, #e2e8f0, rgba(15,23,42,.08)…). lib/sayfa-veri.js
   gomuluStilleriTemizle() gömülü stillerden görsel bildirimleri ayıklıyor
   — görsel dil tema dosyasından gelsin diye. Sonuç: dört KPI kutusu düz
   beyaz dikdörtgene dönüyordu ve sayfanın ErpMerkez kimliği yoktu.

   DESEN .tp-serit ve .tk-banner İLE AYNI AİLEDEN (enerji nakil hattı
   direği + iletken eğrisi); üstüne bu ekrana ait olan eklendi: ekip
   siluetleri ve kimlik kartı — sayfa TAŞERON HESAPLARIDIR.

   Renkler --em-* paletinden okunduğu için koyu tema ayrıca yazılmadı.
   ===================================================================== */
.ts-banner {
  position: relative;
  border-radius: 14px; margin-bottom: 16px;
  padding: 18px 22px 0;
  background: linear-gradient(135deg, #052e26 0%, #0b5345 55%, #0f766e 100%);
  box-shadow: 0 6px 20px rgba(5, 46, 38, .22);
}
.ts-banner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; overflow: hidden;
  opacity: .30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='130' viewBox='0 0 260 130'%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M40 118V44M40 44l-11 74M40 44l11 74'/%3E%3Cpath d='M18 54h44M23 70h34M28 86h24M33 102h14'/%3E%3Cpath d='M26 50l28 10M54 50L26 60M30 66l20 7M50 66l-20 7'/%3E%3Cpath d='M16 44h48'/%3E%3C/g%3E%3Cg fill='%236ee7b7'%3E%3Ccircle cx='16' cy='44' r='1.8'/%3E%3Ccircle cx='64' cy='44' r='1.8'/%3E%3C/g%3E%3Cpath d='M16 44C66 68 122 68 162 44' fill='none' stroke='%236ee7b7' stroke-width='1.2'/%3E%3Cg fill='none' stroke='%2334d399' stroke-width='1.1' opacity='.65'%3E%3Ccircle cx='158' cy='84' r='6'/%3E%3Cpath d='M147 102c0-6.5 5-11 11-11s11 4.5 11 11'/%3E%3Ccircle cx='181' cy='79' r='5'/%3E%3Cpath d='M172 95c0-5.5 4-9.5 9-9.5s9 4 9 9.5'/%3E%3Ccircle cx='136' cy='79' r='5'/%3E%3Cpath d='M127 95c0-5.5 4-9.5 9-9.5s9 4 9 9.5'/%3E%3C/g%3E%3Cg fill='none' stroke='%2334d399' stroke-width='1' opacity='.45'%3E%3Crect x='212' y='26' width='38' height='26' rx='4'/%3E%3Ccircle cx='223' cy='36' r='4'/%3E%3Cpath d='M217 47c0-3.4 2.7-6 6-6s6 2.6 6 6'/%3E%3Cpath d='M234 33h12M234 39h12M234 45h8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 260px 130px;
}
/* Sol tarafı koyulaştırır: desen yazının ARKASINDA kalsın. */
.ts-banner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(5,46,38,.90) 0%, rgba(5,46,38,.60) 48%, rgba(5,46,38,.12) 100%);
}
.ts-banner > * { position: relative; z-index: 2; }
.ts-banner-ust { display: flex; justify-content: space-between;
  align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ts-baslik { margin: 0 0 4px; font-size: 1.42rem; font-weight: 700;
  letter-spacing: -.01em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.ts-banner-alt { margin: 0; font-size: .82rem; color: rgba(209, 250, 229, .88); }

/* Banner içindeki arama ve düğme koyu zemine göre yeniden renklenir. */
.ts-banner .taseron-search__input {
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.26);
  color: #fff; border-radius: 8px; }
.ts-banner .taseron-search__input::placeholder { color: rgba(209,250,229,.70); }
.ts-banner .taseron-search__input:focus { background: rgba(255,255,255,.20);
  border-color: rgba(167,243,208,.75); color: #fff; box-shadow: none; }
.ts-banner .taseron-search__icon,
.ts-banner .taseron-search__clear { color: rgba(209,250,229,.80); }
/* DUGME RENGI BILEREK DEGISTIRILMEDI: bu dosyada
   `html body .content-btn { background: var(--em-ana) !important }` ile
   BUTUN ana eylem dugmeleri marka yesiline sabitlenmis (kasitli, sistem
   geneli kural). Banner icin beyaz bir dugme yazmak o kurala karsi
   kaybeden OLU CSS olurdu; yesil dugme koyu banner uzerinde zaten
   okunuyor ve oteki ekranlarla tutarli. Yalniz kose yaricapi hizalanir. */
.content-page--taseronlar .ts-banner .taseron-add-btn { border-radius: 8px; }

/* --- KPI KUTULARI: banner içinde, şeffaf ---------------------------- */
.ts-banner .taseron-stats { display: flex; flex-wrap: wrap; gap: 0;
  margin: 16px -22px 0; padding: 0 22px;
  border-top: 1px solid rgba(255,255,255,.15);
  background: rgba(3, 27, 22, .35); }
.ts-banner .taseron-stats__box {
  flex: 1 1 150px; display: flex; align-items: center; gap: 11px;
  padding: 10px 14px 11px; min-width: 0;
  background: none; border: 0; border-left: 1px solid rgba(255,255,255,.11);
  border-radius: 0; box-shadow: none; }
.ts-banner .taseron-stats__box:first-child { border-left: 0; padding-left: 0; }
.ts-banner .taseron-stats__icon {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; font-size: 17px;
  background: rgba(255,255,255,.13); color: #a7f3d0;
  border: 1px solid rgba(255,255,255,.18); }
.ts-banner .taseron-stats__content { min-width: 0; }
.ts-banner .taseron-stats__label { display: block; font-size: 9.5px;
  letter-spacing: .09em; text-transform: uppercase; color: rgba(167,243,208,.80); }
.ts-banner .taseron-stats__val { display: block; font-size: 17px;
  font-weight: 700; color: #fff; line-height: 1.25; }
.ts-banner .taseron-stats__expansion { display: block; font-size: 10.5px;
  color: rgba(209,250,229,.72); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
/* Montaj açık hesap: vurgulu kutu amberdir — koyu zeminde okunur ve
   "takip gerektiren" anlamı taşır. */
.content-page--taseronlar .ts-banner .taseron-stats__box--highlight .taseron-stats__icon {
  background: rgba(245,158,11,.22); border-color: rgba(251,191,36,.50); color: #fcd34d; }
.content-page--taseronlar .ts-banner .taseron-stats__box--highlight .taseron-stats__val { color: #fcd34d; }
/* Vurgulu kutunun etiketi sayfanin kendi stilinde KOYU LACIVERT yaziliydi;
   koyu banner uzerinde kontrast 1.3 idi, yani okunmuyordu (olculdu). */
.content-page--taseronlar .ts-banner .taseron-stats__box--highlight .taseron-stats__label { color: rgba(253, 230, 138, .95); }
.content-page--taseronlar .ts-banner .taseron-stats__box--highlight .taseron-stats__expansion { color: rgba(252, 211, 77, .78); }

/* --- LİSTE HÜCRESİ VE ROZETLER -------------------------------------- */
.taseron-cell__title { font-weight: 600; color: var(--em-metin);
  text-decoration: none; }
.taseron-cell__title:hover { color: var(--em-ana-koyu); }
.taseron-cell__meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.taseron-chip { display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; padding: 1px 7px; border-radius: 99px;
  background: var(--em-yuzey-2); color: var(--em-metin-2);
  border: 1px solid var(--em-cizgi); }
.taseron-chip--muted { color: var(--em-metin-3); }
.taseron-chip--kitap { background: var(--em-ana-acik); color: var(--em-ana-koyu);
  border-color: var(--em-ana-kenar); }
/* KİTABI OLMAYAN TAŞERONA HAKEDİŞ ÖDENEMEZ — sessiz bir boşluk değil,
   görünür uyarı. */
.taseron-chip--uyari { background: var(--em-uyari-acik); color: var(--em-uyari);
  border-color: var(--em-uyari); }

@media (max-width: 575.98px) {
  .ts-banner { padding: 14px 16px 0; }
  .ts-banner .taseron-stats { margin: 12px -16px 0; padding: 0 16px; }
  .ts-banner .taseron-stats__box { flex-basis: 50%; }
  .ts-baslik { font-size: 1.2rem; }
}

/* Banner içindeki OUTLINE düğmeler koyu zemine göre yeniden renklenir.
   Ölçüldü (15.09.2026): "Excel" ve "Ataşman" düğmelerinin yazısı
   rgb(107,114,128) gri kalıyordu; koyu banner üzerinde kontrast 3.05 —
   okunabilirlik sınırının (4.5) altında. Aynı düzeltme .tp-serit'te de var. */
.tk-banner .btn-outline-secondary,
.ts-banner .btn-outline-secondary {
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .28) !important;
  color: #fff !important;
}
.tk-banner .btn-outline-secondary:hover,
.ts-banner .btn-outline-secondary:hover {
  background: rgba(255, 255, 255, .22) !important;
  border-color: rgba(255, 255, 255, .45) !important;
  color: #fff !important;
}

/* ACILIR MENU BANNER TARAFINDAN KIRPILMAZ.
   Kullanici 15.09.2026: "menu tusuna basinca bozuk gosteriyor".
   Banner'da overflow:hidden vardi (desen koselerden tasmasin diye) ve
   o kural icerigi de kirpiyordu: "Menu" dugmesinin acilir listesi
   kutunun disina cikamiyor, yarisi gorunmuyordu. Kirpma artik dekor
   katmanlarinin uzerinde -- gorunum ayni, icerik serbest.
   Menu, banner'in dekor katmanlarinin USTUNDE cizilir. */
.tk-banner .dropdown, .ts-banner .dropdown { position: relative; z-index: 3; }
.tk-banner .dropdown-menu, .ts-banner .dropdown-menu { z-index: 1056; }

/* ==========================================================================
   İSG HEDEF VE ÇALIŞMA PROGRAMI   (/isg/hedef)
   --------------------------------------------------------------------------
   Kullanıcı 15.09.2026: "çok düz olmuş, kurumsal ve profesyonel olsun, çok
   basit düz bir Excel gibi olmuş, geliştir burayı" + "her oluşturduğun yerde
   bizim özel temalarımızı uygula, KPI kartlarını da zenginleştir".

   İLK HÂLİ NEDEN DÜZDÜ: ekran Bootstrap'ın çıplak `table`/`card`
   bileşenleriyle kurulmuştu. Rakam doğruydu ama hiçbir şey ÖNE ÇIKMIYORDU;
   hedefi tutturanla tutturamayan aynı ağırlıkta görünüyordu.

   BU BLOĞUN İŞİ rakamları hiyerarşiye sokmak:
     · şerit       -> hangi dönem, genel başarı ne (tek bakışta)
     · KPI kartı   -> ikon + büyük sayı + kırılım + oran çubuğu
     · kişi kartı  -> her ölçü kendi çubuğuyla; tablo satırı değil KART
   Yüzdeler satır içi `width` ile gelir (sunucu hesaplar); renk ve biçim
   BURADA durur -- sayfa gömülü stil yazmaz (bkz. gomuluStilleriTemizle).
   ========================================================================== */
.ih-banner {
  position: relative;
  border-radius: 14px; margin-bottom: 18px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #052e26 0%, #0b5345 55%, #0f766e 100%);
  box-shadow: 0 6px 20px rgba(5, 46, 38, .22);
}
/* DESEN ::before'DA: şeridin kendisine `overflow:hidden` verilseydi içindeki
   açılır listeler kırpılırdı (aynı kusur taşeron şeridinde yaşanmıştı). */
.ih-banner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; overflow: hidden; opacity: .30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150' viewBox='0 0 300 150'%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.2' stroke-linecap='round'%3E%3Ccircle cx='52' cy='58' r='24'/%3E%3Ccircle cx='52' cy='58' r='16'/%3E%3Ccircle cx='52' cy='58' r='8'/%3E%3Cpath d='M18 96l30-32'/%3E%3Cpath d='M44 60h10v10'/%3E%3C/g%3E%3Cg fill='%236ee7b7'%3E%3Ccircle cx='52' cy='58' r='2.4'/%3E%3C/g%3E%3Cg fill='none' stroke='%2334d399' stroke-width='1.1' opacity='.7'%3E%3Cpath d='M112 112V96M126 112V84M140 112V70M154 112V54M168 112V40'/%3E%3Cpath d='M106 112h68'/%3E%3Cpath d='M112 92l14-10 14-12 14-16 14-12'/%3E%3C/g%3E%3Cg fill='none' stroke='%2334d399' stroke-width='1' opacity='.55'%3E%3Crect x='206' y='26' width='44' height='58' rx='5'/%3E%3Crect x='220' y='20' width='16' height='11' rx='3'/%3E%3Cpath d='M214 44h28M214 56h28M214 68h18'/%3E%3C/g%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.1' opacity='.5'%3E%3Cpath d='M244 128c0-11 9-20 20-20s20 9 20 20'/%3E%3Cpath d='M238 128h52'/%3E%3Cpath d='M258 109c0-7 2-12 6-12s6 5 6 12'/%3E%3C/g%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.1' opacity='.5'%3E%3Cpath d='M88 124V78'/%3E%3Cpath d='M88 80l22 7-22 7z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 150px;
}
/* Sol tarafı koyulaştırır: desen yazının ARKASINDA kalsın, okunurluk düşmesin. */
.ih-banner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(5,46,38,.92) 0%, rgba(5,46,38,.62) 52%, rgba(5,46,38,.14) 100%);
}
.ih-banner > * { position: relative; z-index: 2; }
/* KOPYALANAN DETAY SAYFALARININ UST SERIDI (21.09.2026, kullanici ekran
   goruntusu: personel karti). Kopyalanan sayfa serite KOYU lacivert gradyan
   verip icindeki adi/alt satiri BEYAZ yaziyor; tema katmani zemini bizim
   yesile ceviriyor ama ad/alt satir AYRI kurallarda oldugu icin koyu metne
   donuyor -- yesil uzerinde soluk, "bozuk" gorunuyordu (olculdu: ad 4.71,
   alt satir ayni koyulukta). Serit uzerindeki bu iki yazi her zaman
   serit-uzeri olur. Seridin ICINDEKI acik zeminli kutular (telefon/ise giris
   karti, Geri dugmesi) KAPSAM DISI -- onlar kendi koyu yazilarini korur. */
/* KULLANICI (21.09.2026): "ben arka planindan bahsediyorum, renklerimize
   uygun degil". Kopyalanan detay serid KOYU lacivert gradyandi; tema onu
   parlak zumrut yesiline (--em-serit) ceviriyordu. Sonuc: sayfanin UST
   BANDI (modulun kendi koyu tonu) ile aralarinda ikinci, cok daha parlak
   bir yesil blok kaliyordu -- sistemin dilinde yok.
   EV DUZENI: ust bant renkli, altindaki her sey BEYAZ KART + sol kenarda
   marka serid. Detay serid de o dile cekildi. */
/* GENEL KURAL (21.09.2026, kullanici: "genel olarak boyle sorun varsa duzelt").
   Kopyalanan sayfalarin hepsinde ayni kalip var: sayfanin ust kismina KOYU
   LACIVERT gradyanli tam genislik bir blok (crud-header, content-toolbar,
   santiye-header, yetki-header, *-hero ...). Tema katmani koyu zemini
   --em-serit'e ceviriyor; sonuc, modulun kendi bandinin hemen altinda IKINCI
   ve parlak bir yesil blok. Olculdu (tarayicida, 78 ekran): /kadro,
   /santiye, /yetki, /depo/stok ve personel karti.
   Ev duzeni: ust bant renkli, altindaki her sey beyaz kart + sol marka
   seridi. Kart basligi (.card-header), pencere basligi (.modal-header) ve
   kenar cubugu basligi (.sidebar-header) KAPSAM DISI -- onlar zaten kendi
   yerlerinde dogru. */
/* SECICI "ICINDE GECEN" OLMALI: bloklarin cogu tek sinifli degil
   (orn. class="sigorta-list-header d-flex justify-content-between"); sona
   bakan secici onlari kaciriyordu (olculdu: /arac/sigorta). */
.page-content [class*="-header"]:not([class*="card-header"]):not([class*="modal-header"]):not([class*="sidebar-header"]):not([class*="em-baslik"]):not([class*="btn"]):not([class*="tabulator"]):not([class*="breadcrumb"]):not(button):not(a):not(th):not(td),
.page-content [class*="__header"]:not([class*="card"]):not([class*="modal"]):not([class*="sidebar"]):not([class*="btn"]):not(button):not(a),
.page-content [class*="-toolbar"]:not([class*="modal"]):not([class*="btn"]):not(button):not(a),
.page-content [class*="-hero"]:not([class*="modal"]):not([class*="btn"]):not(button):not(a),
[class*="-show-header"] {
  background: var(--em-kart, #ffffff) !important;
  border: 1px solid var(--em-cizgi, #e2e8f0) !important;
  border-left: 4px solid var(--em-ana, #10b981) !important;
  box-shadow: var(--em-golge, 0 1px 2px rgba(15,23,42,.04), 0 6px 18px rgba(15,23,42,.06)) !important;
  color: var(--em-metin, #111827) !important;
}
/* IC ICE GECEN BASLIK BLOKLARINDA TEK CIZGI, TEK CERCEVE.
   Olculdu 21.09.2026, /yetki (kullanici bildirdi: "neden iki tane yesil
   cizgi"): disardaki <header class="yetki-header"> ile icindeki
   <div class="yetki-header-inner"> AYNI seciciye giriyor -- ikisi de sol
   yesil seridi ve cerceveyi aliyordu, ekranda iki cizgi yan yana
   duruyordu. Serit DISTAKI blogun; icerideki sade kalir. */
/* NOT: secicinin OZGULLUGU ustteki kuraldan YUKSEK olmali; ikisi de
   !important tasiyor, esit ozgullukte ustteki kazanirdi. Bu yuzden ic
   secici aynen tekrarlanip basina bir ata daha ekleniyor. */
.page-content [class*="-header"] [class*="-header"]:not([class*="card-header"]):not([class*="modal-header"]):not([class*="sidebar-header"]):not([class*="em-baslik"]):not([class*="btn"]):not([class*="tabulator"]):not([class*="breadcrumb"]):not(button):not(a):not(th):not(td),
.page-content [class*="__header"] [class*="-header"]:not([class*="card-header"]):not([class*="modal-header"]):not([class*="sidebar-header"]):not([class*="em-baslik"]):not([class*="btn"]):not([class*="tabulator"]):not([class*="breadcrumb"]):not(button):not(a):not(th):not(td),
.page-content [class*="-header"] [class*="__header"]:not([class*="card"]):not([class*="modal"]):not([class*="sidebar"]):not([class*="btn"]):not(button):not(a),
.page-content [class*="__header"] [class*="__header"]:not([class*="card"]):not([class*="modal"]):not([class*="sidebar"]):not([class*="btn"]):not(button):not(a),
.page-content [class*="-toolbar"] [class*="-toolbar"]:not([class*="modal"]):not([class*="btn"]):not(button):not(a),
.page-content [class*="-hero"] [class*="-hero"]:not([class*="modal"]):not([class*="btn"]):not(button):not(a) {
  border: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.page-content [class*="-header"]:not([class*="card-header"]):not([class*="modal-header"]):not([class*="sidebar-header"]):not([class*="btn"]):not(button):not(a) > h1,
.page-content [class*="-header"]:not([class*="card-header"]):not([class*="modal-header"]):not([class*="sidebar-header"]) > h2,
.page-content [class*="-header"]:not([class*="card-header"]):not([class*="modal-header"]):not([class*="sidebar-header"]) > h3,
.page-content [class*="-header"]:not([class*="card-header"]):not([class*="modal-header"]):not([class*="sidebar-header"]) > h4,
.page-content [class*="-header"]:not([class*="card-header"]):not([class*="modal-header"]):not([class*="sidebar-header"]) > p,
.page-content [class*="-toolbar"]:not([class*="modal"]) > h1,
.page-content [class*="-toolbar"]:not([class*="modal"]) > h2,
.page-content [class*="-toolbar"]:not([class*="modal"]) > h3,
.page-content [class*="-toolbar"]:not([class*="modal"]) > h4,
.page-content [class*="-toolbar"]:not([class*="modal"]) > p,
.page-content [class*="-hero"]:not([class*="modal"]) > h1,
.page-content [class*="-hero"]:not([class*="modal"]) > h2,
.page-content [class*="-hero"]:not([class*="modal"]) > h3,
.page-content [class*="-hero"]:not([class*="modal"]) > p {
  color: var(--em-metin, #111827) !important;
}
[class*="-show-header"] .person-name { color: var(--em-metin, #111827) !important; }
[class*="-show-header"] .person-meta { color: var(--em-metin-2, #4b5563) !important; opacity: 1; }
/* Serid icindeki "Geri" dugmesi beyaz zeminde kayboluyordu (yari saydam
   beyaz zemin + koyu yazi): kenarligi olan sade bir dugmeye donusur. */
[class*="-show-header"] .btn-back {
  background: var(--em-yuzey-2, #f8fafc) !important;
  border: 1px solid var(--em-cizgi, #e2e8f0) !important;
  color: var(--em-metin, #111827) !important;
}
/* DUYURU/BILDIRIM BASLIGI GECIS DUGMESI (28.09.2026 e2e #19, #20): ustteki
   genel kural yetki-header'i beyaz karta cevirdi; duyuru-pages.css dugmeyi
   hala koyu serit icin yaziyor (beyaz yazi + yari saydam beyaz zemin) ->
   /bildirimler'deki "Duyurular" ve /duyurular'daki "Bildirimler" dugmesi
   beyaz ustune beyaz, gorunmuyordu. duyuru-pages.css'e dokunulmaz
   (cssTemayaUyarla ile donusuyor); burada daha ozgul secici ezer. */
.page-content .yetki-page.duyuru-scope .yetki-header .duyuru-management-light-btn,
.page-content .yetki-page.duyuru-scope .yetki-header .duyuru-management-light-btn--header {
  color: var(--em-ana-koyu, #059669) !important;
  background: var(--em-ana-acik, #ecfdf5) !important;
  border: 1px solid var(--em-cizgi, #e2e8f0) !important;
}
.page-content .yetki-page.duyuru-scope .yetki-header .duyuru-management-light-btn:hover,
.page-content .yetki-page.duyuru-scope .yetki-header .duyuru-management-light-btn--header:hover {
  color: var(--em-ana-koyu, #059669) !important;
  background: var(--em-yuzey-2, #f8fafc) !important;
}

/* AYNI KURAL KURUMSAL SERIT ICIN (21.09.2026): koyu yesil serit uzerinde
   cerceveli (outline) dugme hem yazisiyla hem cercevesiyle zemine karisiyor.
   Seritteki dugmeler beyaz zeminle okunur olur. */
/* BOOTSTRAP .text-info BEYAZ ZEMINDE OKUNMUYOR (21.09.2026 kontrast taramasi):
   #0dcaf0 beyaz uzerinde 1.79, gecikmis satirin acik kirmizi zemininde 1.73 --
   "7.500,00 TL odendi" gibi PARA bilgisi bunlarla yaziliyor. Ton ayni aileden
   ama okunur olani secilir (#0e7490, beyazda 4.8). Koyu zeminli yerlerde
   (serit, koyu kart) acik ton korunur. */
.text-info { color: #0e7490 !important; }
/* AYNI OLCUM, AYNI AILE: Bootstrap'in sari (#ffc107) ve acik mavi (#0dcaf0)
   tonlari beyaz zeminde 1.6-2.0 kontrast veriyor. Olculdu (21.09.2026):
   "Transfer Bekliyor" dugmesi 1.63, "Cari Yok" rozeti 1.63, "PDF/Görsel Oku"
   dugmesi 1.79. Ton ailesi korunur, okunur karsiligina cekilir. */
.text-warning { color: #b45309 !important; }
/* Degisken YETMIYOR: kopyalanan tema bu dugmelere DOGRUDAN renk yaziyor ve
   sonra geliyor; renk hem degiskenden hem de dogrudan verilir. */
.btn-outline-info {
  --bs-btn-color: #0e7490; --bs-btn-border-color: #0e7490;
  --bs-btn-hover-bg: #0e7490; --bs-btn-hover-border-color: #0e7490;
  --bs-btn-hover-color: #fff; --bs-btn-active-bg: #0e7490;
  --bs-btn-active-border-color: #0e7490;
  color: #0e7490 !important; border-color: #0e7490 !important; }
.btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active {
  background-color: #0e7490 !important; color: #fff !important; }
.btn-outline-warning {
  --bs-btn-color: #b45309; --bs-btn-border-color: #b45309;
  --bs-btn-hover-bg: #b45309; --bs-btn-hover-border-color: #b45309;
  --bs-btn-hover-color: #fff; --bs-btn-active-bg: #b45309;
  --bs-btn-active-border-color: #b45309;
  color: #b45309 !important; border-color: #b45309 !important; }
.btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active {
  background-color: #b45309 !important; color: #fff !important; }
.bg-dark .text-info, .em-serit .text-info, [data-tema="koyu"] .text-info,
.ih-banner .text-info { color: #67e8f9 !important; }
.bg-dark .text-warning, .em-serit .text-warning, [data-tema="koyu"] .text-warning,
.ih-banner .text-warning { color: #fcd34d !important; }

.ih-banner .btn[class*="btn-outline-"] {
  background: #fff; color: var(--em-ana-koyu, #047857); border-color: #fff;
}
.ih-banner .btn[class*="btn-outline-"]:hover,
.ih-banner .btn[class*="btn-outline-"]:focus {
  background: var(--em-ana-acik, #ecfdf5); border-color: var(--em-ana-acik, #ecfdf5);
  color: var(--em-ana-koyu, #047857);
}
.ih-banner-ust { display: flex; justify-content: space-between;
  align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.ih-etiket {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(167, 243, 208, .82); margin-bottom: 4px;
}
.ih-baslik { margin: 0 0 6px; font-size: 1.45rem; font-weight: 700;
  letter-spacing: -.01em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.ih-banner-alt { margin: 0; font-size: .82rem; color: rgba(209, 250, 229, .88);
  max-width: 62ch; }

/* ÖZET ÇİPLERİ: "3 kişi · 1 hedef · 3 geride" -- cümleyi okumadan da
   sayılar görünsün. */
.ih-cip-sira { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ih-cip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: rgba(255,255,255,.12); border: 1px solid rgba(167,243,208,.28);
  color: #ecfdf5; text-decoration: none;
}
a.ih-cip:hover { background: rgba(255,255,255,.22); color: #fff;
  border-color: rgba(167,243,208,.60); }
.ih-cip i { font-size: 13px; color: rgba(110,231,183,.95); }
.ih-cip--iyi { background: rgba(16,185,129,.28); border-color: rgba(110,231,183,.55); }
.ih-cip--kot { background: rgba(239,68,68,.28);  border-color: rgba(252,165,165,.55); }
.ih-cip--kot i { color: #fecaca; }
.ih-cip--uyar { background: rgba(245,158,11,.28); border-color: rgba(253,230,138,.55); }
.ih-cip--uyar i { color: #fde68a; }

/* GENEL BAŞARI HALKASI.
   Yüzde SVG `stroke-dasharray` NİTELİĞİYLE gelir, satır içi stille değil:
   nitelik CSS boru hattından geçmez, hiçbir dönüştürücü ona dokunamaz. */
.ih-halka { flex: 0 0 auto; text-align: center; color: #ecfdf5; }
.ih-halka svg { display: block; }
.ih-halka__iz   { stroke: rgba(255,255,255,.18); }
.ih-halka__dolu { stroke: #6ee7b7; transition: stroke-dasharray .4s ease; }
.ih-halka--orta .ih-halka__dolu { stroke: #fcd34d; }
.ih-halka--kot  .ih-halka__dolu { stroke: #fca5a5; }
.ih-halka--bos  .ih-halka__dolu { stroke: rgba(255,255,255,.30); }
.ih-halka__sayi { font-size: 20px; font-weight: 700; fill: #fff; }
.ih-halka__alt  { font-size: 8.5px; font-weight: 600; fill: rgba(209,250,229,.85);
  letter-spacing: .08em; }
.ih-halka__etiket { margin-top: 5px; font-size: 10px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: rgba(167,243,208,.85); }

/* DÖNEM GEZİNTİSİ: şeridin altında, koyu zemine göre renklenmiş. */
.ih-banner-ayak { display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(167,243,208,.20); }
.ih-gez {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  color: #ecfdf5; text-decoration: none; transition: background .12s, border-color .12s;
}
.ih-gez:hover { background: rgba(255,255,255,.22);
  border-color: rgba(167,243,208,.60); color: #fff; }
.ih-gez--etkin { background: rgba(16,185,129,.38); border-color: rgba(110,231,183,.70); }
.ih-ayirac { flex: 1 1 auto; }

/* ---- KPI KARTLARI ------------------------------------------------------ */
.ih-kpi { display: grid; gap: 14px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ih-kpi-kart {
  position: relative; background: var(--em-yuzey); border: 1px solid var(--em-cizgi);
  border-radius: 12px; padding: 14px 16px 13px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.ih-kpi-kart:hover { transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .09); }
.ih-kpi-kart::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--em-ana);
}
/* KÖŞE FİLİGRANI: kartın sağ üstünde soluk, büyük bir ikon. Zenginlik
   katar ama rakamın önüne geçmez -- bu yüzden çok düşük opaklık. */
.ih-kpi-kart::after {
  content: ''; position: absolute; right: -18px; top: -18px;
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--em-ana-acik); opacity: .45; pointer-events: none;
}
.ih-kpi-kart--uyar::before { background: var(--em-uyari); }
.ih-kpi-kart--uyar::after  { background: var(--em-uyari-acik); }
.ih-kpi-kart--kot::before  { background: var(--em-hata); }
.ih-kpi-kart--kot::after   { background: var(--em-hata-acik); }
.ih-kpi-kart--notr::before { background: var(--em-cizgi-koyu); }
.ih-kpi-kart--notr::after  { background: var(--em-yuzey-2); }
.ih-kpi-kart > * { position: relative; z-index: 1; }
.ih-kpi-bas { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; }
.ih-kpi-etiket { font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--em-metin-3); }
.ih-kpi-ikon {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  font-size: 18px; background: var(--em-ana-acik); color: var(--em-ana-koyu);
  border: 1px solid var(--em-ana-kenar);
}
.ih-kpi-kart--uyar .ih-kpi-ikon { background: var(--em-uyari-acik);
  color: var(--em-uyarikutu-uyari); border-color: var(--em-uyari-acik); }
.ih-kpi-kart--kot .ih-kpi-ikon  { background: var(--em-hata-acik);
  color: var(--em-hata); border-color: var(--em-hata-acik); }
.ih-kpi-kart--notr .ih-kpi-ikon { background: var(--em-yuzey-2);
  color: var(--em-metin-2); border-color: var(--em-cizgi); }
.ih-kpi-sayi { font-size: 31px; font-weight: 700; line-height: 1.1; margin-top: 8px;
  color: var(--em-metin); letter-spacing: -.02em; }
.ih-kpi-sayi small { font-size: 14px; font-weight: 600; color: var(--em-metin-3);
  margin-left: 3px; }
.ih-kpi-alt { font-size: 11.5px; color: var(--em-metin-3); margin-top: 2px; }
/* KIRILIM ŞERİDİ: kartın altında "5 tutturdu · 3 geride" gibi ikinci
   kademe bilgi. Tek sayı bir KPI'yi anlatmıyor. */
.ih-kpi-kirilim { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 9px;
  padding-top: 9px; border-top: 1px dashed var(--em-cizgi); font-size: 11px; }
.ih-kpi-kirilim span { display: inline-flex; align-items: center; gap: 5px;
  color: var(--em-metin-3); }
.ih-kpi-kirilim b { color: var(--em-metin); font-weight: 700; }
.ih-kpi-kirilim i.ih-nokta { width: 7px; height: 7px; border-radius: 50%;
  background: var(--em-cizgi-koyu); display: inline-block; }
.ih-kpi-kirilim i.ih-nokta--iyi { background: var(--em-ana); }
.ih-kpi-kirilim i.ih-nokta--kot { background: var(--em-hata); }
.ih-kpi-kirilim i.ih-nokta--uyar { background: var(--em-uyari); }

/* ---- ORAN ÇUBUĞU (KPI ve kişi kartı ortak) ----------------------------- */
.ih-cubuk { height: 6px; border-radius: 4px; overflow: hidden;
  background: var(--em-yuzey-2); margin-top: 10px; }
.ih-cubuk i { display: block; height: 100%; border-radius: 4px;
  background: var(--em-ana); transition: width .4s ease; }
.ih-cubuk--orta i { background: var(--em-uyari); }
.ih-cubuk--kot  i { background: var(--em-hata); }
.ih-cubuk--bos  i { background: var(--em-cizgi-koyu); }

/* ---- HEDEF BELİRLEME PANELİ -------------------------------------------- */
.ih-panel { border: 1px solid var(--em-ana-kenar); border-radius: 12px;
  background: var(--em-yuzey); overflow: hidden; margin-bottom: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.ih-panel__bas {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 16px; background: var(--em-ana-acik);
  border-bottom: 1px solid var(--em-ana-kenar); color: var(--em-ana-koyu);
  font-weight: 700; font-size: .92rem;
}
.ih-panel__bas i { font-size: 18px; }
.ih-panel__bas small { font-weight: 500; color: var(--em-metin-2); }
.ih-panel__govde { padding: 16px; }

/* KONAN HEDEF SATIRLARI: tablo yerine okunur satırlar. */
.ih-hedef-liste { border-top: 1px solid var(--em-cizgi); }
.ih-hedef-satir {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--em-cizgi); font-size: 12.5px;
}
.ih-hedef-satir:last-child { border-bottom: 0; }
.ih-hedef-satir:hover { background: var(--em-yuzey-2); }
.ih-hedef-kime {
  display: inline-flex; align-items: center; gap: 6px; min-width: 180px;
  font-weight: 600; color: var(--em-metin);
}
.ih-rozet-genel {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--em-bilgi-acik); color: var(--em-uyarikutu-bilgi);
}
.ih-hedef-olcu { flex: 1 1 150px; color: var(--em-metin-2); }
.ih-hedef-deger { font-weight: 700; font-size: 15px; color: var(--em-ana-koyu);
  min-width: 56px; text-align: right; }
.ih-hedef-not { flex: 2 1 180px; color: var(--em-metin-3); font-size: 11.5px; }

/* ---- KİŞİ KARTLARI ----------------------------------------------------- */
.ih-bolum-bas { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.ih-bolum-bas h5 { margin: 0; font-size: 1rem; font-weight: 700;
  color: var(--em-metin); display: flex; align-items: center; gap: 8px; }
.ih-bolum-bas h5 i { color: var(--em-ana); font-size: 19px; }
.ih-bolum-not { font-size: 11.5px; color: var(--em-metin-3); }

.ih-kisi-izgara { display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.ih-kisi {
  position: relative; background: var(--em-yuzey); border: 1px solid var(--em-cizgi);
  border-radius: 12px; padding: 14px 16px 13px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.ih-kisi:hover { border-color: var(--em-ana-kenar); transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, .09); }
.ih-kisi::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--em-ana);
}
.ih-kisi--orta::before { background: var(--em-uyari); }
.ih-kisi--kot::before  { background: var(--em-hata); }
.ih-kisi--bos::before  { background: var(--em-cizgi-koyu); }
.ih-kisi__bas { display: flex; align-items: center; gap: 11px; }
/* BAŞ HARFLER: fotoğraf yok, ama kart yine de bir KİŞİYİ göstersin. */
.ih-rumuz {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: var(--em-ana-acik); color: var(--em-ana-koyu);
  border: 1px solid var(--em-ana-kenar);
}
.ih-kisi--orta .ih-rumuz { background: var(--em-uyari-acik); color: var(--em-uyarikutu-uyari);
  border-color: var(--em-uyari-acik); }
.ih-kisi--kot .ih-rumuz  { background: var(--em-hata-acik); color: var(--em-hata);
  border-color: var(--em-hata-acik); }
.ih-kisi--bos .ih-rumuz  { background: var(--em-yuzey-2); color: var(--em-metin-2);
  border-color: var(--em-cizgi); }
.ih-kisi__kimlik { flex: 1 1 auto; min-width: 0; }
.ih-kisi__ad {
  font-weight: 700; font-size: 13.5px; color: var(--em-metin);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ih-kisi__ad .ih-siz {
  margin-left: 5px; padding: 1px 7px; border-radius: 999px; font-size: 9.5px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--em-bilgi-acik); color: var(--em-uyarikutu-bilgi);
}
.ih-kisi__gorev { font-size: 11px; color: var(--em-metin-3); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ih-kisi__genel { flex: 0 0 auto; text-align: right; }
.ih-kisi__genel b { display: block; font-size: 21px; font-weight: 700; line-height: 1;
  color: var(--em-ana-koyu); letter-spacing: -.02em; }
.ih-kisi--orta .ih-kisi__genel b { color: var(--em-uyarikutu-uyari); }
.ih-kisi--kot  .ih-kisi__genel b { color: var(--em-hata); }
.ih-kisi--bos  .ih-kisi__genel b { color: var(--em-metin-3); }
.ih-kisi__genel span { display: block; font-size: 9.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--em-metin-3);
  margin-top: 2px; }

/* ÖLÇÜ SATIRI: ad · gerçekleşen/hedef · çubuk. */
.ih-olculer { margin-top: 12px; border-top: 1px solid var(--em-cizgi);
  padding-top: 10px; display: grid; gap: 9px; }
.ih-olcu__ust { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; }
.ih-olcu__ad { font-size: 11.5px; color: var(--em-metin-2); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ih-olcu__ad em { font-style: normal; color: var(--em-metin-3); font-weight: 500;
  font-size: 10px; }
.ih-olcu__deger { font-size: 11.5px; font-weight: 700; color: var(--em-metin);
  white-space: nowrap; }
.ih-olcu__deger small { font-weight: 500; color: var(--em-metin-3); }
.ih-olcu__yuzde { font-size: 10.5px; font-weight: 700; margin-left: 6px; }
.ih-olcu--iyi  .ih-olcu__yuzde { color: var(--em-ana-koyu); }
.ih-olcu--orta .ih-olcu__yuzde { color: var(--em-uyarikutu-uyari); }
.ih-olcu--kot  .ih-olcu__yuzde { color: var(--em-hata); }
.ih-olcu--bos  .ih-olcu__ad,
.ih-olcu--bos  .ih-olcu__deger { color: var(--em-metin-3); font-weight: 500; }
.ih-olcu .ih-cubuk { margin-top: 5px; }

.ih-kisi__ayak { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap; margin-top: 11px; padding-top: 9px;
  border-top: 1px dashed var(--em-cizgi); font-size: 11px; color: var(--em-metin-3); }
.ih-kisi__ayak a { color: var(--em-ana-koyu); font-weight: 600; text-decoration: none; }
.ih-kisi__ayak a:hover { text-decoration: underline; }

/* HEDEFSİZ KİŞİ: kart görünür ama SÖNÜK -- "hedef konmamış" da bir bilgidir;
   gizlenirse koordinatör kimi atladığını göremez. */
.ih-kisi--bos { border-style: dashed; }
.ih-kisi--bos .ih-olculer { opacity: .74; }

/* ---- UYARI ŞERİDİ (veri boşluğu) --------------------------------------- */
.ih-uyari {
  display: flex; align-items: flex-start; gap: 11px; margin-bottom: 16px;
  padding: 12px 16px; border-radius: 11px; font-size: 12.5px;
  background: var(--em-uyari-acik); border: 1px solid var(--em-uyari);
  color: var(--em-metin);
}
.ih-uyari i.ih-uyari__ikon { font-size: 20px; color: var(--em-uyarikutu-uyari);
  line-height: 1.2; }
.ih-uyari b { color: var(--em-uyarikutu-uyari); }
.ih-uyari a { color: var(--em-ana-koyu); font-weight: 600; }
.ih-uyari--bilgi { background: var(--em-bilgi-acik); border-color: var(--em-bilgi); }
.ih-uyari--bilgi i.ih-uyari__ikon,
.ih-uyari--bilgi b { color: var(--em-uyarikutu-bilgi); }

.ih-bos-durum {
  border: 1px dashed var(--em-cizgi-koyu); border-radius: 12px;
  padding: 34px 20px; text-align: center; color: var(--em-metin-3);
  background: var(--em-yuzey);
}
.ih-bos-durum i { font-size: 34px; display: block; margin-bottom: 8px;
  color: var(--em-cizgi-koyu); }
.ih-bos-durum b { display: block; color: var(--em-metin-2); margin-bottom: 4px;
  font-size: 13.5px; }

/* AÇIKLAMA KUTUSU: ölçülerin ne anlama geldiği. */
.ih-sozluk { display: grid; gap: 7px 18px; margin-top: 16px; padding: 14px 16px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  font-size: 11.5px; color: var(--em-metin-3);
  background: var(--em-yuzey-2); border: 1px solid var(--em-cizgi);
  border-radius: 11px; }
.ih-sozluk b { color: var(--em-metin-2); }

/* DAR EKRAN: şerit halkası alta iner, kişi kartları tek sütun olur. */
@media (max-width: 640px) {
  .ih-banner { padding: 16px; }
  .ih-banner-ust { flex-direction: column; }
  .ih-halka { align-self: flex-start; }
  .ih-kisi-izgara { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   İSG ŞERİDİ — SAHA DENETİMİ DESENİ
   Kullanıcı 15.09.2026: "/isg/saha-denetimi bu sayfayı da güzel bir tema yap".
   Şerit ailesi aynı (tutarlılık), yalnız arka plandaki İSG görseli değişir:
   burada denetim işi anlatılıyor -- büyüteç, baret, kontrol listesi, uyarı
   üçgeni, emniyet kemeri tokası, konum işareti.
   -------------------------------------------------------------------------- */
.ih-banner--denetim::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150' viewBox='0 0 300 150'%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.3' stroke-linecap='round'%3E%3Ccircle cx='48' cy='52' r='20'/%3E%3Cpath d='M63 67l16 16'/%3E%3Cpath d='M40 52l6 6 11-13'/%3E%3C/g%3E%3Cg fill='none' stroke='%2334d399' stroke-width='1.1' opacity='.65'%3E%3Crect x='104' y='24' width='42' height='56' rx='5'/%3E%3Crect x='117' y='18' width='16' height='11' rx='3'/%3E%3Cpath d='M112 42h26M112 54h26M112 66h16'/%3E%3Cpath d='M108 40l3 3 5-6M108 52l3 3 5-6'/%3E%3C/g%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.2' opacity='.6'%3E%3Cpath d='M28 128c0-13 11-24 24-24s24 11 24 24'/%3E%3Cpath d='M20 128h64'/%3E%3Cpath d='M42 105c0-8 3-14 10-14s10 6 10 14'/%3E%3C/g%3E%3Cg fill='none' stroke='%2334d399' stroke-width='1.2' opacity='.6'%3E%3Cpath d='M186 34l22 38h-44z'/%3E%3Cpath d='M186 47v12'/%3E%3Ccircle cx='186' cy='65' r='1.4' fill='%2334d399'/%3E%3C/g%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.1' opacity='.5'%3E%3Cpath d='M170 100c14-8 30-8 44 0'/%3E%3Crect x='182' y='104' width='20' height='14' rx='3'/%3E%3Cpath d='M187 118v10M197 118v10'/%3E%3C/g%3E%3Cg fill='none' stroke='%2334d399' stroke-width='1.1' opacity='.55'%3E%3Cpath d='M252 108c0-14 10-24 22-24s22 10 22 24c0 16-22 34-22 34s-22-18-22-34z'/%3E%3Ccircle cx='274' cy='106' r='7'/%3E%3C/g%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1' opacity='.45'%3E%3Cpath d='M238 30h50M238 42h38M238 54h44M238 66h28'/%3E%3C/g%3E%3C/svg%3E");
}

/* SÜZGEÇ KARTI: tıklanabilir KPI. Bağlantı olduğu için klavyeyle de
   gezilebilir; kartı JS ile tıklatmak klavye kullanıcısını dışarıda
   bırakırdı. */
a.ih-kpi-kart--tikla { display: block; text-decoration: none; color: inherit; }
a.ih-kpi-kart--tikla:hover { border-color: var(--em-ana-kenar); color: inherit; }
a.ih-kpi-kart--tikla:focus-visible { outline: 2px solid var(--em-ana); outline-offset: 2px; }
.ih-kpi-kart--etkin { border-color: var(--em-ana); box-shadow: 0 0 0 3px var(--em-ana-acik); }
.ih-kpi-suzgec { margin-top: 8px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; color: var(--em-ana-koyu); }

/* --------------------------------------------------------------------------
   ÇOK KİŞİLİ DENETİM — "Denetime katılanlar"
   Kullanıcı 15.09.2026: "bazen 1'den fazla kişi ile denetime gidiliyor,
   buraya bir tik eklesek ve başka biri varsa onu da seçsek; sonuçta saha
   denetimlerini hem İSG hem şantiye şefleri yapıyor."
   -------------------------------------------------------------------------- */
.ih-katilimci { border: 1px solid var(--em-cizgi); border-radius: 10px;
  padding: 10px 12px; background: var(--em-yuzey-2); }
.ih-katilimci__liste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ih-katilimci__liste:empty { display: none; }
.ih-kisi-cip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px; border-radius: 999px; font-size: 11.5px;
  font-weight: 600; background: var(--em-ana-acik); color: var(--em-ana-koyu);
  border: 1px solid var(--em-ana-kenar);
}
.ih-kisi-cip small { font-weight: 500; color: var(--em-metin-3); }
.ih-kisi-cip button {
  border: 0; background: transparent; color: var(--em-metin-3); cursor: pointer;
  line-height: 1; padding: 2px; border-radius: 50%; font-size: 14px;
}
.ih-kisi-cip button:hover { color: var(--em-hata); background: var(--em-hata-acik); }

/* DENETLEYEN ALANI: sistemden gelir, kilitli görünür. */
.ih-otomatik { background: var(--em-yuzey-2) !important; }
.ih-alan-not { font-size: 11px; color: var(--em-metin-3); margin-top: 3px; }
.ih-alan-not b { color: var(--em-metin-2); }

/* --------------------------------------------------------------------------
   İSG LİSTE TABLOSU — şeritli ekranların altındaki tablo
   -------------------------------------------------------------------------- */
.ih-tablo-kart { background: var(--em-yuzey); border: 1px solid var(--em-cizgi);
  border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.ih-tablo-kart__bas { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 11px 16px;
  border-bottom: 1px solid var(--em-cizgi); font-weight: 700; font-size: .92rem;
  color: var(--em-metin); }
.ih-tablo-kart__bas i { color: var(--em-ana); font-size: 18px; margin-right: 6px; }
.ih-tablo-kart__bas small { font-weight: 500; color: var(--em-metin-3); }
/* TABLO TAM GENİŞLİK: satır vurgusu kartın sağ kenarına kadar gitsin.
   Ölçüldü 15.09.2026 -- `display:block` miras alan tablolarda hücreler
   kartın 674/768'ini dolduruyor, kırmızı satır yarıda kesiliyordu. */
.ih-tablo-kart table { display: table !important; width: 100%; }

/* --------------------------------------------------------------------------
   DENETİME KATILANLAR — kurumsal kişi seçici
   Kullanıcı 15.09.2026: "Denetime katılan diğer kişiler bu alan sadece ortak
   seçilince çıksın ve liste daha kurumsal ve prof şekilde eklenebilsin."

   Neden <select> değil: açılır liste seçtiğini göstermez, aramaz ve kimin
   hangi görevde olduğunu satırda taşıyamaz. Burada her satır bir KİŞİ
   kartıdır — baş harf rozeti, ad, görev — ve tıklanınca listeye geçer.
   -------------------------------------------------------------------------- */
.ih-katilimci__bas { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px; }
.ih-katilimci__baslik { display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--em-metin); }
.ih-katilimci__baslik i { font-size: 17px; color: var(--em-ana); }
.ih-katilimci__baslik .ih-zorunlu { color: var(--em-hata); }
.ih-katilimci__sayac { font-size: 11px; font-weight: 600; padding: 2px 9px;
  border-radius: 999px; background: var(--em-yuzey); color: var(--em-metin-3);
  border: 1px solid var(--em-cizgi); }

/* ARAMA KUTUSU: ikon içeride, alan tam genişlikte. */
.ih-katilimci__ara { position: relative; }
.ih-katilimci__ara i { position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%); font-size: 16px; color: var(--em-metin-3);
  pointer-events: none; }
.ih-katilimci__ara input { padding-left: 32px; background: var(--em-yuzey); }

/* KİŞİ HAVUZU: kaydırılabilir, sınırlı yükseklik — modal uzayıp gitmesin. */
.ih-katilimci__havuz {
  margin-top: 8px; max-height: 200px; overflow-y: auto;
  border: 1px solid var(--em-cizgi); border-radius: 9px;
  background: var(--em-yuzey);
}
.ih-katilimci__havuz:empty { display: none; }
.ih-kisi-satir {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-bottom: 1px solid var(--em-cizgi);
  background: transparent; text-align: left; cursor: pointer;
  transition: background .1s;
}
.ih-kisi-satir:last-child { border-bottom: 0; }
.ih-kisi-satir:hover { background: var(--em-ana-acik); }
.ih-kisi-satir:focus-visible { outline: 2px solid var(--em-ana); outline-offset: -2px; }
.ih-kisi-satir[hidden] { display: none !important; }
.ih-kisi-satir__rumuz {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
  background: var(--em-yuzey-2); color: var(--em-metin-2);
  border: 1px solid var(--em-cizgi);
}
.ih-kisi-satir:hover .ih-kisi-satir__rumuz {
  background: var(--em-ana); color: #fff; border-color: var(--em-ana); }
.ih-kisi-satir__kimlik { flex: 1 1 auto; min-width: 0; }
.ih-kisi-satir__ad { display: block; font-size: 12.5px; font-weight: 600;
  color: var(--em-metin); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.ih-kisi-satir__gorev { display: block; font-size: 10.5px; color: var(--em-metin-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ih-kisi-satir__ekle { flex: 0 0 auto; font-size: 17px; color: var(--em-cizgi-koyu); }
.ih-kisi-satir:hover .ih-kisi-satir__ekle { color: var(--em-ana); }

.ih-katilimci__bos { margin-top: 8px; padding: 12px; border-radius: 9px;
  border: 1px dashed var(--em-cizgi-koyu); background: var(--em-yuzey);
  font-size: 11.5px; color: var(--em-metin-3); text-align: center; }

/* SEÇİLENLER: baş harf rozetli çipler. */
.ih-katilimci__liste { margin-top: 10px; }
.ih-kisi-cip__rumuz {
  width: 20px; height: 20px; border-radius: 6px; display: grid;
  place-items: center; font-size: 9.5px; font-weight: 700;
  background: var(--em-ana); color: #fff; margin-right: 2px;
}

/* ZORUNLU DURUM: ortak/çapraz denetimde alan vurgulanır. */
.ih-katilimci--zorunlu { border-color: var(--em-ana); }

/* ==========================================================================
   PERSONEL BELGE MERKEZİ   (/personel/belgeler)
   --------------------------------------------------------------------------
   Kullanıcı 15.09.2026: "alt yapısı var zaten, İK'dan daha güzel bi görünüm
   olsun; İK İSG'yi İSG İK belgelerini görsün, kimin yüklediği belli olsun."

   Şerit / KPI / halka İSG ekranlarıyla ORTAK (lib/isg-gorunum.js, .ih-*).
   Buradaki .bm-* kuralları yalnız bu ekrana özgü iki şeyi anlatır:
   BELGEYİ KİM YÜKLEDİ ve BELGENİN SÜRESİ.
   ========================================================================== */

/* KAYNAK ROZETİ: İK mi İSG mi. Renk ayrımı bilerek: iki birim aynı havuzu
   paylaşıyor, satıra bakan kişi kimin koyduğunu OKUMADAN görmeli. */
.bm-kaynak {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  white-space: nowrap; border: 1px solid transparent;
}
.bm-kaynak i { font-size: 13px; }
/* TAHMİN İŞARETİ: eski kayıtta kaynak yazılı değil, belge türünden
   çıkarıldı. Kesin bilgiden ayırt edilsin diye soluk bir soru işareti. */
.bm-kaynak em { font-style: normal; opacity: .6; margin-left: 2px; }
.bm-kaynak--ik    { background: var(--em-bilgi-acik); color: var(--em-uyarikutu-bilgi);
                    border-color: var(--em-bilgi); }
.bm-kaynak--isg   { background: var(--em-ana-acik); color: var(--em-ana-koyu);
                    border-color: var(--em-ana-kenar); }
.bm-kaynak--diger { background: var(--em-yuzey-2); color: var(--em-metin-3);
                    border-color: var(--em-cizgi); }

/* YÜKLEYEN HÜCRESİ */
.bm-yukleyen-hucre { font-weight: 600; font-size: 12.5px; color: var(--em-metin); }

/* GEÇERLİLİK: tarih + kalan gün alt alta; geçmiş olan kırmızı, yaklaşan sarı. */
.bm-sure { display: inline-block; font-size: 12.5px; color: var(--em-metin); }
.bm-sure em { display: block; font-style: normal; font-size: 10.5px;
  color: var(--em-metin-3); }
.bm-sure--gecti { color: var(--em-hata); font-weight: 700; }
.bm-sure--gecti em { color: var(--em-hata); }
.bm-sure--yaklasan { color: var(--em-uyarikutu-uyari); font-weight: 700; }
.bm-sure--yaklasan em { color: var(--em-uyarikutu-uyari); }

/* KİM YÜKLEMİŞ ŞERİDİ: "kimin yüklediği belli olsun" isteğinin özet hâli.
   Tabloya inmeden önce kimin ne kadar yüklediği tek bakışta görünür. */
.bm-yukleyenler {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 11px 14px; margin-bottom: 18px;
  background: var(--em-yuzey); border: 1px solid var(--em-cizgi);
  border-radius: 11px;
}
.bm-yukleyenler__baslik {
  display: inline-flex; align-items: center; gap: 6px; margin-right: 4px;
  font-size: 11.5px; font-weight: 700; color: var(--em-metin-2);
}
.bm-yukleyenler__baslik i { font-size: 16px; color: var(--em-ana); }
.bm-yukleyen {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 4px 3px 3px; border-radius: 999px;
  background: var(--em-yuzey-2); border: 1px solid var(--em-cizgi);
  font-size: 11.5px; color: var(--em-metin);
}
.bm-yukleyen__rumuz {
  width: 22px; height: 22px; border-radius: 50%; display: grid;
  place-items: center; font-size: 9.5px; font-weight: 700;
  background: var(--em-ana); color: #fff;
}
.bm-yukleyen__ad { font-weight: 600; }
.bm-yukleyen__adet {
  min-width: 20px; padding: 1px 6px; border-radius: 999px;
  background: var(--em-yuzey); border: 1px solid var(--em-cizgi);
  font-size: 10.5px; font-weight: 700; color: var(--em-metin-2); text-align: center;
}

@media (max-width: 640px) {
  .bm-yukleyenler { gap: 6px; }
}

/* ==========================================================================
   GÜNLÜK ÇALIŞMA PROGRAMI   (/isg/isprogrami)
   --------------------------------------------------------------------------
   Kullanıcı 15.09.2026: "her tarihi bu ekranda göstermek çok sayfa yapar;
   her tarihin içine aynı gün yapılan işler listesi daha iyi değil mi?"
   + "ve ekrana sığsın tablo".

   Ölçüldü: 377 satır / 105 gün. Düz tabloda 8 sayfa çıkıyordu. Artık her
   gün BİR KART; karta tıklanınca o günün iş listesi açılıyor — kaynak
   Excel'in yapısıyla aynı (her sayfa bir gün).
   ========================================================================== */
.ip-gun-izgara { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.ip-gun {
  display: flex; align-items: stretch; gap: 12px;
  padding: 12px 14px; text-decoration: none; color: inherit;
  background: var(--em-yuzey); border: 1px solid var(--em-cizgi);
  border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.ip-gun:hover { color: inherit; border-color: var(--em-ana-kenar);
  transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15, 23, 42, .09); }
.ip-gun:focus-visible { outline: 2px solid var(--em-ana); outline-offset: 2px; }

/* TARİH BLOĞU: takvim yaprağı gibi — gün büyük, ay ve hafta günü küçük. */
.ip-gun__tarih {
  flex: 0 0 auto; width: 62px; text-align: center; padding: 6px 0;
  border-radius: 10px; background: var(--em-yuzey-2);
  border: 1px solid var(--em-cizgi); display: flex; flex-direction: column;
  justify-content: center; line-height: 1.15;
}
.ip-gun__tarih b { font-size: 22px; font-weight: 700; color: var(--em-metin);
  letter-spacing: -.02em; }
.ip-gun__tarih span { font-size: 10.5px; font-weight: 600; color: var(--em-metin-2); }
.ip-gun__tarih em { font-style: normal; font-size: 9.5px; color: var(--em-metin-3); }

/* HAFTA SONU ayırt edilsin: o günler programda ayrı değerlendirilir. */
.ip-gun--haftasonu .ip-gun__tarih { background: var(--em-uyari-acik);
  border-color: var(--em-uyari-acik); }
.ip-gun--haftasonu .ip-gun__tarih b { color: var(--em-uyarikutu-uyari); }
/* BUGÜN çerçeveli: ekranı açan kişinin ilk aradığı karttır. */
.ip-gun--bugun { border-color: var(--em-ana); box-shadow: 0 0 0 3px var(--em-ana-acik); }
.ip-gun--bugun .ip-gun__tarih { background: var(--em-ana-acik);
  border-color: var(--em-ana-kenar); }
.ip-gun--bugun .ip-gun__tarih b { color: var(--em-ana-koyu); }

.ip-gun__govde { flex: 1 1 auto; min-width: 0; display: flex;
  flex-direction: column; justify-content: center; gap: 5px; }
.ip-gun__sayilar { display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-size: 11.5px; color: var(--em-metin-3); }
.ip-gun__sayilar b { color: var(--em-metin); font-weight: 700; font-size: 13px; }
.ip-gun__kesinti { color: var(--em-uyarikutu-uyari); }
.ip-gun__kesinti b { color: var(--em-uyarikutu-uyari); }
/* İŞ ÖZETİ tek satır: kart yüksekliği sabit kalsın, ızgara bozulmasın. */
.ip-gun__isler { font-size: 11.5px; color: var(--em-metin-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-gun__govde .ih-cubuk { margin-top: 2px; }
.ip-gun__ok { flex: 0 0 auto; display: grid; place-items: center;
  color: var(--em-cizgi-koyu); font-size: 20px; }
.ip-gun:hover .ip-gun__ok { color: var(--em-ana); }

/* ---- GÜN DETAY TABLOSU -------------------------------------------------- */
/* EKRANA SIĞSIN (kullanıcı isteği): kaynak dosya 19 sütun; hepsi yan yana
   yazılsa yatay kaydırma şart olurdu. Satır İKİ KATMANDA okunuyor —
   üstte kimlik, altında küçük puntoyla ayrıntı. Bilgi kaybolmuyor,
   ekrana giriyor. */
.ip-tablo { table-layout: fixed; width: 100%; }
.ip-tablo th, .ip-tablo td { word-break: break-word; }
.ip-tablo td small { font-size: 10.5px; line-height: 1.35; }
.ip-kesinti { color: var(--em-uyarikutu-uyari); font-weight: 600; }
.ip-kesinti i { font-size: 12px; margin-right: 3px; }
.ip-ilerleme { font-size: 12px; font-weight: 700; color: var(--em-metin); }
/* TAŞERON ADI LİSTEDE YOK. Satır görünür ama o taşerona hakediş
   bağlanamaz, portal hesabı açılamaz. Kırmızı DEĞİL: satır hatalı değil,
   eksik -- taşeron kartı açılınca kendiliğinden düzelir. */
.ip-cozulmeyen { color: var(--em-uyarikutu-uyari); font-weight: 600; }
.ip-cozulmeyen i { font-size: 12px; margin-right: 3px; }

/* ---- ELLE GİRİŞ PENCERESİ ---------------------------------------------- */
/* Etiketler kurumun Excel başlığının aynısı; büyük harf ve dar aralık
   dosyadaki görünümü hatırlatsın diye. */
.ip-etiket { font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--em-metin-2); margin-bottom: 3px; }

/* ==========================================================================
   TABLO EKRANA SIĞSIN  —  SİSTEM GENELİ
   Kullanıcı 15.09.2026: "ve ekrana sığsın tablo tüm ekranlara".
   Ölçüldü: bazı tablolar `display:block` miras alıyor ve hücreler kabın
   674/768'ini dolduruyor; satır vurgusu yarıda kesiliyordu. Kendi
   ekranlarımızdaki tablolar tam genişlikte kalsın.
   ========================================================================== */
.em-isg .table-responsive > table.table { display: table !important; width: 100%; }

/* İŞ PROGRAMI GİRİŞ PENCERESİ: alan notu ve ErpMerkez ek alanı işareti.
   Kurumun Excel'inde OLMAYAN iki alan (araç sayısı, açıklama) sonda ve
   işaretli duruyor -- kuruma giden sütunlarla karışmasınlar. */
.ip-not { font-size: 10.5px; color: var(--em-metin-3); margin-top: 3px; }
.ip-ek {
  font-style: normal; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  background: var(--em-ana-acik); color: var(--em-ana-koyu);
  border: 1px solid var(--em-ana-kenar);
}
.ip-ek-alan { opacity: .92; }

/* ==========================================================================
   ErpMerkez AÇILIR LİSTE   (.em-al) — tarayıcının <datalist>'i yerine
   --------------------------------------------------------------------------
   Kullanıcı 15.09.2026: "bu menüler çok kötü, temaya uygun yap; bunun gibi
   bozuk olan yerleri kurumsal ve profesyonel olsun, bu şekilde çıkmasın."

   `<datalist>` tarayıcının kendi bileşeni: paneli işletim sisteminden gelir,
   hiçbir CSS kuralı ona işlemez ve koyu temada siyah bir kutu olarak çıkar.
   Bu aile onun yerini alır -- panel BİZİM, tema değişkenlerimizi kullanır.
   ========================================================================== */
.em-al { position: relative; }
.em-al__kutu { position: relative; display: flex; align-items: stretch; }
.em-al__girdi { padding-right: 30px; }
/* OK DÜĞMESİ: alanın içinde durur, tıklanınca listeyi açar. tabindex=-1 --
   klavyeyle gezen kullanıcı alanın kendisinde kalsın, araya düğme girmesin. */
.em-al__ok {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--em-metin-3);
  cursor: pointer; border-radius: 6px; font-size: 18px; line-height: 1;
}
.em-al__ok:hover { color: var(--em-ana-koyu); background: var(--em-ana-acik); }
.em-al--acik .em-al__ok { color: var(--em-ana); transform: translateY(-50%) rotate(180deg); }

/* PANEL: kartın üstünde yüzer. z-index modal içinde de üstte kalacak kadar
   yüksek (Bootstrap modal 1055). */
.em-al__panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1080;
  background: var(--em-yuzey); border: 1px solid var(--em-cizgi);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
  overflow: hidden;
}
.em-al__liste { max-height: 260px; overflow-y: auto; }
.em-al__oge {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; padding: 7px 11px; border: 0; border-bottom: 1px solid var(--em-cizgi);
  background: transparent; text-align: left; cursor: pointer;
  transition: background .1s;
}
.em-al__oge:last-child { border-bottom: 0; }
.em-al__oge[hidden] { display: none !important; }
.em-al__oge:hover,
.em-al__oge--etkin { background: var(--em-ana-acik); }
.em-al__ad { font-size: 12.5px; font-weight: 600; color: var(--em-metin);
  line-height: 1.3; }
.em-al__oge--etkin .em-al__ad { color: var(--em-ana-koyu); }
.em-al__alt { font-size: 10.5px; color: var(--em-metin-3); line-height: 1.3; }
.em-al__bos { padding: 12px 11px; font-size: 11.5px; color: var(--em-metin-3);
  text-align: center; }
.em-al__ipucu { font-size: 10.5px; color: var(--em-metin-3); margin-top: 3px; }

/* KAYDIRMA ÇUBUĞU: sistem çubuğu koyu temada da beyaz kalıyor; ince ve
   tema renginde olsun. */
.em-al__liste::-webkit-scrollbar { width: 8px; }
.em-al__liste::-webkit-scrollbar-thumb {
  background: var(--em-cizgi-koyu); border-radius: 4px; }
.em-al__liste::-webkit-scrollbar-track { background: var(--em-yuzey-2); }

/* ==========================================================================
   UYGULAMA BAŞLIK ŞERİDİ — KURUMSAL
   --------------------------------------------------------------------------
   Kullanıcı (süregelen): "ekranların kurumsallaştırılması", "kurumsal ve
   profesyonel olsun", "bizim ErpMerkez zengin temalarımız olsun".

   ÖLÇÜLDÜ (15.09.2026): 169 menü ekranının yalnız 18'i kendi görsel
   dilimizde; 126'sı kopyalanan temanın düz görünümünde. O 126 ekranı tek
   tek yeniden yazmak aylar sürer VE çalışan ızgaralarını/akışlarını riske
   atardı (Tabulator tabloları, yükleme pencereleri, onay akışları).

   BU BLOK O İŞİ TEK YERDEN YAPAR: `.em-baslik` kabuğun HER ekrana bastığı
   şerittir (lib/sayfa-veri.js sayfaBasligiEkle). Onu kurumsal bannera
   çevirmek, hiçbir ekranın içine dokunmadan hepsini aynı dile taşır.
   DOM DEĞİŞMEDİ — yalnız görünüm; mevcut bağlantılar ve düğmeler yerinde.

   MODÜLE GÖRE DESEN: şeride `em-baslik--{modul}` sınıfı yazılıyor
   (proje / depo / muhasebe / personel / isg / arac / harita / hakedis...).
   Her modülün kendi SVG deseni ve vurgu rengi var; tek tip yeşil bir şerit
   bütün modüllerde aynı görünürdü.
   ========================================================================== */
.em-baslik {
  position: relative;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  /* Kenarlık + alt boşluk yerine ARTIK GERÇEK BİR ŞERİT */
  padding: 18px 22px; margin-bottom: 18px; border-bottom: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #334155 100%);
  box-shadow: 0 6px 20px rgba(15, 23, 42, .18);
  overflow: visible;   /* içindeki açılır menüler kırpılmasın */
}
/* DESEN ::before'DA, KIRPMA ORADA: şeridin kendisine overflow:hidden
   verilseydi içindeki şantiye seçici açılır menüsü kırpılırdı (aynı kusur
   taşeron şeridinde yaşanmıştı). */
.em-baslik::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; overflow: hidden; opacity: .30;
  background-repeat: repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='110' viewBox='0 0 220 110'%3E%3Cg fill='none' stroke='%2394a3b8' stroke-width='1' opacity='.8'%3E%3Cpath d='M0 90h220M0 60h220M0 30h220'/%3E%3Cpath d='M30 0v110M80 0v110M130 0v110M180 0v110'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 220px 110px;
}
.em-baslik::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(15,23,42,.90) 0%, rgba(15,23,42,.55) 55%, rgba(15,23,42,.10) 100%);
}
.em-baslik > * { position: relative; z-index: 2; }

.em-baslik__ad { font-size: 1.32rem; font-weight: 700; letter-spacing: -.02em;
  margin: 0; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
/* Kabuktan tasinan aciklama (15.09.2026): basligin yaninda parantez icinde,
   baslik agirligini ezmeyecek boyda ve acik renkte. Uzunsa alt satira kirilir. */
.em-baslik .em-baslik__aciklama {
  font-size: .8rem; font-weight: 400; letter-spacing: 0;
  color: rgba(226, 232, 240, .86); text-shadow: none;
}
.em-baslik__alt { font-size: .8rem; margin: 3px 0 0; color: rgba(226,232,240,.82); }

/* YOL ÇUBUĞU ŞERİDİN İÇİNDE (15.09.2026, kullanıcı iki ekran görüntüsüyle:
   "1. fotodakini de 2. fotodaki yere taşır mısın"). Sayfanın kendi yol çubuğu
   sunucuda (lib/sayfa-veri.js kirintiAl) şeridin alt satırına taşınır.
   İŞARETLEME DEĞİŞMEZ; sayfa betikleri .breadcrumb-item / .content-breadcrumb
   aramaya devam eder. On aile var (page-, content-, crud-, yetki-, hb-,
   personel-, santiye-, ihale-, kitap-, bayi-breadcrumb); hepsi koyu şeritte
   aynı yarı saydam çip diline çevrilir. Şerit iki temada da koyu olduğu için
   renkler ortaktır.

   NEDEN KİMLİK SEÇİCİSİ (#em-baslik-kirinti): ilk sürüm sınıf zinciriyle
   yazılmıştı ve BAZI SAYFALARDA YAZILAR SÖNÜK KALDI (kullanıcı ekranda
   gösterdi, 15.09.2026). Kopya sayfaların teması yol çubuğu için
   "nav[class*=-breadcrumb]:has(.breadcrumb) .breadcrumb-item + .breadcrumb-item.active"
   gibi çok uzun ve !important işaretli seçiciler taşıyor; özgüllükleri bizim
   zincirimizi geçiyor ve ilk öğe dışındakileri griye çekiyordu. O kurallar
   yalnız sınıf/öznitelik kullanır; tek bir kimlik hepsini geçer, sınıf
   eklemeyle özgüllük yarışına girilmez. Şerit sayfada tek olduğu için kimlik
   tektir (sayfaBasligiEkle ikinci kez şerit basmaz).

   Bağlantılar çip, bulunulan sayfa kalın beyaz yazıdır: çip içine ayırıcı "/"
   düşmesin diye etkin öğe çip yapılmaz. Saydamlık ve süzgeç de sıfırlanır;
   sönüklük yalnız renkten değil opacity'den de gelebilir. */
#em-baslik-kirinti { margin: 7px 0 0; }
#em-baslik-kirinti .page-breadcrumb,
#em-baslik-kirinti nav,
#em-baslik-kirinti .breadcrumb,
#em-baslik-kirinti .content-breadcrumb {
  margin: 0 !important; padding: 0 !important; min-height: 0 !important;
  background: transparent !important; border: 0 !important;
  box-shadow: none !important; overflow: visible !important;
  opacity: 1 !important; filter: none !important;
}
#em-baslik-kirinti .page-breadcrumb .ps-3 { padding-left: 0 !important; }
#em-baslik-kirinti .breadcrumb,
#em-baslik-kirinti .content-breadcrumb {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px !important;
}
#em-baslik-kirinti nav::before,
#em-baslik-kirinti nav::after,
#em-baslik-kirinti .content-breadcrumb::before { display: none !important; }
/* Kabuğun modül etiketi ("Personel", "Muhasebe") şerit başlığını tekrarlar. */
#em-baslik-kirinti .breadcrumb-title { display: none !important; }

#em-baslik-kirinti .breadcrumb-item {
  display: inline-flex !important; align-items: center; padding: 0 !important;
  color: #f1f5f9 !important; font-size: .78rem !important;
  opacity: 1 !important; filter: none !important;
}
#em-baslik-kirinti .breadcrumb-item + .breadcrumb-item::before,
#em-baslik-kirinti .content-breadcrumb__sep {
  content: "/" !important; color: rgba(226, 232, 240, .60) !important; opacity: 1 !important;
  padding: 0 6px 0 0 !important; float: none !important; background: none !important;
  border: 0 !important; width: auto !important; height: auto !important;
  position: static !important; transform: none !important;
}
#em-baslik-kirinti .breadcrumb-item a,
#em-baslik-kirinti .content-breadcrumb a {
  display: inline-flex !important; align-items: center; gap: 5px !important;
  padding: 2px 9px !important; border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, .24) !important;
  background: rgba(255, 255, 255, .10) !important;
  color: #f1f5f9 !important; font-size: .78rem !important;
  font-weight: 500 !important; line-height: 1.4 !important; text-decoration: none !important;
  opacity: 1 !important; filter: none !important;
}
#em-baslik-kirinti .breadcrumb-item a:hover,
#em-baslik-kirinti .content-breadcrumb a:hover {
  background: rgba(255, 255, 255, .20) !important; color: #fff !important;
  border-color: rgba(255, 255, 255, .34) !important;
}
#em-baslik-kirinti .breadcrumb-item.active,
#em-baslik-kirinti .content-breadcrumb__current {
  color: #fff !important; font-weight: 600 !important; font-size: .78rem !important;
  background: transparent !important; border: 0 !important; padding: 0 !important;
  opacity: 1 !important; filter: none !important;
}
#em-baslik-kirinti .breadcrumb-item a i,
#em-baslik-kirinti .content-breadcrumb a i {
  width: auto !important; height: auto !important; background: transparent !important;
  border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  color: #e2e8f0 !important; opacity: 1 !important;
}
#em-baslik-kirinti .breadcrumb-item:first-child a::after { color: #f1f5f9 !important; }
/* BAŞLIK SATIRININ DÜZENİ GERİ VERİLİR (15.09.2026). Ölçüldü: /proje/projeler
   satırı düz bloğa döndü, "Yeni İş Emri" düğmesi sola düştü. Bu satırlara esnek
   düzeni sayfanın kendi CSS'i değil, kopya temanın
   ".content-page__header:has(.content-breadcrumb)" kuralları veriyordu; yol
   çubuğu şeride taşınınca eşleşmez oldular. Aynı DÜZEN özellikleri (ve dar
   ekranda aynı (max-width: 767.98px) eşiğiyle dikey yerleşim), sunucunun yol çubuğu
   aldığı satıra koyduğu em-kirinti-tasindi işaretiyle geri verilir.
   Çerçeve, zemin ve sol renk şeridi GERİ GELMEZ: onlar yol çubuğu bandının
   süsüydü, bant artık şeridin içinde. Tek kalan düğmeler sağda durur. */
.page-wrapper .content-page__header.em-kirinti-tasindi {
  display: flex !important; align-items: center; justify-content: flex-end !important;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem;
}
.page-wrapper .content-page__header.em-kirinti-tasindi .content-page__header-actions,
.page-wrapper .content-page__header.em-kirinti-tasindi .content-actions {
  display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-left: auto;
}
.page-wrapper .content-page__header.em-kirinti-tasindi .content-btn--header { margin-left: auto; }
@media (max-width: 767.98px) {
  .page-wrapper .content-page__header.em-kirinti-tasindi { flex-direction: column; align-items: stretch; }
  .page-wrapper .content-page__header.em-kirinti-tasindi .content-page__header-actions,
  .page-wrapper .content-page__header.em-kirinti-tasindi .content-actions,
  .page-wrapper .content-page__header.em-kirinti-tasindi .content-btn--header { margin-left: 0; flex-wrap: wrap; }
}
.em-baslik__araclar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ARAÇLAR KOYU ZEMİNE GÖRE: şeffaf beyaz kutular, okunur kenarlar. */
.em-baslik__araclar select {
  border: 1px solid rgba(255,255,255,.26) !important;
  border-radius: var(--em-r) !important;
  background: rgba(255,255,255,.12) !important; color: #fff !important;
  font-size: .78rem !important; font-weight: 500 !important;
  padding: .34rem .5rem !important; max-width: 190px;
}
.em-baslik__depo {
  border-color: rgba(255,255,255,.26) !important;
  background: rgba(255,255,255,.10) !important;
}
.em-baslik__depo:hover { background: rgba(255,255,255,.20) !important; }
.em-baslik__depo-ad { color: #fff !important; }
.em-baslik__depo-ad i { color: rgba(226,232,240,.85) !important; }
.em-baslik__depo-yil {
  background: rgba(255,255,255,.14) !important; color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.22) !important;
}
.em-baslik__depo-degistir { color: rgba(226,232,240,.78) !important; }
.em-baslik__firma {
  color: rgba(226,232,240,.90) !important;
  border-color: rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.08) !important;
}
.em-baslik__kisi b { color: #fff !important; }
.em-baslik__kisi span { color: rgba(226,232,240,.72) !important; }

/* --------------------------------------------------------------------------
   MODÜL DESENLERİ — her modülün kendi motifi ve vurgusu
   Desen ŞERİDİN SAĞINA yerleşir (::before yatay tekrar eden ızgara kalır,
   bu katman modülü anlatan simgeyi ekler). Metin sol tarafta ve ::after
   koyulaştırmasının altında olduğu için okunurluk düşmez.
   -------------------------------------------------------------------------- */
.em-baslik--proje    { background: linear-gradient(135deg, #0c4a6e 0%, #075985 55%, #0369a1 100%); }
.em-baslik--depo     { background: linear-gradient(135deg, #451a03 0%, #78350f 55%, #b45309 100%); }
.em-baslik--muhasebe { background: linear-gradient(135deg, #052e16 0%, #14532d 55%, #15803d 100%); }
.em-baslik--personel { background: linear-gradient(135deg, #2e1065 0%, #4c1d95 55%, #6d28d9 100%); }
.em-baslik--isg      { background: linear-gradient(135deg, #052e26 0%, #0b5345 55%, #0f766e 100%); }
.em-baslik--arac     { background: linear-gradient(135deg, #0c0a09 0%, #292524 55%, #57534e 100%); }
.em-baslik--harita   { background: linear-gradient(135deg, #082f49 0%, #0e7490 55%, #0891b2 100%); }
.em-baslik--hakedis  { background: linear-gradient(135deg, #422006 0%, #713f12 55%, #a16207 100%); }
.em-baslik--kitap    { background: linear-gradient(135deg, #1e1b4b 0%, #312e81 55%, #4338ca 100%); }
.em-baslik--guvenlik { background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 55%, #b91c1c 100%); }
.em-baslik--satinalma{ background: linear-gradient(135deg, #422006 0%, #78350f 55%, #c2410c 100%); }
.em-baslik--demirbas { background: linear-gradient(135deg, #1c1917 0%, #44403c 55%, #78716c 100%); }
.em-baslik--rapor    { background: linear-gradient(135deg, #172554 0%, #1e3a8a 55%, #1d4ed8 100%); }

/* ::after koyulaştırması da modüle uyar; yoksa lacivert perde bütün
   şeritleri aynı renge çeker ve modül ayrımı kaybolur. */
.em-baslik--proje::after    { background: linear-gradient(90deg, rgba(12,74,110,.92) 0%, rgba(12,74,110,.55) 55%, rgba(12,74,110,.08) 100%); }
.em-baslik--depo::after     { background: linear-gradient(90deg, rgba(69,26,3,.92) 0%, rgba(69,26,3,.55) 55%, rgba(69,26,3,.08) 100%); }
.em-baslik--muhasebe::after { background: linear-gradient(90deg, rgba(5,46,22,.92) 0%, rgba(5,46,22,.55) 55%, rgba(5,46,22,.08) 100%); }
.em-baslik--personel::after { background: linear-gradient(90deg, rgba(46,16,101,.92) 0%, rgba(46,16,101,.55) 55%, rgba(46,16,101,.08) 100%); }
.em-baslik--isg::after      { background: linear-gradient(90deg, rgba(5,46,38,.92) 0%, rgba(5,46,38,.55) 55%, rgba(5,46,38,.08) 100%); }
.em-baslik--arac::after     { background: linear-gradient(90deg, rgba(12,10,9,.92) 0%, rgba(12,10,9,.55) 55%, rgba(12,10,9,.08) 100%); }
.em-baslik--harita::after   { background: linear-gradient(90deg, rgba(8,47,73,.92) 0%, rgba(8,47,73,.55) 55%, rgba(8,47,73,.08) 100%); }
.em-baslik--hakedis::after  { background: linear-gradient(90deg, rgba(66,32,6,.92) 0%, rgba(66,32,6,.55) 55%, rgba(66,32,6,.08) 100%); }
.em-baslik--kitap::after    { background: linear-gradient(90deg, rgba(30,27,75,.92) 0%, rgba(30,27,75,.55) 55%, rgba(30,27,75,.08) 100%); }
.em-baslik--guvenlik::after { background: linear-gradient(90deg, rgba(69,10,10,.92) 0%, rgba(69,10,10,.55) 55%, rgba(69,10,10,.08) 100%); }
.em-baslik--satinalma::after{ background: linear-gradient(90deg, rgba(66,32,6,.92) 0%, rgba(66,32,6,.55) 55%, rgba(66,32,6,.08) 100%); }
.em-baslik--demirbas::after { background: linear-gradient(90deg, rgba(28,25,23,.92) 0%, rgba(28,25,23,.55) 55%, rgba(28,25,23,.08) 100%); }
.em-baslik--rapor::after    { background: linear-gradient(90deg, rgba(23,37,84,.92) 0%, rgba(23,37,84,.55) 55%, rgba(23,37,84,.08) 100%); }

@media (max-width: 640px) {
  .em-baslik { padding: 14px 16px; }
  .em-baslik__ad { font-size: 1.12rem; }
}

/* KALAN MODÜLLER: ölçüldü (15.09.2026) — menüdeki 169 ekran 18 modüle
   dağılıyor; yukarıdaki 13'ün dışında kalan 5'i de kendi rengini alsın,
   yoksa lacivert varsayılanda toplanıp birbirine karışırlar. */
.em-baslik--pazar          { background: linear-gradient(135deg, #4a044e 0%, #701a75 55%, #a21caf 100%); }
.em-baslik--yetki          { background: linear-gradient(135deg, #1e1b4b 0%, #3730a3 55%, #4f46e5 100%); }
.em-baslik--ihale          { background: linear-gradient(135deg, #083344 0%, #155e75 55%, #0e7490 100%); }
.em-baslik--erpteams       { background: linear-gradient(135deg, #0f172a 0%, #164e63 55%, #0891b2 100%); }
.em-baslik--taseron_portal { background: linear-gradient(135deg, #1a2e05 0%, #365314 55%, #4d7c0f 100%); }
.em-baslik--merkez         { background: linear-gradient(135deg, #172554 0%, #1e40af 55%, #2563eb 100%); }
.em-baslik--santiye        { background: linear-gradient(135deg, #431407 0%, #7c2d12 55%, #c2410c 100%); }

.em-baslik--pazar::after          { background: linear-gradient(90deg, rgba(74,4,78,.92) 0%, rgba(74,4,78,.55) 55%, rgba(74,4,78,.08) 100%); }
.em-baslik--yetki::after          { background: linear-gradient(90deg, rgba(30,27,75,.92) 0%, rgba(30,27,75,.55) 55%, rgba(30,27,75,.08) 100%); }
.em-baslik--ihale::after          { background: linear-gradient(90deg, rgba(8,51,68,.92) 0%, rgba(8,51,68,.55) 55%, rgba(8,51,68,.08) 100%); }
.em-baslik--erpteams::after       { background: linear-gradient(90deg, rgba(15,23,42,.92) 0%, rgba(15,23,42,.55) 55%, rgba(15,23,42,.08) 100%); }
.em-baslik--taseron_portal::after { background: linear-gradient(90deg, rgba(26,46,5,.92) 0%, rgba(26,46,5,.55) 55%, rgba(26,46,5,.08) 100%); }
.em-baslik--merkez::after         { background: linear-gradient(90deg, rgba(23,37,84,.92) 0%, rgba(23,37,84,.55) 55%, rgba(23,37,84,.08) 100%); }
.em-baslik--santiye::after        { background: linear-gradient(90deg, rgba(67,20,7,.92) 0%, rgba(67,20,7,.55) 55%, rgba(67,20,7,.08) 100%); }

/* ==========================================================================
   MODÜL ŞERİTLERİ — KURUMSAL RENGİMİZ: YEŞİLİN TONLARI
   --------------------------------------------------------------------------
   Kullanıcı 15.09.2026: "bizim kurumsal renklerimiz YEŞİLİN TONLARI!"

   İlk denemede her modüle ayrı bir renk ailesi verilmişti (mavi/mor/kehribar/
   kırmızı). Modülleri ayırıyordu ama MARKAYI dağıtıyordu: ErpMerkez yeşil bir
   kurumdur, on üç ayrı renk kurumsal görünmüyordu.

   Bu blok yukarıdaki renkleri EZER (dosyada sonra geldiği için kazanır).
   Modül ayrımı KAYBOLMUYOR: aynı yeşil ailesinin farklı tonları — koyu
   zümrütten çam yeşiline, deniz yeşilinden zeytine. Yan yana konunca
   birbirinden ayırt ediliyor, hepsi aynı markanın rengi kalıyor.
   ========================================================================== */

/* Varsayılan (modülsüz ekranlar) — marka yeşili */
.em-baslik            { background: linear-gradient(135deg, #052e26 0%, #0b5345 55%, #0f766e 100%); }
.em-baslik::after     { background: linear-gradient(90deg, rgba(5,46,38,.92) 0%, rgba(5,46,38,.55) 55%, rgba(5,46,38,.10) 100%); }
/* Desen de yeşile döner: gri ızgara marka dışıydı. */
.em-baslik::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='110' viewBox='0 0 220 110'%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1' opacity='.75'%3E%3Cpath d='M0 90h220M0 60h220M0 30h220'/%3E%3Cpath d='M30 0v110M80 0v110M130 0v110M180 0v110'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- MODÜL TONLARI (hepsi yeşil ailesinden) ---------------------------- */
.em-baslik--proje     { background: linear-gradient(135deg, #022c22 0%, #064e3b 55%, #059669 100%); } /* zümrüt */
.em-baslik--depo      { background: linear-gradient(135deg, #14532d 0%, #166534 55%, #16a34a 100%); } /* çim */
.em-baslik--muhasebe  { background: linear-gradient(135deg, #052e16 0%, #14532d 55%, #15803d 100%); } /* çam */
.em-baslik--personel  { background: linear-gradient(135deg, #042f2e 0%, #115e59 55%, #0d9488 100%); } /* deniz */
.em-baslik--isg       { background: linear-gradient(135deg, #052e26 0%, #0b5345 55%, #0f766e 100%); } /* marka */
.em-baslik--arac      { background: linear-gradient(135deg, #1a2e05 0%, #365314 55%, #4d7c0f 100%); } /* zeytin */
.em-baslik--harita    { background: linear-gradient(135deg, #083344 0%, #0f766e 55%, #14b8a6 100%); } /* turkuaz */
.em-baslik--hakedis   { background: linear-gradient(135deg, #1a2e05 0%, #3f6212 55%, #65a30d 100%); } /* fıstık */
.em-baslik--kitap     { background: linear-gradient(135deg, #022c22 0%, #065f46 55%, #047857 100%); } /* koyu zümrüt */
.em-baslik--guvenlik  { background: linear-gradient(135deg, #0c1f17 0%, #14532d 55%, #4d7c0f 100%); } /* haki */
.em-baslik--satinalma { background: linear-gradient(135deg, #14532d 0%, #3f6212 55%, #84cc16 100%); } /* açık çim */
.em-baslik--demirbas  { background: linear-gradient(135deg, #0c1f17 0%, #1f3d2b 55%, #3f6212 100%); } /* mat yeşil */
.em-baslik--rapor     { background: linear-gradient(135deg, #042f2e 0%, #134e4a 55%, #0f766e 100%); } /* petrol */
.em-baslik--pazar     { background: linear-gradient(135deg, #022c22 0%, #047857 55%, #10b981 100%); } /* canlı */
.em-baslik--yetki     { background: linear-gradient(135deg, #0c1f17 0%, #115e59 55%, #0f766e 100%); }
.em-baslik--ihale     { background: linear-gradient(135deg, #083344 0%, #115e59 55%, #0d9488 100%); }
.em-baslik--erpteams  { background: linear-gradient(135deg, #042f2e 0%, #0f766e 55%, #14b8a6 100%); }
.em-baslik--taseron_portal { background: linear-gradient(135deg, #1a2e05 0%, #365314 55%, #65a30d 100%); }
.em-baslik--merkez    { background: linear-gradient(135deg, #022c22 0%, #065f46 55%, #10b981 100%); }
.em-baslik--santiye   { background: linear-gradient(135deg, #14532d 0%, #166534 55%, #22c55e 100%); }

/* KOYULAŞTIRMA da tona uyar: perde farklı renkte olsaydı şeritler ortada
   birbirine benzer, ayrım yalnız kenarda kalırdı. */
.em-baslik--proje::after     { background: linear-gradient(90deg, rgba(2,44,34,.92) 0%, rgba(2,44,34,.55) 55%, rgba(2,44,34,.10) 100%); }
.em-baslik--depo::after      { background: linear-gradient(90deg, rgba(20,83,45,.92) 0%, rgba(20,83,45,.55) 55%, rgba(20,83,45,.10) 100%); }
.em-baslik--muhasebe::after  { background: linear-gradient(90deg, rgba(5,46,22,.92) 0%, rgba(5,46,22,.55) 55%, rgba(5,46,22,.10) 100%); }
.em-baslik--personel::after  { background: linear-gradient(90deg, rgba(4,47,46,.92) 0%, rgba(4,47,46,.55) 55%, rgba(4,47,46,.10) 100%); }
.em-baslik--isg::after       { background: linear-gradient(90deg, rgba(5,46,38,.92) 0%, rgba(5,46,38,.55) 55%, rgba(5,46,38,.10) 100%); }
.em-baslik--arac::after      { background: linear-gradient(90deg, rgba(26,46,5,.92) 0%, rgba(26,46,5,.55) 55%, rgba(26,46,5,.10) 100%); }
.em-baslik--harita::after    { background: linear-gradient(90deg, rgba(8,51,68,.92) 0%, rgba(8,51,68,.55) 55%, rgba(8,51,68,.10) 100%); }
.em-baslik--hakedis::after   { background: linear-gradient(90deg, rgba(26,46,5,.92) 0%, rgba(26,46,5,.55) 55%, rgba(26,46,5,.10) 100%); }
.em-baslik--kitap::after     { background: linear-gradient(90deg, rgba(2,44,34,.92) 0%, rgba(2,44,34,.55) 55%, rgba(2,44,34,.10) 100%); }
.em-baslik--guvenlik::after  { background: linear-gradient(90deg, rgba(12,31,23,.92) 0%, rgba(12,31,23,.55) 55%, rgba(12,31,23,.10) 100%); }
.em-baslik--satinalma::after { background: linear-gradient(90deg, rgba(20,83,45,.92) 0%, rgba(20,83,45,.55) 55%, rgba(20,83,45,.10) 100%); }
.em-baslik--demirbas::after  { background: linear-gradient(90deg, rgba(12,31,23,.92) 0%, rgba(12,31,23,.55) 55%, rgba(12,31,23,.10) 100%); }
.em-baslik--rapor::after     { background: linear-gradient(90deg, rgba(4,47,46,.92) 0%, rgba(4,47,46,.55) 55%, rgba(4,47,46,.10) 100%); }
.em-baslik--pazar::after     { background: linear-gradient(90deg, rgba(2,44,34,.92) 0%, rgba(2,44,34,.55) 55%, rgba(2,44,34,.10) 100%); }
.em-baslik--yetki::after     { background: linear-gradient(90deg, rgba(12,31,23,.92) 0%, rgba(12,31,23,.55) 55%, rgba(12,31,23,.10) 100%); }
.em-baslik--ihale::after     { background: linear-gradient(90deg, rgba(8,51,68,.92) 0%, rgba(8,51,68,.55) 55%, rgba(8,51,68,.10) 100%); }
.em-baslik--erpteams::after  { background: linear-gradient(90deg, rgba(4,47,46,.92) 0%, rgba(4,47,46,.55) 55%, rgba(4,47,46,.10) 100%); }
.em-baslik--taseron_portal::after { background: linear-gradient(90deg, rgba(26,46,5,.92) 0%, rgba(26,46,5,.55) 55%, rgba(26,46,5,.10) 100%); }
.em-baslik--merkez::after    { background: linear-gradient(90deg, rgba(2,44,34,.92) 0%, rgba(2,44,34,.55) 55%, rgba(2,44,34,.10) 100%); }
.em-baslik--santiye::after   { background: linear-gradient(90deg, rgba(20,83,45,.92) 0%, rgba(20,83,45,.55) 55%, rgba(20,83,45,.10) 100%); }

/* ==========================================================================
   İKON KUTULARI: KARE DEĞİL, YUVARLAK ÇİZİM ROZETİ
   --------------------------------------------------------------------------
   Kullanıcı 15.09.2026: "tablo içi kare değiş, o işe uygun küçük çizimler".

   ÖLÇÜLDÜ: ikonların KENDİSİ zaten işe uygun (klasör, cetvel, hesap
   makinesi, takvim...). Sorun ARKALARINDAKİ KUTUYDU — 46px'lik, 11px
   köşeli, dolu bir KARE blok. Ekranda ikon değil, kutu görünüyordu.

   Kutu yuvarlak bir rozete iniyor: dolgu soluyor, yerine ince bir marka
   halkası geliyor ve GLİF BÜYÜYOR. Böylece bakılan şey çizimin kendisi
   oluyor, çerçevesi değil.

   SEÇİCİ SINIFA GÖRE: kopyalanan 126 sayfanın her biri kendi adıyla bir
   kutu sınıfı taşıyor (projeler-stats__icon, depo-stats__icon ...). Hepsini
   tek tek yazmak yerine ORTAK EKİ eşleşiyor -- yeni bir sayfa geldiğinde
   kendiliğinden kapsanıyor.
   ========================================================================== */
[class*="stats__icon"],
[class*="stat-card__icon"],
[class*="kart__ikon"],
.modal-icon-wrapper,
.ih-kpi-ikon {
  border-radius: 50% !important;
  background: var(--em-ana-acik) !important;
  border: 1.5px solid var(--em-ana-kenar) !important;
  color: var(--em-ana-koyu) !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
}
/* GLİF BÜYÜR: bakılan şey çizim olsun. */
[class*="stats__icon"] > i,
[class*="stat-card__icon"] > i,
[class*="kart__ikon"] > i,
.modal-icon-wrapper > i,
.ih-kpi-ikon > i {
  font-size: 1.35em !important;
  line-height: 1 !important;
  color: inherit !important;
}
/* DURUM TONLARI KORUNUR: uyarı/hata kartlarının rengi kaybolmasın --
   yoksa "süresi geçmiş" kartı da yeşil görünür ve uyarı olmaktan çıkar. */
.ih-kpi-kart--uyar .ih-kpi-ikon {
  background: var(--em-uyari-acik) !important;
  border-color: var(--em-uyari) !important;
  color: var(--em-uyarikutu-uyari) !important;
}
.ih-kpi-kart--kot .ih-kpi-ikon {
  background: var(--em-hata-acik) !important;
  border-color: var(--em-hata) !important;
  color: var(--em-hata) !important;
}
.ih-kpi-kart--notr .ih-kpi-ikon {
  background: var(--em-yuzey-2) !important;
  border-color: var(--em-cizgi) !important;
  color: var(--em-metin-2) !important;
}

/* ÜST BAR DÜĞMELERİ de yuvarlak: aynı dil, aynı yumuşaklık. */
.em-ust__ikon { border-radius: 50% !important; }

/* MASAÜSTÜ KISAYOL İKONU: kare kutu yerine halka. */
.em-masa__oge .em-masa__oge-ikon,
.em-masa__oge > i.bx {
  border-radius: 50% !important;
}

/* ==========================================================================
   MODÜL DESENLERİ — HER İŞİN KENDİ ÇİZİMİ
   --------------------------------------------------------------------------
   Kullanıcı 15.09.2026: "burada KARELER DEĞİL, her işe uygun görseller
   olsun; mesela İSG'de duba, baret, gözlük vs gibi, Proje'de direk iletken
   çekimi, Muhasebe'de para akışı çizimleri gibi, araçlarda araç göstergesi
   falan — yani BİZİM İŞE UYGUN."

   Önceki desen düz bir ızgaraydı: kurumsal duruyordu ama hiçbir şey
   anlatmıyordu. Artık her modülün şeridinde o işin aleti var.

   TASARIM KURALI: çizgi ince (0.9–1.2), renk marka yeşilinin açığı
   (#6ee7b7 / #34d399), opaklık düşük. Desen yazının ARKASINDA kalmalı --
   `::after` koyulaştırması zaten sol tarafı bastırıyor, motif sağda
   okunuyor. Kalın ya da parlak bir desen başlığı okunmaz yapardı.
   ========================================================================== */

/* --- İSG: baret · duba · koruyucu gözlük · uyarı üçgeni ---------------- */
.em-baslik--isg::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150' viewBox='0 0 300 150'%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 74c0-16 12-28 26-28s26 12 26 28'/%3E%3Cpath d='M14 74h68'/%3E%3Cpath d='M38 48c0-9 3-15 10-15s10 6 10 15'/%3E%3Cpath d='M112 78l10-34h18l10 34z'/%3E%3Cpath d='M104 80h56'/%3E%3Cpath d='M116 64h28M119 55h22'/%3E%3Ccircle cx='196' cy='60' r='11'/%3E%3Ccircle cx='224' cy='60' r='11'/%3E%3Cpath d='M207 60h6M185 56l-9-5M235 56l9-5'/%3E%3Cpath d='M262 44l20 34h-40z'/%3E%3Cpath d='M262 56v10'/%3E%3C/g%3E%3Ccircle cx='262' cy='72' r='1.5' fill='%236ee7b7'/%3E%3Cg fill='none' stroke='%2334d399' stroke-width='1' opacity='.55' stroke-linecap='round'%3E%3Cpath d='M30 112h44M30 124h30'/%3E%3Cpath d='M112 112l8 8 14-16'/%3E%3Cpath d='M180 118h40M180 130h26'/%3E%3Cpath d='M250 104c0-8 6-14 14-14s14 6 14 14c0 10-14 22-14 22s-14-12-14-22z'/%3E%3Ccircle cx='264' cy='104' r='4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 150px;
}

/* --- PROJE: kafes direk · iletken çekimi · izolatör -------------------- */
.em-baslik--proje::before,
.em-baslik--ihale::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='150' viewBox='0 0 320 150'%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M44 130L56 40M76 130L64 40'/%3E%3Cpath d='M48 108h24M51 86h18M54 64h12'/%3E%3Cpath d='M46 122l28-14M74 122l-28-14M50 100l20-10M70 100l-20-10M53 78l14-7M67 78l-14-7'/%3E%3Cpath d='M36 46h48M42 32h36'/%3E%3Cpath d='M60 40V22'/%3E%3C/g%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M244 130L256 40M276 130L264 40'/%3E%3Cpath d='M248 108h24M251 86h18M254 64h12'/%3E%3Cpath d='M246 122l28-14M274 122l-28-14M250 100l20-10M270 100l-20-10'/%3E%3Cpath d='M236 46h48M242 32h36'/%3E%3Cpath d='M260 40V22'/%3E%3C/g%3E%3Cg fill='none' stroke='%2334d399' stroke-width='1.2' opacity='.8'%3E%3Cpath d='M36 46C110 92 186 92 236 46'/%3E%3Cpath d='M42 32C112 76 188 76 242 32'/%3E%3Cpath d='M84 46C132 78 176 78 236 46' opacity='.5'/%3E%3C/g%3E%3Cg fill='none' stroke='%2334d399' stroke-width='.9' opacity='.6'%3E%3Cpath d='M150 72v10M146 82h8M146 88h8M146 94h8'/%3E%3Ccircle cx='150' cy='100' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 320px 150px;
}

/* --- MUHASEBE: para akışı · madeni para · banknot --------------------- */
.em-baslik--muhasebe::before,
.em-baslik--hakedis::before,
.em-baslik--merkez::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150' viewBox='0 0 300 150'%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='48' cy='44' rx='26' ry='9'/%3E%3Cpath d='M22 44v14c0 5 12 9 26 9s26-4 26-9V44'/%3E%3Cpath d='M22 58v14c0 5 12 9 26 9s26-4 26-9V58'/%3E%3Cpath d='M22 72v14c0 5 12 9 26 9s26-4 26-9V72'/%3E%3C/g%3E%3Cg fill='none' stroke='%2334d399' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M96 62h58'/%3E%3Cpath d='M146 54l10 8-10 8'/%3E%3Cpath d='M154 96H96'/%3E%3Cpath d='M104 88l-10 8 10 8'/%3E%3C/g%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='176' y='44' width='96' height='50' rx='5'/%3E%3Ccircle cx='224' cy='69' r='13'/%3E%3Cpath d='M219 62v16M215 67h11M215 73h11M228 62l-9 16' opacity='.9'/%3E%3Cpath d='M186 54h10M252 84h10'/%3E%3C/g%3E%3Cg fill='none' stroke='%2334d399' stroke-width='1' opacity='.55' stroke-linecap='round'%3E%3Cpath d='M40 118v16M56 110v24M72 122v12M88 104v30M104 114v20'/%3E%3Cpath d='M32 134h84'/%3E%3Cpath d='M180 128c14-12 30-18 48-18s34 6 48 18' /%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 150px;
}

/* --- ARAÇ: gösterge · direksiyon · tekerlek --------------------------- */
.em-baslik--arac::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150' viewBox='0 0 300 150'%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 88a34 34 0 0 1 68 0'/%3E%3Cpath d='M52 88L74 62'/%3E%3Cpath d='M22 78l6 3M30 64l5 5M52 58v7M74 64l-5 5M82 78l-6 3'/%3E%3C/g%3E%3Ccircle cx='52' cy='88' r='2.4' fill='%236ee7b7'/%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='156' cy='72' r='30'/%3E%3Ccircle cx='156' cy='72' r='10'/%3E%3Cpath d='M156 62V42M147 79l-18 16M165 79l18 16'/%3E%3C/g%3E%3Cg fill='none' stroke='%2334d399' stroke-width='1.1' opacity='.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M212 96h72l-8-26h-16l-10-14h-26l-6 14h-14z'/%3E%3Ccircle cx='230' cy='102' r='8'/%3E%3Ccircle cx='268' cy='102' r='8'/%3E%3Cpath d='M220 84h20'/%3E%3C/g%3E%3Cg fill='none' stroke='%2334d399' stroke-width='1' opacity='.5' stroke-linecap='round'%3E%3Cpath d='M28 124h48M92 124h36M144 124h60M216 124h56'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 150px;
}

/* --- DEPO: raf · palet · forklift ------------------------------------- */
.em-baslik--depo::before,
.em-baslik--demirbas::before,
.em-baslik--satinalma::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150' viewBox='0 0 300 150'%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 30v92M92 30v92'/%3E%3Cpath d='M20 30h72M20 60h72M20 90h72M20 120h72'/%3E%3Crect x='28' y='36' width='24' height='20' rx='2'/%3E%3Crect x='58' y='36' width='26' height='20' rx='2'/%3E%3Crect x='28' y='66' width='30' height='20' rx='2'/%3E%3Crect x='64' y='66' width='20' height='20' rx='2'/%3E%3Crect x='34' y='96' width='26' height='20' rx='2'/%3E%3C/g%3E%3Cg fill='none' stroke='%2334d399' stroke-width='1.1' opacity='.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M124 108h56M124 116h56'/%3E%3Cpath d='M132 108v8M152 108v8M172 108v8'/%3E%3Crect x='130' y='72' width='46' height='34' rx='3'/%3E%3Cpath d='M153 72v34M130 89h46'/%3E%3C/g%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.15' opacity='.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M212 100h44v-26h-18l-8-14h-18z'/%3E%3Ccircle cx='224' cy='108' r='7'/%3E%3Ccircle cx='250' cy='108' r='7'/%3E%3Cpath d='M258 60v46M258 60h20M262 106h22'/%3E%3Crect x='266' y='74' width='18' height='16' rx='2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 150px;
}

/* --- PERSONEL: kimlik kartı · ekip · baret + kişi --------------------- */
.em-baslik--personel::before,
.em-baslik--yetki::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150' viewBox='0 0 300 150'%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='22' y='40' width='84' height='58' rx='6'/%3E%3Cpath d='M52 34h24v10H52z'/%3E%3Ccircle cx='46' cy='62' r='9'/%3E%3Cpath d='M32 86c0-9 6-15 14-15s14 6 14 15'/%3E%3Cpath d='M70 56h26M70 66h26M70 76h16'/%3E%3C/g%3E%3Cg fill='none' stroke='%2334d399' stroke-width='1.15' opacity='.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='150' cy='58' r='11'/%3E%3Cpath d='M132 92c0-11 8-19 18-19s18 8 18 19'/%3E%3Cpath d='M139 47c0-7 4-12 11-12s11 5 11 12'/%3E%3Cpath d='M135 47h30'/%3E%3Ccircle cx='190' cy='64' r='9'/%3E%3Cpath d='M175 92c0-9 7-16 15-16s15 7 15 16'/%3E%3Ccircle cx='112' cy='64' r='9'/%3E%3Cpath d='M97 92c0-9 7-16 15-16s15 7 15 16'/%3E%3C/g%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1' opacity='.55' stroke-linecap='round'%3E%3Cpath d='M228 44h50M228 56h50M228 68h34M228 80h42M228 92h28'/%3E%3Cpath d='M218 44l4 4 6-8M218 56l4 4 6-8M218 68l4 4 6-8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 150px;
}

/* --- HARİTA: pafta · nokta · pusula · nivo ---------------------------- */
.em-baslik--harita::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150' viewBox='0 0 300 150'%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 44l30-12 34 12 30-12v62l-30 12-34-12-30 12z'/%3E%3Cpath d='M50 32v62M84 44v62'/%3E%3C/g%3E%3Cg fill='none' stroke='%2334d399' stroke-width='1.15' opacity='.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M146 58c0-11 9-20 20-20s20 9 20 20c0 15-20 34-20 34s-20-19-20-34z'/%3E%3Ccircle cx='166' cy='57' r='6'/%3E%3C/g%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.1' opacity='.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='246' cy='64' r='28'/%3E%3Cpath d='M246 36v-6M246 98v-6M218 64h-6M280 64h-6'/%3E%3Cpath d='M234 76l24-24M258 52l-8 18-16 6z'/%3E%3C/g%3E%3Cg fill='none' stroke='%2334d399' stroke-width='1' opacity='.5' stroke-linecap='round'%3E%3Cpath d='M24 120h70M110 120h60M186 120h90'/%3E%3Cpath d='M40 112v16M126 112v16M212 112v16'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 150px;
}

/* --- KİTAP / RAPOR: poz defteri · grafik ------------------------------ */
.em-baslik--kitap::before,
.em-baslik--rapor::before,
.em-baslik--pazar::before,
.em-baslik--taseron_portal::before,
.em-baslik--santiye::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150' viewBox='0 0 300 150'%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 36c16-6 32-6 46 2v74c-14-8-30-8-46-2z'/%3E%3Cpath d='M114 36c-16-6-32-6-46 2v74c14-8 30-8 46-2z'/%3E%3Cpath d='M68 38v74'/%3E%3Cpath d='M30 52h28M30 64h28M30 76h20M78 52h28M78 64h28M78 76h20'/%3E%3C/g%3E%3Cg fill='none' stroke='%2334d399' stroke-width='1.15' opacity='.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M146 110V86M164 110V68M182 110V54M200 110V74M218 110V44'/%3E%3Cpath d='M138 110h88'/%3E%3Cpath d='M146 80l18-14 18-12 18 18 18-28'/%3E%3C/g%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.1' opacity='.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='262' cy='70' r='24'/%3E%3Cpath d='M262 70V46M262 70l20 10'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 150px;
}

/* ==========================================================================
   BEŞ MODÜLE KENDİNE ÖZGÜ ŞERİT  (İSG · GÜVENLİK · ERPTEAMS · ARAÇ · HARİTA)
   --------------------------------------------------------------------------
   Kullanıcı 15.09.2026: "isg menüsü - güvenlik menüsü - erpteams - araç -
   harita hepsine KENDİNE ÖZGÜ yeşilin tonları, İŞE ÖZEL DESENLİ bannerlar
   oluştur."

   ÖNCEKİ DURUM ÖLÇÜLDÜ: Güvenlik, İSG'nin desenini PAYLAŞIYORDU (güvenlik
   ekranında baret/duba çiziliyordu) ve ErpTeams, Kitap/Rapor'un desenini
   paylaşıyordu (toplantı ekranında poz defteri çiziliyordu). Paylaşım
   ekonomikti ama modülü YANLIŞ anlatıyordu. Ayrıca Harita ile ErpTeams
   NEREDEYSE AYNI turkuaz gradyanı taşıyordu -- yan yana ayırt edilmiyordu.

   Beşi de artık kendi motifini ve birbirinden ayırt edilen kendi yeşil
   tonunu taşıyor. Renkler marka ailesinden çıkmıyor:
     İSG      koyu zümrüt-teal (marka tonu)
     Güvenlik mat çam/haki -- soğuk, ciddi
     ErpTeams canlı çim -> nane -- iletişim modülü, en canlısı
     Araç     zeytin/fıstık -- sıcak, sarıya çalan
     Harita   petrol turkuaz -- topografik
   ========================================================================== */

/* --- İSG · KOYU ZÜMRÜT (marka) ---------------------------------------- */
.em-baslik--isg       { background: linear-gradient(135deg, #052e26 0%, #0b5345 55%, #0f766e 100%); }
.em-baslik--isg::after{ background: linear-gradient(90deg, rgba(5,46,38,.93) 0%, rgba(5,46,38,.56) 55%, rgba(5,46,38,.10) 100%); }

/* --- GÜVENLİK · MAT ÇAM/HAKİ -------------------------------------------
   kamera + sinyal · kalkan/tik · asma kilit · bariyer kolu · devriye rotası */
.em-baslik--guvenlik       { background: linear-gradient(135deg, #0d1f14 0%, #1e4230 55%, #35734d 100%); }
.em-baslik--guvenlik::after{ background: linear-gradient(90deg, rgba(13,31,20,.93) 0%, rgba(13,31,20,.57) 55%, rgba(13,31,20,.10) 100%); }
.em-baslik--guvenlik::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150' viewBox='0 0 300 150'%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M26 40h16M34 40v12'/%3E%3Crect x='22' y='52' width='48' height='22' rx='4'/%3E%3Cpath d='M70 58l16-8v26l-16-8z'/%3E%3Ccircle cx='32' cy='63' r='3'/%3E%3C/g%3E%3Cg fill='none' stroke='%2334d399' stroke-width='1' opacity='.5'%3E%3Cpath d='M92 50c8 6 8 22 0 28'/%3E%3Cpath d='M100 44c12 10 12 32 0 42'/%3E%3C/g%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M150 32l26 10v26c0 18-14 30-26 36-12-6-26-18-26-36V42z'/%3E%3Cpath d='M138 66l9 9 18-20'/%3E%3C/g%3E%3Cg fill='none' stroke='%2334d399' stroke-width='1.1' opacity='.78' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='226' y='64' width='36' height='28' rx='5'/%3E%3Cpath d='M234 64V52c0-6 5-10 10-10s10 4 10 10v12'/%3E%3Ccircle cx='244' cy='75' r='4'/%3E%3Cpath d='M244 79v6'/%3E%3C/g%3E%3Cg fill='none' stroke='%2334d399' stroke-width='1.1' opacity='.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 136V108M20 136h16'/%3E%3Cpath d='M32 112h84'/%3E%3Cpath d='M44 108v8M60 108v8M76 108v8M92 108v8M108 108v8'/%3E%3C/g%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1' opacity='.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M140 128c16-14 30 6 46-4s26 6 42-4s26 8 40 0'/%3E%3Ccircle cx='140' cy='128' r='2.4'/%3E%3Ccircle cx='186' cy='124' r='2.4'/%3E%3Ccircle cx='228' cy='120' r='2.4'/%3E%3Ccircle cx='268' cy='120' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 150px;
}

/* --- ERPTEAMS · CANLI ÇİM -> NANE --------------------------------------
   sohbet balonu · yanıt balonu · görüntülü görüşme · ekip · ekran paylaşımı */
.em-baslik--erpteams       { background: linear-gradient(135deg, #0a4020 0%, #0f9d58 55%, #34d399 100%); }
.em-baslik--erpteams::after{ background: linear-gradient(90deg, rgba(10,64,32,.94) 0%, rgba(10,64,32,.60) 55%, rgba(10,64,32,.12) 100%); }
.em-baslik--erpteams::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150' viewBox='0 0 300 150'%3E%3Cg fill='none' stroke='%23d1fae5' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M25 42h61a7 7 0 0 1 7 7v28a7 7 0 0 1-7 7H52l-16 13V84H25a7 7 0 0 1-7-7V49a7 7 0 0 1 7-7z'/%3E%3Cpath d='M32 58h44M32 70h28'/%3E%3C/g%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.15' opacity='.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M116 62h52a6 6 0 0 1 6 6v20a6 6 0 0 1-6 6h-6l-12 11V94h-34a6 6 0 0 1-6-6V68a6 6 0 0 1 6-6z'/%3E%3Cpath d='M122 74h34M122 84h22'/%3E%3C/g%3E%3Cg fill='none' stroke='%23d1fae5' stroke-width='1.15' opacity='.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='196' y='44' width='54' height='38' rx='5'/%3E%3Cpath d='M250 56l20-10v28l-20-10z'/%3E%3Ccircle cx='214' cy='58' r='7'/%3E%3Cpath d='M203 76c0-7 5-11 11-11s11 4 11 11'/%3E%3Ccircle cx='236' cy='62' r='5'/%3E%3Cpath d='M228 76c0-5 4-8 8-8s8 3 8 8'/%3E%3C/g%3E%3Cg fill='none' stroke='%236ee7b7' stroke-width='1.1' opacity='.62' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='44' cy='116' r='8'/%3E%3Cpath d='M32 134c0-7 5-12 12-12s12 5 12 12'/%3E%3Ccircle cx='72' cy='116' r='8'/%3E%3Cpath d='M60 134c0-7 5-12 12-12s12 5 12 12'/%3E%3Cpath d='M52 110c6-6 14-6 20 0'/%3E%3Cpath d='M126 108h34l8 8v26h-42z'/%3E%3Cpath d='M160 108v8h8'/%3E%3Cpath d='M134 124h20M134 132h14'/%3E%3Cpath d='M176 126h18M188 120l8 6-8 6'/%3E%3Crect x='214' y='104' width='52' height='30' rx='4'/%3E%3Cpath d='M240 134v6M228 140h24'/%3E%3Cpath d='M240 128v-14M233 121l7-7 7 7'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 150px;
}

/* --- ARAÇ · ZEYTİN/FISTIK ----------------------------------------------
   (deseni yukarıda: gösterge · direksiyon · araç silueti) */
.em-baslik--arac       { background: linear-gradient(135deg, #1a2e05 0%, #365314 55%, #4d7c0f 100%); }
.em-baslik--arac::after{ background: linear-gradient(90deg, rgba(26,46,5,.93) 0%, rgba(26,46,5,.57) 55%, rgba(26,46,5,.10) 100%); }

/* --- HARİTA · PETROL TURKUAZ -------------------------------------------
   (deseni yukarıda: pafta · konum iğnesi · pusula) */
.em-baslik--harita       { background: linear-gradient(135deg, #053b3e 0%, #0d7f7a 55%, #22b8a6 100%); }
.em-baslik--harita::after{ background: linear-gradient(90deg, rgba(5,59,62,.93) 0%, rgba(5,59,62,.57) 55%, rgba(5,59,62,.10) 100%); }

/* ==========================================================================
   PUANTAJ KOD PANELİ  —  tarayıcının <datalist>'i yerine kendi listemiz
   --------------------------------------------------------------------------
   Kullanıcı (süregelen): "datalist değil kendi açılır listemiz olsun."
   Puantaj ızgarası sistemdeki SON <datalist> kullanan ekrandı.

   Tarayıcının kendi listesi temayı almıyor, Türkçe harfleri katlamıyor
   (I / İ / ı ayrı sayılıyor), kodun ANLAMINI göstermiyor ve bazı mobil
   tarayıcılarda hiç açılmıyor. Bu panel üçünü de çözer.

   Panel TEKTİR ve açılan hücrenin altına taşınır: 31 gün × N personel için
   ayrı panel basmak binlerce düğüm demekti.
   ========================================================================== */
.pz-kodpanel {
  position: absolute; z-index: 2400; min-width: 240px; max-width: 320px;
  background: var(--em-yuzey, #fff);
  border: 1px solid var(--em-cizgi, #e2e8f0);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(15,23,42,.16);
  overflow: hidden;
}
.pz-kp__liste { max-height: 232px; overflow-y: auto; padding: 4px; }
.pz-kp__oge {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 9px; border: 0; border-radius: 7px;
  background: transparent; text-align: left; cursor: pointer;
  font-size: .82rem; color: var(--em-metin, #0f172a);
}
.pz-kp__oge:hover,
.pz-kp__oge--etkin { background: var(--em-ana-acik, #ecfdf5); }
.pz-kp__oge--etkin { box-shadow: inset 0 0 0 1px var(--em-ana-kenar, #a7f3d0); }
/* KOD ROZETİ sabit genişlikte: kodlar 1–3 harf, açıklamalar hizalı dursun. */
.pz-kp__kod {
  flex: none; min-width: 34px; text-align: center;
  padding: 2px 6px; border-radius: 6px;
  background: var(--em-ana-acik, #ecfdf5);
  color: var(--em-ana-koyu, #059669);
  font-weight: 800; font-size: .76rem; letter-spacing: .02em;
}
.pz-kp__oge--etkin .pz-kp__kod { background: var(--em-ana, #10b981); color: #fff; }
.pz-kp__ad { flex: 1 1 auto; min-width: 0; color: var(--em-metin-2, #475569);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pz-kp__bos { padding: 14px; text-align: center; font-size: .8rem;
  color: var(--em-metin-3, #64748b); }

/* --------------------------------------------------------------------------
   TAŞERON PORTALI — "NE GÖRÜNÜR / NE GÖRÜNMEZ" PANELİ
   --------------------------------------------------------------------------
   Kullanıcı 15.09.2026: "Portal yönetimi ve ErpPazar'ı daha kullanışlı,
   kurumsal hâle getir."

   Portalı açan firmanın İLK sorusu "taşeron tam olarak neyi görüyor?"dur.
   Ekranda bunun karşılığı tek cümlelik bir nottu; karşılıklı iki sütun
   soruyu tereddütsüz cevaplıyor. Tedarikçi portallarının (Ariba, Procore)
   yönetim ekranlarında da bu ayrım her zaman açıkça yazılıdır: portal
   güveni, ne paylaşıldığının net olmasına dayanır.
   -------------------------------------------------------------------------- */
.em-tp-gorunur {
  display: grid; gap: 14px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.em-tp-gorunur__sutun {
  background: var(--em-yuzey); border: 1px solid var(--em-cizgi);
  border-radius: var(--em-r-l); box-shadow: var(--em-golge-s);
  padding: 14px 16px;
}
.em-tp-gorunur__sutun h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: .86rem; font-weight: 700; margin: 0 0 8px;
  color: var(--em-metin);
}
.em-tp-gorunur__sutun h3 i { font-size: 18px; }
.em-tp-gorunur__sutun ul { margin: 0; padding-left: 18px; }
.em-tp-gorunur__sutun li {
  font-size: .82rem; color: var(--em-metin-2); margin-bottom: 4px;
}
/* Yeşil = paylaşılan, kırmızı = paylaşılmayan. Renk tek başına anlam
   taşımaz; başlıktaki ikon ve metin de ayrımı söyler. */
.em-tp-gorunur__sutun--evet  { border-left: 3px solid var(--em-ana); }
.em-tp-gorunur__sutun--evet h3 i { color: var(--em-ana); }
.em-tp-gorunur__sutun--hayir { border-left: 3px solid var(--em-hata); }
.em-tp-gorunur__sutun--hayir h3 i { color: var(--em-hata); }

/* --------------------------------------------------------------------------
   ERPPAZAR — "DEPODA VAR" UYARISI
   --------------------------------------------------------------------------
   Kurumsal alımın en pahalı hatası, deposunda duran malzemeyi yeniden satın
   almaktır. B2B pazarlarında (Amazon Business, Mercateo, Ariba) alıcının
   kendi envanteri satın alma ekranına bağlıdır; ErpMerkez'de bu bilginin
   altyapısı vardı (ilan poz kodu + stok tablosu aynı kod) ama iki taraf
   birbirine bağlanmamıştı.

   ROZET DEĞİL BAĞLANTI: "var" demek yetmez, kullanıcı gidip görmek ister.
   Poz kodu süzgeciyle stok ekranına götürür.

   TON UYARI RENGİ: bu bir hata değil, DUR-BİR-BAK işaretidir. Kırmızı
   yanlış alarm olurdu (satın alma yasak değil), yeşil ise gözden kaçardı.
   -------------------------------------------------------------------------- */
.em-pz-depo {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 5px 10px;
  border: 1px solid var(--em-uyari); border-radius: 999px;
  background: var(--em-uyari-acik);
  color: var(--em-uyarikutu-uyari, #92400e);
  font-size: .76rem; font-weight: 600; text-decoration: none;
  line-height: 1.25;
}
.em-pz-depo:hover { background: var(--em-uyari); color: #fff; }
.em-pz-depo:hover i { color: #fff; }
.em-pz-depo i { font-size: 15px; color: var(--em-uyari); flex: none; }
.em-pz-depo b { font-weight: 800; }

/* --------------------------------------------------------------------------
   TAŞERON PORTALI — BÖLÜM BAŞLIĞI + EYLEM
   Başlığın yanında o bölüme ait toplu bir eylem durabilsin diye ("N taşerona
   birden hesap aç"). Düğme başlıkla aynı satırda, sağda; dar ekranda alta
   iner. İşlevi olmadığında (hesapsız taşeron kalmadığında) düğme hiç
   çizilmez -- basılınca bir şey yapmayan düğme, olmayan düğmeden kötüdür.
   -------------------------------------------------------------------------- */
.em-tp-bolum-bas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.em-tp-bolum-bas .em-tp-baslik2 { margin-bottom: 0; }

/* ============================================================
   ERPPAZAR — SIPARIS AKISI  (16.09.2026)
   ------------------------------------------------------------
   Siparis acildiktan sonra hicbir kayit yolu yoktu; 49 siparisin
   49'u da "acik" durumundaydi. Satici sevkiyati, alici teslimi
   bildiriyor; her gecis zaman cizgisine yaziliyor.
   Zaman cizgisi VARSAYILAN OLARAK KAPALI: listeyi uzatmasin,
   "gecmis" baglantisiyla acilsin.
   ============================================================ */
.em-pz-satir-islem {
  display: flex; gap: .3rem; justify-content: flex-end;
  align-items: center; flex-wrap: wrap;
}
.em-pz-satir-islem .btn { white-space: nowrap; }
.em-pz-akis-gecmis {
  font-size: .74rem; padding: .1rem .3rem; text-decoration: none;
  color: var(--em-metin-3) !important;
}
.em-pz-akis-gecmis:hover { color: var(--em-ana-koyu) !important; text-decoration: underline; }

.em-pz-akis-kutu {
  margin-top: .45rem; padding: .5rem .6rem;
  background: var(--em-gri-50) !important; border: 1px solid #eef2f7;
  border-radius: 8px; text-align: left;
}
.em-pz-akis { list-style: none; margin: 0; padding: 0; }
.em-pz-akis li {
  display: grid; grid-template-columns: 7.4rem 1fr auto;
  gap: .1rem .5rem; padding: .22rem 0;
  border-bottom: 1px dashed #e7ecf3; font-size: .74rem;
}
.em-pz-akis li:last-child { border-bottom: 0; }
.em-pz-akis__zaman {
  color: var(--em-metin-3) !important; font-variant-numeric: tabular-nums;
}
.em-pz-akis__ne { font-weight: 700; color: var(--em-metin) !important; }
.em-pz-akis__kim { color: var(--em-metin-3) !important; }
.em-pz-akis__not {
  grid-column: 2 / -1; color: var(--em-metin-2) !important; font-style: italic;
}

/* ============================================================
   TAŞERON PORTALI — DUYURU PANOSU  (16.09.2026)
   ------------------------------------------------------------
   Portal bugüne kadar TEK YÖNLÜYDÜ: firma taşerona hakedişini
   gösteriyor ama ona bir şey SÖYLEYEMİYORDU. Duyuru panosu bunu
   çözer; okundu bilgisi de işin can damarıdır ("söyledim" ile
   "duydu" aynı şey değil).
   Mevcut em-tp-* dilini sürdürür; yeni bir kart/pencere düzeni
   açılmaz.
   ============================================================ */

/* --- yönetim tarafı: liste --- */
.em-tp-duyuru-bas { font-size: .9rem; font-weight: 700; color: var(--em-metin);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.em-tp-onemli { font-size: .64rem; font-weight: 800; letter-spacing: .05em;
  padding: 2px 6px; border-radius: 4px; background: var(--em-hata, #dc3545);
  color: #fff; }
.em-tp-duyuru-metin { font-size: .8rem; color: var(--em-metin-2);
  margin-top: 3px; line-height: 1.45; max-width: 62ch; }
.em-tp-duyuru-alt { font-size: .73rem; color: var(--em-metin-3); margin-top: 3px; }
.em-tp-okumayan { color: var(--em-uyari, #b45309) !important; cursor: help; }
.em-tp-duyuru-islem { white-space: nowrap; }

/* okundu oranı: sayı + ince çubuk. Çubuk tek başına yeterli değil --
   "3/12" ile "3/3" arasındaki fark yalnızca sayıda görünür. */
.em-tp-okundu { display: flex; align-items: center; gap: 8px;
  justify-content: flex-end; }
.em-tp-okundu__sayi { font-size: .82rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--em-metin); }
.em-tp-okundu__cubuk { display: inline-block; width: 64px; height: 6px;
  background: var(--em-gri-100, #e9eef5); border-radius: 3px; overflow: hidden; }
.em-tp-okundu__cubuk i { display: block; height: 100%; background: var(--em-ana);
  border-radius: 3px; }

.em-tp-bos-pano { display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; background: var(--em-gri-50); border: 1px dashed var(--em-cizgi);
  border-radius: var(--em-r-l); }
.em-tp-bos-pano > i { font-size: 30px; color: var(--em-ana); flex: none; }
.em-tp-bos-pano b { font-size: .92rem; color: var(--em-metin); }
.em-tp-bos-pano p { margin: 4px 0 0; font-size: .82rem; color: var(--em-metin-2);
  line-height: 1.5; max-width: 74ch; }

/* --- yönetim tarafı: pencere ek alanları --- */
.em-tp-alan textarea:focus { outline: 2px solid var(--em-ana); outline-offset: -1px; }
.em-tp-onay { display: flex; align-items: flex-start; gap: 8px; cursor: pointer;
  font-size: .84rem; color: var(--em-metin-2); line-height: 1.4; }
.em-tp-onay input { margin-top: 2px; flex: none; }
.em-tp-secim { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 4px 10px; max-height: 190px; overflow-y: auto; padding: 8px 10px;
  border: 1px solid var(--em-cizgi); border-radius: var(--em-r);
  background: var(--em-gri-50); }
.em-tp-secim[hidden] { display: none !important; }
.em-tp-sec { display: flex; align-items: center; gap: 7px; font-size: .82rem;
  color: var(--em-metin-2); cursor: pointer; }
.em-tp-kucuk { font-size: .76rem; padding: 3px 9px; border-radius: var(--em-r);
  border: 1px solid var(--em-cizgi); background: var(--em-yuzey);
  color: var(--em-metin-2); cursor: pointer; }
.em-tp-kucuk:hover { border-color: var(--em-ana); color: var(--em-ana); }
.em-tp-kucuk--kotu:hover { border-color: var(--em-hata, #dc3545);
  color: var(--em-hata, #dc3545); }

/* --- taşeron tarafı: pano --- */
.em-tp-duyuru-kume { display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 14px; }
.em-tp-duyuru { background: var(--em-yuzey); border: 1px solid var(--em-cizgi);
  border-left: 4px solid var(--em-cizgi); border-radius: var(--em-r-l);
  padding: 14px 16px; }
.em-tp-duyuru--onemli { border-left-color: var(--em-hata, #dc3545);
  background: var(--em-gri-50); }
.em-tp-duyuru header { display: flex; align-items: center; gap: 9px; }
.em-tp-duyuru header i { font-size: 19px; color: var(--em-ana); flex: none; }
.em-tp-duyuru--onemli header i { color: var(--em-hata, #dc3545); }
.em-tp-duyuru h3 { margin: 0; font-size: .95rem; font-weight: 700;
  color: var(--em-metin); flex: 1; line-height: 1.35; }
.em-tp-duyuru time { font-size: .74rem; color: var(--em-metin-3); flex: none; }
.em-tp-duyuru p { margin: 8px 0 0; font-size: .86rem; color: var(--em-metin-2);
  line-height: 1.55; white-space: pre-line; max-width: 78ch; }
.em-tp-duyuru footer { margin-top: 9px; font-size: .74rem; color: var(--em-metin-3); }
.em-tp-duyuru-not { font-size: .76rem; color: var(--em-metin-3); margin: 0; }

@media (max-width: 720px) {
  .em-tp-okundu { justify-content: flex-start; }
  .em-tp-secim { grid-template-columns: 1fr; }
}

/* ===================================================================
   KOPYA SAYFALARIN "KOYU BANT" BASLIKLARI (22.09.2026)
   ===================================================================
   Kullanici: "duyurulardaki bu yazi gorunmuyor ve yesilin bu tonu
   sitemize uymuyor, duzelt."

   OLCULDU (canli, /duyurular):
     .yetki-title            -> color: rgb(255,255,255)  ... BEYAZ ZEMINDE BEYAZ
     .content-card .card-header -> linear-gradient(145deg, #059669, #10b981)

   SEBEP: bu ekranlar eski sistemden kopya ve baslik seridi KOYU LACIVERT
   tasarlanmis (beyaz yazi, #0f172a -> #1e293b). Sunucudaki tema katmani duz
   renkleri palete cevirince zemin YESILE dondu; yazi beyaz kaldigi icin
   bantta okunuyor ama ayni beyaz yazi, zemini kalkan sayfa basliginda
   GORUNMEZ oluyor. Yani tek kusur degil, iki yuzu ayni kusur.

   KARAR: sitenin geri kalani ACIK baslikli (bkz. yukarida
   `body .page-wrapper .card > .card-header { background: var(--em-yuzey-2) }`).
   Kopya sayfalar da ona uydurulur: acik zemin, koyu yazi, ince cizgi ve
   solda marka rengi serit. Marka rengi KAYBOLMAZ, bant olmaktan cikar.

   Ozgulluk sayfanin kendi <style> blogunu gecmek icin bilerek yuksek
   tutuldu (sayfa ici stil, tema dosyasindan SONRA yukleniyor). */
body .page-wrapper .card.content-card > .card-header,
body .page-wrapper .card.gb-card > .card-header {
  background: var(--em-yuzey-2) !important;
  background-image: none !important;
  color: var(--em-metin) !important;
  border-bottom: 1px solid var(--em-cizgi) !important;
  border-left: 3px solid var(--em-ana) !important;
}
body .page-wrapper .card.content-card > .card-header .card-title,
body .page-wrapper .card.content-card > .card-header h1,
body .page-wrapper .card.content-card > .card-header h2,
body .page-wrapper .card.content-card > .card-header h3,
body .page-wrapper .card.content-card > .card-header h5,
body .page-wrapper .card.content-card > .card-header i,
body .page-wrapper .card.gb-card > .card-header .card-title,
body .page-wrapper .card.gb-card > .card-header i {
  color: var(--em-metin) !important;
}
body .page-wrapper .card.content-card > .card-header > i:first-child,
body .page-wrapper .card.content-card > .card-header .card-title > i:first-child {
  color: var(--em-ana) !important;   /* simge marka rengini tasir */
}

/* SAYFA BASLIGI BEYAZ ZEMINDE BEYAZ KALIYORDU (ayni kokten).
   Baslik artik metin rengini kullanir; yanindaki simge marka renginde. */
body .yetki-title { color: var(--em-metin) !important; }
body .yetki-subtitle { color: var(--em-metin-2) !important; }
body .yetki-title > i:first-child { color: var(--em-ana) !important; }

/* ===================================================================
   MENU SAYAC ROZETI (22.09.2026)
   ===================================================================
   Kullanici: "bildirim gelince Bildirimlerim'in yaninda 1 yazmali gibi
   bir sey yap, dikkat ceksin gozden kacmasin."
   Rozet KUCUK ama KONTRASTLI: menu yazisiyla yarismaz, ama goz tarama
   sirasinda yakalar. Sifirken sunucu/betik tarafindan gizlenir --
   "0" yazan rozet dikkat cekmez, yalnizca kirlilik yapar. */
.em-menu-sayac {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 6px; margin-left: 8px;
  border-radius: 999px;
  background: var(--em-hata, #ef4444); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1;
  vertical-align: middle;
  box-shadow: 0 0 0 2px var(--em-yuzey, #fff);
}
.em-menu-sayac[hidden] { display: none !important; }
/* Simge uzerindeki toplam rozeti: kose ustunde kucuk daire. */
.em-ust__ikon { position: relative; }
.em-menu-sayac--ikon {
  position: absolute; top: -4px; right: -4px; margin: 0;
  min-width: 17px; height: 17px; font-size: 10.5px; padding: 0 5px;
}
/* Ust menudeki dar satirlarda rozet sagda dursun. */
.em-ust__acilir .em-menu-sayac { margin-left: auto; }

/* ===================================================================
   PENCERE (MODAL) BASLIKLARI — 22.09.2026
   ===================================================================
   Kullanici (ikinci kez): "bu yesil tonunu sevmiyorum, siteye uygun bir
   tonda olsun."

   OLCULDU (/isg/ramak-kala, "Yeni Ramak Kala" penceresi):
     .modal-header -> linear-gradient(145deg, #059669, #10b981), yazi beyaz

   AYNI KOK: kopya sayfalar pencere basligini KOYU LACIVERT tasarlamis
   (beyaz yazi); tema katmani duz renkleri palete cevirince zemin YESIL
   bant oluyor. Kart basliklarinda ayni seyi duzelttik, pencerelerde
   kalmis.

   KARAR: sitenin geri kalani gibi ACIK zemin + KOYU yazi + ince cizgi.
   Marka rengi kaybolmasin diye basliktaki simge marka renginde kalir.
   Baglamsal pencereler (bg-danger, bg-warning ... ) DISARIDA: onlarin
   rengi bilerek secilmistir. */
body .modal .modal-header:not([class*="bg-"]) {
  background: var(--em-yuzey-2) !important;
  background-image: none !important;
  color: var(--em-metin) !important;
  border-bottom: 1px solid var(--em-cizgi) !important;
}
body .modal .modal-header:not([class*="bg-"]) .modal-title,
body .modal .modal-header:not([class*="bg-"]) h1,
body .modal .modal-header:not([class*="bg-"]) h2,
body .modal .modal-header:not([class*="bg-"]) h3,
body .modal .modal-header:not([class*="bg-"]) h4,
body .modal .modal-header:not([class*="bg-"]) h5 {
  color: var(--em-metin) !important;
}
body .modal .modal-header:not([class*="bg-"]) .modal-title > i:first-child,
body .modal .modal-header:not([class*="bg-"]) > i:first-child {
  color: var(--em-ana) !important;
}
/* KAPAT (x) ACIK ZEMINDE GORUNSUN: koyu baslik icin beyazlatan filtre
   birakilsaydi simge beyaz kalir, beyaz zeminde kaybolurdu. */
body .modal .modal-header:not([class*="bg-"]) .btn-close {
  filter: none !important; opacity: .7;
}
body .modal .modal-header:not([class*="bg-"]) .btn-close:hover { opacity: 1; }

/* ==========================================================================
   PAZAR SATICI PANELI -- SAYI DOSEMELERI (KPI)
   --------------------------------------------------------------------------
   KULLANICI 22.09.2026: "rakamlar yazilar sifirlanmis, kutular cok renksiz."
   Once dort kutu da beyaz karttti; yalniz sol kenarlarindaki 4px cizgi
   farkliydi ve ekranda kaybolyordu. Sayi ile etiket birbirine yapisikti.

   Simdi sistem panelindeki pazar dosemeleriyle ayni dil: renkli zemin, buyuk
   sayi, kosede soluk simge. RENK BILGI TASIR -- yesil normal, teal tamamlanan,
   amber bekleyen is, kirmizi sorun, mavi olcum. Boylece satici ekrana
   bakar bakmaz nerede is oldugunu gorur.

   Kapsam: yalnizca satici paneli govdesi. ERP tarafindaki kartlara dokunmaz.
   ========================================================================== */
.em-pz-satici-govde .em-pz-kpi {
  position: relative; overflow: hidden; height: 100%;
  border-radius: 14px; padding: 16px 18px; min-height: 112px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  color: #fff; border: 0; box-shadow: 0 2px 10px rgba(15, 23, 42, .10);
}
.em-pz-satici-govde .em-pz-kpi__ad {
  font-size: .7rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; opacity: .92; color: #fff;
}
.em-pz-satici-govde .em-pz-kpi__deger {
  font-size: 2rem; font-weight: 800; line-height: 1.15; margin: 4px 0 2px;
  color: #fff;
}
.em-pz-satici-govde .em-pz-kpi__ek {
  font-size: .77rem; opacity: .9; line-height: 1.35; color: #fff;
}
.em-pz-satici-govde .em-pz-kpi__simge {
  position: absolute; right: -8px; bottom: -14px; font-size: 4rem; opacity: .16;
  pointer-events: none;
}
.em-pz-satici-govde .em-pz-kpi--marka { background: linear-gradient(140deg, #059669, #10b981); }
.em-pz-satici-govde .em-pz-kpi--iyi   { background: linear-gradient(140deg, #0f766e, #14b8a6); }
.em-pz-satici-govde .em-pz-kpi--uyari { background: linear-gradient(140deg, #b45309, #f59e0b); }
.em-pz-satici-govde .em-pz-kpi--kotu  { background: linear-gradient(140deg, #b91c1c, #ef4444); }
.em-pz-satici-govde .em-pz-kpi--bilgi { background: linear-gradient(140deg, #1d4ed8, #3b82f6); }
@media (max-width: 575px) {
  .em-pz-satici-govde .em-pz-kpi { min-height: 96px; padding: 13px 14px; }
  .em-pz-satici-govde .em-pz-kpi__deger { font-size: 1.6rem; }
}
/* PAZAR SATICI MENUSU: cevap bekleyen talep sayaci (25.09.2026).
   Satici yeni talebi ancak Gelen Talepler'i acinca goruyordu; artik her
   sayfada menude kirmizi rakamla durur. */
.em-pz-menu-sayac {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: 999px; background: #dc2626; color: #fff !important;
  font-size: .68rem; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 2px rgba(220,38,38,.18);
}

/* ===== İŞ EMRİ ATAMALARI: proje başına çip (lib/yeni-ekranlar.js isemriAtamaSayfasi) ===== */
.ia-ozet { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 16px;
  border-bottom: 1px solid var(--em-cizgi); color: var(--em-metin-2); }
.ia-ozet-bekleyen { color: var(--em-uyari); }
.ia-ozet-ipucu { margin-left: auto; color: var(--em-metin-3); }
.ia-tablo td { vertical-align: top; }
.ia-proje-ad { max-width: 380px; white-space: normal; }
.ia-cip { display: inline-flex; align-items: center; gap: 4px; margin: 2px 4px 2px 0;
  padding: 2px 8px; border-radius: 999px; border: 1px solid; font-size: .75rem;
  font-weight: 600; line-height: 1.5; white-space: nowrap; }
.ia-cip--onayli { background: var(--em-basari-acik); border-color: var(--em-basari);
  color: var(--em-uyarikutu-basari); }
.ia-cip--bekliyor { background: var(--em-uyari-acik); border-color: var(--em-uyari);
  color: var(--em-uyarikutu-uyari); }
.ia-cip .bx { font-size: .85rem; }
.ia-cip-x { border: 0; background: transparent; color: inherit; padding: 0 0 0 2px;
  font-size: 1rem; line-height: 1; cursor: pointer; opacity: .7; }
.ia-cip-x:hover, .ia-cip-x:focus-visible { opacity: 1; }
.ia-cip-kilit { opacity: .75; }

/* ===== İHALE FORMU (lib/yeni-ekranlar.js ihaleFormuSayfasi; eski sistem yapısı, ErpMerkez teması) ===== */
.ihf-bolum { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--em-metin-2); padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--em-cizgi); }
.ihf-santiye-kutu { cursor: pointer; background: var(--em-yuzey); }
.ihf-santiye-kutu:disabled { cursor: not-allowed; }
.ihf-santiye-liste { max-height: 340px; overflow-y: auto; }
.ihf-santiye-liste .list-group-item { font-size: .875rem; }

/* ==========================================================================
   PROJE DOSYALARI — UC BOLUM + SURUM (28.09.2026, lib/proje-dosyalar-ekran.js)
   Her surumun rengi satir icinde --pdx-renk ozel degiskeniyle gelir; gorsel
   kurallar burada (gomulu stil boru hattindan gecmez).
   ========================================================================== */
.pdx-sekmeler .nav-link { font-weight: 600; color: var(--em-metin-2); }
.pdx-sekmeler .nav-link.active { color: var(--em-ana-koyu); }
.pdx-sekmeler .badge { font-size: .7rem; vertical-align: middle; }
.pdx-form { background: var(--em-yuzey-2); border: 1px solid var(--em-cizgi); border-radius: 10px;
  padding: 12px; margin-bottom: 12px; }
.pdx-ipucu { color: var(--em-ana-koyu); }
.pdx-araclar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.pdx-ara { max-width: 320px; }
.pdx-liste { display: flex; flex-direction: column; gap: 8px; }
.pdx-bos { color: var(--em-metin-3); text-align: center; padding: 28px 0; }
.pdx-bos i { display: block; font-size: 30px; margin-bottom: 6px; }
.pdx-grup { --pdx-renk: #64748b; border: 1px solid var(--em-cizgi); border-left: 5px solid var(--pdx-renk);
  border-radius: 10px; background: var(--em-yuzey); }
.pdx-grup[hidden] { display: none; }
.pdx-grup__bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; }
.pdx-grup__dugmeler { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pdx-guncel { background: var(--em-ana-acik); color: var(--em-ana-koyu); border: 1px solid var(--em-ana-kenar); font-weight: 700; }
.pdx-surum-satir { --pdx-renk: #64748b; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; flex: 1 1 420px; }
.pdx-gecmis { border-top: 1px dashed var(--em-cizgi); padding: 6px 10px 8px 22px; display: flex; flex-direction: column; gap: 6px; }
/* Sutun yonlu kapsayicida flex-basis YUKSEKLIGE uygulanir: 420px satir boyu olmasin. */
.pdx-gecmis > .pdx-surum-satir { flex: 0 0 auto; }
.pdx-surum-satir .pdx-sil { order: 4; margin-left: auto; padding: 0 4px; }
.pdx-surum-satir .pdx-not { order: 5; }
.pdx-surum-satir--eski { opacity: .78; }
.pdx-surum-satir--eski .pdx-ad { font-weight: 500; }
.pdx-surum-rozet { background: var(--pdx-renk); color: #fff; font-weight: 700; font-size: .72rem;
  border-radius: 999px; padding: 2px 8px; font-variant-numeric: tabular-nums; }
.pdx-ad { font-weight: 600; word-break: break-word; }
.pdx-meta { color: var(--em-metin-2); font-size: .8rem; }
.pdx-meta b { color: var(--em-metin); }
.pdx-not { flex-basis: 100%; color: var(--em-metin-2); font-size: .8rem; padding-left: 2px; }
.pdx-kaynak { font-weight: 600; }
.pdx-kaynak--haritaci { color: #0d9488; }
.pdx-kaynak--sef { color: #2563eb; }
.pdx-renkler { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.pdx-renk { --pdx-renk: #64748b; position: relative; cursor: pointer; margin: 0; }
.pdx-renk input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pdx-renk span { display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: var(--pdx-renk);
  border: 2px solid var(--em-yuzey); box-shadow: 0 0 0 1px var(--em-cizgi); }
.pdx-renk--oto span { width: auto; height: 20px; border-radius: 10px; background: var(--em-yuzey-2); color: var(--em-metin-2);
  font-size: .68rem; line-height: 16px; padding: 0 6px; }
.pdx-renk input:checked + span { box-shadow: 0 0 0 2px var(--em-metin); }
.pdx-renk input:focus-visible + span { outline: 2px solid var(--em-ana); outline-offset: 2px; }

/* TOPLAM PERSONEL SAYACI (29.09.2026) -- Personel Hesaplari arac cubugu.
   Kopya sayfanin gomulu stilleri ayiklandigi icin gorunum burada. */
.em-personel-sayac { display: inline-flex; align-items: center; gap: 7px; height: 44px;
  padding: 0 14px; border-radius: 10px; border: 1px solid var(--em-cizgi);
  background: var(--em-yuzey); color: var(--em-metin-2); font-size: .9rem; white-space: nowrap; }
.em-personel-sayac i { font-size: 1.15rem; color: var(--em-ana); }
.em-personel-sayac b { font-size: 1.05rem; color: var(--em-metin); font-variant-numeric: tabular-nums; }