/* Kurumsal görünüm: lacivert kabuk, düz yüzeyler, gölgesiz, durum renkleri yalnız anlam taşır. */
:root {
  --zemin: #eef1f5; --panel: #ffffff; --panel2: #f6f8fa; --cizgi: #d5dbe3; --cizgi2: #e6eaef; --yazi: #1a2433; --soluk: #566274;
  --kabuk: #0f2743; --kabuk2: #16335a; --kabuk-yazi: #c4d0df; --kabuk-soluk: #8a9cb3; --serit: #0a1c31;
  --vurgu: #1c4a84; --vurgu-yazi: #ffffff; --tablo-baslik: #eaeef3;
  --iyi: #16683a; --iyi-z: #e3f1e8; --mavi: #1c4a84; --mavi-z: #e2ebf6;
  --sari: #8a5a0b; --sari-z: #f8efdd; --kirmizi: #a32424; --kirmizi-z: #f8e4e3; --gri: #566274; --gri-z: #e9edf1;
  --mor: #5a3a96; --mor-z: #ece6f6;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    color-scheme: dark;
    --zemin: #0d131b; --panel: #151d28; --panel2: #1a2431; --cizgi: #2b3847; --cizgi2: #232f3d; --yazi: #e4e9f0; --soluk: #9aa8b9;
    --kabuk: #0a1420; --kabuk2: #14243a; --serit: #070e17;
    --vurgu: #8fb3e6; --vurgu-yazi: #0d131b; --tablo-baslik: #1d2835;
    --iyi: #63c98f; --iyi-z: #13301f; --mavi: #8fb3e6; --mavi-z: #18293f;
    --sari: #e3b565; --sari-z: #36280f; --kirmizi: #f09090; --kirmizi-z: #401b1b; --gri: #9aa8b9; --gri-z: #222d3a;
    --mor: #b9a1ec; --mor-z: #2a2145;
  }
}
:root[data-tema="koyu"] {
  color-scheme: dark;
  --zemin: #0d131b; --panel: #151d28; --panel2: #1a2431; --cizgi: #2b3847; --cizgi2: #232f3d; --yazi: #e4e9f0; --soluk: #9aa8b9;
  --kabuk: #0a1420; --kabuk2: #14243a; --serit: #070e17;
  --vurgu: #8fb3e6; --vurgu-yazi: #0d131b; --tablo-baslik: #1d2835;
  --iyi: #63c98f; --iyi-z: #13301f; --mavi: #8fb3e6; --mavi-z: #18293f;
  --sari: #e3b565; --sari-z: #36280f; --kirmizi: #f09090; --kirmizi-z: #401b1b; --gri: #9aa8b9; --gri-z: #222d3a;
  --mor: #b9a1ec; --mor-z: #2a2145;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { display: flex; background: var(--zemin); color: var(--yazi); font: 14px/1.45 "Segoe UI", Tahoma, Arial, sans-serif; font-variant-numeric: tabular-nums; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: 0; }
h1 { font-size: 20px; } h2 { font-size: 14.5px; } h3 { font-size: 13px; }
a { color: inherit; }
[hidden] { display: none !important; }

/* Yan menü */
.yan { width: 244px; flex: none; background: var(--kabuk); color: var(--kabuk-yazi); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marka { display: flex; gap: 10px; align-items: center; padding: 16px 16px 14px; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.marka b { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.marka small { display: block; color: var(--kabuk-soluk); font-size: 11.5px; margin-top: 2px; }
.amblem { width: 32px; height: 32px; flex: none; }
#menu { padding: 8px 0 12px; }
.menu-grup { padding: 12px 16px 4px; color: var(--kabuk-soluk); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
nav a { display: flex; align-items: center; gap: 10px; padding: 8px 16px; text-decoration: none; border-left: 3px solid transparent; font-size: 13.5px; }
nav a svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
nav a span.ad { flex: 1; }
nav a:hover { background: var(--kabuk2); color: #fff; }
nav a.etkin { background: var(--kabuk2); border-left-color: #fff; color: #fff; font-weight: 600; }
nav .sayac { background: #a32424; color: #fff; border-radius: 3px; padding: 0 6px; font-size: 11px; font-weight: 700; }
nav .sayac.mavi { background: #3b6aa8; }
.yan-alt { margin-top: auto; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid rgba(255, 255, 255, .1); color: var(--kabuk-soluk); font-size: 11px; }
.rozet-test { color: #e3b565; border: 1px solid #6b5426; border-radius: 3px; padding: 2px 6px; }

/* Üst alan */
.ana { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kurum-serit { display: flex; justify-content: space-between; gap: 12px; padding: 4px 24px; background: var(--serit); color: var(--kabuk-yazi); font-size: 11.5px; }
.ust { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 24px; background: var(--panel); border-bottom: 1px solid var(--cizgi); position: sticky; top: 0; z-index: 5; }
.yol-izi { color: var(--soluk); font-size: 12px; }
.sayfa-aciklama { margin: 1px 0 0; color: var(--soluk); font-size: 12.5px; }
.ust-sag { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.saat { color: var(--soluk); font-size: 12px; text-align: right; line-height: 1.3; }
.saat b { display: block; color: var(--yazi); font-size: 13.5px; font-weight: 600; }
.kule-kap, .tesis-sec { display: flex; flex-direction: column; gap: 2px; color: var(--soluk); font-size: 11px; }
.kule { display: flex; gap: 4px; padding: 5px 7px; border-radius: 3px; background: #0b1420; width: max-content; }
.kule i { width: 11px; height: 11px; border-radius: 50%; background: #2c3644; }
.kule i.y-k { background: #e53b3b; animation: nabiz 1s infinite; }
.kule i.y-s { background: #e0a93c; }
.kule i.y-y { background: #2fb364; }
@keyframes nabiz { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .kule i.y-k, .akis-dugum.nabiz rect { animation: none; } }
.oturum { display: flex; align-items: center; gap: 10px; padding-left: 14px; border-left: 1px solid var(--cizgi); }
.oturum div { line-height: 1.25; }
.oturum b { display: block; font-size: 13px; font-weight: 600; }
.oturum span { color: var(--soluk); font-size: 11.5px; }
main { padding: 18px 24px 40px; display: flex; flex-direction: column; gap: 14px; }

/* Form */
select, input, textarea { font: inherit; color: inherit; background: var(--panel); border: 1px solid var(--cizgi); border-radius: 3px; padding: 6px 8px; }
input:disabled, select:disabled { background: var(--panel2); color: var(--soluk); }
textarea { width: 100%; min-height: 70px; }
label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 500; color: var(--soluk); }
label > input, label > select, label > textarea { color: var(--yazi); font-size: 13.5px; font-weight: 400; }
button { font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--cizgi); background: var(--panel); color: var(--yazi); border-radius: 3px; padding: 6px 12px; }
button:hover:not(:disabled) { border-color: var(--soluk); background: var(--panel2); }
button.ana-btn { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-yazi); }
button.ana-btn:hover:not(:disabled) { background: var(--vurgu); opacity: .9; }
button.tehlike { background: var(--kirmizi); border-color: var(--kirmizi); color: #fff; }
button.kucuk { padding: 3px 8px; font-size: 12px; }
button:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 1px; }

/* Panel */
.panel { background: var(--panel); border: 1px solid var(--cizgi); border-radius: 4px; padding: 14px 16px; }
.panel > h2 { margin: -14px -16px 12px; padding: 10px 16px; background: var(--panel2); border-bottom: 1px solid var(--cizgi); border-radius: 4px 4px 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.ipucu { color: var(--soluk); font-size: 12px; font-weight: 400; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.kpi { background: var(--panel); border: 1px solid var(--cizgi); border-left: 4px solid var(--renk, var(--cizgi)); border-radius: 3px; padding: 10px 12px; display: flex; flex-direction: column-reverse; gap: 2px; }
.kpi b { font-size: 24px; line-height: 1.1; font-weight: 600; }
.kpi span { color: var(--soluk); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.iki-kolon { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; }

/* Tablo */
.tablo-kap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-size: 11px; font-weight: 600; color: var(--soluk); text-transform: uppercase; letter-spacing: .03em; padding: 7px 8px; background: var(--tablo-baslik); border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
td { padding: 7px 8px; border-bottom: 1px solid var(--cizgi2); vertical-align: top; }
tbody tr:nth-child(even) td { background: var(--panel2); }
tr:last-child td { border-bottom: 0; }
tr.tikla { cursor: pointer; } tr.tikla:hover td { background: var(--mavi-z); }
tr.secili td { background: var(--mavi-z); }
tr.pasif-satir td { opacity: .55; }
.sag { text-align: right; }
.etk { display: inline-block; border-radius: 3px; padding: 1px 7px; font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--r); background: var(--z); border: 1px solid color-mix(in srgb, var(--r) 28%, transparent); }
.r-iyi { --r: var(--iyi); --z: var(--iyi-z); } .r-mavi { --r: var(--mavi); --z: var(--mavi-z); }
.r-sari { --r: var(--sari); --z: var(--sari-z); } .r-kirmizi { --r: var(--kirmizi); --z: var(--kirmizi-z); }
.r-gri { --r: var(--gri); --z: var(--gri-z); } .r-mor { --r: var(--mor); --z: var(--mor-z); }
.oran { display: flex; height: 7px; border-radius: 2px; overflow: hidden; background: var(--gri-z); min-width: 110px; margin-top: 5px; }
.oran i { background: var(--r); display: block; }
.acil { background: var(--kirmizi); color: #fff; padding: 8px 24px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.acil button { background: #fff; color: #8e1d1d; border: 0; }

/* Depo */
.depo-ust { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding: 10px 14px; }
.lejant, .cihazlar { display: flex; flex-wrap: wrap; gap: 6px; }
.depo-blok { display: flex; flex-direction: column; gap: 10px; }
.depo-baslik { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 2px; border-bottom: 2px solid var(--vurgu); }
.raf-baslik { display: flex; justify-content: space-between; margin-bottom: 8px; }
.yuvalar { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 5px; }
.bolmeler { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.yuva { all: unset; box-sizing: border-box; cursor: pointer; border: 1px solid var(--r, var(--cizgi)); border-left-width: 4px; border-radius: 2px; padding: 5px 7px; background: var(--z, transparent); min-height: 66px; display: flex; flex-direction: column; font-size: 11.5px; line-height: 1.3; }
.yuva:hover { filter: brightness(.97); }
.yuva:focus-visible { outline: 2px solid var(--vurgu); }
.yuva b { font-size: 12px; }
.yuva .dr { color: var(--r); font-weight: 600; }
.yuva .sr { color: var(--soluk); margin-top: auto; }
.yuva.bos { border-style: dashed; cursor: default; color: var(--soluk); --r: var(--cizgi); }
.bolme { border: 1px solid var(--cizgi); border-radius: 3px; padding: 8px; }
.bolme-baslik { display: flex; justify-content: space-between; margin-bottom: 6px; }
.fis { all: unset; cursor: pointer; display: inline-block; margin: 2px; padding: 1px 6px; border-radius: 2px; font-size: 11px; color: var(--r); background: var(--z); }
.fis:focus-visible { outline: 2px solid var(--vurgu); }

/* Form düzeni */
.form-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.sekmeler { display: flex; gap: 0; flex-wrap: wrap; border-bottom: 2px solid var(--cizgi); }
.sekmeler button { border: 0; background: none; border-radius: 0; color: var(--soluk); padding: 7px 14px; margin-bottom: -2px; border-bottom: 2px solid transparent; }
.sekmeler button:hover:not(:disabled) { background: none; color: var(--yazi); }
.sekmeler button.etkin { color: var(--vurgu); border-bottom-color: var(--vurgu); }
.soru .sekmeler { border: 0; gap: 4px; }
.soru .sekmeler button { border: 1px solid var(--cizgi); border-radius: 3px; margin: 0; color: var(--yazi); }
.soru .sekmeler button.etkin { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-yazi); }
.secimler { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 3px 10px; max-height: 280px; overflow: auto; border: 1px solid var(--cizgi); border-radius: 3px; padding: 8px; margin: 10px 0; }
.secimler label { flex-direction: row; align-items: center; gap: 6px; color: var(--yazi); font-size: 13px; font-weight: 400; }
.secimler.kisa { max-height: 150px; margin-top: 6px; }
.bolge-grup { margin: 6px 0; }
.bolge-grup > .satir-etiket { margin-top: 6px; }
.eylemler { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.filtre { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 12px; }
.sayim-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 12px; }
.satir-etiket { flex-direction: row; align-items: center; gap: 6px; color: var(--yazi); font-size: 13px; font-weight: 400; }
details { margin-top: 8px; } summary { cursor: pointer; font-weight: 600; font-size: 13px; }

/* Pencere ve bildirim */
.modal { position: fixed; inset: 0; background: rgba(8, 16, 28, .6); display: flex; justify-content: center; align-items: flex-start; padding: 40px 16px; overflow: auto; z-index: 20; }
.modal-kutu { background: var(--panel); border: 1px solid var(--cizgi); border-radius: 4px; width: min(700px, 100%); padding: 18px 20px; }
.modal-ust { display: flex; justify-content: space-between; align-items: start; gap: 10px; margin: -18px -20px 14px; padding: 12px 20px; background: var(--panel2); border-bottom: 1px solid var(--cizgi); }
.bilgi { display: grid; grid-template-columns: 130px 1fr; gap: 4px 12px; margin-bottom: 12px; }
.bilgi dt { color: var(--soluk); } .bilgi dd { margin: 0; }
.buyuk-sure { font-size: 22px; font-weight: 600; }
.bildirim { position: fixed; right: 20px; bottom: 20px; z-index: 30; max-width: 400px; padding: 10px 14px; border-radius: 3px; color: #fff; background: #16683a; }
.bildirim.hata { background: #a32424; }
.bos-mesaj { color: var(--soluk); padding: 10px 0; }

/* Giriş */
.giris { position: fixed; inset: 0; z-index: 40; background: var(--kabuk); display: grid; place-items: center; padding: 16px; overflow: auto; }
.giris-kart { width: min(400px, 100%); }
.giris-baslik { display: flex; align-items: center; gap: 12px; color: #fff; margin-bottom: 18px; }
.giris-baslik .amblem { width: 44px; height: 44px; }
.giris-baslik p { margin: 2px 0 0; color: var(--kabuk-yazi); font-size: 13px; }
.giris-kutu { background: var(--panel); color: var(--yazi); border-radius: 4px; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.giris-hata { margin: 0; min-height: 18px; color: var(--kirmizi); font-size: 13px; }
.giris-uyari { margin: 12px 2px 0; color: var(--kabuk-yazi); font-size: 12px; }

/* Sabitler */
.personel-durum { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--cizgi); border-left: 4px solid var(--vurgu); border-radius: 3px; background: var(--panel2); }
.set-liste { list-style: none; margin: 8px 0; padding: 0; }
.set-liste li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 0; }
.set-liste li.tamam { color: var(--iyi); font-weight: 600; }
.sabit-grup { margin: 14px 0 6px; }
.sabit-deger { width: 110px; }
.soru { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.soru p { margin: 4px 0 0; }
.plan-tablo input, .plan-tablo select { max-width: 160px; }
.sec-izgara { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: 14px; align-items: start; }
.sec-izgara.uclu { grid-template-columns: minmax(200px, 250px) minmax(0, 1fr) minmax(0, 1fr); }
#sec-ara { width: 100%; margin-bottom: 10px; }
.sec-bolum h3 { margin: 10px 0 4px; color: var(--soluk); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.sec-liste { display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left; font-weight: 500; border: 0; background: none; padding: 6px 8px; border-left: 3px solid transparent; border-radius: 0; }
.sec-liste.etkin { background: var(--mavi-z); border-left-color: var(--vurgu); color: var(--mavi); font-weight: 600; }
.kademe { display: inline-block; width: 7px; height: 7px; margin-right: 6px; background: var(--vurgu); vertical-align: 1px; }
.sec-ad { width: 100%; min-width: 120px; }
.siralama { white-space: nowrap; }
.iki-kolon.esit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.raf-kart { border: 1px solid var(--cizgi); border-radius: 3px; padding: 10px; margin-bottom: 10px; }
.yan-yana { display: flex; align-items: center; gap: 8px; }
.fisler { display: flex; flex-wrap: wrap; gap: 2px; }
.durum-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }

/* İş akışı */
.akis-alan { display: flex; flex-direction: column; gap: 14px; }
.akis-kap { overflow-x: auto; }
.akis-kap svg { display: block; width: 100%; min-width: 760px; }
.akis-dugum rect { fill: var(--z); stroke: var(--r); stroke-width: 1.3; }
.akis-dugum[data-eylem] { cursor: pointer; }
.akis-dugum[data-eylem]:hover rect { stroke-width: 2.4; }
.akis-dugum:focus-visible { outline: none; }
.akis-dugum:focus-visible rect { stroke-width: 3; }
.akis-dugum text { fill: var(--yazi); }
.akis-dugum .ad { font-size: 13.5px; font-weight: 600; fill: var(--r); }
.akis-dugum .sayi { font-size: 24px; font-weight: 600; }
.akis-dugum .alt { font-size: 11.5px; fill: var(--soluk); }
.akis-dugum.nabiz rect { animation: nabiz 1.2s infinite; }
.akis-hat { fill: none; stroke: var(--soluk); stroke-width: 1.3; }
.akis-ok { fill: var(--soluk); }
.akis-etk { font-size: 12px; fill: var(--soluk); }
.surec { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.surec-adim { border: 1px solid var(--cizgi); border-top: 3px solid var(--vurgu); border-radius: 3px; padding: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; background: var(--panel2); }
.surec-adim.planli { border-top-style: dashed; border-top-color: var(--gri); }
.surec-adim p { margin: 0; color: var(--soluk); font-size: 12.5px; }
.surec-no { min-width: 22px; width: auto; padding: 0 6px; height: 22px; border-radius: 2px; background: var(--vurgu); color: var(--vurgu-yazi); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.planli .surec-no { background: var(--gri); color: var(--panel); }
.yol { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px; }
.yol-faz { display: flex; flex-direction: column; gap: 3px; text-decoration: none; padding: 9px 10px; border-radius: 3px; background: var(--z); border-bottom: 3px solid var(--r); font-size: 12.5px; }
.yol-faz span { color: var(--r); font-weight: 700; }
.kapi { margin: 8px 0 0; font-weight: 600; color: var(--sari); }

/* Renkli kurumsal katman: her menü grubunun rengi başlık, sekme, panel ve düğmelere yansır. */
:root { --grup: #164a8a; --grup-koyu: #0f3768; --grup-z: #e3edf9; --grup-yazi: #123f77; --girdi: #f4f8fe; --girdi-kenar: #7f98b8; --kpi-yazi: #ffffff; --bant-yazi: #ffffff; --bant-soluk: rgba(255, 255, 255, .86); --bant-cizgi: rgba(255, 255, 255, .5); --bant-dolgu: rgba(255, 255, 255, .15); }
:root[data-grup="rapor"] { --grup: #17505f; --grup-koyu: #103c48; --grup-z: #e4eff1; --grup-yazi: #134653; }
:root[data-grup="yonetim"] { --grup: #2e4266; --grup-koyu: #22324e; --grup-z: #e8ecf3; --grup-yazi: #293b5c; }
:root[data-grup="destek"] { --grup: #3c4b5e; --grup-koyu: #2d3948; --grup-z: #eaedf1; --grup-yazi: #344254; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) { --grup-z: #1b2a40; --grup-yazi: #a9c8f2; --girdi: #101823; --girdi-kenar: #5a7190; --kpi-yazi: #0d131b; }
  :root:not([data-tema="acik"])[data-grup="rapor"] { --grup-z: #16292e; --grup-yazi: #a8d3da; }
  :root:not([data-tema="acik"])[data-grup="yonetim"] { --grup-z: #1b2433; --grup-yazi: #b7c6de; }
  :root:not([data-tema="acik"])[data-grup="destek"] { --grup-z: #1e252e; --grup-yazi: #c0ccda; }
}
:root[data-tema="koyu"] { --grup-z: #1b2a40; --grup-yazi: #a9c8f2; --girdi: #101823; --girdi-kenar: #5a7190; --kpi-yazi: #0d131b; }
:root[data-tema="koyu"][data-grup="rapor"] { --grup-z: #16292e; --grup-yazi: #a8d3da; }
:root[data-tema="koyu"][data-grup="yonetim"] { --grup-z: #1b2433; --grup-yazi: #b7c6de; }
:root[data-tema="koyu"][data-grup="destek"] { --grup-z: #1e252e; --grup-yazi: #c0ccda; }

/* Başlık bandı */
.ust { background: var(--grup); border-bottom: 4px solid var(--grup-koyu); padding: 14px 24px; color: var(--bant-yazi); }
.ust h1 { font-size: 23px; font-weight: 700; color: var(--bant-yazi); }
.yol-izi { color: var(--bant-soluk); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
.sayfa-aciklama { color: var(--bant-soluk); font-size: 13px; }
.saat, .saat b { color: var(--bant-yazi); }
.kule-kap, .tesis-sec { color: var(--bant-soluk); font-weight: 600; }
.ust select { background: #fff; color: #17233a; border-color: transparent; font-weight: 600; }
.ust button { background: var(--bant-dolgu); border-color: var(--bant-cizgi); color: var(--bant-yazi); }
.ust button:hover:not(:disabled) { background: var(--bant-dolgu); border-color: var(--bant-yazi); }
.oturum { border-left-color: var(--bant-cizgi); }
.oturum b { color: var(--bant-yazi); }
.oturum span { color: var(--bant-soluk); }

/* Yan menü */
.menu-grup { display: flex; align-items: center; gap: 7px; color: #d6e0ee; }
.menu-grup::before { content: ''; width: 9px; height: 9px; border-radius: 2px; background: var(--renk, #5b93dc); }
.menu-grup.g-rapor { --renk: #36bdb7; } .menu-grup.g-yonetim { --renk: #e8836f; } .menu-grup.g-destek { --renk: #ee9a56; }
nav a.etkin { background: var(--grup); border-left-color: #ffd166; color: var(--bant-yazi); }

/* Başlıklar ve paneller */
.panel { border-color: var(--cizgi); border-top: 3px solid var(--grup); }
.panel > h2 { background: var(--grup); color: var(--bant-yazi); font-size: 15px; font-weight: 700; border-bottom: 0; margin-top: -17px; padding: 11px 16px; border-radius: 3px 3px 0 0; }
.panel > h2 .ipucu { color: var(--bant-soluk); }
.panel > h2 .etk { background: #fff; }
.panel > h2 button { background: #fff; color: var(--grup); border-color: #fff; }
.panel > h2 button.ana-btn { background: #ffd166; border-color: #ffd166; color: #33260a; }
.depo-baslik { background: var(--grup-z); border: 1px solid var(--cizgi); border-left: 5px solid var(--grup); border-bottom: 1px solid var(--cizgi); border-radius: 3px; padding: 8px 12px; }
.depo-baslik h2 { color: var(--grup-yazi); font-size: 16px; font-weight: 700; }
.raf-baslik h3, .sabit-grup, .sec-bolum h3 { color: var(--grup-yazi); font-size: 13.5px; font-weight: 700; text-transform: none; letter-spacing: 0; padding-left: 8px; border-left: 3px solid var(--grup); }
h3 { font-weight: 700; }

/* Veri giriş alanları */
label { color: var(--yazi); font-size: 12.5px; font-weight: 600; position: relative; }
select, input, textarea { background: var(--girdi); border: 1.5px solid var(--girdi-kenar); border-radius: 4px; padding: 8px 10px; min-height: 37px; }
input[type="checkbox"], input[type="radio"] { min-height: 0; width: 16px; height: 16px; accent-color: var(--grup); }
input::placeholder { color: var(--soluk); opacity: 1; }
select:hover, input:hover, textarea:hover { border-color: var(--grup); }
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--grup); box-shadow: 0 0 0 3px var(--grup-z); background: var(--panel); }
input:disabled, select:disabled { background: var(--gri-z); border-color: var(--cizgi); }
label:has(> [required])::after { content: 'Zorunlu'; position: absolute; top: 1px; right: 0; color: var(--kirmizi); font-size: 10.5px; font-weight: 700; }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--kirmizi); }
.form-bolum { border: 1px solid var(--cizgi); border-left: 5px solid var(--grup); border-radius: 4px; margin-bottom: 12px; background: var(--panel); }
.form-bolum > h3 { display: flex; align-items: center; gap: 9px; margin: 0; padding: 8px 12px; background: var(--grup-z); color: var(--grup-yazi); font-size: 14px; font-weight: 700; border-bottom: 1px solid var(--cizgi); }
.form-bolum > h3 b { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: var(--grup); color: var(--bant-yazi); font-size: 12.5px; }
.form-bolum > h3 small { margin-left: auto; color: var(--soluk); font-size: 12px; font-weight: 400; }
.form-bolum > .form-izgara { padding: 12px; }
details { border: 1px solid var(--cizgi); border-radius: 4px; margin-top: 10px; }
details[open] { padding-bottom: 10px; }
details > :not(summary) { margin-left: 10px; margin-right: 10px; }
summary { padding: 9px 12px; background: var(--sari-z); color: var(--sari); font-weight: 700; border-radius: 3px; }
.sec-izgara details, .panel > details { border-color: var(--cizgi); }
.personel-durum { border-left-color: var(--grup); background: var(--grup-z); }

/* Düğme ve sekmeler */
button { padding: 8px 14px; }
button.ana-btn, button.ana-btn:hover:not(:disabled) { background: var(--grup); border-color: var(--grup-koyu); color: var(--bant-yazi); font-weight: 700; }
button.ana-btn:hover:not(:disabled) { background: var(--grup-koyu); opacity: 1; }
.sekmeler { gap: 4px; border-bottom: 3px solid var(--grup); }
.sekmeler button { background: var(--grup-z); color: var(--grup-yazi); border-radius: 4px 4px 0 0; margin-bottom: 0; border-bottom: 0; padding: 9px 16px; font-weight: 700; }
.sekmeler button:hover:not(:disabled) { background: var(--grup-z); color: var(--grup-yazi); filter: brightness(.96); }
.sekmeler button.etkin { background: var(--grup); color: var(--bant-yazi); }
.soru .sekmeler { border: 0; }

/* Göstergeler ve tablolar */
.kpi { background: var(--renk, var(--grup)); border: 0; border-radius: 4px; padding: 12px 14px; color: var(--kpi-yazi); }
.kpi b { font-size: 28px; font-weight: 700; }
.kpi span { color: var(--kpi-yazi); opacity: .9; }
th { background: var(--grup-z); color: var(--grup-yazi); font-size: 11.5px; font-weight: 700; border-bottom: 2px solid var(--grup); }
tr.tikla:hover td { background: var(--grup-z); }
.modal-ust { background: var(--grup); color: var(--bant-yazi); border-bottom: 0; }
.modal-ust h2 { color: var(--bant-yazi); }
.modal-ust .ipucu { color: var(--bant-soluk); }
.modal-ust button { background: var(--bant-dolgu); border-color: var(--bant-cizgi); color: var(--bant-yazi); }
.surec-adim { border-top-color: var(--grup); }
.surec-no { background: var(--grup); color: var(--bant-yazi); }
.sec-liste.etkin { background: var(--grup-z); border-left-color: var(--grup); color: var(--grup-yazi); }
.kademe { background: var(--grup); }
tr.secili td { background: var(--grup-z); }

/* Başlık bandı düzeni ve bayrak */
.ust { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: 18px; }
.ust-sag { justify-content: flex-end; flex-wrap: nowrap; }
.bayrak { display: flex; width: 270px; align-self: stretch; margin: -14px 0 -18px; overflow: hidden; opacity: .82; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%, #000 66%, transparent); mask-image: linear-gradient(90deg, transparent, #000 34%, #000 66%, transparent); }
.bayrak i { display: block; flex: 1 1 0; height: calc(100% + 12px); margin-top: -6px; background-size: 4800% 100%; background-repeat: no-repeat; animation: dalga 5.6s ease-in-out infinite alternate; will-change: transform; }
/* Geniş ekranda bayrak bandın tam ortasındadır; eriyen kenarları yazıların altında kalır. */
@media (min-width: 2000px) {
  .ust { grid-template-columns: minmax(0, 1fr) max-content; }
  .bayrak { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); margin: 0; }
  .ust-sol, .ust-sag { position: relative; z-index: 1; }
}
@keyframes dalga {
  from { transform: translateY(calc(var(--g) * -1)); filter: brightness(.97); }
  to { transform: translateY(var(--g)); filter: brightness(1.05); }
}
.tesis-sec select { width: 150px; max-width: 150px; }
@media (max-width: 1499px) {
  .ust-sag { gap: 10px; }
  .tesis-sec select { width: 125px; }
  .bayrak { width: 170px; }
}
@media (max-width: 1399px) { .sayfa-aciklama { display: none; } }
@media (max-width: 1299px) { .saat { display: none; } }
@media (prefers-reduced-motion: reduce) { .bayrak i { animation: none; } }
#tema-dugme { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; }
#tema-dugme svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Ciddi görünüm: durum renkleri yalnız anlam taşır, gösterge ve paneller sakindir. */
.kpi { background: var(--panel); border: 1px solid var(--cizgi); border-top: 3px solid var(--renk, var(--grup)); color: var(--yazi); }
.kpi b { color: var(--renk, var(--yazi)); font-size: 26px; }
.kpi span { color: var(--soluk); opacity: 1; }
.panel { border-top: 1px solid var(--cizgi); }
.panel > h2 { background: var(--grup-z); color: var(--grup-yazi); border-bottom: 2px solid var(--grup); margin-top: -14px; }
.panel > h2 .ipucu { color: var(--soluk); }
.panel > h2 .etk { background: var(--z); }
.panel > h2 button { background: var(--panel); color: var(--grup-yazi); border-color: var(--cizgi); }
.panel > h2 button.ana-btn { background: var(--grup); border-color: var(--grup); color: #fff; }
summary { background: var(--grup-z); color: var(--grup-yazi); }
.ust { border-bottom: 3px solid var(--grup-koyu); }

/* Menü: kutulu ikon, güçlü yazı */
#menu { padding: 6px 8px 12px; }
.menu-grup { padding: 14px 8px 5px; color: #9fb2c9; font-size: 11.5px; letter-spacing: .07em; }
.menu-grup::before { display: none; }
nav a { gap: 11px; padding: 6px 9px; margin: 2px 0; border-left: 0; border-radius: 6px; color: #e1e8f1; font-size: 14px; font-weight: 600; }
nav a svg { box-sizing: content-box; width: 18px; height: 18px; padding: 6px; border-radius: 6px; background: rgba(255, 255, 255, .1); opacity: 1; stroke-width: 1.8; }
nav a:hover { background: rgba(255, 255, 255, .1); }
nav a.etkin { background: #eaf0f8; border-left: 0; color: #12325c; font-weight: 700; }
nav a.etkin svg { background: var(--grup); color: #fff; }

/* Proje yol haritası */
.yol-ust { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.yol-ust h2 { font-size: 16px; color: var(--grup-yazi); }
.yol-ust p { margin: 3px 0 0; }
.olcek { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 12px; background: var(--grup-z); border: 1px solid var(--cizgi); border-radius: 4px; }
.olcek input { width: 104px; font-size: 16px; font-weight: 700; }
.olcek-uyari { margin: 0 0 8px; color: var(--kirmizi); font-size: 13px; font-weight: 600; min-height: 0; }
.olcek-uyari:empty { display: none; }
.gantt { margin: 14px 0; border: 1px solid var(--cizgi); border-radius: 4px; overflow: hidden; }
.gantt-satir { display: grid; grid-template-columns: 180px minmax(120px, 1fr) 170px; align-items: center; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--cizgi2); cursor: pointer; font-size: 13px; }
.gantt-satir:last-child { border-bottom: 0; }
.gantt-satir:hover { background: var(--grup-z); }
.gantt-ad { font-weight: 600; }
.gantt-yol { position: relative; height: 14px; background: var(--gri-z); border-radius: 2px; }
.gantt-yol i { position: absolute; top: 0; bottom: 0; background: var(--r); border-radius: 2px; min-width: 3px; }
.gantt-sure { color: var(--soluk); font-size: 12px; text-align: right; }
.gantt-sure b { color: var(--yazi); }
.faz-kart { border: 1px solid var(--cizgi); border-left: 4px solid var(--grup); border-radius: 4px; padding: 10px 12px; margin-top: 10px; }
.faz-kart > h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 14px; color: var(--grup-yazi); }
.faz-kart > h3 .ipucu { margin-left: auto; }
.faz-kart p { margin: 6px 0 0; }

/* İş akışı haritası */
.harita { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(106px, 1fr); gap: 13px; align-items: start; overflow-x: auto; padding: 12px 10px 34px; }
.harita-sutun { position: relative; display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0; border: 0; background: none; border-radius: 4px; text-align: left; font-weight: 400; transition: transform .16s ease; transform-origin: top center; }
.harita-sutun:hover:not(:disabled) { background: none; transform: translateY(-1px); }
.harita-sutun:not(:last-child)::after { content: '→'; position: absolute; top: 15px; right: -12px; color: var(--soluk); font-size: 13px; font-weight: 700; }
.harita-baslik { display: flex; align-items: center; min-height: 50px; padding: 8px 9px; border-radius: 4px; background: var(--grup); color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.harita-adim { position: relative; display: block; margin-left: 10px; padding: 5px 7px; border: 1px solid var(--cizgi); border-radius: 3px; background: var(--panel2); color: var(--yazi); font-size: 11.5px; line-height: 1.25; }
.harita-adim::before { content: ''; position: absolute; left: -7px; top: -7px; bottom: 50%; width: 6px; border-left: 1px solid var(--soluk); border-bottom: 1px solid var(--soluk); }
.harita-adim b { color: var(--grup-yazi); }
.harita-adim.planli { border-style: dashed; color: var(--soluk); }
.harita-sutun.secili, .harita-sutun.secili:hover:not(:disabled) { z-index: 2; transform: scale(1.05); outline: 2px dashed var(--grup-yazi); outline-offset: 5px; }
.harita-sutun.secili .harita-adim { background: var(--grup-z); border-color: var(--grup); }
@media (prefers-reduced-motion: reduce) { .harita-sutun { transition: none; } }

@media (max-width: 1200px) { .sec-izgara, .sec-izgara.uclu { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  body { flex-direction: column; }
  .yan { width: 100%; height: auto; position: static; }
  #menu { display: flex; overflow-x: auto; padding: 0; }
  .menu-grup { display: none; }
  #menu { gap: 4px; padding: 6px 8px; }
  nav a { white-space: nowrap; gap: 8px; flex: none; }
  .yan-alt, .saat, .kurum-serit { display: none; }
  .iki-kolon, .iki-kolon.esit { grid-template-columns: minmax(0, 1fr); }
  .gantt-satir { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .gantt-sure { text-align: left; }
  main, .ust { padding-left: 16px; padding-right: 16px; }
  .ust { position: static; grid-template-columns: minmax(0, 1fr); }
  .ust-sag { flex-wrap: wrap; justify-content: flex-start; }
  .bayrak { justify-self: center; height: 84px; margin: 0; }
}