
:root{
--bg:#05101d;--side:#071424;--panel:#0b1829;--panel2:#0f1e32;--line:#22344d;
--text:#e8f1fb;--muted:#94a8c0;--blue:#196ad3;--blue2:#0e4f9f;
--red:#ff4040;--orange:#f5a017;--green:#35c85a;--cyan:#2ba7ff;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 65% 0,#0b315b 0,#05101d 38%,#020812 100%);color:var(--text);font-family:Arial,Helvetica,sans-serif;font-size:14px}
button,select,input{font:inherit}
button,select,input{background:#0b1728;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:9px 12px}
button{cursor:pointer}button.primary{background:linear-gradient(180deg,#257be8,#0e54ad);border-color:#1d69c8}
.themebar{position:fixed;top:0;left:0;right:0;height:28px;background:linear-gradient(90deg,#092040,#0b3a70,#092040);display:flex;align-items:center;justify-content:center;font-weight:700;z-index:20;color:#eaf4ff}
.themebar span{color:#9ec8ff;font-weight:500;margin-left:6px}
.login{min-height:100vh;display:grid;place-items:center;padding-top:28px}.loginCard{width:420px;background:linear-gradient(180deg,#101f33,#071222);border:1px solid var(--line);border-radius:18px;padding:34px;box-shadow:0 24px 80px #0008}.loginCard img{width:210px;display:block;margin:0 auto 22px}.loginCard h1{text-align:center;color:#3e9cff;margin:0 0 6px}.loginCard p{text-align:center;color:var(--muted)}.loginCard label{display:block;margin:16px 0 6px}.loginCard input{width:100%}.loginCard .primary{width:100%;margin-top:18px}.linkBtn{background:transparent;border:0;color:#58aeff;width:100%;margin-top:10px}.demoLogin{margin-top:24px;border:1px solid var(--line);border-radius:12px;background:#0b1728;padding:16px;color:#d5e2f0}.demoLogin b{color:#45a3ff}
.shell{display:grid;grid-template-columns:270px 1fr;margin-top:28px;min-height:calc(100vh - 28px)}
.sidebar{background:rgba(5,14,26,.94);border-right:1px solid var(--line);padding:24px 18px;position:relative}
.logo{width:190px;margin-bottom:20px}.product{color:#3e9cff;font-size:24px;font-weight:700;margin-left:16px}.subtitle{color:#d5e2f0;margin:8px 0 28px 16px}
.nav{display:grid;gap:7px}.nav button{display:flex;align-items:center;gap:12px;background:transparent;border:0;text-align:left;color:#d9e5f4;padding:12px;font-size:16px}.nav button.active,.nav button:hover{background:linear-gradient(90deg,#0f4d97,#0a223d);border:1px solid #1b5da9}
.demoBox{position:absolute;left:18px;right:18px;bottom:24px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,#0e1e33,#091729);padding:18px;color:#d5e2f0}.demoBox p{color:var(--muted);line-height:1.45}.demoBox b{color:#45a3ff}
.main{padding:0 24px 28px}.top{height:66px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.hamb{font-size:26px}.topRight{display:flex;align-items:center;gap:10px}.bell{position:relative;border:1px solid var(--line);background:#0b1728;border-radius:8px;padding:10px}.badge{position:absolute;top:-7px;right:-7px;background:#ff334b;color:#fff;border-radius:50%;font-size:11px;padding:2px 6px}.avatar{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center}
h1{font-size:26px;margin:0 0 12px}.title{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.title span,.muted{color:var(--muted)}
.panel,.metric,.card,.room,.filter{background:linear-gradient(180deg,rgba(16,31,51,.96),rgba(8,20,35,.98));border:1px solid var(--line);border-radius:11px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.panel{padding:16px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}.layout{display:grid;grid-template-columns:1fr 255px;gap:14px}
.metric{min-height:76px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;overflow:hidden}.metric.red{background:linear-gradient(90deg,rgba(80,18,26,.85),rgba(28,13,25,.85))}.metric.orange{background:linear-gradient(90deg,rgba(78,47,10,.85),rgba(28,20,12,.85))}.metric.green{background:linear-gradient(90deg,rgba(13,62,31,.85),rgba(10,30,24,.85))}.metric.blue{background:linear-gradient(90deg,rgba(13,43,73,.85),rgba(8,20,35,.85))}.metric b{font-size:28px}.metric small{display:block;color:#d8e5f4;font-size:15px}.metricIcon{font-size:34px;opacity:.95}
.tag{display:inline-block;border-radius:8px;padding:5px 9px;font-weight:700}.tag.red{background:#5a1a21;color:#ff6b6b}.tag.orange{background:#5b390b;color:#ffbe4d}.tag.green{background:#123d25;color:#63e684}.tag.blue{background:#103760;color:#59b3ff}
.valRed{color:#ff4d4d;font-weight:700}.valOrange{color:#ffb13b;font-weight:700}
.filter{padding:14px}.filterGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.filterGrid label,.secondRow label{display:block;color:#d7e3f2;margin-bottom:6px}.filterGrid select,.filterGrid input,.secondRow select,.secondRow input{width:100%;height:38px}.secondRow{display:grid;grid-template-columns:1fr 1fr 1fr 1.1fr 130px;gap:14px;margin-top:14px}.btnCol{display:grid;gap:8px}
.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:12px 0}
.tablePanel{padding:0;overflow:auto}.tableTitle{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}.tableTitle h2{font-size:18px;margin:0}.table{width:100%;border-collapse:collapse;min-width:1060px}.table th,.table td{padding:12px 10px;border-bottom:1px solid #182a40;border-right:1px solid #15263b;text-align:left;vertical-align:middle;font-size:13px}.table th{color:#d8e5f4;font-weight:600;background:rgba(10,22,38,.55)}.table td{color:#dce8f6}
.footerTable{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;color:#c9d8e8}.pages{display:flex;gap:8px;align-items:center}.pages button.active{background:#1768d0}
.bottom{display:grid;grid-template-columns:1fr 1fr 1.55fr;gap:14px;margin-top:12px}.chartBox{padding:18px}.chartBox h3{margin:0 0 15px;font-size:18px}.donutWrap{display:flex;align-items:center;gap:18px}.donut{width:126px;height:126px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#f12636 0 32%,#ff9f16 32% 72%,#1e78df 72% 88%,#35c85a 88% 100%)}.donut.status{background:conic-gradient(#f12636 0 8%,#ff9f16 8% 28%,#35c85a 28% 100%)}.donut:after{content:"25\\A Toplam";white-space:pre;text-align:center;width:74px;height:74px;border-radius:50%;background:#0b1728;display:grid;place-items:center;font-weight:700;color:#e9f1fb;line-height:1.35}.legend{display:grid;gap:10px}.legendRow{display:grid;grid-template-columns:14px 1fr auto;gap:8px;align-items:center;color:#d7e3f2}.dot{width:10px;height:10px;border-radius:3px}.dot.red{background:#f12636}.dot.orange{background:#ff9f16}.dot.blue{background:#1e78df}.dot.green{background:#35c85a}
.recent{padding:16px}.recentHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.recentHead h3{margin:0}.recentHead span{color:#45a3ff;font-size:13px}.recentItem{display:grid;grid-template-columns:1fr auto;gap:10px;border-bottom:1px solid #182a40;padding:11px 0}.recentItem small{color:var(--muted)}.ago{color:#ff4d4d;font-weight:700}
.sidePanel{display:grid;gap:14px;align-content:start}.sidePanel h3{margin:0;padding:14px 16px;border-bottom:1px solid var(--line)}.sideMenu{padding:8px}.sideMenu button{width:100%;text-align:left;background:transparent;border:0;margin:3px 0;padding:11px}.sideMenu button.active{background:linear-gradient(90deg,#155db9,#0d2d51)}.companyList{padding:9px 16px 14px}.companyList div{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #182a40;padding:11px 0;color:#dce8f6}
.facilityCard{overflow:hidden;padding:0}.facilityCover{height:170px;background-size:cover;background-position:center;border-bottom:1px solid var(--line)}.facilityBody{padding:16px}.facilityCard h3{margin:6px 0}.facilityStats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.facilityStats div{background:#0b1728;border:1px solid var(--line);border-radius:8px;padding:10px;text-align:center}.facilityStats b{display:block;font-size:20px}
.room{padding:16px;border-left:5px solid var(--green);cursor:pointer}.room.warn{border-left-color:var(--orange)}.room.danger{border-left-color:var(--red)}.roomTop,.actions{display:flex;justify-content:space-between;align-items:center;gap:10px}.values{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.values b{font-size:22px}canvas{width:100%;height:315px;background:#081321;border:1px solid var(--line);border-radius:11px}
.ioGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}.ioGrid div{display:flex;justify-content:space-between;background:#0b1728;border:1px solid var(--line);border-radius:9px;padding:12px}
.whatsappBox{border-left:5px solid #25D366}.formGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.downloadNote{color:var(--muted);margin-top:10px}
@media(max-width:1250px){.shell{grid-template-columns:1fr}.sidebar{position:static}.demoBox{position:static;margin-top:24px}.layout,.summary,.bottom,.filterGrid,.secondRow,.grid2,.grid3,.grid4{grid-template-columns:1fr}}

.formGrid label{display:block;color:#d7e3f2;margin-bottom:6px}.grid2 canvas{height:360px}.chartBox .donut.status:after{content:'168\\A Saat';}
