/* =========================================================================
   bordro.css — /bordro-kontrol/ çalışma alanı
   =========================================================================
   BAĞIMLILIK: style.css → sayfa.css → BU DOSYA. Değişkenler, zemin, tablo ve
   düzyazı kuralları oradan gelir; burada yalnız aracın kendisi var. Görsel dil
   /pdf-araclari/ ile aynı aile (bırakma kutusu, petrol düğme) ama pdf.css
   yüklenmez — 1.300 satırın burada işi yok.
   ========================================================================= */

.bkontrol { margin: var(--bosluk-lg) 0 var(--bosluk-xl); }

/* JS yoksa görünen tek uyarı; ekran.js gizler. */
.bkontrol__gerekli {
  border: 1px solid var(--renk-cizgi);
  border-left: 4px solid var(--kehribar);
  background: rgba(232,161,58,0.08);
  border-radius: var(--yuvarlak);
  padding: var(--bosluk-md);
}
.bkontrol__gerekli > :last-child { margin-bottom: 0; }

.bkontrol__birak {
  border: 2px dashed var(--renk-cizgi);
  border-radius: var(--yuvarlak);
  background: rgba(255,255,255,0.55);
  padding: var(--bosluk-lg) var(--bosluk-md);
  text-align: center;
  transition: border-color var(--gecis), background var(--gecis);
}
.bkontrol__birak--uzerinde { border-color: var(--petrol); background: rgba(43,182,196,0.10); }
.bkontrol__birak p { margin: var(--bosluk-sm) 0 0; color: var(--renk-metin-yumusak); font-size: 0.95rem; }

/* <input type=file> her tarayıcıda başka çizilir; etiketi düğmeleştirmek tek tutarlı yol. */
.bkontrol__sec {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 1.5rem;
  border-radius: 0.7rem;
  background: linear-gradient(160deg, var(--petrol), var(--renk-rozet));
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(28,125,146,0.9);
  transition: transform var(--gecis);
}
.bkontrol__sec:hover { transform: translateY(-2px); }
.bkontrol__sec:focus-within { outline: 3px solid var(--renk-odak); outline-offset: 2px; }
.bkontrol__sec input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* Dosya listesi: her dosyanın okuma/doğrulama sonucu kendi satırında */
.bkontrol__dosyalar { list-style: none; padding: 0; margin: var(--bosluk-md) 0 0; }
.bkontrol__dosya {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem var(--bosluk-md);
  padding: var(--bosluk-sm) var(--bosluk-md);
  border-left: 3px solid var(--renk-cizgi);
  background: rgba(255,255,255,0.6);
  border-radius: 0 0.6rem 0.6rem 0;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
}
.bkontrol__dosya span { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--renk-metin-yumusak); overflow-wrap: anywhere; }
/* Durum zeminden de okunur (12.10.2026): yalnız ince sol çizgi gözden kaçıyordu. */
.bkontrol__dosya { border-left-width: 4px; }
.bkontrol__dosya--tamam   { border-left-color: var(--durum-tamam); background: var(--durum-tamam-zemin); }
.bkontrol__dosya--tamam span { color: var(--durum-tamam); font-weight: 600; }
.bkontrol__dosya--hata    { border-left-color: var(--durum-hata); background: var(--durum-hata-zemin); }
.bkontrol__dosya--hata span { color: var(--durum-hata); font-weight: 600; }
.bkontrol__dosya--atlandi { border-left-color: var(--durum-oto-cizgi); background: var(--durum-oto-zemin); }
.bkontrol__dosya--atlandi span { color: var(--durum-oto); }
.bkontrol__dosya--okunuyor { border-left-color: var(--petrol); background: var(--durum-siz-zemin); }

