/* ==========================================================================
 * PENTANOVA ARAYÜZ TEMASI — yalnızca program kabuğu
 * --------------------------------------------------------------------------
 * Bu dosya mevcut stillerin ÜSTÜNE eklenir, hiçbir kuralı silmez.
 * Evrak önizlemesi (.a4) ve PDF çıktısı bilerek kapsam dışıdır: .a4 kendi
 * sabit renk ve yazı tiplerini kullanır, başlık kuralları da .a4 içini
 * :not(.a4 *) ile dışarıda bırakır. Kaldırmak için <link> satırını silmek
 * yeterli.
 * Renkler ve yazı tipleri pentanovadanismanlik.com ile aynıdır.
 * ======================================================================== */

html:not(.dark) {
  --bg: #F7FAFA;
  --bg-deep: #EDF5F5;
  --surface: #FFFFFF;
  --surface2: #EDF5F5;
  --surface-hover: #F2F8F8;
  --surface-elevated: #FFFFFF;
  --border: #D8E5E6;
  --border-strong: #C4D8DA;
  --border-subtle: #E6EEEF;
  --text: #0E1A1D;
  --text-dim: #2E3E42;
  --muted: #546468;
  --muted-light: #8FA0A4;
  --accent: #1C8A90;
  --accent-hover: #0E1A1D;
  --accent-soft: #DDF1F2;
  --accent-ring: rgba(52, 178, 184, 0.18);
  --accent-teal: #1C8A90;
  --shadow-accent: 0 12px 24px -10px rgba(28, 138, 144, 0.35);
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --pnv-tq: #34B2B8;
  --pnv-gece: #0E1A1D;
  --pnv-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

body {
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  letter-spacing: 0;
  font-feature-settings: normal;
}
html:not(.dark) body { background-image: none; }
::selection { background: rgba(52, 178, 184, 0.22); }

/* ---- Başlıklar (evrak içi hariç) ---- */
main h2:not(.a4 *) {
  font-family: 'Literata', Georgia, serif;
  font-weight: 600;
  font-variation-settings: normal;
  letter-spacing: -0.02em;
}
main h3:not(.a4 *)::before { background: var(--pnv-tq); }

/* ---- Düğmeler: sitedeki hap düğmeler ---- */
.btn {
  background: var(--pnv-gece);
  border-radius: 999px;
  font-weight: 600;
  box-shadow: none;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .16s var(--pnv-ease);
}
.btn::before { display: none; }
.btn:hover { background: var(--accent); transform: none; box-shadow: none; }
.btn:active { transform: scale(0.97); }
.btn.secondary { background: #FFFFFF; border: 1.5px solid var(--border); box-shadow: none; }
.btn.secondary:hover { background: #FFFFFF; border-color: var(--pnv-gece); transform: none; box-shadow: none; }
.btn.ghost:hover { background: var(--surface2); }
.btn.danger { background: #C0213B; }
.btn.danger:hover { background: #8E1428; box-shadow: none; }
.btn.small { border-radius: 999px; }

/* ---- Kartlar ve alanlar ---- */
.card {
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(14, 26, 29, 0.03);
}
.card:hover { box-shadow: 0 1px 2px rgba(14, 26, 29, 0.04), 0 18px 36px -24px rgba(14, 26, 29, 0.28); }
input[type="text"], input[type="number"], input[type="date"],
input[type="email"], input[type="tel"], input[type="time"],
input[type="password"], input[type="search"], select, textarea {
  border-radius: 12px;
  box-shadow: none;
}

/* ---- Aktif firma kutusu ---- */
.header-firm {
  background: #F7FAFA;
  border: 1px solid var(--border);
  box-shadow: none;
  border-radius: 14px;
}
.header-firm:hover { border-color: var(--border-strong); box-shadow: none; transform: none; }
.header-firm::before { background: var(--pnv-tq); }
.header-firm label { color: var(--accent); }
.header-firm-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231C8A90' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}

/* ---- Menü öğeleri (her ekran genişliğinde) ---- */
nav.tabs .tab-btn,
nav.tabs .nav-group-btn {
  transition: background-color .2s ease, color .2s ease;
}
.nav-dropdown .tab-btn.active,
nav.tabs > .tab-btn.active {
  background: var(--pnv-gece);
  color: #FFFFFF;
}
.nav-dropdown .tab-btn.active .nav-ico {
  background: transparent;
  border-color: transparent;
  color: var(--pnv-tq);
}
.nav-dropdown .tab-btn:hover .nav-ico {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
}

/* ==========================================================================
 * GENİŞ EKRAN: menü sola sabitlenir. Dar ekranda mevcut üst menü aynen kalır.
 * Gruplar hep açık; tıklama davranışı ve sekme geçişleri değişmez.
 * ======================================================================== */
@media (min-width: 1100px) {
  body { padding-left: 268px; }
  header {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 268px;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    flex-wrap: nowrap; gap: 12px;
    padding: 20px 16px 16px;
    background: #FFFFFF;
    border-bottom: 0; border-right: 1px solid var(--border);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    overflow-y: auto; overscroll-behavior: contain;
  }
  header.scrolled { background: #FFFFFF; box-shadow: none; border-bottom-color: transparent; }
  header::after { display: none; }
  header .logo { order: 1; width: 100%; justify-content: center; padding: 2px 4px 6px; }
  header .logo > * { width: 100%; display: flex; justify-content: center; }
  .logo-brand-img { height: auto; width: 100%; max-width: 220px; }
  .header-firm { order: 2; flex-wrap: wrap; padding: 10px 12px 10px 16px; }
  .header-firm label { width: 100%; }
  .header-firm-select { flex: 1; min-width: 0; }

  nav.tabs {
    order: 3;
    flex-direction: column; flex-wrap: nowrap;
    justify-content: flex-start; align-items: stretch;
    width: 100%; gap: 2px; padding: 0;
    background: none; border: 0; box-shadow: none; border-radius: 0;
  }
  .nav-group { display: flex; }
  .nav-group-btn {
    pointer-events: none;
    padding: 14px 12px 4px;
    font-size: 11px; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted-light);
  }
  .nav-group.has-active .nav-group-btn,
  .nav-group.open .nav-group-btn { background: none; box-shadow: none; color: var(--muted-light); }
  .nav-group-btn .nav-ico,
  .nav-group-btn .nav-chevron { display: none; }
  .nav-dropdown {
    display: flex; position: static;
    min-width: 0; padding: 0; gap: 2px;
    background: none; border: 0; box-shadow: none;
  }
  .nav-dropdown .tab-btn,
  nav.tabs > .tab-btn {
    width: 100%; justify-content: flex-start;
    padding: 8px 12px; gap: 10px;
    border-radius: 999px;
    font-size: 14.5px; font-weight: 500;
    color: var(--text-dim); background: none; box-shadow: none;
  }
  .nav-dropdown .tab-btn .nav-ico,
  nav.tabs > .tab-btn .nav-ico {
    width: 26px; height: 26px; border-radius: 999px;
    background: none; border: 0; opacity: 1; color: var(--muted);
  }
  .nav-dropdown .tab-btn.active,
  nav.tabs > .tab-btn.active { background: var(--pnv-gece); color: #FFFFFF; font-weight: 600; }
  .nav-dropdown .tab-btn.active .nav-ico,
  nav.tabs > .tab-btn.active .nav-ico { color: var(--pnv-tq); }

  #pwaInstallBtn { order: 4; align-self: flex-start; }
  .auth-status { order: 5; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }

  main { padding: 36px 44px 120px; }
  .floating-back-btn { left: 292px; }
}

@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .nav-dropdown .tab-btn:hover:not(.active),
  nav.tabs > .tab-btn:hover:not(.active) { background: #EDF5F5; color: var(--text); }
}

/* ==========================================================================
 * DAR EKRAN (telefon/tablet): üst menü yerinde kalır, görünüşü yenilenir
 * ======================================================================== */
@media (max-width: 1099.98px) {
  header {
    background: rgba(255, 255, 255, 0.94);
    border-bottom-color: var(--border);
  }
  header.scrolled { background: rgba(255, 255, 255, 0.97); }
  header::after { display: none; }
  nav.tabs {
    background: none; border: 0; box-shadow: none;
    padding: 0; gap: 8px;
  }
  .nav-group-btn,
  nav.tabs > .tab-btn.nav-flat {
    min-height: 46px;
    padding: 10px 14px;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1.5px solid var(--border);
    color: var(--text);
    font-size: 14.5px; font-weight: 600;
    box-shadow: none;
  }
  .nav-group-btn .nav-ico { color: var(--accent); opacity: 1; }
  .nav-group.open .nav-group-btn { border-color: var(--pnv-gece); background: #FFFFFF; box-shadow: none; }
  .nav-group.has-active .nav-group-btn,
  nav.tabs > .tab-btn.nav-flat.active {
    background: var(--pnv-gece); border-color: var(--pnv-gece); color: #FFFFFF; box-shadow: none;
  }
  .nav-group.has-active .nav-group-btn .nav-ico,
  nav.tabs > .tab-btn.nav-flat.active .nav-ico { color: var(--pnv-tq); }
  .nav-dropdown {
    border-radius: 18px; padding: 8px;
    border-color: var(--border);
    box-shadow: 0 24px 48px -24px rgba(14, 26, 29, 0.35);
  }
  .nav-dropdown .tab-btn { min-height: 44px; border-radius: 12px; font-size: 15px; }
  .nav-dropdown .tab-btn .nav-ico { background: #EDF5F5; border-color: transparent; color: var(--accent); }
}

/* ==========================================================================
 * KÜÇÜK KALAN SEÇİMLER BÜYÜTÜLDÜ
 * ======================================================================== */

/* İzin Planı: Bireysel / Toplu — sayfanın ilk kararı, büyük seçim kartları.
   Açıklama satırı düğmenin kendi data-ipucu metninden gelir. */
div:has(> #izinSekBireysel) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px !important;
  border-bottom: 0 !important;
  margin-bottom: 22px !important;
}
#izinSekBireysel, #izinSekToplu {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  margin: 0 !important;
  padding: 18px 22px !important;
  border-radius: 18px !important;
  font-size: 17px; font-weight: 700;
  text-align: left; white-space: normal;
  border: 1.5px solid var(--border) !important;
  background: #FFFFFF; color: var(--text);
}
#izinSekBireysel::after, #izinSekToplu::after {
  content: attr(data-ipucu);
  display: block;
  font-size: 13.5px; font-weight: 500; line-height: 1.4;
  opacity: .72;
}
#izinSekBireysel:not(.secondary), #izinSekToplu:not(.secondary) {
  background: var(--pnv-gece); color: #FFFFFF;
  border-color: var(--pnv-gece) !important;
}
#izinSekBireysel.secondary:hover, #izinSekToplu.secondary:hover { border-color: var(--pnv-gece) !important; }
@media (max-width: 560px) { div:has(> #izinSekBireysel) { grid-template-columns: minmax(0, 1fr); } }

/* KVKK alt sekmeleri */
.kvkk-hub-tabs { padding: 5px; border-radius: 999px; background: #EDF5F5; border-color: transparent; }
.kvkk-hub-tabs .kvkk-sub-btn { padding: 10px 18px; font-size: 14.5px; font-weight: 600; border-radius: 999px; }

/* Güncelleme şeridi: mor yerine kurumsal renkler */
#update-banner { background: var(--pnv-gece) !important; }
#update-banner button:first-of-type { background: var(--pnv-tq) !important; color: #FFFFFF !important; border-color: var(--pnv-tq) !important; }

/* Klavyeyle gezinirken odak her yerde görünür (evrak düzenleme hariç) */
:where(button, a, select, input, textarea, [tabindex]):focus-visible:not(.a4 *) {
  outline: 2px solid var(--pnv-tq);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
}

/* ==========================================================================
 * 3D AMBLEM (pnv-amblem3d.js) — denetim.pentanova.net ile aynı
 * WebGL yoksa .uc-acik eklenmez, eski düz logo görünmeye devam eder.
 * ======================================================================== */

/* Formlar sayfası: arkadaki dönen logo 3D olur */
.tpl-hero-logo canvas.pnv-amb3d {
  position: absolute; left: -14%; top: -14%; width: 128%; height: 128%;
  display: block; pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
}
.tpl-hero-logo.uc-acik { opacity: 0.22; filter: none; }
.tpl-hero-logo.uc-acik canvas.pnv-amb3d { opacity: 1; }
.tpl-hero-logo.uc-acik img { opacity: 0; animation: none; }
@media (min-width: 900px) {
  /* Geniş ekranda başlık iki sütun: yazılar solda, 3D amblem sağda kendi
     sütununda — yazı hiçbir genişlikte amblemin üstüne binmez. */
  .tpl-hero:has(.tpl-hero-logo.uc-acik) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(240px, 30vw, 400px);
    column-gap: clamp(24px, 4vw, 56px);
    align-items: center;
  }
  .tpl-hero:has(.tpl-hero-logo.uc-acik) > *:not(.tpl-hero-logo) { grid-column: 1; }
  .tpl-hero-logo.uc-acik {
    grid-column: 2; grid-row: 1 / span 4;
    position: relative; top: auto; left: auto; right: auto;
    transform: none;
    width: 100%; height: auto; aspect-ratio: 1 / 1;
    opacity: 1;
  }
  .tpl-hero-logo.uc-acik canvas.pnv-amb3d { filter: drop-shadow(0 34px 40px rgba(14, 26, 29, 0.18)); }
}

/* Giriş ekranı: solda büyük amblem, sağda giriş kutusu */
#pnvGirisSahne { display: none; }
@media (min-width: 1000px) {
  body.auth-locked.pnv-sahne::after { display: none; }   /* eski düz dönen filigran */
  body.auth-locked #pnvGirisSahne {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    position: fixed; z-index: 501; top: 0; bottom: 0; left: 0; width: 54vw;
    padding: 32px; box-sizing: border-box;
  }
  body.auth-locked.pnv-sahne #authModal {
    justify-content: flex-end;
    padding-right: max(6vw, 32px);
    background: transparent; backdrop-filter: none;
  }
  body.auth-locked.pnv-sahne { background: #F7FAFA; }
}
#pnvGirisSahne .amblem-kap {
  position: relative; width: min(34vw, 500px); aspect-ratio: 1 / 1;
  animation: pnvAmbYuz 6s ease-in-out infinite;
}
@keyframes pnvAmbYuz { 50% { transform: translateY(-10px); } }
#pnvGirisSahne canvas {
  position: absolute; left: -14%; top: -14%; width: 128%; height: 128%;
  display: block; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  filter: drop-shadow(0 34px 40px rgba(14, 26, 29, 0.18));
}
#pnvGirisSahne .amb-duz { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity .5s ease; }
#pnvGirisSahne .amblem-kap.uc-acik canvas { opacity: 1; }
#pnvGirisSahne .amblem-kap.uc-acik .amb-duz { opacity: 0; }
#pnvGirisSahne .alan-cip { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
#pnvGirisSahne .alan-cip button {
  font: 600 13px 'Figtree', system-ui, sans-serif;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: #FFFFFF; color: var(--muted);
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
#pnvGirisSahne .alan-cip button.on {
  background: var(--pnv-gece); border-color: var(--pnv-gece); color: #FFFFFF;
  box-shadow: 0 8px 18px -10px rgba(14, 26, 29, 0.8);
}
#pnvGirisSahne .alan-ad {
  margin: 0; min-height: 1.4em;
  font-family: 'Literata', Georgia, serif; font-style: italic; font-size: 17px;
  color: var(--accent);
}
#pnvGirisSahne .alan-ad.yeni { animation: pnvBelir .5s ease both; }
@keyframes pnvBelir { from { opacity: 0; transform: translateY(8px); } }
@media (hover: hover) and (pointer: fine) {
  #pnvGirisSahne .alan-cip button:not(.on):hover { border-color: var(--pnv-tq); color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  #pnvGirisSahne .amblem-kap, #pnvGirisSahne .alan-ad.yeni { animation: none; }
}

/* ==========================================================================
 * LİSTE ARAÇLARI (pnv-liste.js): sıralama seçimi, arama, sıralanabilir başlık
 * ======================================================================== */
.pnv-gizli { display: none !important; }
.pnv-liste-arac {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px;
}
.pnv-liste-arac[hidden] { display: none; }
.pnv-ara {
  display: inline-flex; align-items: center; gap: 8px;
  flex: 1 1 240px; max-width: 380px;
  padding: 0 14px; border-radius: 999px;
  background: #FFFFFF; border: 1.5px solid var(--border);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pnv-ara:focus-within { border-color: var(--pnv-tq); box-shadow: 0 0 0 4px rgba(52, 178, 184, 0.14); }
.pnv-ara svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.pnv-ara input[type="search"] {
  border: 0 !important; box-shadow: none !important; background: transparent !important;
  padding: 10px 0 !important; min-width: 0; flex: 1;
}
.pnv-tablo-ara-kap { margin: 0 0 10px; display: flex; }
.pnv-sirala { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.pnv-sirala select { width: auto; min-width: 190px; border-radius: 999px; padding: 9px 34px 9px 14px; font-weight: 600; color: var(--text); }
.pnv-sayi { font-size: 12.5px; color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; }
th.pnv-th { cursor: pointer; user-select: none; white-space: nowrap; transition: color .2s ease, background-color .2s ease; }
th.pnv-th .pnv-ok { margin-left: 6px; font-size: 10.5px; font-weight: 700; color: var(--muted-light); letter-spacing: 0; }
th.pnv-th[aria-sort="ascending"] .pnv-ok, th.pnv-th[aria-sort="descending"] .pnv-ok { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  th.pnv-th:hover { color: var(--accent); }
}

/* ==========================================================================
 * FORM DOLDURMA EKRANI
 * ======================================================================== */
/* Önizleme yakınlaştırma çubuğu */
.pnv-zoom {
  position: sticky; top: -18px; z-index: 5;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: -18px -18px 14px; padding: 10px 14px;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.pnv-zoom button {
  min-width: 36px; height: 34px; padding: 0 12px;
  border-radius: 999px; border: 1.5px solid var(--border); background: #FFFFFF;
  font: 600 14px 'Figtree', system-ui, sans-serif; color: var(--text); cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .16s var(--pnv-ease);
}
.pnv-zoom button:active { transform: scale(0.96); }
.pnv-zoom button[aria-pressed="true"] { background: var(--pnv-gece); border-color: var(--pnv-gece); color: #FFFFFF; }
.pnv-zoom-deger { min-width: 48px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .pnv-zoom button:not([aria-pressed="true"]):hover { border-color: var(--pnv-gece); } }

/* Yuvarlak "Geri" düğmesi form ekranında sol paneldeki seçimlerin üstüne binmesin
   (sayfanın kendi "← Formlar" düğmesi var) */
body:has(#page-fill.active) .floating-back-btn { display: none !important; }

/* Sözleşme maddeleri: dahil edilenler yeşil, çıkarılanlar kırmızı kalır */
.madde-soru:has(.ms-btn.aktif-evet) { background: #ECFDF5; border-color: #A7F3D0 !important; }
.madde-soru:has(.ms-btn.aktif-hayir) { background: #FEF2F2; border-color: #FECACA !important; }
.madde-soru:has(.ms-btn.aktif-evet) .ms-baslik::before { content: '✓ '; color: #047857; font-weight: 800; }
.ms-btn { min-height: 34px; padding: 6px 16px; font-size: 13px; }

/* ==========================================================================
 * İLERLEME GÖSTERGESİ (Ilerleme.*) — uzun işlemlerde dolan çizgi ve yüzde
 * ======================================================================== */
#pnvIlerleme {
  position: fixed; z-index: 99990;
  left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  width: min(440px, calc(100vw - 32px));
  padding: 12px 16px 13px;
  border-radius: 16px;
  background: var(--pnv-gece); color: #FFFFFF;
  box-shadow: 0 24px 48px -18px rgba(14, 26, 29, 0.6);
  transform: translate(-50%, calc(100% + 40px));
  transition: transform .4s cubic-bezier(0.32, 0.72, 0, 1);
  font-family: 'Figtree', system-ui, sans-serif;
}
@media (min-width: 1100px) { #pnvIlerleme { left: calc(50% + 134px); } }
#pnvIlerleme.pi-acik { transform: translate(-50%, 0); }
#pnvIlerleme .pi-ust { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
#pnvIlerleme .pi-baslik { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pnvIlerleme .pi-oran { font-size: 13px; font-weight: 700; color: #7FD6DA; font-variant-numeric: tabular-nums; white-space: nowrap; }
#pnvIlerleme .pi-iz { position: relative; height: 6px; margin: 9px 0 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
#pnvIlerleme .pi-dolu {
  position: absolute; inset: 0; border-radius: 6px;
  background: linear-gradient(90deg, #34B2B8, #7FD6DA);
  transform-origin: left; transform: scaleX(0);
  transition: transform .35s cubic-bezier(0.23, 1, 0.32, 1);
}
#pnvIlerleme.pi-belirsiz .pi-dolu { width: 38%; transform: none; animation: piKay 1.25s cubic-bezier(0.77, 0, 0.175, 1) infinite; transition: none; }
@keyframes piKay { from { left: -40%; } to { left: 102%; } }
#pnvIlerleme .pi-alt { font-size: 12px; color: rgba(255, 255, 255, 0.7); min-height: 1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pnvIlerleme.pi-bitti .pi-dolu { background: #34D399; }
#pnvIlerleme.pi-hata .pi-dolu { background: #F87171; }
@media (prefers-reduced-motion: reduce) {
  #pnvIlerleme { transition: none; }
  #pnvIlerleme.pi-belirsiz .pi-dolu { animation: none; width: 100%; opacity: .6; }
}

/* Telefonda geniş tablolar sayfayı yana kaydırmasın; tablo kendi içinde kayar.
   (Personel ve İSG Takip tabloları 375 px ekranda 560–770 px genişlikteydi.) Evraklar hariç. */
@media (max-width: 900px) {
  main table:not(.a4 *) {
    display: block; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}