/* KABUK: web/panel/src/tema/tema.css içinden AYNEN kopyalanmıştır (üst çubuk, sekme şeridi, sol menü). DEĞİŞTİRMEYİN. */
:root {
  --yazi-ailesi: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --zemin: #E4E8EF;
  --ust-zemin: #E8ECF4;
  --ray: #1E2A5A;
  --ray-uzeri: #232C5E;
  --ray-secili: #2D3772;
  --ray-yazi: #D7DCF0;
  --ray-ekran: #C5CBE6;
  --ray-simge: #8F9ACB;
  --ray-bolum: #7D88BF;
  --ray-vurgu: #F0A46A;
  --serit: #E5E7EB;
  --serit-cizgi: #C4C9D2;
  --sekme-vurgu: #EA580C;
  --birincil: #1D4ED8;
  --birincil-koyu: #1E40AF;
  --birincil-basili: #1E3A8A;
  --yazi: #0F172A;
  --yazi-2: #334155;
  --yazi-3: #475569;
  --yazi-4: #64748B;
  --yazi-5: #94A3B8;
  --tehlike: #B91C1C;
  --tehlike-parlak: #DC2626;
  --mesaj-baslik: #374151;
  --merkez-zemin: #F0F2F5;
}
* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body { margin: 0; font-family: var(--yazi-ailesi); font-size: 13px; color: var(--yazi); background: var(--zemin); -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ─────────── Kabuk ─────────── */
.kb { min-height: 100dvh; display: grid; grid-template-columns: 246px minmax(0, 1fr); background: var(--zemin); position: relative; }
.kb-ray-yuva { padding: 10px 0 10px 10px; min-width: 0; position: sticky; top: 0; height: 100dvh; }
.kb-ray { height: 100%; background: var(--ray); border-radius: 0 12px 12px 0; display: flex; flex-direction: column; overflow: hidden; }
.kb-ray-ara { margin: 10px 10px 6px; height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--ray-uzeri); border-radius: 6px; color: var(--ray-simge); }
.kb-ray-ara input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none; color: var(--ray-yazi); font-size: 12.5px; }
.kb-ray-ara input::placeholder { color: var(--ray-simge); }
.kb-ray-liste { flex: 1 1 auto; overflow-y: auto; padding: 2px 6px 10px; scrollbar-color: rgba(255,255,255,.33) transparent; }
.kb-modul { position: relative; width: 100%; min-height: 38px; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ray-yazi); font-size: 13.5px; text-align: left; }
.kb-modul:hover { background: var(--ray-uzeri); }
.kb-modul.acik { background: var(--ray-uzeri); color: #FFFFFF; }
.kb-modul.acik::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--ray-vurgu); }
.kb-modul .ok { transition: transform .15s; }
.kb-modul.acik .ok { transform: rotate(90deg); }
.kb-bolum { margin: 9px 12px 3px 36px; display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: .08em; color: var(--ray-bolum); text-transform: uppercase; }
.kb-bolum span:last-child { color: #5F6AA3; }
.kb-ekran { position: relative; width: calc(100% - 40px); margin: 2px 10px 2px 30px; min-height: 32px; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--ray-ekran); font-size: 13px; text-align: left; }
.kb-ekran:hover { background: var(--ray-uzeri); color: #FFFFFF; }
.kb-ekran.secili { background: var(--ray-secili); color: #FFFFFF; }
.kb-ekran.secili::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; background: var(--ray-vurgu); }
.kb-ekran.secili svg { stroke: var(--ray-vurgu); }
.kb-ray-alt { display: flex; align-items: center; gap: 10px; padding: 10px; background: rgba(0,0,0,.13); }
.kb-kontor { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin: 0 10px 8px; padding: 6px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; background: rgba(255,255,255,.07); color: #C8CFEA; font-size: 12px; cursor: pointer; text-align: left; }
.kb-kontor:hover { background: rgba(255,255,255,.13); }
.kb-kontor-sayi { font-size: 16px; font-variant-numeric: tabular-nums; }
.kb-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.27); color: #FFFFFF; flex: none; }
.kb-govde { min-width: 0; display: flex; flex-direction: column; height: 100dvh; }
.kb-ust { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 8px; background: var(--ust-zemin); }
.kb-kare { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; border: 0; color: #FFFFFF; }
.kb-ikon44 { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; border: 0; background: transparent; color: var(--yazi-2); position: relative; flex: none; }
.kb-ikon44:hover { background: #EEF2FF; }
.kb-rozet { position: absolute; top: 6px; right: 6px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #FFFFFF; background: var(--tehlike-parlak); border-radius: 9px; }
.kb-sube { display: flex; align-items: center; gap: 6px; min-width: 0; }
.kb-sube select { min-height: 36px; max-width: 220px; padding: 0 4px; font-size: 13px; font-weight: 600; background: transparent; border: 0; }
.kb-etiket { font-size: 12px; font-weight: 600; color: var(--yazi-4); }
.kb-ayrac { width: 1px; height: 16px; background: #CBD5E1; }
.kb-lisans-uyari { display: inline-flex; align-items: center; padding: 4px 10px; font-size: 12px; font-weight: 600; color: #B45309; background: #FEF3C7; border-radius: 10px; }
.kb-serit { height: 32px; display: flex; align-items: flex-end; padding: 0 8px; background: var(--serit); border-bottom: 1px solid var(--serit-cizgi); }
.kb-sekmeler { display: flex; align-items: flex-end; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.kb-sekme { height: 30px; display: flex; align-items: center; gap: 7px; padding: 0 6px 0 11px; border: 0; border-right: 1px solid var(--serit-cizgi); background: transparent; color: #4B5563; font-size: 12.5px; white-space: nowrap; flex: none; }
.kb-sekme:hover { background: #F3F4F6; }
.kb-sekme.aktif { height: 31px; background: #FFFFFF; border: 1px solid var(--serit-cizgi); border-top: 2px solid var(--sekme-vurgu); border-bottom: 0; margin-bottom: -1px; color: #111827; font-weight: 600; }
.kb-sekme-ad { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.kb-sekme-x { width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; color: #6B7280; visibility: hidden; }
.kb-sekme:hover .kb-sekme-x, .kb-sekme.aktif .kb-sekme-x { visibility: visible; }
.kb-sekme-x:hover { background: var(--serit); }
.kb-tum-sekmeler { height: 24px; margin: 0 0 4px 8px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 12px; color: #374151; background: #FFFFFF; border: 1px solid var(--serit-cizgi); border-radius: 12px; flex: none; }
.kb-icerik { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.kb-ray-logo { flex: none; display: block; padding: 16px 18px 4px; border: 0; background: transparent; text-align: left; }
.kb-ray-logo img { width: 168px; max-width: 100%; height: auto; display: block; }
.kb-ustbar { height: 44px; background: var(--ray); display: flex; align-items: center; gap: 6px; padding: 0 10px 0 14px; position: relative; z-index: 40; color: #E3E8F4; }
.kb-ustbar-logo { width: 220px; flex: none; display: flex; align-items: center; border: 0; background: transparent; padding: 0; text-align: left; }
.kb-ustbar-logo img { width: 124px; height: auto; display: block; }
.kb-ustbar-ara { position: relative; width: 300px; height: 28px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 6px; background: var(--ray-uzeri); color: var(--ray-simge); }
.kb-ustbar-ara input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none; color: var(--ray-yazi); font-size: 12.5px; }
.kb-ustbar-ara input::placeholder { color: var(--ray-simge); }
.kb-ustbar-sube { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #AAB6D6; }
.kb-ustbar-sube select { height: 30px; max-width: 200px; padding: 0 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #E3E8F4; font-size: 12.5px; }
.kb-ustbar-sube select option { color: #0F172A; }
.kb-ustbar-grup { position: relative; }
.kb-ustbar-dd { height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: #E3E8F4; font-size: 12.5px; white-space: nowrap; }
.kb-ustbar-dd:hover, .kb-ustbar-dd.acik { border-color: #93C5FD; background: rgba(255,255,255,.14); }
.kb-ustbar-ikon { width: 32px; height: 32px; display: grid; place-items: center; position: relative; border: 0; border-radius: 6px; background: transparent; color: #E3E8F4; flex: none; }
.kb-ustbar-ikon:hover { background: rgba(255,255,255,.12); }
.kb-ustbar-ikon .kb-rozet { top: -2px; right: -3px; }
.kb-ustbar-cikis { color: #FCA5A5; }
.kb-ustbar-ayrac { width: 1px; height: 20px; background: rgba(255,255,255,.2); margin: 0 4px; flex: none; }
.kb-ustbar-kullanici { font-size: 12.5px; color: #E3E8F4; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-ustbar-uyari { max-width: 280px; font-size: 12px; color: #FDE68A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-acilir { position: absolute; top: calc(100% + 6px); left: 0; z-index: 80; min-width: 270px; padding: 6px; background: #FFFFFF; border: 1px solid #D5DDE8; border-radius: 8px; box-shadow: 0 10px 28px rgba(15,23,42,.18); color: #0F172A; font-size: 12.5px; }
.kb-acilir-sag { left: auto; right: 0; }
.kb-ara-sonuc { top: calc(100% + 4px); min-width: 100%; }
.kb-acilir-baslik { padding: 6px 10px 4px; font-size: 10.5px; letter-spacing: .08em; color: #64748B; }
.kb-acilir-oge { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: #0F172A; text-align: left; text-decoration: none; font-size: 12.5px; }
.kb-acilir-oge:hover, .kb-acilir-oge:focus-visible { background: #EEF4FE; }
.kb-acilir-oge small { display: block; color: #64748B; font-size: 11px; }
.kb-ara-sonuc .kb-acilir-oge { justify-content: space-between; }
.kb-acilir-simge { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; flex: none; }
.kb-acilir-ayrac { height: 1px; background: #E2E8F0; margin: 5px 4px; }
.kb-acilir-bos { padding: 8px 10px; color: #64748B; }
.kb-ustbar-yonerge { position: absolute; top: calc(100% + 6px); right: 12px; z-index: 90; width: 340px; padding: 12px 14px; background: #FFFFFF; border: 1px solid #D5DDE8; border-radius: 8px; box-shadow: 0 10px 28px rgba(15,23,42,.18); color: #0F172A; font-size: 12.5px; }
.kb-ustbar-yonerge p { margin: 6px 0; color: #475569; }
@media (min-width: 901px) {
  .kb { height: 100dvh; min-height: 0; grid-template-rows: 44px minmax(0, 1fr); }
  .kb-ustbar { grid-column: 1 / -1; grid-row: 1; }
  .kb-ray-yuva { grid-row: 2; height: auto; min-height: 0; padding: 0 0 10px 0; position: static; }
  .kb-govde { grid-row: 2; height: auto; min-height: 0; }
  .kb-ust { display: none; }
  .kb-ray-logo, .kb-ray-ara { display: none; }
  .kb-ray { border-radius: 0 0 12px 0; }
}

.mr-bolum { --mr-renk: #7D88BF; }
.kb-bolum.mr-baslik { width: calc(100% - 20px); margin: 10px 10px 3px 10px; padding: 7px 4px 3px; border: 0; border-top: 1px solid color-mix(in srgb, var(--mr-renk) 38%, transparent); border-radius: 0; background: transparent; font: inherit; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mr-renk); display: flex; align-items: center; gap: 8px; justify-content: flex-start; text-align: left; cursor: pointer; }
.kb-bolum.mr-baslik:hover { background: rgba(255,255,255,.04); }
.mr-baslik .mr-nokta { position: relative; flex: none; width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--mr-renk) 25%, transparent); }
.mr-baslik .mr-nokta i { width: 7px; height: 7px; border-radius: 50%; background: var(--mr-renk); }
.mr-baslik .mr-ad { flex: 1 1 auto; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-bolum.mr-baslik .mr-sayi { color: var(--mr-renk); opacity: .75; font-weight: 600; }
.mr-baslik .mr-ok { flex: none; transform: rotate(0deg); transition: transform .15s; }
.mr-baslik .mr-ok.acik { transform: rotate(90deg); }
.kb-ekran.mr-ekran { margin-left: 10px; width: calc(100% - 20px); }
.kb-ustbar-yazili { height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid rgba(255,255,255,.28); border-radius: 6px; background: transparent; color: #E3E8F4; font-size: 12px; flex: none; white-space: nowrap; }
.kb-ustbar-yazili:hover { background: rgba(255,255,255,.12); }
.kb-ustbar-yukle { background: #F26B1D; border-color: #F26B1D; color: #FFFFFF; }
.kb-ustbar-yukle:hover { background: #D95A10; }
.kb-ustbar-yazili.kb-ustbar-cikis { color: #FCA5A5; border-color: rgba(252,165,165,.45); }
.sk-rozet-ust { margin-left: 8px; flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #FFD2B8; background: rgba(242,107,29,.16); border: 1px solid rgba(242,107,29,.55); padding: 1px 6px; border-radius: 9px; }
.ws3-rozet { margin-left: 6px; font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 0 6px; border-radius: 8px; background: rgba(255,255,255,.12); color: #C7D2FE; }