/* 3 adım: seç → kontrol et → indir. Biten yeşil ✓, sıradaki dolu turkuaz. */
.bkontrol__adimlar {
  list-style: none; padding: 0; margin: 0 0 var(--bosluk-md);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bosluk-sm);
}
.bkontrol__adim {
  display: grid; gap: 0.1rem; padding: 0.55rem 0.8rem; border-radius: 0.7rem;
  border: 1.5px solid var(--durum-cizgi); background: rgba(255,255,255,0.8);
  font-size: 0.85rem; color: var(--renk-metin-yumusak);
}
.bkontrol__adim b { color: var(--renk-metin); font-size: 0.95rem; }
.bkontrol__adim span { overflow-wrap: anywhere; }
.bkontrol__adim--tamam { border-color: var(--durum-tamam); background: var(--durum-tamam-zemin); }
.bkontrol__adim--tamam b { color: var(--durum-tamam); }
.bkontrol__adim--tamam b::before { content: "✓ "; }
.bkontrol__adim--simdi { border-color: var(--petrol); background: var(--durum-siz-zemin); box-shadow: 0 0 0 3px var(--durum-siz-zemin); }
.bkontrol__adim--simdi b { color: var(--durum-siz-koyu); }
@media (max-width: 560px) { .bkontrol__adimlar { grid-template-columns: 1fr; } }

/* Bulgu sayıları: Excel'deki önem renkleriyle aynı aile, yazıyla da okunur. */
.bkontrol__rozetler { display: flex; flex-wrap: wrap; gap: var(--bosluk-sm); margin: 0 0 var(--bosluk-md); }
.bkontrol__rozet { padding: 0.3rem 0.85rem; border-radius: 999px; font-weight: 700; font-size: 0.95rem; }
.bkontrol__rozet--hata    { background: #f8d7d3; color: #8c1d16; }
.bkontrol__rozet--kontrol { background: #fce8c8; color: #7a4a06; }
.bkontrol__rozet--bilgi   { background: #e8eef2; color: #2b4656; }


.bkontrol__dugmeler { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bosluk-sm) var(--bosluk-md); margin: var(--bosluk-md) 0 0; }
.bkontrol__d, .bkontrol__d--birincil {
  font: inherit;
  padding: 0.65rem 1.2rem;
  border-radius: 0.6rem;
  border: 1px solid var(--renk-cizgi);
  background: rgba(255,255,255,0.8);
  color: var(--renk-metin);
  cursor: pointer;
}
.bkontrol__d--birincil {
  background: linear-gradient(160deg, var(--petrol), var(--renk-rozet));
  border-color: transparent;
  color: #fff;
  font-weight: 700;
}
.bkontrol__d--birincil:hover { background: var(--petrol); }
/* Pasif düğme açıkça GRİ: soluk turkuaz aktif sanılıyordu (site sahibi, 12.10.2026). */
.bkontrol__d--birincil:disabled { background: #dcd8cd; color: #5d5a52; box-shadow: none; cursor: not-allowed; }
.bkontrol__d:focus-visible, .bkontrol__d--birincil:focus-visible { outline: 3px solid var(--renk-odak); outline-offset: 2px; }
.bkontrol__indir-not { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--renk-metin-yumusak); }

.bkontrol__durum { min-height: 1.5em; margin: var(--bosluk-md) 0 0; font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--renk-metin-yumusak); }
.bkontrol__ilerleme { width: 100%; height: 0.4rem; margin-top: var(--bosluk-sm); accent-color: var(--petrol); }

.bkontrol__sonuc { margin-top: var(--bosluk-md); }
.bkontrol__uyarilar {
  background: rgba(232,161,58,0.10);
  border-left: 3px solid var(--kehribar);
  border-radius: 0 0.6rem 0.6rem 0;
  padding: var(--bosluk-sm) var(--bosluk-md);
  margin-bottom: var(--bosluk-md);
}
.bkontrol__uyarilar p { margin: 0.2rem 0; }
/* Önem renkleri Excel raporuyla aynı (js/rapor/xlsx.js dolgu 4–6) */
.sayfa td.bkontrol__onem--hata    { background: #f8d7d3; font-weight: 700; }
.sayfa td.bkontrol__onem--kontrol { background: #fce8c8; font-weight: 700; }
.sayfa td.bkontrol__onem--bilgi   { background: #e8eef2; }

@media (prefers-reduced-motion: reduce) {
  .bkontrol__sec, .bkontrol__birak { transition: none; }
}

/* "Nasıl kullanılır" — KBS ekran görüntüsü (yer tutsun diye width/height HTML'de) */
.bkontrol__resim { margin: var(--bosluk-sm) 0 var(--bosluk-md); }
.bkontrol__resim img { display: block; max-width: 100%; height: auto; border: 1px solid var(--renk-cizgi); border-radius: 0.6rem; }
.bkontrol__resim figcaption { margin-top: 0.3rem; font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--renk-metin-yumusak); }