/* Demo CSS (SPEC-demo-sayfasi-23): TUM seciciler #demo-root altindadir. Kaynak parcalari: bolum basina ayri dosyalar. */
/* ---- 00_cekirdek ---- */
#demo-root { --dm-radius-btn: 8px; --dm-radius-input: 6px; --dm-radius-grup: 10px; --dm-radius-kart: 12px; --dm-radius-tablo: 8px; --dm-sb-genislik: 220px; --dm-durum-yuk: 26px; display: block; position: relative; color: var(--dm-text-primary); font-family: var(--dm-font-sans); width: min(calc(100vw - 32px), 1840px); margin-left: calc((100% - min(calc(100vw - 32px), 1840px)) / 2); font-size: 15px; line-height: 1.45; text-align: left; }
#demo-root { scroll-margin-top: 104px; }
#demo-root:fullscreen .dm-ust { top: 0; }
#demo-root:fullscreen .dm-anlatim { top: 12px; }
#demo-root:fullscreen { width: 100vw; margin-left: 0; padding: 12px; overflow: auto; background: var(--dm-bg-dark); }
#demo-root *, #demo-root *::before, #demo-root *::after { box-sizing: border-box; }
#demo-root button, #demo-root input, #demo-root select { font: inherit; color: inherit; margin: 0; }
#demo-root button { cursor: pointer; }
#demo-root p, #demo-root ul, #demo-root ol, #demo-root fieldset, #demo-root h2, #demo-root table { margin: 0; padding: 0; }
#demo-root ul, #demo-root ol { list-style: none; }
#demo-root a { color: inherit; }
#demo-root .dm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#demo-root .dm-iskelet h2 { font-size: 18px; margin: 14px 0 6px; }
#demo-root .dm-iskelet ol { list-style: decimal; padding-left: 22px; }
#demo-root :focus-visible { outline: 3px solid var(--dm-primary-text); outline-offset: 2px; }
#demo-root .dm-kok { position: relative; display: flex; flex-direction: column; gap: 12px; }
#demo-root .dm-ust { position: sticky; top: 96px; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; background: var(--dm-bg-panel); border: 1px solid var(--dm-border); border-radius: 14px; }
#demo-root .dm-ust-secim select { height: 34px; padding: 0 10px; border: 1px solid var(--dm-border); border-radius: 8px; background: var(--dm-bg-input); color: var(--dm-text-primary); max-width: 320px; }
#demo-root .dm-ilerleme { font-family: var(--dm-font-mono); font-weight: 600; padding: 0 8px; }
#demo-root .dm-ust-dugmeler { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
#demo-root .dm-ust-btn, #demo-root .dm-gezin-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--dm-border); border-radius: 8px; background: var(--dm-bg-card); color: var(--dm-text-primary); font-size: 14px; font-weight: 600; }
#demo-root .dm-ust-btn:hover:not(:disabled), #demo-root .dm-gezin-btn:hover:not(:disabled) { background: var(--dm-bg-card-hover); }
#demo-root .dm-ust-btn[aria-pressed="true"] { background: var(--dm-primary-bg); color: var(--dm-primary-text); }
#demo-root .dm-ust-btn:disabled, #demo-root .dm-gezin-btn:disabled { opacity: .45; cursor: not-allowed; }
#demo-root .dm-ana { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
#demo-root .dm-sahne-kap { position: relative; overflow: hidden; border: 1px solid var(--dm-border); border-radius: 14px; background: var(--dm-bg-dark); box-shadow: 0 10px 34px rgba(15, 23, 42, .16); }
#demo-root .dm-sahne { position: relative; transform-origin: 0 0; font-size: 13px; line-height: 1.35; font-family: var(--dm-font-sans); color: var(--dm-text-primary); background: var(--dm-bg-dark); }
#demo-root .dm-yukleniyor, #demo-root .dm-hata { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 20px; color: var(--dm-text-secondary); }
#demo-root .dm-hata { color: var(--dm-danger-text); }
#demo-root .dm-anlatim { position: sticky; top: 104px; padding: 18px; background: var(--dm-bg-panel); border: 1px solid var(--dm-border); border-radius: 14px; }
#demo-root .dm-anlatim-bolum { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dm-text-secondary); }
#demo-root .dm-anlatim-baslik { margin: 4px 0 12px; font-size: 21px; line-height: 1.25; }
#demo-root .dm-anlatim-baslik:focus:not(:focus-visible) { outline: none; }
#demo-root .dm-anlatim-liste { display: grid; gap: 8px; font-size: 14.5px; line-height: 1.5; }
#demo-root .dm-anlatim-liste li { position: relative; padding-left: 16px; }
#demo-root .dm-anlatim-liste li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--dm-primary-text); }
#demo-root .dm-hs-liste { display: grid; gap: 6px; margin-top: 14px; }
#demo-root .dm-hs-oge { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 7px 9px; text-align: left; border: 1px solid transparent; border-radius: 8px; background: none; font-size: 13.5px; color: var(--dm-text-primary); }
#demo-root .dm-hs-oge:hover, #demo-root .dm-hs-oge-aktif { background: var(--dm-primary-bg); color: var(--dm-primary-text); }
#demo-root .dm-hs-no { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--dm-primary-text); color: var(--dm-bg-dark); font-size: 12px; font-weight: 700; }
#demo-root .dm-dene { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--dm-primary-bg); color: var(--dm-primary-text); font-size: 14px; }
#demo-root .dm-ornek-not { margin-top: 14px; font-size: 12.5px; color: var(--dm-text-secondary); }
#demo-root .dm-gezin { display: flex; justify-content: space-between; margin-top: 16px; gap: 8px; }
#demo-root .dm-gezin-ileri { margin-left: auto; }
#demo-root .dm-ornek { display: inline-block; padding: 0 6px; border-radius: 6px; background: var(--dm-warning-bg); color: var(--dm-warning-text); font-size: 11px; font-weight: 700; }
#demo-root .dm-pin { position: absolute; z-index: 30; width: 24px; height: 24px; padding: 0; border: 2px solid var(--dm-bg-dark); border-radius: 50%; background: var(--dm-primary-text); color: var(--dm-bg-dark); font-size: 12px; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
#demo-root .dm-pin-aktif { transform: scale(1.25); }
#demo-root .dm-hs-acik { outline: 3px solid var(--dm-primary-text); outline-offset: 3px; animation: dm-nabiz 1.4s ease-in-out infinite; }
@keyframes dm-nabiz {0%, 100% { outline-color: var(--dm-primary-text); } 50% { outline-color: transparent; }}
#demo-root .dm-toastlar { position: absolute; right: 20px; bottom: 40px; z-index: 40; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
#demo-root .dm-toast { padding: 10px 16px; border-radius: 10px; background: var(--dm-bg-panel); border: 1px solid var(--dm-border); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); font-size: 14px; }
#demo-root .dm-toast-success { background: var(--dm-success-bg); color: var(--dm-success-text); }
#demo-root .dm-toast-danger { background: var(--dm-danger-bg); color: var(--dm-danger-text); }
#demo-root .dm-toast-warn { background: var(--dm-warning-bg); color: var(--dm-warning-text); }
#demo-root .dm-izgara { position: absolute; inset: 0; z-index: 60; min-height: 560px; overflow: auto; background: var(--dm-bg-dark); border: 1px solid var(--dm-border); border-radius: 14px; padding: 16px; }
#demo-root .dm-izgara-ust { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: 18px; font-weight: 700; }
#demo-root .dm-izgara-baslik { margin: 14px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dm-text-secondary); }
#demo-root .dm-izgara-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
#demo-root .dm-izgara-kart { padding: 12px; text-align: left; border: 1px solid var(--dm-border); border-radius: 10px; background: var(--dm-bg-card); color: var(--dm-text-primary); font-size: 14px; }
#demo-root .dm-izgara-kart:hover { background: var(--dm-bg-card-hover); }
#demo-root .dm-izgara-gecerli { border-color: var(--dm-primary-text); background: var(--dm-primary-bg); color: var(--dm-primary-text); }
@media (max-width: 900px) {
  #demo-root .dm-ana { grid-template-columns: minmax(0, 1fr); }
  #demo-root .dm-anlatim { position: static; }
  #demo-root .dm-ust-dugmeler { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #demo-root *, #demo-root *::before, #demo-root *::after { animation: none !important; transition: none !important; scroll-behavior: auto; }
}
#demo-root .dm-pen { position: relative; display: grid; grid-template-columns: var(--dm-sb-genislik) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) var(--dm-durum-yuk); width: 1600px; height: 920px; background: var(--dm-bg-dark); overflow: hidden; }
#demo-root .dm-sb { display: flex; flex-direction: column; min-height: 0; background: var(--dm-sidebar-bg); border-right: 1px solid var(--dm-border); }
#demo-root .dm-sb-marka { display: flex; align-items: center; gap: 10px; padding: 16px 14px 10px; }
#demo-root .dm-sb-logo { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--dm-accent); color: #fff; font-weight: 800; font-size: 18px; }
#demo-root .dm-sb-ad { font-size: 20px; font-weight: 700; line-height: 1; }
#demo-root .dm-sb-nokta { color: var(--dm-accent); }
#demo-root .dm-sb-alt { margin-top: 3px; font-size: 10px; letter-spacing: .12em; color: var(--dm-text-secondary); }
#demo-root .dm-sb-tema { margin-left: auto; display: flex; padding: 6px; border: 1px solid var(--dm-border); border-radius: 50%; background: var(--dm-bg-card); color: var(--dm-text-secondary); }
#demo-root .dm-sb-liste { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
#demo-root .dm-sb-oge { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border: 0; border-left: 3px solid transparent; border-radius: 8px; background: transparent; color: var(--dm-text-secondary); font-size: 14px; text-align: left; }
#demo-root .dm-sb-oge:hover { background: var(--dm-sidebar-hover); color: var(--dm-text-primary); }
#demo-root .dm-sb-aktif, #demo-root .dm-sb-aktif:hover { background: var(--dm-sidebar-active-bg); color: var(--dm-sidebar-active-text); border-left-color: var(--dm-accent); font-weight: 700; }
#demo-root .dm-sb-alt-blok { padding: 10px 12px 12px; display: grid; gap: 8px; border-top: 1px solid var(--dm-border); }
#demo-root .dm-sb-servis { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dm-text-secondary); }
#demo-root .dm-sb-durum-nokta { width: 9px; height: 9px; border-radius: 50%; background: var(--dm-success-text); }
#demo-root .dm-sb-lisans { padding: 8px 10px; border: 1px solid var(--dm-border); border-radius: 8px; background: var(--dm-bg-card); font-size: 12px; color: var(--dm-text-secondary); }
#demo-root .dm-sb-kopya { display: flex; gap: 6px; margin-top: 6px; }
#demo-root .dm-sb-kopya span { padding: 1px 8px; border-radius: 6px; background: var(--dm-secondary-bg); color: var(--dm-secondary-text); font-size: 11px; font-weight: 600; }
#demo-root .dm-sb-cikis { width: 100%; }
#demo-root .dm-ana-alan { min-width: 0; min-height: 0; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
#demo-root .dm-durum { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding: 0 14px; background: var(--dm-sidebar-bg); border-top: 1px solid var(--dm-border); font-size: 12px; color: var(--dm-text-secondary); }
#demo-root .dm-sayfa-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
#demo-root .dm-sayfa-baslik { font-size: 20px; font-weight: 700; }
#demo-root .dm-sayfa-aciklama { margin-top: 2px; font-size: 13px; color: var(--dm-text-secondary); }
#demo-root .dm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-btn); font-weight: 600; font-size: 13px; white-space: nowrap; }
#demo-root .dm-btn-kucuk { padding: 3px 9px; font-size: 12px; }
#demo-root .dm-btn:disabled { background: var(--dm-disabled-bg); color: var(--dm-disabled-text); cursor: not-allowed; }
#demo-root .dm-btn-primary { background: var(--dm-primary-bg); color: var(--dm-primary-text); border-color: var(--dm-primary-bg-hover); }
#demo-root .dm-btn-primary:hover:not(:disabled) { background: var(--dm-primary-bg-hover); }
#demo-root .dm-btn-success { background: var(--dm-success-bg); color: var(--dm-success-text); border-color: var(--dm-success-bg-hover); }
#demo-root .dm-btn-success:hover:not(:disabled) { background: var(--dm-success-bg-hover); }
#demo-root .dm-btn-danger { background: var(--dm-danger-bg); color: var(--dm-danger-text); border-color: var(--dm-danger-bg-hover); }
#demo-root .dm-btn-danger:hover:not(:disabled) { background: var(--dm-danger-bg-hover); }
#demo-root .dm-btn-warning { background: var(--dm-warning-bg); color: var(--dm-warning-text); border-color: var(--dm-warning-bg-hover); }
#demo-root .dm-btn-warning:hover:not(:disabled) { background: var(--dm-warning-bg-hover); }
#demo-root .dm-btn-orange { background: var(--dm-orange-bg); color: var(--dm-orange-text); border-color: var(--dm-orange-bg-hover); }
#demo-root .dm-btn-purple { background: var(--dm-purple-bg); color: var(--dm-purple-text); border-color: var(--dm-purple-bg-hover); }
#demo-root .dm-btn-secondary { background: var(--dm-secondary-bg); color: var(--dm-secondary-text); border-color: var(--dm-secondary-bg-hover); }
#demo-root .dm-btn-secondary:hover:not(:disabled) { background: var(--dm-secondary-bg-hover); }
#demo-root .dm-rozet { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
#demo-root .dm-rozet-primary { background: var(--dm-primary-bg); color: var(--dm-primary-text); }
#demo-root .dm-rozet-success { background: var(--dm-success-bg); color: var(--dm-success-text); }
#demo-root .dm-rozet-danger { background: var(--dm-danger-bg); color: var(--dm-danger-text); }
#demo-root .dm-rozet-warning { background: var(--dm-warning-bg); color: var(--dm-warning-text); }
#demo-root .dm-rozet-orange { background: var(--dm-orange-bg); color: var(--dm-orange-text); }
#demo-root .dm-rozet-purple { background: var(--dm-purple-bg); color: var(--dm-purple-text); }
#demo-root .dm-rozet-secondary { background: var(--dm-secondary-bg); color: var(--dm-secondary-text); }
#demo-root .dm-uyari { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 8px; border-left: 4px solid currentColor; font-size: 13px; }
#demo-root .dm-uyari-info { background: var(--dm-primary-bg); color: var(--dm-primary-text); }
#demo-root .dm-uyari-warn { background: var(--dm-warning-bg); color: var(--dm-warning-text); }
#demo-root .dm-uyari-danger { background: var(--dm-danger-bg); color: var(--dm-danger-text); }
#demo-root .dm-uyari-success { background: var(--dm-success-bg); color: var(--dm-success-text); }
#demo-root .dm-alan { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#demo-root .dm-etiket { font-size: 12px; font-weight: 600; color: var(--dm-text-secondary); }
#demo-root .dm-input { height: 32px; padding: 0 10px; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-input); background: var(--dm-bg-input); color: var(--dm-text-primary); font-size: 14px; min-width: 0; width: 100%; }
#demo-root .dm-input:focus { border-color: var(--dm-border-focus); }
#demo-root .dm-input:disabled { background: var(--dm-disabled-input-bg); color: var(--dm-disabled-text); }
#demo-root .dm-onay { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
#demo-root .dm-grup { padding: 12px 14px 14px; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-grup); min-width: 0; }
#demo-root .dm-grup legend { padding: 0 6px; font-size: 13px; font-weight: 700; }
#demo-root .dm-kart { padding: 12px 14px; background: var(--dm-bg-card); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-kart); min-width: 0; }
#demo-root .dm-kart-ust { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; }
#demo-root .dm-kart-baslik { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--dm-text-secondary); text-transform: uppercase; }
#demo-root .dm-istat { padding: 12px 14px; background: var(--dm-bg-card); border: 1px solid var(--dm-border); border-left: 4px solid var(--dm-accent); border-radius: var(--dm-radius-kart); }
#demo-root .dm-istat-success { border-left-color: var(--dm-success-text); }
#demo-root .dm-istat-danger { border-left-color: var(--dm-danger-text); }
#demo-root .dm-istat-warning { border-left-color: var(--dm-warning-text); }
#demo-root .dm-istat-etiket { font-size: 12px; font-weight: 600; color: var(--dm-text-secondary); }
#demo-root .dm-istat-deger { margin-top: 4px; font-size: 26px; font-weight: 700; font-family: var(--dm-font-mono); }
#demo-root .dm-istat-alt { font-size: 12px; color: var(--dm-text-secondary); }
#demo-root .dm-mono { font-family: var(--dm-font-mono); }
#demo-root .dm-sag { text-align: right; }
#demo-root .dm-tablo-kap { background: var(--dm-bg-card); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-tablo); overflow: hidden; min-width: 0; }
#demo-root .dm-tablo { width: 100%; border-collapse: collapse; font-size: 13px; }
#demo-root .dm-tablo th { padding: 8px 10px; background: var(--dm-table-header-bg); border-bottom: 1px solid var(--dm-border); text-align: left; font-size: 12px; font-weight: 700; color: var(--dm-text-secondary); white-space: nowrap; }
#demo-root .dm-tablo td { padding: 7px 10px; border-bottom: 1px solid var(--dm-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
#demo-root .dm-tablo tr { position: relative; }
#demo-root .dm-tablo .dm-alt { background: var(--dm-table-row-alt); }
#demo-root .dm-tablo .dm-secili { background: var(--dm-table-selected-bg); color: var(--dm-table-selected-text); }
#demo-root .dm-tablo-bos { padding: 18px 10px; text-align: center; color: var(--dm-text-secondary); }
#demo-root .dm-satir-btn { padding: 0; border: 0; background: none; text-align: left; color: inherit; font: inherit; }
#demo-root .dm-satir-btn::after { content: ""; position: absolute; inset: 0; }
#demo-root .dm-sayfalama { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 8px; font-size: 12px; color: var(--dm-text-secondary); }
#demo-root .dm-sekmeler { display: flex; gap: 3px; border-bottom: 1px solid var(--dm-border); flex-wrap: wrap; }
#demo-root .dm-sekme { padding: 8px 16px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--dm-secondary-bg); color: var(--dm-secondary-text); font-size: 13px; font-weight: 600; margin-bottom: -1px; }
#demo-root .dm-sekme:hover { background: var(--dm-secondary-bg-hover); }
#demo-root .dm-sekme-aktif, #demo-root .dm-sekme-aktif:hover { background: var(--dm-bg-card); color: var(--dm-primary-text); border-color: var(--dm-border); }
#demo-root .dm-modal { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, .42); }
#demo-root .dm-diyalog { max-width: calc(100% - 80px); background: var(--dm-bg-panel); border: 1px solid var(--dm-border); border-radius: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, .38); overflow: hidden; }
#demo-root .dm-diyalog-ust { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: var(--dm-table-header-bg); font-size: 13px; font-weight: 700; }
#demo-root .dm-diyalog-kapat { display: flex; padding: 2px; border: 0; background: none; color: var(--dm-text-secondary); }
#demo-root .dm-diyalog-govde { padding: 16px; font-size: 13px; }
#demo-root .dm-diyalog-alt { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--dm-border); }
#demo-root .dm-soru { display: flex; gap: 14px; }
#demo-root .dm-soru-ikon { color: var(--dm-accent); }
#demo-root .dm-soru-metin { display: grid; gap: 8px; line-height: 1.5; }
#demo-root .dm-grafik { width: 100%; height: auto; }
#demo-root .dm-grafik-yazi { font-size: 11px; fill: var(--dm-text-secondary); }
#demo-root .dm-halka { display: flex; align-items: center; gap: 16px; }
#demo-root .dm-halka-liste { display: grid; gap: 4px; font-size: 12px; }
#demo-root .dm-nokta { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; }
#demo-root .dm-satir { display: flex; gap: 12px; align-items: stretch; min-width: 0; }
#demo-root .dm-satir-ortala { align-items: center; }
#demo-root .dm-sutun { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#demo-root .dm-esnek { flex: 1; min-width: 0; }
#demo-root .dm-izg-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#demo-root .dm-izg-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
#demo-root .dm-izg-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
#demo-root .dm-genis { grid-column: 1 / -1; }
#demo-root .dm-bosluk-ust { margin-top: auto; }
#demo-root .dm-sol { display: flex; gap: 8px; align-items: center; }
#demo-root .dm-sag-hiza { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
#demo-root .dm-metin-soluk { color: var(--dm-text-secondary); }
#demo-root .dm-kalin { font-weight: 700; }
#demo-root .dm-kucuk-yazi { font-size: 12px; }
#demo-root .dm-baskul { padding: 14px 18px; background: var(--dm-bg-card); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-kart); }
#demo-root .dm-baskul-ust { display: flex; justify-content: space-between; align-items: center; }
#demo-root .dm-baskul-baslik { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--dm-text-secondary); }
#demo-root .dm-baskul-orta { display: flex; align-items: baseline; gap: 14px; margin: 4px 0; }
#demo-root .dm-baskul-sayi { font-family: var(--dm-font-mono); font-size: 92px; font-weight: 600; line-height: 1.05; color: var(--dm-success-text); letter-spacing: .02em; }
#demo-root .dm-baskul-birim { font-size: 22px; color: var(--dm-text-secondary); }
#demo-root .dm-baskul-sag { margin-left: auto; display: grid; gap: 8px; align-self: flex-start; }
#demo-root .dm-baskul-alt { font-size: 12px; color: var(--dm-text-secondary); }
#demo-root .dm-tartim-dugmeler { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
#demo-root .dm-tartim-dugmeler .dm-btn { height: 46px; font-size: 15px; }
#demo-root .dm-tartim-kartlar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#demo-root .dm-mini-kart { padding: 12px 14px; background: var(--dm-bg-card); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-kart); }
#demo-root .dm-mini-etiket { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--dm-text-secondary); }
#demo-root .dm-mini-deger { margin-top: 4px; font-size: 28px; font-weight: 700; line-height: 1.1; }
#demo-root .dm-mini-alt { font-size: 12px; color: var(--dm-text-secondary); min-height: 16px; }
#demo-root .dm-net-kart { border: 2px solid var(--dm-accent); }
#demo-root .dm-net-deger { color: var(--dm-success-text); }
#demo-root .dm-form-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
#demo-root .dm-bekleyen { padding: 12px; background: var(--dm-bg-card); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-kart); min-width: 0; }
/* ---- 10_ana_a ---- */
#demo-root .dm-aa-sahne { position: relative; display: flex; align-items: center; justify-content: center; gap: 64px; width: 1600px; height: 920px; background: var(--dm-bg-dark); overflow: hidden; }
#demo-root .dm-aa-marka { position: absolute; left: 28px; top: 22px; display: flex; align-items: center; gap: 10px; }
#demo-root .dm-aa-kutu { max-width: none; zoom: 1.4; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); }
#demo-root .dm-aa-kutu .dm-diyalog-govde { padding: 20px 24px; }
#demo-root .dm-aa-kapat { display: flex; color: var(--dm-text-secondary); }
#demo-root .dm-aa-dil-baslik { margin: 18px 0 20px; text-align: center; font-size: 15px; font-weight: 700; color: var(--dm-primary-text); }
#demo-root .dm-aa-diller { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#demo-root .dm-aa-dil { height: 52px; font-size: 13px; }
#demo-root .dm-aa-giris { display: flex; flex-direction: column; gap: 14px; padding: 4px 8px; }
#demo-root .dm-aa-giris-baslik { margin-bottom: 8px; text-align: center; font-size: 20px; font-weight: 700; color: var(--dm-primary-text); }
#demo-root .dm-aa-uzun { height: 38px; }
#demo-root .dm-aa-sifre { display: flex; gap: 6px; }
#demo-root .dm-aa-goz { flex: none; width: 38px; height: 38px; padding: 0; }
#demo-root .dm-aa-secenekler { display: flex; gap: 14px; padding: 4px 4px 4px 16px; }
#demo-root .dm-aa-ileti { min-height: 18px; text-align: center; font-size: 12px; color: var(--dm-text-secondary); }
#demo-root .dm-aa-merkez { display: flex; justify-content: center; }
#demo-root .dm-aa-giris-dugme { min-width: 120px; height: 38px; }
#demo-root .dm-aa-yan { display: flex; align-items: center; gap: 6px; }
#demo-root .dm-aa-yan .dm-input { width: auto; }
#demo-root .dm-aa-sag { margin-left: auto; display: flex; gap: 8px; }
#demo-root .dm-aa-filtre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 12px; }
#demo-root .dm-aa-arama { width: 100%; padding-left: 14px; }
#demo-root .dm-aa-arama .dm-input { max-width: 420px; }
#demo-root .dm-aa-ozet { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
#demo-root .dm-aa-ozet .dm-istat { padding: 8px 12px; }
#demo-root .dm-aa-ozet-deger { font-size: 20px; margin-top: 2px; }
#demo-root .dm-istat-orange { border-left-color: var(--dm-orange-text); }
#demo-root .dm-aa-grafikler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; flex: 1; min-height: 0; overflow-y: auto; align-content: start; }
#demo-root .dm-aa-gen2 { grid-column: span 2; }
#demo-root .dm-aa-gen3 { grid-column: 1 / -1; }
#demo-root .dm-aa-grafik .dm-kart-baslik { text-transform: none; font-size: 13px; letter-spacing: 0; color: var(--dm-text-primary); }
#demo-root .dm-aa-grafik .dm-grafik { overflow: visible; }
#demo-root .dm-aa-grafik .dm-halka .dm-grafik { width: 170px; flex: none; }
#demo-root .dm-aa-bos { padding: 36px 0; text-align: center; color: var(--dm-text-secondary); }
#demo-root .dm-aa-sayac { font-size: 12px; }
#demo-root .dm-aa-cubuklar { display: grid; gap: 6px; }
#demo-root .dm-aa-cubuk { display: grid; grid-template-columns: 240px 1fr 56px; align-items: center; gap: 10px; font-size: 12px; }
#demo-root .dm-aa-cubuk-yol { display: block; height: 14px; }
#demo-root .dm-aa-cubuk-iz { display: block; height: 100%; border-radius: 3px; }
#demo-root .dm-aa-cubuk-sayi { text-align: right; }
#demo-root .dm-aa-islem { display: flex; align-items: center; gap: 10px; }
#demo-root .dm-aa-elle { flex: 1; }
#demo-root .dm-aa-not { flex: 3; }
#demo-root .dm-aa-dara-kart { padding: 10px 16px; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-kart); background: var(--dm-bg-card); }
#demo-root .dm-aa-dara-deger { font-size: 28px; font-weight: 700; font-family: var(--dm-font-mono); color: var(--dm-primary-text); }
#demo-root .dm-aa-dara-detay { font-size: 13px; color: var(--dm-text-secondary); min-height: 18px; }
#demo-root .dm-aa-baslik-satiri, #demo-root .dm-aa-ust-bar, #demo-root .dm-aa-alt-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#demo-root .dm-aa-tablo-baslik { font-size: 14px; font-weight: 700; color: var(--dm-primary-text); }
#demo-root .dm-aa-ara { width: 200px; }
#demo-root .dm-aa-kaydir { flex: 1; min-height: 0; overflow: auto; }
#demo-root .dm-aa-tablo-kisa { flex: none; max-height: 232px; }
#demo-root .dm-aa-genis-tablo .dm-tablo-kap { width: max-content; min-width: 100%; overflow: visible; }
#demo-root .dm-aa-genis-tablo .dm-tablo { font-size: 12px; }
#demo-root .dm-aa-genis-tablo .dm-tablo th, #demo-root .dm-aa-genis-tablo .dm-tablo td { padding: 6px 6px; }
#demo-root .dm-aa-genis-tablo .dm-tablo td { max-width: 150px; }
#demo-root .dm-aa-alt-bar { flex-wrap: wrap; }
#demo-root .dm-aa-basari { display: inline-flex; color: var(--dm-success-text); }
#demo-root .dm-aa-tehlike { color: var(--dm-danger-text); }
#demo-root .dm-aa-uyar { color: var(--dm-warning-text); font-weight: 600; }
#demo-root .dm-aa-sekme-govde { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--dm-border); border-top: 0; background: var(--dm-bg-card); }
#demo-root .dm-aa-arac-satiri, #demo-root .dm-aa-filtre-satiri { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#demo-root .dm-aa-filtre-satiri { padding-left: 14px; }
#demo-root .dm-aa-ozet-yazi { padding-left: 16px; }
#demo-root .dm-aa-genis { flex: 1; }
#demo-root .dm-aa-birimler { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
#demo-root .dm-aa-agac { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-tablo); }
#demo-root .dm-aa-agac-ust, #demo-root .dm-aa-agac-satir { display: grid; grid-template-columns: 300px 100px 120px; align-items: center; gap: 8px; padding: 5px 10px; }
#demo-root .dm-aa-agac-ust { background: var(--dm-table-header-bg); font-size: 12px; font-weight: 700; color: var(--dm-text-secondary); }
#demo-root .dm-aa-agac-kat { display: flex; align-items: center; gap: 6px; padding: 5px 10px; font-weight: 700; }
#demo-root .dm-aa-agac-satir { padding-left: 34px; font-size: 13px; }
#demo-root .dm-aa-form { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 8px 12px; }
#demo-root .dm-aa-form-et { text-align: right; }
#demo-root .dm-aa-form-onaylar { display: flex; gap: 16px; margin-top: 12px; }
#demo-root .dm-aa-vard-not { margin-top: 10px; font-size: 11px; }
/* ---- 10_ana_b ---- */
#demo-root .dm-istat-orange { border-left-color: var(--dm-orange-text); }
#demo-root .dm-rpr-filtre { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; }
#demo-root .dm-rpr-alanlar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; flex: 1; min-width: 0; }
#demo-root .dm-rpr-alan { display: flex; align-items: center; gap: 6px; }
#demo-root .dm-rpr-tarih { width: 104px; }
#demo-root .dm-rpr-combo { width: 140px; }
#demo-root .dm-rpr-combo-dar { width: 116px; }
#demo-root .dm-rpr-ara { display: flex; align-items: center; gap: 8px; }
#demo-root .dm-rpr-ozet { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
#demo-root .dm-rpr-ozet .dm-istat { padding: 8px 12px; }
#demo-root .dm-rpr-ozet .dm-istat-deger { font-size: 20px; }
#demo-root .dm-rpr-kaydir, #demo-root .dm-kul-tablo, #demo-root .dm-isl-tablo, #demo-root .dm-but-tablo { flex: 1; min-height: 0; overflow: auto; }
#demo-root .dm-rpr-kaydir .dm-tablo { width: max-content; min-width: 100%; }
#demo-root .dm-rpr-alt { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#demo-root .dm-rpr-iptal, #demo-root .dm-isl-iptal, #demo-root .dm-but-red { color: var(--dm-danger-text); }
#demo-root .dm-isl-uyari { color: var(--dm-warning-text); }
#demo-root .dm-tke { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: -16px -20px; }
#demo-root .dm-tke-arac { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 8px; background: var(--dm-bg-panel); border-bottom: 1px solid var(--dm-border); }
#demo-root .dm-tke-ayrac { width: 1px; height: 20px; margin: 0 4px; background: var(--dm-border); }
#demo-root .dm-tke-hiza { padding: 3px 7px; }
#demo-root .dm-tke-kagit { width: 150px; }
#demo-root .dm-tke-zoom { width: 44px; text-align: center; font-size: 12px; }
#demo-root .dm-tke-icerik { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr) 360px; }
#demo-root .dm-tke-palet { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; overflow: auto; background: var(--dm-bg-panel); border-right: 1px solid var(--dm-border); }
#demo-root .dm-tke-bolum { margin: 2px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dm-text-secondary); }
#demo-root .dm-tke-bolum-ust { margin-top: 10px; }
#demo-root .dm-tke-ekle { justify-content: flex-start; gap: 8px; }
#demo-root .dm-tke-simge { display: inline-flex; justify-content: center; width: 18px; font-family: var(--dm-font-mono); }
#demo-root .dm-tke-veri { justify-content: flex-start; height: 24px; padding: 0 8px; font-size: 11px; font-weight: 500; overflow: hidden; }
#demo-root .dm-tke-tuval { display: flex; justify-content: center; align-items: flex-start; padding: 20px; overflow: auto; background-color: var(--dm-bg-dark); background-image: radial-gradient(var(--dm-border) 1px, transparent 1px); background-size: 16px 16px; }
#demo-root .dm-tke-kagit-alan { position: relative; flex: none; background: white; color: black; border: 1px solid var(--dm-border); box-shadow: 0 2px 12px var(--dm-border); }
#demo-root .dm-tke-eleman { position: absolute; display: flex; align-items: center; padding: 0 2px; border: 1px dashed transparent; background: none; color: black; text-align: left; white-space: nowrap; overflow: hidden; line-height: 1.15; }
#demo-root .dm-tke-eleman:hover { border-color: var(--dm-accent); }
#demo-root .dm-tke-kalin { font-weight: 700; }
#demo-root .dm-tke-secili { border: 1px solid var(--dm-accent); outline: 2px solid var(--dm-accent); }
#demo-root .dm-tke-qr { justify-content: center; border-color: black; }
#demo-root .dm-tke-sag { display: flex; flex-direction: column; min-height: 0; padding: 8px; background: var(--dm-bg-panel); border-left: 1px solid var(--dm-border); }
#demo-root .dm-tke-sekme-govde { flex: 1; min-height: 0; overflow: auto; padding: 10px 4px; }
#demo-root .dm-tke-bos { padding: 40px 10px; text-align: center; font-size: 12px; color: var(--dm-text-secondary); white-space: pre-line; }
#demo-root .dm-tke-bos-ikon { font-family: var(--dm-font-mono); font-size: 22px; }
#demo-root .dm-tke-izgara { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 6px 8px; align-items: center; }
#demo-root .dm-tke-form { display: grid; grid-template-columns: 76px 1fr; gap: 6px 8px; align-items: center; }
#demo-root .dm-tke-stil { display: inline-flex; justify-content: center; align-items: center; width: 26px; height: 24px; border: 1px solid var(--dm-border); border-radius: 4px; font-size: 12px; }
#demo-root .dm-tke-stil-acik { background: var(--dm-primary-bg); color: var(--dm-primary-text); font-weight: 700; }
#demo-root .dm-tke-onaylar { display: grid; gap: 4px; margin: 10px 0; }
#demo-root .dm-tke-katman, #demo-root .dm-tke-kayitli { display: grid; gap: 4px; }
#demo-root .dm-tke-katman-btn { width: 100%; padding: 6px 8px; text-align: left; font-size: 12px; border: 1px solid var(--dm-border); border-radius: 6px; background: var(--dm-bg-card); }
#demo-root .dm-tke-katman-secili { background: var(--dm-table-selected-bg); color: var(--dm-table-selected-text); }
#demo-root .dm-tke-sablon { display: grid; gap: 10px; }
#demo-root .dm-tke-galeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#demo-root .dm-tke-sablon-btn { flex-direction: column; height: 64px; white-space: normal; font-size: 11px; }
#demo-root .dm-tke-durum { display: flex; gap: 16px; align-items: center; height: 22px; padding: 0 12px; font-size: 11px; color: var(--dm-text-secondary); background: var(--dm-sidebar-bg); border-top: 1px solid var(--dm-border); }
#demo-root .dm-ekl-ana { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; }
#demo-root .dm-ekl-liste { display: flex; flex-direction: column; gap: 8px; overflow: auto; }
#demo-root .dm-ekl-kart { position: relative; display: flex; align-items: center; gap: 14px; min-height: 104px; padding: 10px 14px; background: var(--dm-bg-card); border: 1px solid var(--dm-border); border-radius: 10px; }
#demo-root .dm-ekl-secili { border-color: var(--dm-accent); background: var(--dm-bg-card-hover); }
#demo-root .dm-ekl-ikon { flex: none; color: var(--dm-primary-text); }
#demo-root .dm-ekl-bilgi { flex: 1; min-width: 0; }
#demo-root .dm-ekl-ad { padding: 0; border: 0; background: none; font-size: 14px; font-weight: 700; text-align: left; color: var(--dm-text-primary); }
#demo-root .dm-ekl-ad::after { content: ""; position: absolute; inset: 0; }
#demo-root .dm-ekl-surum { font-size: 11px; color: var(--dm-text-muted); }
#demo-root .dm-ekl-aciklama { font-size: 12px; color: var(--dm-text-secondary); }
#demo-root .dm-ekl-sag { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#demo-root .dm-ekl-sarma { display: inline-flex; }
#demo-root .dm-ekl-ikon-btn { padding: 7px; }
#demo-root .dm-ekl-detay { display: flex; flex-direction: column; gap: 10px; padding: 16px; overflow: auto; background: var(--dm-bg-card); border: 1px solid var(--dm-border); border-radius: 10px; }
#demo-root .dm-ekl-detay-ad { font-size: 16px; font-weight: 700; color: var(--dm-primary-text); }
#demo-root .dm-ekl-detay-bilgi { font-size: 13px; color: var(--dm-text-secondary); }
#demo-root .dm-ekl-lisans { display: grid; gap: 6px; padding-top: 6px; }
#demo-root .dm-ekl-kod { height: auto; padding: 8px; resize: none; }
#demo-root .dm-kul-form { display: grid; grid-template-columns: 110px 1fr; gap: 8px 10px; align-items: center; }
#demo-root .dm-kul-yetki { display: grid; gap: 4px; margin-top: 10px; }
#demo-root .dm-isl-filtre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; }
#demo-root .dm-isl-plaka { width: 120px; }
#demo-root .dm-isl-op { width: 180px; }
#demo-root .dm-isl-tablo .dm-tablo { font-family: var(--dm-font-mono); font-size: 12px; }
#demo-root .dm-isl-detay dl { display: grid; grid-template-columns: 100px 1fr; gap: 4px 10px; margin: 4px 0 12px; }
#demo-root .dm-isl-detay dt { color: var(--dm-text-secondary); }
#demo-root .dm-isl-detay dd { margin: 0; }
#demo-root .dm-but-baslik { font-size: 22px; font-weight: 700; color: var(--dm-danger-text); }
#demo-root .dm-but-arac { display: flex; gap: 8px; padding: 10px 16px; background: var(--dm-bg-panel); border: 1px solid var(--dm-border); border-radius: 8px; }
#demo-root .dm-but-afis { padding: 12px 16px; font-weight: 700; color: var(--dm-danger-text); background: var(--dm-bg-panel); border: 1px solid var(--dm-accent); border-radius: 8px; }
#demo-root .dm-but-tablo .dm-tablo { font-family: var(--dm-font-mono); font-size: 12px; }
#demo-root .dm-ayr-kaydir { flex: 1; min-height: 0; display: grid; align-content: start; gap: 14px; overflow: auto; padding-right: 6px; }
#demo-root .dm-ayr-not { margin: 0 0 8px; font-size: 12.5px; color: var(--dm-text-secondary); }
#demo-root .dm-ayr-radyo { gap: 20px; }
#demo-root .dm-ayr-form { display: grid; grid-template-columns: 210px minmax(0, 1fr) 210px minmax(0, 1fr); gap: 8px 16px; align-items: center; }
#demo-root .dm-ayr-dugmeler { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
/* ---- 10_bildirim ---- */
#demo-root .dm-bld-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#demo-root .dm-bld-baslik { font-size: 16px; font-weight: 700; color: var(--dm-primary-text); }
#demo-root .dm-bld-govde { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
#demo-root .dm-bld-tablo { flex: 1; min-height: 0; }
#demo-root .dm-bld-kurallar { max-width: 760px; display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; padding: 10px; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-kart); }
#demo-root .dm-bld-kanallar { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 8px 160px; }
#demo-root .dm-bld-sekme { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; padding: 10px; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-kart); }
#demo-root .dm-bld-not { margin: 6px 0; color: var(--dm-text-secondary); font-size: 12.5px; max-width: 760px; }
/* ---- 10_coklu-tartim ---- */
#demo-root .dm-cs-ana { display: flex; gap: 12px; flex: 1; min-height: 0; }
#demo-root .dm-cs-yan { width: 260px; flex: none; display: flex; flex-direction: column; gap: 6px; padding: 6px; background: var(--dm-sidebar-bg); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-kart); overflow: auto; }
#demo-root .dm-cs-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
#demo-root .dm-cs-kart { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; text-align: left; background: var(--dm-bg-card); border: 1px solid var(--dm-border); border-radius: 8px; color: var(--dm-text-primary); }
#demo-root .dm-cs-kart:hover { background: var(--dm-bg-card-hover); }
#demo-root .dm-cs-kart-sec, #demo-root .dm-cs-kart-sec:hover { background: var(--dm-primary-bg); border-color: var(--dm-accent); color: var(--dm-primary-text); }
#demo-root .dm-cs-kart-ust { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
#demo-root .dm-cs-ad { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
#demo-root .dm-cs-alt { font-size: 11px; color: var(--dm-text-secondary); }
#demo-root .dm-cs-kart-sec .dm-cs-alt { color: var(--dm-primary-text); }
#demo-root .dm-cs-kart .dm-rozet { padding: 2px 8px; font-size: 10px; }
#demo-root .dm-cs-yildiz { width: 12px; height: 12px; background: currentColor; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
#demo-root .dm-cs-yonetim { display: grid; gap: 10px; }
#demo-root .dm-cs-liste { display: grid; gap: 2px; min-height: 130px; padding: 4px; background: var(--dm-bg-input); border: 1px solid var(--dm-border); border-radius: 6px; align-content: start; }
#demo-root .dm-cs-satir { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 5px 8px; border: 0; border-radius: 4px; background: none; text-align: left; font-size: 13px; font-family: var(--dm-font-mono); }
#demo-root .dm-cs-satir:hover { background: var(--dm-bg-card-hover); }
#demo-root .dm-cs-satir-sec, #demo-root .dm-cs-satir-sec:hover { background: var(--dm-table-selected-bg); color: var(--dm-table-selected-text); }
#demo-root .dm-cs-havuz { display: grid; gap: 2px; font-size: 12px; }
#demo-root .dm-cs-form { display: grid; gap: 10px; max-height: 640px; overflow: auto; }
#demo-root .dm-cs-sunucu { display: grid; gap: 8px; }
#demo-root .dm-cs-sayfa-secici { display: flex; gap: 4px; align-self: flex-start; }
#demo-root .dm-cs-sec { padding: 5px 12px; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-btn); background: var(--dm-secondary-bg); color: var(--dm-secondary-text); font-size: 13px; font-weight: 600; }
#demo-root .dm-cs-sec-aktif { background: var(--dm-primary-bg); color: var(--dm-primary-text); border-color: var(--dm-accent); }
#demo-root .dm-cs-filtre { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
#demo-root .dm-cs-filtre .dm-alan { width: 128px; }
#demo-root .dm-cs-kaydir { min-width: 0; }
#demo-root .dm-cs-kaydir .dm-tablo-kap { overflow-x: auto; }
#demo-root .dm-cs-pasif .dm-baskul-sayi { color: var(--dm-text-secondary); }
/* ---- 10_eirsaliye_a ---- */
#demo-root .dm-eirs-akis { display: flex; gap: 26px; margin-top: 8px; }
#demo-root .dm-eirs-dugum { position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 240px; padding: 24px 20px; text-align: left; background: var(--dm-bg-card); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-kart); color: var(--dm-text-primary); }
#demo-root .dm-eirs-dugum:not(:last-child)::after { content: ""; position: absolute; right: -17px; top: 50%; border: 6px solid transparent; border-left-color: var(--dm-text-muted); }
#demo-root .dm-eirs-dugum:hover { background: var(--dm-bg-card-hover); }
#demo-root .dm-eirs-dugum-aktif, #demo-root .dm-eirs-dugum-aktif:hover { background: var(--dm-primary-bg); border-color: var(--dm-accent); color: var(--dm-primary-text); }
#demo-root .dm-eirs-no { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--dm-accent); color: var(--dm-bg-dark); font-size: 12px; font-weight: 700; }
#demo-root .dm-eirs-dugum-baslik { font-size: 18px; font-weight: 700; }
#demo-root .dm-eirs-dugum-kisa { font-size: 14px; color: var(--dm-text-secondary); }
#demo-root .dm-eirs-dugum-aktif .dm-eirs-dugum-kisa { color: var(--dm-primary-text); }
#demo-root .dm-eirs-detay { font-size: 17px; line-height: 1.6; margin: 0 0 10px; min-height: 76px; }
#demo-root .dm-eirs-kapilar { flex-wrap: wrap; }
#demo-root .dm-eirs-sonuclar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
#demo-root .dm-eirs-sonuc { padding: 22px; min-height: 150px; }
#demo-root .dm-eirs-sonuc p { margin-top: 12px; font-size: 16px; line-height: 1.5; }
#demo-root .dm-eirs-buyuk .dm-tablo th { padding: 12px 16px; font-size: 13px; }
#demo-root .dm-eirs-buyuk .dm-tablo td { padding: 14px 16px; font-size: 15px; }
#demo-root .dm-eirs-satir { display: grid; grid-template-columns: 170px 1fr; gap: 8px; align-items: center; }
#demo-root .dm-eirs-satir .dm-input { height: 28px; }
#demo-root .dm-eirs-firmaform { display: grid; gap: 6px; }
#demo-root .dm-eirs-bayraklar { gap: 18px; margin-top: 4px; }
#demo-root .dm-eirs-ipucu { font-size: 12px; color: var(--dm-text-secondary); margin: 6px 0 0; }
#demo-root .dm-eirs-evet { display: inline-flex; color: var(--dm-success-text); }
#demo-root .dm-eirs-hayir { display: inline-flex; color: var(--dm-danger-text); }
#demo-root .dm-eirs-kalemler { display: grid; gap: 2px; }
#demo-root .dm-eirs-bildirimler { display: grid; gap: 8px; }
#demo-root .dm-eirs-bildirim { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
#demo-root .dm-eirs-sonra { opacity: .35; }
#demo-root .dm-eirs-toastlar { position: absolute; top: 16px; right: 20px; z-index: 25; display: grid; gap: 8px; }
#demo-root .dm-eirs-tekrar { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); z-index: 25; }
#demo-root .dm-eirs-yukleme { display: flex; align-items: center; gap: 12px; padding: 16px 20px; font-size: 15px; font-weight: 600; }
#demo-root .dm-eirs-donus { width: 18px; height: 18px; border: 3px solid var(--dm-border); border-top-color: var(--dm-accent); border-radius: 50%; animation: dm-eirs-don 1s linear infinite; }
@keyframes dm-eirs-don {to { transform: rotate(360deg); }}
#demo-root .dm-eirs-tike { display: grid; gap: 3px; width: 300px; padding: 14px; background: white; color: black; border: 1px dashed gray; font-size: 12px; }
#demo-root .dm-eirs-tike-no { margin-top: 6px; padding-top: 6px; border-top: 1px dashed gray; font-weight: 700; }
#demo-root .dm-eirs-alt { display: flex; align-items: center; gap: 8px; width: 100%; }
#demo-root .dm-eirs-onizleme { display: grid; gap: 8px; }
#demo-root .dm-eirs-bilgi { font-size: 12px; font-weight: 700; color: var(--dm-primary-text); }
#demo-root .dm-eirs-sayfa { display: grid; gap: 8px; }
#demo-root .dm-eirs-ortala { display: flex; justify-content: center; }
#demo-root .dm-eirs-not { margin: 0; font-size: 11px; font-style: italic; color: var(--dm-text-secondary); }
#demo-root .dm-eirs-xml { height: 500px; margin: 0; padding: 8px; overflow: auto; white-space: pre-wrap; word-break: break-all; font-family: var(--dm-font-mono); font-size: 12px; background: var(--dm-bg-input); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-input); }
#demo-root .dm-eirs-belge-kap { height: 470px; overflow: auto; border: 1px solid var(--dm-border); }
#demo-root .dm-eirs-belge { display: grid; gap: 14px; padding: 18px; background: white; color: black; font-size: 12px; line-height: 1.4; }
#demo-root .dm-eirs-belge-ust { display: grid; grid-template-columns: 1fr 150px 90px; gap: 14px; align-items: start; }
#demo-root .dm-eirs-belge-logo { padding: 18px 8px; text-align: center; font-size: 18px; font-weight: 700; border: 2px solid gray; }
#demo-root .dm-eirs-belge-qr { display: flex; align-items: center; justify-content: center; height: 90px; border: 1px solid gray; font-weight: 700; }
#demo-root .dm-eirs-belge-orta { display: grid; grid-template-columns: 1fr 380px; gap: 14px; }
#demo-root .dm-eirs-belge table { border-collapse: collapse; width: 100%; }
#demo-root .dm-eirs-belge th, #demo-root .dm-eirs-belge td { padding: 3px 8px; border: 1px solid silver; text-align: left; font-size: 12px; }
#demo-root .dm-eirs-belge thead th { background: whitesmoke; }
#demo-root .dm-eirs-belge-alt { padding-top: 8px; border-top: 1px solid silver; }
/* ---- 10_eirsaliye_b ---- */
#demo-root .dm-eb-sayfa { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
#demo-root .dm-eb-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 14px 16px; overflow: hidden; background: var(--dm-bg-dark); border: 1px solid var(--dm-border); border-top: 0; border-radius: 0 0 8px 8px; }
#demo-root .dm-eb-izleme, #demo-root .dm-eb-pano, #demo-root .dm-eb-kayitlar, #demo-root .dm-eb-liste-sayfa, #demo-root .dm-eb-entegrator, #demo-root .dm-eb-yonlendirme, #demo-root .dm-eb-ayarlar, #demo-root .dm-eb-yazici, #demo-root .dm-eb-yasam { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
#demo-root .dm-eb-izleme { flex: 1; }
#demo-root .dm-eb-baslik { font-size: 13px; font-weight: 700; color: var(--dm-text-primary); }
#demo-root .dm-eb-bilgi { margin: 0; font-size: 13px; color: var(--dm-text-secondary); }
#demo-root .dm-eb-etiket { font-size: 12px; font-weight: 600; color: var(--dm-text-secondary); }
#demo-root .dm-eb-kontrol, #demo-root .dm-eb-gunluk-kap { background: var(--dm-bg-card); border: 1px solid var(--dm-border); border-radius: 8px; }
#demo-root .dm-eb-kontrol { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; }
#demo-root .dm-eb-kontrol-baslik { font-size: 15px; font-weight: 700; color: var(--dm-primary-text); }
#demo-root .dm-eb-gunluk-kap { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; padding: 12px; }
#demo-root .dm-eb-gunluk-ust { display: flex; justify-content: space-between; align-items: center; }
#demo-root .dm-eb-gunluk { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px; background: var(--dm-bg-input); border: 1px solid var(--dm-border); border-radius: 6px; font-family: var(--dm-font-mono); font-size: 12px; line-height: 1.65; }
#demo-root .dm-eb-sik .dm-tablo { font-size: 12px; }
#demo-root .dm-eb-sik .dm-tablo th, #demo-root .dm-eb-sik .dm-tablo td { padding: 6px 7px; }
#demo-root .dm-eb-sik .dm-tablo td { max-width: 300px; }
#demo-root .dm-eb-filtre { display: flex; align-items: center; gap: 10px; }
#demo-root .dm-eb-tarih { width: 130px; }
#demo-root .dm-eb-firma { width: 260px; }
#demo-root .dm-eb-dugmeler, #demo-root .dm-eb-aksiyonlar { display: flex; align-items: center; gap: 8px; }
#demo-root .dm-eb-form-satir { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 8px; }
#demo-root .dm-eb-form-satir .dm-alan { max-width: 460px; }
#demo-root .dm-eb-ayarlar .dm-grup, #demo-root .dm-eb-yazici .dm-grup, #demo-root .dm-eb-aksiyonlar { max-width: 900px; }
#demo-root .dm-eb-ayarlar .dm-onay, #demo-root .dm-eb-yazici .dm-onay { display: flex; margin-bottom: 8px; }
#demo-root .dm-eb-lisans-satir { display: flex; align-items: center; gap: 8px; }
#demo-root .dm-eb-lisans-yazi { flex: 1; min-width: 0; color: var(--dm-text-secondary); }
#demo-root .dm-eb-tipler { margin-bottom: 8px; border: 1px solid var(--dm-border); border-radius: 6px; background: var(--dm-bg-input); overflow: hidden; }
#demo-root .dm-eb-tip { width: 100%; padding: 6px 10px; text-align: left; border: 0; background: none; font-family: var(--dm-font-mono); font-size: 12.5px; white-space: pre; }
#demo-root .dm-eb-tip:hover { background: var(--dm-bg-card-hover); }
#demo-root .dm-eb-tip-secili, #demo-root .dm-eb-tip-secili:hover { background: var(--dm-table-selected-bg); color: var(--dm-table-selected-text); }
#demo-root .dm-eb-kural-form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items: end; margin-bottom: 10px; }
#demo-root .dm-eb-yazici-satir { display: flex; align-items: center; gap: 8px; }
#demo-root .dm-eb-yazici-satir .dm-alan { flex: 1; max-width: 420px; }
#demo-root .dm-eb-nusha { width: 72px; text-align: center; }
#demo-root .dm-eb-duzelt { display: grid; gap: 8px; }
#demo-root .dm-eb-duzelt .dm-eb-form-satir { grid-template-columns: 150px minmax(0, 1fr); margin-bottom: 5px; }
#demo-root .dm-eb-duzelt .dm-input { height: 30px; }
#demo-root .dm-eb-olcum { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--dm-border); }
#demo-root .dm-eb-olcum-satir { display: flex; gap: 18px; margin-top: 4px; font-size: 12.5px; color: var(--dm-text-secondary); }
#demo-root .dm-eb-bildirim { position: absolute; right: 28px; bottom: 48px; z-index: 15; width: 560px; padding: 10px 12px; background: var(--dm-bg-panel); border: 1px solid var(--dm-border); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .28); }
#demo-root .dm-eb-bildirim-baslik { margin-bottom: 6px; font-size: 13px; font-weight: 700; }
#demo-root .dm-eb-akis, #demo-root .dm-eb-iptal-akis, #demo-root .dm-eb-detay { background: var(--dm-bg-card); border: 1px solid var(--dm-border); border-radius: 10px; }
#demo-root .dm-eb-akis { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
#demo-root .dm-eb-akis-sutun { display: flex; flex-direction: column; gap: 10px; }
#demo-root .dm-eb-ok { font-size: 22px; color: var(--dm-text-secondary); }
#demo-root .dm-eb-durum { padding: 10px 18px; border: 1px solid var(--dm-border); border-radius: 8px; background: var(--dm-secondary-bg); color: var(--dm-secondary-text); font-family: var(--dm-font-mono); font-size: 13px; font-weight: 700; }
#demo-root .dm-eb-durum:hover { background: var(--dm-secondary-bg-hover); }
#demo-root .dm-eb-durum-secili, #demo-root .dm-eb-durum-secili:hover { background: var(--dm-primary-bg); color: var(--dm-primary-text); border-color: var(--dm-primary-text); }
#demo-root .dm-eb-iptal { font-family: var(--dm-font-sans); }
#demo-root .dm-eb-gecisler { display: grid; gap: 4px; padding: 0 4px; font-size: 13px; color: var(--dm-text-secondary); }
#demo-root .dm-eb-gecisler b { font-family: var(--dm-font-mono); color: var(--dm-text-primary); }
#demo-root .dm-eb-iptal-akis { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; }
#demo-root .dm-eb-detay { display: grid; gap: 6px; align-content: start; min-height: 150px; padding: 14px 16px; font-size: 13.5px; }
#demo-root .dm-eb-detay p { margin: 0; }
#demo-root .dm-eb-detay-baslik { font-size: 16px; font-weight: 700; }
/* ---- 10_kamera ---- */
#demo-root .dm-km-sekme { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; padding-top: 4px; }
#demo-root .dm-km-sahne { position: relative; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(var(--dm-bg-input) 55%, var(--dm-border) 55%); }
#demo-root .dm-km-arac { position: absolute; border-radius: 6px; background: var(--dm-text-secondary); opacity: .5; }
#demo-root .dm-km-plaka { position: absolute; border: 2px solid var(--dm-text-primary); border-radius: 3px; background: var(--dm-bg-card); }
#demo-root .dm-km-tespit { outline: 2px dashed var(--dm-success-text); outline-offset: 3px; }
#demo-root .dm-km-kisi { position: absolute; border-radius: 50%; background: repeating-linear-gradient(45deg, var(--dm-text-secondary) 0 4px, var(--dm-bg-card) 4px 8px); }
#demo-root .dm-km-bulanik { position: absolute; border-radius: 50%; background: var(--dm-bg-input); opacity: .6; backdrop-filter: blur(7px); }
#demo-root .dm-km-tam::after { content: ""; position: absolute; inset: 0; background: var(--dm-bg-input); opacity: .6; backdrop-filter: blur(10px); }
#demo-root .dm-km-etiket { position: absolute; left: 6px; top: 6px; z-index: 2; }
#demo-root .dm-km-plakacubugu { display: flex; gap: 40px; padding: 8px 16px; font-size: 18px; font-weight: 700; background: var(--dm-bg-card); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-kart); }
#demo-root .dm-km-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#demo-root .dm-km-kart { display: grid; gap: 2px; padding: 4px; background: var(--dm-bg-card); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-kart); }
#demo-root .dm-km-kart-ust { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
#demo-root .dm-km-ad { flex: 1; text-align: center; font-size: 13px; font-weight: 600; }
#demo-root .dm-km-popout { padding: 2px 6px; }
#demo-root .dm-km-akis { height: 240px; display: flex; align-items: center; justify-content: center; background: var(--dm-bg-input); }
#demo-root .dm-km-filtre { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
#demo-root .dm-km-bolme { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; flex: 1; min-height: 0; }
#demo-root .dm-km-sol, #demo-root .dm-km-onizleme { display: grid; gap: 8px; align-content: start; min-width: 0; }
#demo-root .dm-km-orta { text-align: center; }
#demo-root .dm-km-buyuk { height: 320px; border: 1px solid var(--dm-border); background: var(--dm-bg-input); }
#demo-root .dm-km-uyari { font-weight: 700; color: var(--dm-orange-text); }
#demo-root .dm-km-ayar-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#demo-root .dm-km-ayar { display: grid; gap: 8px; align-content: start; }
#demo-root .dm-km-hata { font-size: 12px; color: var(--dm-danger-text); }
#demo-root .dm-km-tamam { font-size: 12px; color: var(--dm-success-text); }
#demo-root .dm-km-yedek { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 12px; align-items: start; flex: none; }
#demo-root .dm-km-sak, #demo-root .dm-km-disk { display: grid; gap: 9px; align-content: start; }
#demo-root .dm-km-ayak { display: grid; gap: 2px; }
#demo-root .dm-km-liste { display: grid; gap: 2px; min-height: 110px; max-height: 170px; overflow: auto; padding: 4px; background: var(--dm-bg-input); border: 1px solid var(--dm-border); border-radius: 6px; align-content: start; }
#demo-root .dm-km-oge { width: 100%; padding: 4px 8px; border: 0; border-radius: 4px; background: none; text-align: left; font-family: var(--dm-font-mono); font-size: 12px; white-space: pre; }
#demo-root .dm-km-oge:hover { background: var(--dm-bg-card-hover); }
#demo-root .dm-km-oge-sec, #demo-root .dm-km-oge-sec:hover { background: var(--dm-table-selected-bg); color: var(--dm-table-selected-text); }
/* ---- 10_manuel ---- */
#demo-root .dm-mn-kok { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
#demo-root .dm-mn-panel { display: grid; gap: 10px; padding: 12px 18px; }
#demo-root .dm-mn-agirliklar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
#demo-root .dm-mn-bilgi { margin-top: 4px; font-size: 12px; color: var(--dm-text-secondary); }
#demo-root .dm-mn-bilgi-uyari { color: var(--dm-warning-text); font-weight: 600; }
#demo-root .dm-mn-orta { flex: 1; min-height: 0; gap: 16px; }
#demo-root .dm-mn-net { display: flex; justify-content: space-between; align-items: center; }
#demo-root .dm-mn-gunluk { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; margin-top: 4px; }
#demo-root .dm-mn-gunluk b { display: block; font-size: 20px; }
#demo-root .dm-mn-gunluk small { font-size: 11px; color: var(--dm-text-secondary); }
#demo-root .dm-mn-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; align-content: start; min-height: 0; overflow-y: auto; }
#demo-root .dm-mn-birim { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* ---- 10_nem-farki ---- */
#demo-root .dm-nf-kok { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
#demo-root .dm-nf-baslik { font-size: 18px; font-weight: 700; color: var(--dm-primary-text); }
#demo-root .dm-nf-form { display: grid; gap: 10px; padding: 14px 16px; }
#demo-root .dm-nf-satir { display: flex; align-items: center; gap: 12px; }
#demo-root .dm-nf-satir > .dm-etiket { width: 120px; flex: none; font-size: 13px; }
#demo-root .dm-nf-kontrol { flex: 1; max-width: 520px; height: 36px; }
#demo-root .dm-nf-oran { width: 140px; height: 36px; text-align: right; }
#demo-root .dm-nf-tablo { display: grid; gap: 6px; min-height: 0; overflow-y: auto; }
#demo-root .dm-nf-link { padding: 0; border: 0; background: none; font-weight: 600; text-decoration: underline; }
#demo-root .dm-nf-duzenle { color: var(--dm-warning-text); }
#demo-root .dm-nf-sil { color: var(--dm-danger-text); }
#demo-root .dm-nf-filtre { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#demo-root .dm-nf-aksiyon { display: inline-flex; align-items: center; gap: 12px; }
#demo-root .dm-nf-ara { display: flex; align-items: center; gap: 10px; }
#demo-root .dm-nf-ara .dm-input { flex: 1; }
#demo-root .dm-nf-detay { display: grid; gap: 6px; margin-bottom: 10px; }
#demo-root .dm-nf-detay-satir { display: flex; align-items: center; gap: 10px; }
#demo-root .dm-nf-detay-satir .dm-etiket { width: 150px; flex: none; }
#demo-root .dm-nf-bolum { margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--dm-primary-text); }
/* ---- 10_parcali ---- */
#demo-root .dm-prc-kok { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
#demo-root .dm-prc-sekmeler { display: grid; gap: 6px; }
#demo-root .dm-prc-sut { display: flex; gap: 12px; flex: 1; min-height: 0; }
#demo-root .dm-prc-sol { display: flex; flex-direction: column; gap: 10px; width: 390px; flex: none; min-height: 0; overflow-y: auto; }
#demo-root .dm-prc-canli { display: grid; gap: 4px; }
#demo-root .dm-prc-canli-sayi { font-size: 70px; font-weight: 600; line-height: 1.05; text-align: center; color: var(--dm-success-text); letter-spacing: .02em; }
#demo-root .dm-prc-canli-birim { text-align: center; font-size: 18px; color: var(--dm-text-secondary); }
#demo-root .dm-prc-canli-alt { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--dm-text-secondary); }
#demo-root .dm-prc-ozet3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
#demo-root .dm-prc-ozet3 small { display: block; font-size: 11px; color: var(--dm-text-secondary); }
#demo-root .dm-prc-ozet3 b { font-size: 17px; }
#demo-root .dm-prc-form { display: grid; gap: 8px; }
#demo-root .dm-prc-form .dm-btn { width: 100%; }
#demo-root .dm-prc-aktif { display: flex; flex-direction: column; width: 290px; flex: none; min-height: 0; }
#demo-root .dm-prc-aktif-ust { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#demo-root .dm-prc-aktif-ust .dm-kart-baslik { margin-right: auto; }
#demo-root .dm-prc-sayac { font-size: 12px; font-weight: 700; color: var(--dm-text-secondary); }
#demo-root .dm-prc-ara { width: 112px; height: 28px; }
#demo-root .dm-prc-kartlar { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; }
#demo-root .dm-prc-kart { display: grid; gap: 4px; padding: 10px; text-align: left; border: 2px solid var(--dm-border); border-radius: 10px; background: var(--dm-bg-card); color: var(--dm-text-primary); }
#demo-root .dm-prc-kart:hover { background: var(--dm-bg-card-hover); }
#demo-root .dm-prc-kart-secili, #demo-root .dm-prc-kart-secili:hover { background: var(--dm-primary-bg); color: var(--dm-primary-text); border-color: var(--dm-primary-text); }
#demo-root .dm-prc-kart-plaka { font-size: 16px; font-weight: 700; }
#demo-root .dm-prc-kart-alt, #demo-root .dm-prc-kart-ayak { font-size: 12px; opacity: .8; }
#demo-root .dm-prc-kart-sat { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
#demo-root .dm-prc-kart-net { font-weight: 700; }
#demo-root .dm-prc-bos { padding: 18px 8px; text-align: center; color: var(--dm-text-secondary); }
#demo-root .dm-prc-parcalar { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
#demo-root .dm-prc-tablo th, #demo-root .dm-prc-tablo td { text-align: center; }
#demo-root .dm-prc-toplam { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding: 8px 4px 0; border-top: 1px solid var(--dm-border); }
#demo-root .dm-prc-toplam b { font-size: 18px; color: var(--dm-success-text); }
#demo-root .dm-prc-mesaj { margin-bottom: 10px; line-height: 1.5; }
#demo-root .dm-prc-ozet { display: grid; gap: 4px; }
#demo-root .dm-prc-ozet div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--dm-border); }
#demo-root .dm-prc-ozet dt { color: var(--dm-text-secondary); }
#demo-root .dm-prc-ozet dd { margin: 0; font-weight: 700; }
#demo-root .dm-prc-kalemler { display: grid; gap: 2px; }
#demo-root .dm-prc-filtre { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
#demo-root .dm-prc-filtre .dm-alan { min-width: 150px; }
#demo-root .dm-prc-filtre .dm-esnek { min-width: 240px; }
#demo-root .dm-prc-tarih { display: flex; align-items: center; gap: 6px; }
#demo-root .dm-prc-tarih-kutu { width: 108px; }
#demo-root .dm-prc-eylemler { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#demo-root .dm-prc-bosluk { flex: 1; }
#demo-root .dm-prc-agac { flex: 1; min-height: 0; overflow-y: auto; }
#demo-root .dm-prc-ref { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
#demo-root .dm-prc-chev { display: inline-flex; color: var(--dm-text-secondary); }
#demo-root .dm-prc-iptal td { color: var(--dm-danger-text); }
#demo-root .dm-prc-detay td { padding: 4px 10px 8px 34px; background: var(--dm-bg-panel); white-space: normal; max-width: none; }
#demo-root .dm-prc-ic { font-size: 12px; }
#demo-root .dm-prc-ic td, #demo-root .dm-prc-ic th { padding: 4px 10px; }
#demo-root .dm-prc-pager { display: flex; align-items: center; gap: 10px; }
/* ---- 10_rfid ---- */
#demo-root .dm-rf-ust { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#demo-root .dm-rf-form { display: grid; gap: 10px; }
#demo-root .dm-rf-uid { display: flex; align-items: center; background: var(--dm-disabled-input-bg); color: var(--dm-disabled-text); }
#demo-root .dm-rf-sihirbaz { padding: 18px 8px; font-size: 15px; text-align: center; }
#demo-root .dm-rf-mod { width: 320px; }
#demo-root .dm-rf-okuyucular { display: grid; grid-template-columns: repeat(2, 460px); gap: 12px; }
#demo-root .dm-rf-okuyucu { display: grid; gap: 10px; align-content: start; }
#demo-root .dm-rf-bagli { font-size: 13px; color: var(--dm-success-text); }
#demo-root .dm-rf-sahne { display: flex; gap: 16px; flex: 1; min-height: 0; }
#demo-root .dm-rf-durumlar { width: 340px; flex: none; gap: 6px; overflow: auto; }
#demo-root .dm-rf-durum { padding: 7px 10px; text-align: left; border: 1px solid var(--dm-border); border-radius: 8px; background: var(--dm-secondary-bg); color: var(--dm-secondary-text); font-size: 12px; }
#demo-root .dm-rf-durum:hover { background: var(--dm-secondary-bg-hover); }
#demo-root .dm-rf-durum-sec, #demo-root .dm-rf-durum-sec:hover { background: var(--dm-primary-bg); color: var(--dm-primary-text); border-color: var(--dm-accent); }
#demo-root .dm-rf-monitor { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--dm-border); border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
#demo-root .dm-rf-ekran { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 40px; text-align: center; background: var(--dm-bg-dark); }
#demo-root .dm-rf-baslik { font-size: 46px; font-weight: 700; line-height: 1.15; }
#demo-root .dm-rf-ayrinti { font-size: 24px; color: var(--dm-text-secondary); }
#demo-root .dm-rf-geri { min-height: 28px; font-size: 22px; color: var(--dm-text-secondary); }
#demo-root .dm-rf-rol-accent { background: var(--dm-primary-bg); color: var(--dm-primary-text); }
#demo-root .dm-rf-rol-success { background: var(--dm-success-bg); color: var(--dm-success-text); }
#demo-root .dm-rf-rol-danger { background: var(--dm-danger-bg); color: var(--dm-danger-text); }
#demo-root .dm-rf-rol-warning { background: var(--dm-warning-bg); color: var(--dm-warning-text); }
#demo-root .dm-rf-ilk { justify-self: start; }
/* ---- 10_uc-taraf ---- */
#demo-root .dm-utt-govde { flex: 1; min-height: 0; padding: 10px; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-kart); overflow: hidden; }
#demo-root .dm-utt-tartim { flex: 1; min-height: 0; gap: 14px; }
#demo-root .dm-utt-bekleyen { width: 420px; flex: none; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
#demo-root .dm-utt-baslik { font-weight: 700; padding: 4px; color: var(--dm-primary-text); }
#demo-root .dm-utt-frm { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 8px; }
#demo-root .dm-utt-frm-et { text-align: right; }
#demo-root .dm-utt-not { min-height: 90px; resize: none; font: inherit; }
#demo-root .dm-utt-durum { font-weight: 700; font-size: 13px; }
#demo-root .dm-utt-canli { text-align: center; font-size: 36px; font-weight: 700; color: var(--dm-primary-text); }
#demo-root .dm-utt-cihaz { text-align: center; color: var(--dm-text-secondary); margin-bottom: 8px; }
#demo-root .dm-utt-sonuclar { margin-top: 6px; }
#demo-root .dm-utt-dugmeler { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
#demo-root .dm-utt-diyalog-form { display: flex; flex-direction: column; gap: 6px; }
#demo-root .dm-utt-sayfa { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
#demo-root .dm-utt-filtre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#demo-root .dm-utt-fa { display: flex; align-items: center; gap: 6px; }
#demo-root .dm-utt-fa-et { font-size: 12px; font-weight: 600; color: var(--dm-text-secondary); white-space: nowrap; }
#demo-root .dm-utt-genis { min-width: 340px; }
#demo-root .dm-utt-yatay { flex-direction: row; align-items: center; gap: 8px; }
#demo-root .dm-utt-disa { display: flex; gap: 6px; margin-left: auto; }
#demo-root .dm-utt-arama { display: flex; align-items: center; gap: 8px; }
#demo-root .dm-utt-arama .dm-utt-genis { flex: 1; }
#demo-root .dm-utt-ozet { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
#demo-root .dm-utt-ucret-ozet { font-weight: 700; padding: 8px; }
#demo-root .dm-utt-tablo { flex: 1; min-height: 0; }
#demo-root .dm-utt-sonek { display: flex; align-items: center; gap: 8px; }
/* ---- 10_vertex ---- */
#demo-root .dm-vtx-sayfa { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 8px 16px; }
#demo-root .dm-vtx-baslik { font-size: 18px; font-weight: 600; color: var(--dm-primary-text); }
#demo-root .dm-vtx-kaydir { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 14px; }
#demo-root .dm-vtx-kart { padding: 16px 20px; background: var(--dm-bg-card); border: 1px solid var(--dm-border); border-radius: 8px; }
#demo-root .dm-vtx-satir { display: grid; grid-template-columns: 220px 1fr; gap: 12px; padding: 5px 0; }
#demo-root .dm-vtx-et { color: var(--dm-text-secondary); }
#demo-root .dm-vtx-iyi { color: var(--dm-success-text); }
#demo-root .dm-vtx-uyari { color: var(--dm-warning-text); }
#demo-root .dm-vtx-hata { color: var(--dm-danger-text); }
#demo-root .dm-vtx-soluk { color: var(--dm-text-muted); }
#demo-root .dm-vtx-web { width: 1600px; height: 920px; display: flex; flex-direction: column; background: var(--dm-bg-dark); }
#demo-root .dm-vtx-tarayici { height: 34px; flex: none; display: flex; align-items: flex-end; padding: 0 12px; background: var(--dm-secondary-bg); border-bottom: 1px solid var(--dm-border); }
#demo-root .dm-vtx-sekme-adi { display: flex; align-items: center; gap: 6px; padding: 6px 16px; background: var(--dm-bg-dark); border: 1px solid var(--dm-border); border-bottom: 0; border-radius: 8px 8px 0 0; font-size: 12px; }
#demo-root .dm-vtx-w-govde { flex: 1; min-height: 0; display: flex; }
#demo-root .dm-vtx-w-yan { width: 250px; flex: none; padding: 16px 12px; background: var(--dm-bg-panel); border-right: 1px solid var(--dm-border); display: flex; flex-direction: column; gap: 4px; }
#demo-root .dm-vtx-w-marka { font-size: 19px; font-weight: 700; padding: 6px 10px 14px; color: var(--dm-primary-text); }
#demo-root .dm-vtx-w-grup { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dm-text-muted); padding: 4px 10px; }
#demo-root .dm-vtx-w-menu { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--dm-text-primary); text-align: left; font-size: 14px; }
#demo-root .dm-vtx-w-menu:hover { background: var(--dm-bg-card-hover); }
#demo-root .dm-vtx-w-menu-aktif, #demo-root .dm-vtx-w-menu-aktif:hover { background: var(--dm-sidebar-active-bg); color: var(--dm-sidebar-active-text); font-weight: 700; }
#demo-root .dm-vtx-w-sag-alan { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#demo-root .dm-vtx-w-ust { height: 52px; flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 0 24px; background: var(--dm-bg-panel); border-bottom: 1px solid var(--dm-border); }
#demo-root .dm-vtx-w-icerik { flex: 1; min-height: 0; padding: 16px 24px; overflow: hidden; }
#demo-root .dm-vtx-w-ana-sayfa { display: flex; flex-direction: column; gap: 12px; }
#demo-root .dm-vtx-w-karsilama { display: flex; align-items: center; justify-content: space-between; }
#demo-root .dm-vtx-w-buyuk { font-size: 20px; font-weight: 700; }
#demo-root .dm-vtx-w-pencere { display: flex; border: 1px solid var(--dm-border); border-radius: 8px; overflow: hidden; }
#demo-root .dm-vtx-w-pen { padding: 5px 14px; font-size: 13px; color: var(--dm-text-secondary); }
#demo-root .dm-vtx-w-pen-aktif { background: var(--dm-primary-bg); color: var(--dm-primary-text); font-weight: 700; }
#demo-root .dm-vtx-w-kart { padding: 12px 16px; background: var(--dm-bg-card); border: 1px solid var(--dm-border); border-radius: 10px; min-width: 0; }
#demo-root .dm-vtx-w-baslik { font-weight: 700; margin-bottom: 8px; }
#demo-root .dm-vtx-w-kpi-ikon { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 8px; margin-bottom: 6px; }
#demo-root .dm-vtx-w-r-primary { background: var(--dm-primary-bg); color: var(--dm-primary-text); }
#demo-root .dm-vtx-w-r-success { background: var(--dm-success-bg); color: var(--dm-success-text); }
#demo-root .dm-vtx-w-r-warning { background: var(--dm-warning-bg); color: var(--dm-warning-text); }
#demo-root .dm-vtx-w-r-danger { background: var(--dm-danger-bg); color: var(--dm-danger-text); }
#demo-root .dm-vtx-w-kpi-deger { font-size: 24px; font-weight: 700; }
#demo-root .dm-vtx-w-kpi-birim { font-size: 13px; font-weight: 400; margin-left: 4px; color: var(--dm-text-secondary); }
#demo-root .dm-vtx-w-grafikler .dm-vtx-w-kart { padding-bottom: 6px; }
#demo-root .dm-vtx-w-grafikler .dm-halka .dm-grafik { width: 150px; flex: none; }
#demo-root .dm-vtx-w-filtre { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
#demo-root .dm-vtx-w-onay { margin-top: 10px; gap: 20px; }
#demo-root .dm-vtx-w-sag { margin-left: auto; }
#demo-root .dm-vtx-izg-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
#demo-root .dm-vtx-w-ozet { padding: 8px 14px; }
#demo-root .dm-vtx-w-tablo-kart { padding: 0; overflow: hidden; }
#demo-root .dm-vtx-w-tablo-kart .dm-vtx-w-baslik { padding: 10px 16px 0; }
#demo-root .dm-vtx-kaydir-x { overflow-x: auto; border: 0; border-radius: 0; }