/* MEC Enerji - Extracted from index.html */
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:14px}
body{font-family:'Outfit',system-ui,sans-serif;background:#f5f6f8;color:#1e293b;min-height:100vh;font-size:14px}

/* LOGIN */
#loginScreen.hidden{display:none!important;visibility:hidden;opacity:0;pointer-events:none}
#loginScreen{position:fixed;inset:0;z-index:9999;display:flex;width:100vw;height:100vh;background:#060d1b;}

/* ═══════ LEFT VISUAL ═══════ */
.login-visual{flex:1.2;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:linear-gradient(165deg,#071225 0%,#0a1a35 40%,#061020 100%);}
.login-visual::before{
  content:'';position:absolute;inset:-50%;
  background-image:
    linear-gradient(rgba(16,185,129,0.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,185,129,0.03) 1px,transparent 1px);
  background-size:60px 60px;
  animation:gridMove 25s linear infinite;
  transform:perspective(500px) rotateX(25deg);
}
@keyframes gridMove{0%{transform:perspective(500px) rotateX(25deg) translateY(0)}100%{transform:perspective(500px) rotateX(25deg) translateY(60px)}}

.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.45;animation:orbFloat 8s ease-in-out infinite}
.orb-1{width:400px;height:400px;background:radial-gradient(circle,#10b981 0%,transparent 70%);top:-100px;left:-50px}
.orb-2{width:300px;height:300px;background:radial-gradient(circle,#06b6d4 0%,transparent 70%);bottom:10%;right:-80px;animation-delay:-3s;opacity:0.25}
.orb-3{width:200px;height:200px;background:radial-gradient(circle,#f59e0b 0%,transparent 70%);bottom:-50px;left:30%;animation-delay:-5s;opacity:0.2}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20px,-30px) scale(1.1)}}

.energy-lines{position:absolute;inset:0;overflow:hidden;opacity:0.5}
.e-line{position:absolute;height:1px;background:linear-gradient(90deg,transparent,#10b981,transparent);animation:lineSweep 4s ease-in-out infinite}
.e-line:nth-child(1){top:20%;width:60%;left:10%}
.e-line:nth-child(2){top:45%;width:40%;left:30%;animation-delay:-1.5s;background:linear-gradient(90deg,transparent,#06b6d4,transparent)}
.e-line:nth-child(3){top:70%;width:55%;left:5%;animation-delay:-3s}
.e-line:nth-child(4){top:85%;width:35%;left:40%;animation-delay:-2s;background:linear-gradient(90deg,transparent,#f59e0b,transparent)}
@keyframes lineSweep{0%{opacity:0;transform:translateX(-100%)}50%{opacity:1}100%{opacity:0;transform:translateX(200%)}}

.visual-content{position:relative;z-index:5;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:44px 48px}

/* LOGO */
.v-logo{display:flex;align-items:center;gap:14px}
.v-logo-icon{
  width:52px;height:52px;
  background:linear-gradient(135deg,#10b981,#06b6d4);
  border-radius:16px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 32px rgba(16,185,129,0.35);
  position:relative;overflow:hidden;
}
.v-logo-icon::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,0.2) 50%,transparent 60%);animation:logoShine 3s ease-in-out infinite}
@keyframes logoShine{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}
.v-logo-icon svg{width:28px;height:28px;position:relative;z-index:1}
.v-logo-text{font-size:24px;font-weight:800;letter-spacing:-0.3px;color:#ffffff;text-shadow:0 0 20px rgba(255,255,255,0.3)}
.v-logo-text span{color:#10b981}

/* CENTER */
.v-content{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:60px 80px;position:relative;z-index:2}.v-center{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:500px;position:relative;padding:36px;margin:-36px;border-radius:24px;background:linear-gradient(135deg,rgba(16,185,129,0.04) 0%,rgba(6,182,212,0.02) 50%,transparent 100%)}
.v-hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(16,185,129,0.15);border:1px solid rgba(16,185,129,0.3);border-radius:100px;padding:6px 16px 6px 10px;font-size:12px;color:#10b981;font-weight:500;margin-bottom:24px;width:fit-content}
.v-hero-badge-dot{width:8px;height:8px;background:#10b981;border-radius:50%;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.8)}}
.v-hero-title{font-size:46px;font-weight:800;line-height:1.15;letter-spacing:-1.5px;margin-bottom:18px;color:rgba(255,255,255,0.9)}
.v-hero-title .highlight{background:linear-gradient(135deg,#10b981,#06b6d4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.v-hero-desc{font-size:16px;line-height:1.7;color:rgba(255,255,255,0.55);max-width:440px}

/* FEATURE ICONS ROW */
.v-features{display:flex;gap:20px;margin-top:32px}
.v-feat{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:14px;padding:12px 18px;
  transition:all 0.3s;
}
.v-feat:hover{background:rgba(16,185,129,0.06);border-color:rgba(16,185,129,0.15);transform:translateY(-2px)}
.v-feat-icon{
  width:38px;height:38px;flex-shrink:0;
  background:rgba(16,185,129,0.1);border-radius:10px;
  display:flex;align-items:center;justify-content:center;
}
.v-feat-icon.cyan{background:rgba(6,182,212,0.1)}
.v-feat-icon.amber{background:rgba(245,158,11,0.1)}
.v-feat-icon svg{width:20px;height:20px}
.v-feat-text{font-size:12px;color:rgba(255,255,255,0.5);font-weight:500;line-height:1.4}
.v-feat-text strong{display:block;color:#fff;font-size:13px;font-weight:600}

/* STATS */
.v-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(255,255,255,0.06);padding-top:28px}
.v-stat{text-align:center;position:relative}
.v-stat:not(:last-child)::after{content:'';position:absolute;right:0;top:4px;bottom:4px;width:1px;background:rgba(255,255,255,0.06)}
.v-stat-icon{margin:0 auto 8px;width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.v-stat-icon svg{width:22px;height:22px}
.v-stat-num{font-size:30px;font-weight:800;font-family:'JetBrains Mono','Outfit',monospace;letter-spacing:-1px}
.v-stat-num.green{color:#10b981}.v-stat-num.cyan{color:#06b6d4}.v-stat-num.amber{color:#f59e0b}
.v-stat-unit{font-size:13px;font-weight:400;opacity:0.6}
.v-stat-label{font-size:10px;color:rgba(255,255,255,0.3);margin-top:4px;text-transform:uppercase;letter-spacing:0.12em;font-weight:500}

/* FLOATING CARD */
.energy-card{
  position:absolute;right:36px;top:48%;transform:translateY(-50%);
  width:190px;background:rgba(255,255,255,0.03);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.06);border-radius:20px;padding:22px;
  animation:cardFloat 6s ease-in-out infinite;z-index:6;
}
@keyframes cardFloat{0%,100%{transform:translateY(-50%) rotate(-2deg)}50%{transform:translateY(calc(-50% - 15px)) rotate(1deg)}}
.ec-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ec-icon{width:40px;height:40px;background:rgba(16,185,129,0.12);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ec-icon svg{width:22px;height:22px}
.ec-icon-label{font-size:11px;color:rgba(255,255,255,0.4);font-weight:500;line-height:1.3}
.ec-val{font-size:28px;font-weight:700;font-family:'JetBrains Mono',monospace;color:#10b981;margin-bottom:2px}
.ec-label{font-size:11px;color:rgba(255,255,255,0.3)}
.ec-bar{height:5px;background:rgba(255,255,255,0.06);border-radius:5px;margin-top:16px;overflow:hidden}
.ec-bar-fill{height:100%;width:78%;background:linear-gradient(90deg,#10b981,#06b6d4);border-radius:5px;animation:barPulse 3s ease-in-out infinite}
@keyframes barPulse{0%,100%{width:78%}50%{width:85%}}
.ec-mini-stats{display:flex;justify-content:space-between;margin-top:12px}
.ec-mini{text-align:center}
.ec-mini-val{font-size:13px;font-weight:700;font-family:'JetBrains Mono',monospace;color:#06b6d4}
.ec-mini-lbl{font-size:9px;color:rgba(255,255,255,0.25);margin-top:1px}

/* FLOATING CARD 2 */
.energy-card-2{
  position:absolute;right:60px;bottom:18%;
  width:160px;background:rgba(255,255,255,0.03);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:16px;
  animation:cardFloat2 7s ease-in-out infinite;z-index:6;
}
@keyframes cardFloat2{0%,100%{transform:rotate(1deg)}50%{transform:translateY(-10px) rotate(-1deg)}}
.ec2-row{display:flex;align-items:center;gap:10px}
.ec2-icon{width:34px;height:34px;background:rgba(245,158,11,0.1);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ec2-icon svg{width:18px;height:18px}
.ec2-text{font-size:11px;color:rgba(255,255,255,0.4);line-height:1.4}
.ec2-text strong{display:block;color:#f59e0b;font-size:15px;font-family:'JetBrains Mono',monospace}

/* ═══════ RIGHT FORM ═══════ */
.login-form-panel{flex:0.8;display:flex;flex-direction:column;justify-content:center;padding:60px 56px;background:#0f172a;overflow-y:auto;}
.login-form-panel::before{content:'';position:absolute;top:-200px;right:-200px;width:500px;height:500px;background:radial-gradient(circle,rgba(16,185,129,0.06) 0%,transparent 60%);pointer-events:none}
.login-form-panel::after{content:'';position:absolute;bottom:-150px;left:-150px;width:400px;height:400px;background:radial-gradient(circle,rgba(6,182,212,0.04) 0%,transparent 60%);pointer-events:none}

/* FORM LOGO (mobile) */
.lf-logo-mobile{display:none;align-items:center;gap:12px;margin-bottom:32px}
.lf-logo-mobile .v-logo-icon{width:44px;height:44px;border-radius:12px}
.lf-logo-mobile .v-logo-icon svg{width:22px;height:22px}
.lf-logo-mobile .v-logo-text{font-size:20px}

.lf-header{margin-bottom:36px;position:relative}
.lf-welcome{display:flex;align-items:center;gap:8px;font-size:13px;color:#10b981;font-weight:600;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:12px}
.lf-welcome svg{width:16px;height:16px}
.lf-title{font-size:28px;font-weight:700;color:#fff;letter-spacing:-0.5px;margin-bottom:6px}
.lf-desc{font-size:14px;color:rgba(255,255,255,0.35);font-weight:400}

/* SECURITY BADGE */
.lf-security{
  display:flex;align-items:center;gap:10px;
  background:rgba(16,185,129,0.05);border:1px solid rgba(16,185,129,0.1);
  border-radius:12px;padding:10px 14px;margin-bottom:24px;
}
.lf-security svg{width:18px;height:18px;color:#10b981;flex-shrink:0}
.lf-security span{font-size:12px;color:rgba(255,255,255,0.35)}
.lf-security span strong{color:rgba(255,255,255,0.6)}

/* ERROR */
.lf-error{background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);color:#fca5a5;border-radius:12px;padding:12px 16px;font-size:13px;margin-bottom:20px;display:none;backdrop-filter:blur(10px)}
.lf-error.show{display:flex;align-items:center;gap:10px}
.lf-error svg{flex-shrink:0}

/* FORM */
.lf-group{margin-bottom:20px}
.lf-label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:rgba(255,255,255,0.5);margin-bottom:8px;letter-spacing:0.03em}
.lf-label svg{width:13px;height:13px;opacity:0.6}
.lf-input-wrap{position:relative}
.lf-input-ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:rgba(255,255,255,0.18);pointer-events:none;transition:color 0.3s}
.lf-input{width:100%;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:14px;padding:16px 16px 16px 50px;color:#fff;font-size:14px;font-family:'Outfit',sans-serif;outline:none;transition:all 0.3s}
.lf-input::placeholder{color:rgba(255,255,255,0.15)}
.lf-input:focus{border-color:rgba(16,185,129,0.5);background:rgba(16,185,129,0.04);box-shadow:0 0 0 4px rgba(16,185,129,0.08),0 0 30px rgba(16,185,129,0.05)}
.lf-input:focus ~ .lf-input-ico{color:#10b981}

/* TOGGLE PASSWORD */
.lf-toggle-pass{position:absolute;right:16px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;color:rgba(255,255,255,0.2);transition:color 0.2s}
.lf-toggle-pass:hover{color:rgba(255,255,255,0.5)}
.lf-toggle-pass svg{width:18px;height:18px;display:block}

.lf-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.lf-check{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,0.35);cursor:pointer}
.lf-check input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1.5px solid rgba(255,255,255,0.12);border-radius:6px;cursor:pointer;position:relative;transition:all 0.2s;background:rgba(255,255,255,0.02)}
.lf-check input[type=checkbox]:checked{background:#10b981;border-color:#10b981}
.lf-check input[type=checkbox]:checked::after{content:'✓';position:absolute;color:#fff;font-size:11px;font-weight:700;top:50%;left:50%;transform:translate(-50%,-50%)}
.lf-link{display:flex;align-items:center;gap:5px;font-size:13px;color:#10b981;text-decoration:none;font-weight:500;transition:color 0.2s}
.lf-link svg{width:14px;height:14px}
.lf-link:hover{color:#34d399}

/* BUTTON */
.lf-btn{
  width:100%;border:none;border-radius:14px;padding:17px;
  color:#fff;font-size:15px;font-weight:600;cursor:pointer;
  font-family:'Outfit',sans-serif;transition:all 0.3s;
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#10b981 0%,#059669 50%,#06b6d4 100%);
  background-size:200% 200%;animation:btnGradient 4s ease-in-out infinite;
  box-shadow:0 6px 30px rgba(16,185,129,0.25);
  display:flex;align-items:center;justify-content:center;gap:10px;
}
@keyframes btnGradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.lf-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);transition:left 0.5s}
.lf-btn:hover{transform:translateY(-2px);box-shadow:0 10px 40px rgba(16,185,129,0.4)}
.lf-btn:hover::before{left:100%}
.lf-btn:active{transform:translateY(0)}
.lf-btn svg{width:20px;height:20px}

.lf-sep{text-align:center;color:rgba(255,255,255,0.15);font-size:12px;margin:24px 0;position:relative;font-weight:500}
.lf-sep::before,.lf-sep::after{content:'';position:absolute;top:50%;width:42%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent)}
.lf-sep::before{left:0}.lf-sep::after{right:0}

/* ALT BUTTONS */
.lf-alts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lf-alt{
  background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;padding:13px;color:rgba(255,255,255,0.45);font-size:13px;
  cursor:pointer;font-family:'Outfit',sans-serif;
  display:flex;align-items:center;justify-content:center;gap:8px;transition:all 0.25s;
}
.lf-alt:hover{background:rgba(255,255,255,0.06);color:#fff;border-color:rgba(255,255,255,0.12);transform:translateY(-1px)}
.lf-alt svg{width:18px;height:18px;flex-shrink:0}

.lf-footer{text-align:center;margin-top:32px;font-size:11px;color:rgba(255,255,255,0.15)}
.lf-footer a{color:rgba(255,255,255,0.2);text-decoration:none;transition:color 0.2s}
.lf-footer a:hover{color:#10b981}

/* ENTRANCE */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.lf-header{animation:fadeUp 0.6s ease-out 0.2s both}
.lf-security{animation:fadeUp 0.6s ease-out 0.3s both}
.lf-group:nth-child(1){animation:fadeUp 0.6s ease-out 0.35s both}
.lf-group:nth-child(2){animation:fadeUp 0.6s ease-out 0.45s both}
.lf-row{animation:fadeUp 0.6s ease-out 0.55s both}
.lf-btn{animation:fadeUp 0.6s ease-out 0.65s both}

/* RESPONSIVE */

/* PARTICLES */
.particles{position:absolute;inset:0;overflow:hidden;z-index:1}
.particle{position:absolute;border-radius:50%;pointer-events:none;animation:particleFloat linear infinite}
.particle:nth-child(1){width:4px;height:4px;background:#10b981;left:10%;bottom:-10%;animation-duration:12s;opacity:0.6}
.particle:nth-child(2){width:6px;height:6px;background:#06b6d4;left:25%;bottom:-10%;animation-duration:9s;animation-delay:-2s;opacity:0.4}
.particle:nth-child(3){width:3px;height:3px;background:#f59e0b;left:40%;bottom:-10%;animation-duration:14s;animation-delay:-5s;opacity:0.5}
.particle:nth-child(4){width:5px;height:5px;background:#10b981;left:55%;bottom:-10%;animation-duration:10s;animation-delay:-3s;opacity:0.3}
.particle:nth-child(5){width:4px;height:4px;background:#06b6d4;left:70%;bottom:-10%;animation-duration:11s;animation-delay:-7s;opacity:0.5}
.particle:nth-child(6){width:7px;height:7px;background:#10b981;left:85%;bottom:-10%;animation-duration:13s;animation-delay:-1s;opacity:0.25}
.particle:nth-child(7){width:3px;height:3px;background:#f59e0b;left:15%;bottom:-10%;animation-duration:15s;animation-delay:-4s;opacity:0.4}
.particle:nth-child(8){width:5px;height:5px;background:#06b6d4;left:60%;bottom:-10%;animation-duration:8s;animation-delay:-6s;opacity:0.35}
.particle:nth-child(9){width:4px;height:4px;background:#10b981;left:35%;bottom:-10%;animation-duration:16s;animation-delay:-8s;opacity:0.3}
.particle:nth-child(10){width:6px;height:6px;background:#f59e0b;left:80%;bottom:-10%;animation-duration:10s;animation-delay:-2s;opacity:0.2}
.particle:nth-child(11){width:3px;height:3px;background:#10b981;left:48%;bottom:-10%;animation-duration:11s;animation-delay:-9s;opacity:0.45}
.particle:nth-child(12){width:5px;height:5px;background:#06b6d4;left:5%;bottom:-10%;animation-duration:13s;animation-delay:-3s;opacity:0.3}
@keyframes particleFloat{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:var(--p-opacity,0.5)}90%{opacity:var(--p-opacity,0.5)}100%{transform:translateY(-100vh) translateX(40px);opacity:0}}

/* MOBILE */
@media(max-width:768px){
  #loginScreen.hidden{display:none!important;visibility:hidden;opacity:0;pointer-events:none}
#loginScreen{grid-template-columns:1fr!important}
  .login-visual{display:flex;align-items:center;justify-content:center;display:none!important}
  .login-form-panel{padding:32px 24px!important;justify-content:flex-start!important;padding-top:60px!important}
  .lf-logo-mobile{display:flex!important}
  .lf-title{font-size:24px!important}
  .lf-btn{padding:15px!important}
  .lf-alts{grid-template-columns:1fr!important}
}
@media(max-width:1024px) and (min-width:769px){
  #loginScreen.hidden{display:none!important;visibility:hidden;opacity:0;pointer-events:none}
#loginScreen{grid-template-columns:1fr 1fr!important}
  .v-hero-title{font-size:32px!important}
  .v-features{flex-wrap:wrap!important}
  .energy-card{display:none!important}
  .energy-card-2{display:none!important}
  .login-form-panel{padding:40px 32px!important}
}

@media(max-width:1024px){
  #loginScreen.hidden{display:none!important;visibility:hidden;opacity:0;pointer-events:none}
#loginScreen{grid-template-columns:1fr}
  .login-visual{display:flex;align-items:center;justify-content:center;display:none}
  .login-form-panel{padding:40px 28px}
  .lf-logo-mobile{display:flex}
}
/* SIDEBAR */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:250px;background:#fff;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;z-index:100;box-shadow:2px 0 8px rgba(0,0,0,0.02)}
.s-header{height:64px;display:flex;align-items:center;gap:12px;padding:0 22px;border-bottom:1px solid #e5e7eb}
.s-logo{width:36px;height:36px;background:linear-gradient(135deg,#0d9488,#14b8a6);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 2px 8px rgba(13,148,136,0.3)}
.s-brand{font-size:17px;font-weight:700;color:#0f172a}.s-brand b{color:#0d9488}
.s-nav{flex:1;padding:14px 10px;overflow-y:auto}
.s-section{margin-bottom:6px}
.s-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:#94a3b8;padding:10px 14px 4px}
.s-item{display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:8px;cursor:pointer;transition:all 0.15s;color:#64748b;font-size:13px;font-weight:500}
.s-item:hover{background:#f1f5f9;color:#334155}
.s-item.active{background:#f0fdfa;color:#0d9488;font-weight:600}
.s-icon{width:16px;height:16px;opacity:0.55;flex-shrink:0}.s-item.active .s-icon{opacity:1}
.s-badge{margin-left:auto;background:#0d9488;color:#fff;font-size:9px;font-weight:700;padding:2px 7px;border-radius:10px}
.s-footer{padding:14px 20px;border-top:1px solid #e5e7eb;display:flex;align-items:center;gap:10px}
.s-avatar{width:32px;height:32px;border-radius:50%;background:#0d9488;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:11px;color:#fff}
.s-uname{font-size:12px;font-weight:600;color:#0f172a}.s-urole{font-size:10px;color:#94a3b8}
.s-logout{margin-left:auto;padding:5px;border-radius:5px;background:transparent;border:none;color:#94a3b8;cursor:pointer}.s-logout:hover{color:#dc2626;background:#fef2f2}

/* MAIN */
.app{display:none}.app.visible{display:flex;position:fixed;inset:0;z-index:10000;background:#fff}
.main{margin-left:250px;min-height:100vh;flex:1;overflow-y:auto}
.header{height:64px;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:50;box-shadow:0 1px 3px rgba(0,0,0,0.02)}
.h-title{font-size:24px;font-weight:800;color:#0f172a;letter-spacing:-0.3px}.h-sub{font-size:13px;color:#94a3b8;font-weight:500}
.h-right{display:flex;align-items:center;gap:8px}
.h-btn{width:34px;height:34px;border-radius:8px;background:#fff;border:1px solid #e5e7eb;color:#64748b;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s;position:relative;font-size:14px}.h-btn:hover{background:#f8fafc}
.h-dot{position:absolute;top:-1px;right:-1px;width:8px;height:8px;border-radius:50%;background:#ef4444;border:2px solid #fff}
.h-time{font-size:11px;color:#64748b;font-family:'JetBrains Mono',monospace;padding:6px 12px;background:#f8fafc;border-radius:8px;border:1px solid #e5e7eb}

.content{padding:24px 28px}
.grid{display:grid;gap:16px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:repeat(2,1fr)}.g5{grid-template-columns:repeat(4,1fr)}

/* STAT CARDS */
.sc{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:22px 24px;transition:all 0.25s;position:relative;overflow:hidden}
.sc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.sc:hover{box-shadow:0 8px 24px rgba(0,0,0,0.08);transform:translateY(-2px)}
.sc-row{display:flex;justify-content:space-between;align-items:flex-start}
.sc-ico{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px}
.sc-ico.t{background:linear-gradient(135deg,#f0fdfa,#ccfbf1);color:#0d9488}.sc-ico.b{background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#2563eb}.sc-ico.a{background:linear-gradient(135deg,#fffbeb,#fef3c7);color:#d97706}.sc-ico.r{background:linear-gradient(135deg,#fef2f2,#fecaca);color:#dc2626}.sc-ico.g{background:linear-gradient(135deg,#f0fdf4,#dcfce7);color:#16a34a}
.sc:nth-child(1)::before{background:linear-gradient(90deg,#0d9488,#14b8a6)}.sc:nth-child(2)::before{background:linear-gradient(90deg,#2563eb,#60a5fa)}.sc:nth-child(3)::before{background:linear-gradient(90deg,#16a34a,#4ade80)}.sc:nth-child(4)::before{background:linear-gradient(90deg,#d97706,#fbbf24)}
.sc-lbl{font-size:13px;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:0.8px}
.sc-val{font-size:30px;font-weight:800;color:#0f172a;margin:6px 0;line-height:1.1;letter-spacing:-0.5px}
.sc-sub{font-size:12px;color:#94a3b8}
.sc-chg{font-size:11px;font-weight:600}.sc-chg.up{color:#16a34a}.sc-chg.dn{color:#dc2626}

/* CARDS */
.card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;transition:all 0.25s;box-shadow:0 1px 3px rgba(0,0,0,0.02)}
.card:hover{box-shadow:0 4px 20px rgba(0,0,0,0.06);border-color:#d1d5db}
.card-h{padding:18px 22px;border-bottom:1px solid #f1f5f9;display:flex;justify-content:space-between;align-items:center}
.card-t{font-size:15px;font-weight:700;color:#0f172a;letter-spacing:-0.2px}.card-b{padding:22px}.card-b.np{padding:0}

/* TABLE */
table{width:100%;border-collapse:collapse;font-size:12px}
th{text-align:left;padding:10px 14px;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:0.5px;color:#94a3b8;background:#fafbfc;border-bottom:1px solid #e5e7eb;white-space:nowrap}
td{padding:10px 14px;border-bottom:1px solid #f1f5f9;color:#475569;white-space:nowrap}
tr:hover td{background:#f8fafc}
tr{transition:background 0.15s}
.mono{font-family:'JetBrains Mono',monospace;font-size:11px}

/* BADGES */
.bg-s{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:6px;font-size:11px;font-weight:600}
.bg-t{background:#f0fdfa;color:#0d9488}.bg-b{background:#eff6ff;color:#2563eb}.bg-a{background:#fffbeb;color:#d97706}.bg-r{background:#fef2f2;color:#dc2626}.bg-g{background:#f0fdf4;color:#16a34a}

.pbar{height:8px;background:#f1f5f9;border-radius:4px;overflow:hidden}
.pfill{height:100%;border-radius:4px;transition:width 0.8s ease}

.btn{display:inline-flex;align-items:center;gap:5px;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all 0.15s;font-family:inherit}
.btn-p{background:#0d9488;color:#fff}.btn-p:hover{background:#0f766e}
.btn-o{background:#fff;color:#475569;border:1px solid #e5e7eb}.btn-o:hover{background:#f8fafc}
.btn-d{background:#dc2626;color:#fff;font-size:10px;padding:5px 10px}.btn-d:hover{background:#b91c1c}

/* MODULES */
.mod-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.mod-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px 10px;text-align:center;cursor:pointer;transition:all 0.25s}
.mod-card:hover{border-color:#0d9488;box-shadow:0 6px 20px rgba(13,148,136,0.1);transform:translateY(-2px)}
.mod-ico{width:36px;height:36px;border-radius:10px;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;font-size:14px}
.mod-nm{font-size:12px;font-weight:700;color:#0f172a;margin-top:2px}.mod-ds{font-size:10px;color:#94a3b8;margin-top:3px}

.pg{display:none;animation:fadeUp 0.25s ease}.pg.on{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* FORMS */
.fg{margin-bottom:14px}
.fl{display:block;font-size:12px;font-weight:600;color:#94a3b8;margin-bottom:5px;text-transform:uppercase;letter-spacing:0.5px}
.fi,.fs{width:100%;padding:10px 14px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;color:#0f172a;font-family:inherit;font-size:13px;transition:border 0.15s}
.fi:focus,.fs:focus{outline:none;border-color:#0d9488;box-shadow:0 0 0 2px rgba(13,148,136,0.08)}
.fs{appearance:none;cursor:pointer}

.rbox{border-radius:10px;padding:18px}
.rbox-ok{background:#f0fdf4;border:1px solid #bbf7d0}.rbox-warn{background:#fffbeb;border:1px solid #fde68a}.rbox-err{background:#fef2f2;border:1px solid #fecaca}

.donut-w{display:flex;align-items:center;gap:24px}
.leg-item{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13px;color:#334155;font-weight:500}
.leg-dot{width:10px;height:10px;border-radius:4px;flex-shrink:0}

.iso-row{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid #f1f5f9}
.iso-row:last-child{border-bottom:none}
.iso-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* MODAL */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:200;display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.modal-bg.show{display:flex}
.modal{background:#fff;border-radius:14px;width:1050px;max-width:95vw;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.12)}
.modal-h{padding:18px 22px;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center}
.modal-h h3{font-size:16px;font-weight:700;color:#0f172a}
.modal-close{width:30px;height:30px;border-radius:8px;border:none;background:#f1f5f9;color:#64748b;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center}.modal-close:hover{background:#e2e8f0}
.modal-body{padding:22px}

/* ACTION BAR */
.action-bar{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:10px 16px;margin-bottom:14px;display:none;align-items:center;gap:10px;animation:fadeUp 0.2s ease}
.action-bar.show{display:flex}
.action-count{font-size:12px;font-weight:600;color:#0d9488}

/* ALARM LIST */
.alarm-item{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;border-bottom:1px solid #f1f5f9;font-size:12px;transition:background 0.15s}
.alarm-item:last-child{border-bottom:none}
.alarm-item:hover{background:#f8fafc}
.alarm-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px;box-shadow:0 0 6px currentColor}
.alarm-time{font-size:10px;color:#94a3b8;font-family:'JetBrains Mono',monospace;margin-left:auto;white-space:nowrap}

/* LIVE INDICATOR */
.live-dot{width:8px;height:8px;background:#16a34a;border-radius:50%;display:inline-block;animation:livePulse 2s ease infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:0.4}}

/* QUICK ACTIONS */
.qa-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;cursor:pointer;transition:all 0.15s;text-decoration:none}
.qa-btn:hover{border-color:#0d9488;background:#f0fdfa}
.qa-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px}
.qa-lbl{font-size:13px;font-weight:600;color:#334155}

/* MAP placeholder */
.map-placeholder{background:#f8fafc;border:1px dashed #d1d5db;border-radius:10px;height:200px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:13px}

/* CHECKBOX IN TABLE */
.tbl-check{width:16px;height:16px;accent-color:#0d9488;cursor:pointer;border-radius:3px}

@media(max-width:1200px){.g4,.g5{grid-template-columns:repeat(2,1fr)}.mod-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.sidebar{transform:translateX(-100%)}.main{margin-left:0}.g4,.g3,.g2,.g5{grid-template-columns:1fr}.mod-grid{grid-template-columns:repeat(2,1fr)}.content{padding:14px}}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f5f9;border-radius:4px}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px;border:2px solid #f1f5f9}::-webkit-scrollbar-thumb:hover{background:#94a3b8}

.h-search{position:relative;width:280px}
.h-search input{width:100%;padding:8px 12px 8px 36px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;font-family:inherit;font-size:12px;color:#0f172a;transition:all 0.2s}
.h-search input:focus{outline:none;border-color:#0d9488;background:#fff}
.h-search input::placeholder{color:#94a3b8}
.h-search-ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#94a3b8}
.h-sr{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e5e7eb;border-radius:10px;margin-top:4px;max-height:280px;overflow-y:auto;display:none;box-shadow:0 8px 24px rgba(0,0,0,0.08);z-index:60}
.h-sr.show{display:block}
.hsr-i{padding:9px 14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:12px;border-bottom:1px solid #f1f5f9}
.hsr-i:last-child{border-bottom:none}.hsr-i:hover{background:#f8fafc}
.np-panel{position:absolute;top:60px;right:16px;width:360px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,0.1);display:none;z-index:60;max-height:440px;overflow-y:auto}
.np-panel.show{display:block}
.np-h{padding:14px 18px;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center}
.np-h h4{font-size:14px;font-weight:700;color:#0f172a}
.np-i{padding:12px 18px;border-bottom:1px solid #f1f5f9;display:flex;gap:10px;cursor:pointer}
.np-i:hover{background:#fafbfc}.np-i.ur{background:#f0fdfa}
.np-dot{width:8px;height:8px;border-radius:50%;margin-top:4px;flex-shrink:0}
.np-msg{font-size:12px;color:#334155;line-height:1.4}.np-time{font-size:10px;color:#94a3b8;margin-top:2px}
.stg-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid #f1f5f9}
.stg-row:last-child{border-bottom:none}
.tgl{width:42px;height:24px;background:#d1d5db;border-radius:12px;position:relative;cursor:pointer;transition:background 0.2s;border:none}
.tgl.on{background:#0d9488}.tgl::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:left 0.2s}.tgl.on::after{left:21px}
@media(max-width:768px){.h-search{width:160px}}

/* FILE UPLOAD */
.file-drop{border:2px dashed #d1d5db;border-radius:12px;padding:32px;text-align:center;cursor:pointer;transition:all 0.2s;background:#fafbfc}
.file-drop:hover,.file-drop.drag{border-color:#0d9488;background:#f0fdfa}
.file-drop-ico{margin-bottom:8px;color:#94a3b8}

/* COMPARE */
.cmp-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px;text-align:center}
.cmp-vs{width:40px;height:40px;border-radius:50%;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-weight:700;color:#94a3b8;margin:0 auto;font-size:13px}
.cmp-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid #f1f5f9;font-size:12px}
.cmp-row:last-child{border-bottom:none}
.cmp-label{width:120px;color:#94a3b8;font-size:11px;text-align:right;flex-shrink:0}
.cmp-val{flex:1;font-weight:600;color:#0f172a}
.cmp-bar{flex:2;display:flex;gap:4px;align-items:center}

/* BUDGET */
.bgt-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid #f1f5f9}
.bgt-row:last-child{border-bottom:none}
.bgt-month{width:40px;font-weight:700;font-size:12px;color:#334155}
.bgt-bars{flex:1;position:relative;height:24px;background:#f1f5f9;border-radius:4px;overflow:hidden}
.bgt-plan{position:absolute;top:0;left:0;height:100%;background:#e2e8f0;border-radius:4px}
.bgt-actual{position:absolute;top:0;left:0;height:100%;border-radius:4px}

/* CONTRACT */
.cnt-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:16px;display:flex;gap:14px;align-items:flex-start}
.cnt-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cnt-badge{font-size:10px;font-weight:600;padding:2px 8px;border-radius:20px}

/* WIZARD STEPS */
.wiz-steps{display:flex;gap:0;margin-bottom:20px}
.wiz-step{flex:1;text-align:center;padding:10px;font-size:11px;font-weight:600;color:#94a3b8;border-bottom:3px solid #e5e7eb;transition:all 0.2s}
.wiz-step.active{color:#0d9488;border-color:#0d9488}
.wiz-step.done{color:#16a34a;border-color:#16a34a}

/* ROLE BADGES */
.role-admin{background:#fef2f2;color:#dc2626}.role-analyst{background:#eff6ff;color:#2563eb}.role-viewer{background:#f0fdf4;color:#16a34a}

/* HEATMAP */
.hm-grid{display:grid;grid-template-columns:40px repeat(24,1fr);gap:1px;font-size:9px}
.hm-cell{width:100%;aspect-ratio:1;border-radius:2px;display:flex;align-items:center;justify-content:center;font-size:7px;color:rgba(255,255,255,0.7);cursor:pointer;transition:transform 0.1s}
.hm-cell:hover{transform:scale(1.3);z-index:2}
.hm-label{display:flex;align-items:center;justify-content:flex-end;padding-right:4px;color:#94a3b8;font-weight:600}
.hm-hlabel{text-align:center;color:#94a3b8;font-weight:500;padding:2px 0}

/* RISK SCORE */
.risk-ring{position:relative;width:80px;height:80px;margin:0 auto}
.risk-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700}
.risk-bar{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #f1f5f9;font-size:12px}
.risk-bar:last-child{border-bottom:none}
.risk-factor{flex:1;color:#475569}.risk-score{width:40px;text-align:right;font-weight:700;font-family:'JetBrains Mono',monospace}
.risk-meter{flex:2}

/* SIMULATION */
.sim-slider{width:100%;accent-color:#0d9488;cursor:pointer}
.sim-result{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.sim-box{text-align:center;padding:16px;background:#f8fafc;border-radius:10px;border:1px solid #e5e7eb}
.sim-val{font-size:22px;font-weight:700;color:#0f172a}
.sim-lbl{font-size:10px;color:#94a3b8;margin-top:2px}

/* TENANT SWITCHER */
.tenant-sw{display:flex;align-items:center;gap:8px;padding:6px 12px;background:#f0fdfa;border:1px solid #ccfbf1;border-radius:8px;margin-bottom:18px;font-size:12px}
.tenant-name{font-weight:700;color:#0d9488}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
@keyframes pulseGlow{0%{box-shadow:0 0 0 0 rgba(22,163,74,0.5)}100%{box-shadow:0 0 0 10px rgba(22,163,74,0)}}

html,body{height:100%;margin:0;padding:0}
#loginScreen{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;z-index:9999!important;display:flex!important;flex-direction:row!important;align-items:stretch!important}
#loginScreen>div:first-child{flex:1.2!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}
#loginScreen>div:nth-child(2){flex:0.8!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow-y:auto!important}
html{scrollbar-width:auto;scrollbar-color:#cbd5e1 #f1f5f9}

@media print{body>*:not(#faturaOlusturModal){display:none!important}#faturaOlusturModal{position:static!important;background:none!important}#faturaOlusturModal>div{box-shadow:none!important;margin:0!important}#faturaOlusturModal>div>div:first-child{display:none!important}#faturaOlusturModal>div>div:nth-child(2)>div:first-child{display:none!important}#faturaYazdirBar{display:none!important}@page{size:A4 portrait;margin:8mm}#faturaOnizleme,#faturaPrint{width:100%!important;max-width:186mm!important;overflow:visible!important}#faturaPrint div[style*="grid-template-columns:1fr 1fr"]{gap:8px!important}#faturaPrint *{box-sizing:border-box!important}#faturaPrint div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr 1fr!important}#faturaPrint canvas{max-width:100%!important;width:100%!important;max-height:90px!important}#faturaPrint div[style*="height:200px"]{height:90px!important}#faturaPrint div[style*="height:160px"]{height:90px!important}#faturaOnizleme,#faturaPrint{width:100%!important;max-width:186mm!important;overflow:visible!important}#faturaPrint div[style*="grid-template-columns:1fr 1fr"]{gap:8px!important}#faturaPrint *{box-sizing:border-box!important}html,body{background:#fff!important}#faturaPrint{max-width:100%!important;font-size:9px!important}#faturaPrint h2{font-size:15px!important}#faturaPrint h4{font-size:10px!important;padding:4px 8px!important;margin:0 0 6px 0!important}#faturaPrint table{font-size:9px!important}#faturaPrint td,#faturaPrint th{padding:3px 6px!important}#faturaPrint>div{margin-bottom:8px!important}#faturaPrint canvas{max-height:120px!important}#faturaPrint .chart-box,#faturaPrint div[style*="height:200px"],#faturaPrint div[style*="height:160px"]{height:120px!important}#faturaPrint>div{page-break-inside:avoid}#faturaPrint table,#faturaPrint tr{page-break-inside:avoid}}
/* === MEC Software animasyonlu logo (.mla) — kareler yerine oturur, yazı soldan açılır === */
.mla{position:relative;display:block}
.mla i{position:absolute;border-radius:1px;opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3) rotate(var(--r));animation:mlaSq .65s cubic-bezier(.2,.8,.2,1.15) var(--d) forwards}
.mla i.live{animation:mlaSq .65s cubic-bezier(.2,.8,.2,1.15) var(--d) forwards,mlaPulse 2.6s ease-in-out calc(var(--d) + 1.6s) infinite}
.mla b{position:absolute;top:0;right:0;bottom:0;background:url(../../mec-logo-light.png) right center/auto 100% no-repeat;clip-path:inset(0 100% 0 0);animation:mlaTx .75s cubic-bezier(.6,0,.2,1) var(--td) forwards}
.mla-fade{opacity:0;animation:mlaFade .6s ease 1.7s forwards}
@keyframes mlaSq{to{opacity:1;transform:none}}
@keyframes mlaTx{to{clip-path:inset(0 0 0 0)}}
@keyframes mlaFade{to{opacity:1}}
@keyframes mlaPulse{50%{opacity:.35}}
/* Giriş sonrası tam ekran açılış */
#mecIntro{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;background:radial-gradient(ellipse at center,#0d1f3c 0%,#060d1b 70%);animation:mlaFade .3s ease forwards}
#mecIntro .mla-bar{width:240px;height:2px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
#mecIntro .mla-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,#0d9488,#22d3ee);animation:mlaBar 1.5s ease-in-out .35s forwards}
@keyframes mlaBar{to{width:100%}}
@media (prefers-reduced-motion:reduce){.mla i,.mla i.live,.mla b,.mla-fade,#mecIntro .mla-bar span{animation:none!important;opacity:1;transform:none;clip-path:none}#mecIntro .mla-bar span{width:100%}}
.mla.mla-color b{background-image:url(../../mec-logo-transparent.png)}

/* === Kenar çubuğu grupları ve gizleme === */
.s-grup>.s-title{cursor:pointer;display:flex;align-items:center;justify-content:space-between;border-radius:6px;user-select:none}
.s-grup>.s-title:hover{color:#0d9488;background:#f0fdfa}
.s-grup>.s-title::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s;margin-right:2px}
.s-grup.kapali>.s-title::after{transform:rotate(-45deg)}
.s-grup.kapali>.s-item{display:none}
.sidebar,.main{transition:transform .25s ease,margin-left .25s ease}
body.sb-gizli .sidebar{transform:translateX(-100%)}
body.sb-gizli .main{margin-left:0}
.sb-toggle{width:36px;height:36px;border:1px solid #e5e7eb;border-radius:8px;background:#fff;color:#475569;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;margin-right:14px;flex-shrink:0}
.sb-toggle:hover{color:#0d9488;border-color:#99f6e4;background:#f0fdfa}
@media(max-width:768px){body.sb-acik .sidebar{transform:none;box-shadow:4px 0 24px rgba(0,0,0,.15)}}

/* === Geniş tablolar: .main esnek kutuda içeriği kadar genişlemesin → tablo kendi kutusunda kaydırılsın === */
.main{min-width:0}
/* === Tesisat listesi: daraldıkça daha az önemli sütunlar gizlenir
   Sütunlar: 1 seçim, 2 Sıra, 3 No, 4 Tedarikçi, 5 Abone, 6 Abonelik, 7 Kurulu, 8 Bağlantı, 9 Sözleşme, 10 Tüketim, 11 Reaktif, 12 Modem, 13 FW, 14 Optik */
/* Kısaltma hücre içi kutuda: td max-width tablo düzeninde yok sayılabilir */
#tList .t-kisa{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tList th,#tList td{white-space:nowrap}
@media(max-width:1720px){#tList th:nth-child(2),#tList td:nth-child(2),#tList th:nth-child(8),#tList td:nth-child(8),#tList th:nth-child(6),#tList td:nth-child(6){display:none}}
@media(max-width:1440px){#tList th:nth-child(7),#tList td:nth-child(7),#tList th:nth-child(14),#tList td:nth-child(14){display:none}#tList .t-kisa{max-width:170px}}
@media(max-width:1180px){#tList th:nth-child(6),#tList td:nth-child(6),#tList th:nth-child(11),#tList td:nth-child(11){display:none}}
@media(max-width:768px){#tList th:nth-child(4),#tList td:nth-child(4),#tList th:nth-child(9),#tList td:nth-child(9){display:none}#tList .t-kisa{max-width:130px}}
.tl-filtre{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:768px){.tl-filtre>*{flex:1 1 140px;width:auto!important}}
/* ===== Ortak bileşenler (tasarım bütünlüğü) ===== */
.ic{width:16px;height:16px;flex-shrink:0;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic-sm{width:13px;height:13px}.ic-lg{width:20px;height:20px}.ic-xl{width:36px;height:36px;stroke-width:1.5}
.mb{margin-bottom:18px}
.sc.t::before{background:linear-gradient(90deg,#0d9488,#14b8a6)}.sc.b::before{background:linear-gradient(90deg,#2563eb,#60a5fa)}.sc.g::before{background:linear-gradient(90deg,#16a34a,#4ade80)}.sc.a::before{background:linear-gradient(90deg,#d97706,#fbbf24)}.sc.r::before{background:linear-gradient(90deg,#dc2626,#f87171)}
.sc-val small{font-size:14px;font-weight:600;color:#64748b;margin-left:3px}
.sc-val.t{color:#0d9488}.sc-val.b{color:#2563eb}.sc-val.a{color:#d97706}.sc-val.r{color:#dc2626}.sc-val.g{color:#16a34a}
.toolbar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:18px}
.toolbar .fg{margin:0;min-width:150px}.toolbar-r{margin-left:auto;display:flex;gap:8px;align-items:center}
.btn-sm{padding:6px 12px;font-size:12px}.fs-sm,.fi-sm{padding:7px 10px;font-size:12px}
.stabs{display:flex;gap:4px;border-bottom:1px solid #e5e7eb;margin-bottom:18px;overflow-x:auto}
.stab{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;background:none;border:none;border-bottom:2px solid transparent;color:#64748b;font-weight:600;font-size:13px;font-family:inherit;cursor:pointer;white-space:nowrap}
.stab:hover{color:#0f172a}.stab.active{color:#0d9488;border-bottom-color:#0d9488}
.empty{text-align:center;padding:36px 16px;color:#94a3b8}.empty .ic{margin-bottom:8px}
.empty-t{font-weight:600;color:#64748b;font-size:14px}.empty-d{font-size:12px;margin-top:4px}
.tbl-wrap{overflow-x:auto}.tbl-scroll{max-height:320px;overflow-y:auto}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor;vertical-align:middle}.dot-o{background:transparent;border:1.5px solid currentColor}
.dot.t{background:#0d9488}.dot.b{background:#2563eb}.dot.a{background:#d97706}.dot.r{background:#dc2626}.dot.g{background:#16a34a}
.sec-t{font-size:12px;font-weight:700;color:#0d9488;text-transform:uppercase;letter-spacing:.6px;margin:4px 0 10px}
.ch-box{position:relative;height:260px}
.txt-mute{color:#94a3b8}.txt-sm{font-size:12px}.txt-xs{font-size:11px}
.lnk{color:#0d9488;font-weight:600;cursor:pointer}
.mt{margin-top:16px}
.lnk-row{cursor:pointer}.lnk-row:hover td{background:#f8fafc}
.np-row{border:0!important;padding:0!important}
.txt-g{color:#16a34a}.txt-r{color:#dc2626}.txt-a{color:#d97706}.txt-b{color:#2563eb}.txt-t{color:#0d9488}
.hm-legend{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:12px;font-size:10px;color:#94a3b8}.hm-legend i{display:inline-block;width:20px;height:10px;border-radius:2px}
.hm-cell.na,.hm-legend i.na{background:#f1f5f9;cursor:default}.hm-cell.na:hover{transform:none}
.sim-scale{display:flex;justify-content:space-between;font-size:10px;color:#94a3b8}
.hm-cell{aspect-ratio:auto;height:22px}
.cmp-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.cmp-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 6px 4px 10px;border-radius:16px;font-size:11px;font-weight:600;color:#fff}.cmp-chip button{background:none;border:0;color:#fff;cursor:pointer;padding:0;display:inline-flex}
[hidden]{display:none!important}
.bgt-in{max-width:150px}
.live-dot{box-shadow:0 0 0 4px rgba(22,163,74,.2);animation:pulse 1.5s infinite}
.g5c{grid-template-columns:repeat(5,1fr)}
@media(max-width:900px){.g5c{grid-template-columns:repeat(3,1fr)}}

/* Dashboard widget stilleri (pages/haritam.php içinden taşındı) */
.speedo-wrap{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:10px 0}.speedo-val{font-size:28px;font-weight:800;color:#0d9488;margin-top:-25px}.speedo-unit{font-size:11px;color:#94a3b8;font-weight:600}
.glow-kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.glow-kpi{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;text-align:center;position:relative;overflow:hidden;transition:transform 0.2s,box-shadow 0.2s}.glow-kpi:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.08)}.glow-kpi::after{content:"";position:absolute;inset:-2px;border-radius:14px;opacity:0;pointer-events:none}.glow-kpi.gk-green::after{box-shadow:0 0 20px rgba(16,185,129,0.35);opacity:1;animation:glowP 2.5s ease-in-out infinite}.glow-kpi.gk-blue::after{box-shadow:0 0 20px rgba(37,99,235,0.35);opacity:1;animation:glowP 2.5s ease-in-out infinite 0.4s}.glow-kpi.gk-amber::after{box-shadow:0 0 20px rgba(217,119,6,0.35);opacity:1;animation:glowP 2.5s ease-in-out infinite 0.8s}@keyframes glowP{0%,100%{opacity:0.2}50%{opacity:1}}.gk-val{font-size:22px;font-weight:800;margin:6px 0}.gk-label{font-size:10px;color:#94a3b8;font-weight:700;text-transform:uppercase;letter-spacing:0.5px}.gk-change{font-size:11px;font-weight:700;margin-top:4px}
.wave-wrap{height:80px;position:relative;overflow:hidden;border-radius:8px;background:linear-gradient(180deg,rgba(13,148,136,0.03),rgba(13,148,136,0.08))}.wave-svg{position:absolute;bottom:0;width:200%;animation:waveSlide 4s linear infinite}@keyframes waveSlide{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}.wave-val{position:absolute;top:12px;left:16px;font-size:22px;font-weight:800;color:#0d9488}.wave-lbl{position:absolute;top:38px;left:16px;font-size:11px;color:#64748b;font-weight:600}.wave-right{position:absolute;top:12px;right:16px;text-align:right}.wave-right div{font-size:11px;color:#64748b}.wave-right b{color:#0d9488;font-size:13px}
.ticker-container{overflow:hidden;height:32px;background:#f0fdf4;border-radius:8px;border:1px solid #d1fae5;display:flex;align-items:center}.ticker-scroll{display:flex;gap:32px;animation:tickScroll 30s linear infinite;white-space:nowrap;padding:0 16px}@keyframes tickScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}.tick-item{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:#334155}.tick-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.tick-dot.t-on{background:#16a34a;box-shadow:0 0 6px rgba(22,163,74,0.5)}.tick-dot.t-off{background:#dc2626;box-shadow:0 0 6px rgba(220,38,38,0.5)}.tick-dot.t-warn{background:#d97706;box-shadow:0 0 6px rgba(217,119,6,0.5)}
.pulse-map-wrap{position:relative;height:220px;background:linear-gradient(180deg,#f0fdfa,#f8fafc);border-radius:10px;overflow:hidden;border:1px solid #e2e8f0}.pm-grid{position:absolute;inset:0;opacity:0.15}.pm-dot{position:absolute;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%);cursor:pointer;z-index:2}.pm-dot::before{content:"";position:absolute;inset:-5px;border-radius:50%;animation:pmPulse 2s ease-out infinite}.pm-dot.pm-on{background:#16a34a}.pm-dot.pm-on::before{border:2px solid #16a34a}.pm-dot.pm-off{background:#dc2626}.pm-dot.pm-off::before{border:2px solid #dc2626;animation-duration:1s}.pm-dot.pm-warn{background:#d97706}.pm-dot.pm-warn::before{border:2px solid #d97706}@keyframes pmPulse{0%{transform:scale(1);opacity:0.7}100%{transform:scale(2.8);opacity:0}}.pm-label{position:absolute;font-size:8px;font-weight:700;color:#334155;white-space:nowrap;transform:translateX(-50%);margin-top:8px;pointer-events:none}.pm-legend{position:absolute;bottom:8px;right:10px;display:flex;gap:10px;font-size:9px;color:#64748b;font-weight:600;background:#fff;padding:4px 10px;border-radius:6px;border:1px solid #e2e8f0}.pm-legend span{display:flex;align-items:center;gap:3px}.pml-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.dash-cost{text-align:center;padding-top:22px}.dash-big{font-size:34px;font-weight:800;color:#0f172a;letter-spacing:-1px;margin-bottom:6px}
.sa-tab{display:none}
.stg-t{font-weight:600;font-size:13px;color:#0f172a}.stg-sel{width:auto;min-width:120px}
/* ===== Standart boyut normalizasyonu: eski sayfalardaki inline boyutlu düğme/input'lar tek ölçüye iner ===== */
.pg .btn,.modal .btn{border-radius:8px}
.pg .btn[style*="font-size"],.pg .btn[style*="padding"],.modal-body .btn[style*="font-size"],.modal-body .btn[style*="padding"]{font-size:12px!important;padding:6px 12px!important;line-height:1.4!important;min-height:30px}
.pg table .btn[style*="padding"],.pg table .btn[style*="font-size"]{min-height:26px;padding:4px 10px!important;font-size:11px!important}
.pg .fi[style*="padding"],.pg .fs[style*="padding"],.pg .fi[style*="font-size"],.pg .fs[style*="font-size"]{padding:7px 10px!important;font-size:12px!important;border-radius:8px!important}
.pg .card[style*="border-radius"],.pg .sc[style*="border-radius"]{border-radius:14px!important}
.pg .card-h[style*="display:flex"]{gap:8px;flex-wrap:wrap}
.pg .btn-d{font-size:12px;padding:6px 12px}
.ch-box.ch-sm{height:210px}


/* TESISAT-HIZA-V1: tesisat listesi hizalama */
#tList th:nth-child(n+7):nth-child(-n+10),#tList td:nth-child(n+7):nth-child(-n+10){text-align:right}
#tList td:nth-child(n+7):nth-child(-n+10){font-variant-numeric:tabular-nums}
#tList th:nth-child(n+11),#tList td:nth-child(n+11){text-align:center}
#tList td:nth-child(12)>div{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
#tList td:nth-child(14)>div{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}


/* UTIL-V1: yardimci siniflar (kodda kullanilan ama tanimsiz olanlar) */
.fz9{font-size:9px}.fz10{font-size:10px}.fz11{font-size:11px}.fz12{font-size:12px}.fz13{font-size:13px}.fz14{font-size:14px}.fz16{font-size:16px}.fz18{font-size:18px}.fz20{font-size:20px}.fz22{font-size:22px}
.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}
.ta-c{text-align:center}.ta-r{text-align:right}.ta-l{text-align:left}.va-m{vertical-align:middle}
.d-flex{display:flex}.d-iflex{display:inline-flex}.d-ib{display:inline-block}
.ai-c{align-items:center}.ai-s{align-items:flex-start}.jc-sb{justify-content:space-between}.jc-e{justify-content:flex-end}
.flex1{flex:1 1 0;min-width:0}.fwrap{flex-wrap:wrap}.fs0{flex-shrink:0}.ml-auto{margin-left:auto}
.gap4{gap:4px}.gap6{gap:6px}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap16{gap:16px}
.m0{margin:0}.mb4{margin-bottom:4px}.mb6{margin-bottom:6px}.mb8{margin-bottom:8px}.mb10{margin-bottom:10px}.mb12{margin-bottom:12px}
.mt2{margin-top:2px}.mt4{margin-top:4px}.mt6{margin-top:6px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mr4{margin-right:4px}
.p0{padding:0}.p10{padding:10px}.p12{padding:12px}.p16{padding:16px}.p20{padding:20px}.p24{padding:24px}.py8{padding-top:8px;padding-bottom:8px}
.txt-sec{color:#64748b}.txt-ink{color:#1e293b}.txt-ink2{color:#334155}.txt-ink3{color:#475569}.txt-mute2{color:#cbd5e1}
.upper{text-transform:uppercase}.mono-f{font-family:'JetBrainsMono',monospace}.ls05{letter-spacing:.5px}
.cur-p{cursor:pointer}.w100{width:100%}.nowrap{white-space:nowrap}.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovx{overflow-x:auto}.ovh{overflow:hidden}.bb1{border-bottom:1px solid #e5e7eb}
.pos-r{position:relative}.lh15{line-height:1.5}.mw120{min-width:120px}.mw150{min-width:150px}.mw160{min-width:160px}.mw180{min-width:180px}