/* ============================================================
   Gömülü konsol — gerçek arayüzün örnek verilerle çalışan kopyası.
   Kâğıt sayfanın üzerinde duran en büyük mürekkep yüzeyi; sayfadaki
   tek etkileşimli bölge burasıdır, motion bütçesinin çoğu buraya
   harcanır.
   ============================================================ */

.demo-band{border-top:1px solid var(--rule)}
.demo-head{display:flex;align-items:flex-end;gap:32px;flex-wrap:wrap}
.demo-head .lede{margin-top:14px}
.demo-badge{
  display:inline-flex;align-items:center;gap:8px;flex:none;margin-bottom:5px;
  background:var(--verify-100);color:var(--verify);
  font-size:.8125rem;font-weight:600;padding:6px 13px;border-radius:999px;
}
.demo-badge i{width:7px;height:7px;border-radius:50%;background:var(--verify);
  font-style:normal;flex:none;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

/* ------------------------------------------------------ kasa */
.con{
  margin-top:clamp(28px,4vw,44px);
  background:var(--panel);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow-xl);
  color:var(--panel-tx);
  display:grid;grid-template-columns:196px minmax(0,1fr);
  min-height:588px;
}

/* ------------------------------------------------------ yan ray */
.con-side{background:var(--panel-side);border-right:1px solid var(--panel-rule);
  padding:16px 12px;display:flex;flex-direction:column}
.con-brand{display:flex;align-items:center;gap:9px;padding:4px 8px 16px;
  border-bottom:1px solid var(--panel-rule);margin-bottom:14px}
.con-brand svg{width:22px;height:22px;flex:none}
.con-brand b{font-size:.8125rem;font-weight:700;color:#EAF0F6;letter-spacing:.02em;line-height:1.2}
.con-brand b span{color:var(--mint)}
.con-brand small{display:block;font-size:.625rem;color:#5C6878;font-weight:500;
  letter-spacing:.06em;margin-top:2px}

.con-grp{font-size:.625rem;color:#55606F;letter-spacing:.1em;font-weight:600;
  padding:12px 9px 5px}
.con-nav{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 9px;border-radius:7px;border:0;background:none;cursor:pointer;
  color:#93A1B2;font:500 .8125rem/1.3 var(--ui);text-align:left;
  transition:background-color .14s ease,color .14s ease;
}
.con-nav svg{width:15px;height:15px;flex:none;stroke:currentColor;
  stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.con-nav:hover{background:rgba(154,232,192,.07);color:#D4DDE7}
.con-nav[aria-selected=true]{background:rgba(154,232,192,.13);color:#fff}
.con-nav .bdg{margin-left:auto;background:#7E211C;color:#FFD9D6;font-size:.625rem;
  font-weight:600;padding:1px 6px;border-radius:999px;font-family:var(--mono)}

.con-side-foot{margin-top:auto;padding:12px 9px 2px;border-top:1px solid var(--panel-rule);
  font-family:var(--mono);font-size:.625rem;color:#4E5969;line-height:1.7}
.con-side-foot b{color:#6EE7A8;font-weight:400}

/* ------------------------------------------------------- gövde */
.con-main{display:flex;flex-direction:column;min-width:0}
.con-top{
  display:flex;align-items:center;gap:14px;padding:13px 20px;
  border-bottom:1px solid var(--panel-rule);flex:none;
}
.con-top h4{margin:0;font:600 .875rem/1 var(--ui);color:#EAF0F6}
.con-live{
  margin-left:auto;display:flex;align-items:center;gap:8px;flex:none;
  font-family:var(--mono);font-size:.6875rem;color:#7F8CA0;
}
.con-live .dot{width:6px;height:6px;border-radius:50%;background:#6EE7A8;
  animation:pulse 1.8s ease-in-out infinite}
.con-live b{color:var(--mint);font-weight:400;font-variant-numeric:tabular-nums}

.con-view{padding:20px;flex:1;min-width:0;display:none}
.con-view.on{display:block}

/* ---------------------------------------------------- istatistik */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.tile{background:var(--panel-2);border-radius:9px;padding:13px 15px;min-width:0}
.tile .lbl{font-size:.6875rem;color:#7F8CA0;font-weight:500;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.tile .val{font-family:var(--mono);font-size:1.375rem;color:#EAF0F6;margin-top:5px;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tile .val.cy{color:var(--mint)}
.tile .val.rd{color:#E98A84}
.tile .sub{font-size:.625rem;color:#5C6878;margin-top:3px;font-family:var(--mono)}

/* ------------------------------------------------------- grafik */
.chart-box{margin-top:16px;background:var(--panel-2);border-radius:9px;padding:15px 17px}
.chart-hd{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.chart-hd h5{margin:0;font:600 .75rem/1 var(--ui);color:#C9D2DD}
.chart-hd span{font-family:var(--mono);font-size:.625rem;color:#5C6878;margin-left:auto}
.spark{width:100%;height:82px;display:block;overflow:visible}
.spark .ln{fill:none;stroke:var(--mint);stroke-width:1.8;stroke-linejoin:round;
  stroke-linecap:round;stroke-dasharray:1400;stroke-dashoffset:1400}
.spark.drawn .ln{animation:draw 1.5s cubic-bezier(.4,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.spark .ar{fill:url(#mintGrad);opacity:0;transition:opacity .7s ease .6s}
.spark.drawn .ar{opacity:.5}
.spark .gl{stroke:#1E2937;stroke-width:1}
.spark .xl{fill:#4E5969;font-family:var(--mono);font-size:8px}

/* -------------------------------------------------- ısı haritası */
.heat{display:grid;grid-template-columns:34px repeat(24,minmax(0,1fr));gap:2px;margin-top:4px}
.heat .hr{font-family:var(--mono);font-size:.5625rem;color:#4E5969;
  display:flex;align-items:center}
.heat .hc{aspect-ratio:1;border-radius:2px;background:#18222F;
  opacity:0;transform:scale(.7);transition:opacity .3s ease,transform .3s ease}
.heat.lit .hc{opacity:1;transform:none}
.heat .hx{font-family:var(--mono);font-size:.5rem;color:#4E5969;text-align:center;
  padding-top:3px}

/* --------------------------------------------------------- liste */
.tops{margin-top:4px}
.top-row{display:grid;grid-template-columns:minmax(0,1fr) 62px;gap:12px;
  align-items:center;padding:7px 0}
.top-row .nm{font-family:var(--mono);font-size:.75rem;color:#C9D2DD;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.top-row .nm i{font-style:normal;color:#5C6878}
.top-row .n{font-family:var(--mono);font-size:.6875rem;color:#7F8CA0;text-align:right;
  font-variant-numeric:tabular-nums}
.top-bar{grid-column:1/-1;height:3px;border-radius:2px;background:#1E2937;overflow:hidden}
.top-bar i{display:block;height:100%;background:var(--mint);width:0;
  transition:width .9s cubic-bezier(.4,0,.2,1)}

.cols2{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:11px;margin-top:11px}

/* --------------------------------------------------------- arama */
.srch{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.srch-in{
  flex:1;min-width:190px;display:flex;align-items:center;gap:9px;
  background:var(--panel-2);border:1px solid var(--panel-rule);border-radius:8px;
  padding:0 13px;transition:border-color .15s ease;
}
.srch-in:focus-within{border-color:var(--mint)}
.srch-in svg{width:14px;height:14px;flex:none;stroke:#5C6878;stroke-width:1.9;fill:none}
.srch-in input{
  flex:1;min-width:0;background:none;border:0;outline:none;padding:10px 0;
  color:#EAF0F6;font-family:var(--mono);font-size:.8125rem;
}
.srch-in input::placeholder{color:#4E5969}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.chip{
  background:var(--panel-2);border:1px solid var(--panel-rule);color:#93A1B2;
  font:500 .6875rem/1 var(--ui);padding:7px 12px;border-radius:999px;cursor:pointer;
  transition:all .14s ease;
}
.chip:hover{border-color:#3A4658;color:#D4DDE7}
.chip[aria-pressed=true]{background:rgba(154,232,192,.14);border-color:rgba(154,232,192,.45);color:var(--mint)}

.srch-meta{margin-top:13px;padding-bottom:9px;border-bottom:1px solid var(--panel-rule);
  font-family:var(--mono);font-size:.6875rem;color:#5C6878}
.srch-meta b{color:#C9D2DD;font-weight:400}

.res{max-height:290px;overflow-y:auto;scrollbar-width:thin;
  scrollbar-color:#2C3848 transparent}
.res::-webkit-scrollbar{width:7px}
.res::-webkit-scrollbar-thumb{background:#2C3848;border-radius:4px}
.res-row{
  display:grid;grid-template-columns:58px minmax(0,1fr) 78px;gap:11px;align-items:center;
  padding:8px 6px;border-bottom:1px solid rgba(38,48,62,.5);cursor:pointer;
  border-radius:5px;transition:background-color .12s ease;
}
.res-row:hover{background:rgba(154,232,192,.06)}
.res-row .tm{font-family:var(--mono);font-size:.6875rem;color:#5C6878}
.res-row .bd{font-family:var(--mono);font-size:.6875rem;color:#C9D2DD;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res-row .bd mark{background:rgba(154,232,192,.26);color:#fff;border-radius:2px;padding:0 2px}
.res-row .bd i{font-style:normal;color:#5C6878}
.res-row .ac{font-family:var(--mono);font-size:.625rem;text-align:right}
.res-row .ac.ok{color:#6EE7A8}
.res-row .ac.no{color:#E98A84}
.res-empty{padding:44px 10px;text-align:center;color:#5C6878;font-size:.8125rem}

/* -------------------------------------------------------- detay */
.det{margin-top:13px;background:var(--panel-2);border-radius:9px;padding:15px 17px;
  border-left:2px solid var(--mint)}
.det h6{margin:0 0 11px;font:600 .75rem/1 var(--ui);color:#EAF0F6}
.det dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 18px}
.det dt{font-size:.6875rem;color:#5C6878}
.det dd{margin:0;font-family:var(--mono);font-size:.6875rem;color:#C9D2DD;
  overflow-wrap:anywhere}

/* --------------------------------------------------------- arşiv */
.arc-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.con-btn{
  background:var(--mint);color:#07211A;border:0;border-radius:7px;cursor:pointer;
  font:600 .75rem/1 var(--ui);padding:10px 17px;flex:none;
  transition:background-color .15s ease,opacity .15s ease;
}
.con-btn:hover{background:#B4EFD2}
.con-btn:disabled{opacity:.55;cursor:default}
.arc-note{font-family:var(--mono);font-size:.6875rem;color:#5C6878}

.arc{border-top:1px solid var(--panel-rule)}
.arc-row{
  display:grid;grid-template-columns:96px minmax(0,1fr) 84px 92px;gap:14px;align-items:center;
  padding:11px 4px;border-bottom:1px solid rgba(38,48,62,.5);
}
.arc-row .dy{font-family:var(--mono);font-size:.75rem;color:#EAF0F6}
.arc-row .hs{font-family:var(--mono);font-size:.6875rem;color:#5C6878;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arc-row .hs b{color:#8FA0B4;font-weight:400}
.arc-row .ct{font-family:var(--mono);font-size:.6875rem;color:#7F8CA0;text-align:right;
  font-variant-numeric:tabular-nums}
.arc-row .st{font:600 .6875rem/1 var(--ui);display:flex;align-items:center;gap:6px;
  justify-content:flex-end;color:#4E5969}
.arc-row .st svg{width:11px;height:11px;stroke-width:2.2;fill:none;stroke-linecap:round;
  stroke-linejoin:round}
.arc-row .st.wait{color:var(--mint)}
.arc-row .st.wait svg{animation:spin .8s linear infinite;stroke:currentColor}
@keyframes spin{to{transform:rotate(360deg)}}
.arc-row .st.ok{color:#6EE7A8}
.arc-row .st.ok svg{stroke:currentColor}
.arc-sum{
  margin-top:15px;padding:13px 16px;border-radius:9px;background:rgba(110,231,168,.09);
  border:1px solid rgba(110,231,168,.22);color:#6EE7A8;font-size:.8125rem;font-weight:600;
  display:none;align-items:center;gap:10px;
}
.arc-sum.on{display:flex;animation:rise .4s cubic-bezier(.2,.8,.3,1)}
.arc-sum span{font-family:var(--mono);font-size:.6875rem;color:#7F8CA0;font-weight:400;
  margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes rise{from{opacity:0;transform:translateY(7px)}}

/* ------------------------------------------------------- tehdit */
.thr-row{
  display:grid;grid-template-columns:minmax(0,1fr) 66px 84px;gap:13px;align-items:center;
  padding:11px 4px;border-bottom:1px solid rgba(38,48,62,.5);
}
.thr-row .sg{font-family:var(--mono);font-size:.75rem;color:#EAF0F6;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thr-row .sg small{display:block;font-family:var(--ui);font-size:.625rem;color:#5C6878;
  margin-top:3px;font-weight:500}
.thr-row .ct{font-family:var(--mono);font-size:.75rem;color:#E98A84;text-align:right;
  font-variant-numeric:tabular-nums}
.thr-row .sv{font:600 .625rem/1 var(--ui);text-align:right;padding:4px 9px;border-radius:4px;
  justify-self:end}
.sv.k{background:rgba(233,138,132,.15);color:#E98A84}
.sv.y{background:rgba(233,200,132,.14);color:#E9C884}
.sv.d{background:rgba(143,160,180,.13);color:#8FA0B4}

/* --------------------------------------------------- canlı akış */
.stream{margin-top:11px;background:var(--panel-2);border-radius:9px;padding:13px 15px;
  height:158px;overflow:hidden;position:relative}
.stream::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34px;
  background:linear-gradient(to bottom,transparent,var(--panel-2));pointer-events:none}
.stream .sl{font-family:var(--mono);font-size:.6875rem;color:#8FA0B4;padding:2.5px 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  animation:slide .34s cubic-bezier(.2,.8,.3,1)}
.stream .sl b{color:#C9D2DD;font-weight:400}
.stream .sl i{font-style:normal;color:#5C6878}
.stream .sl .no{color:#E98A84}
@keyframes slide{from{opacity:0;transform:translateY(-9px)}}

/* ------------------------------------------------------- duyarlı */
@media(max-width:860px){
  .con{grid-template-columns:minmax(0,1fr);min-height:0}
  .con-side{border-right:0;border-bottom:1px solid var(--panel-rule);padding:12px}
  .con-brand{padding-bottom:12px;margin-bottom:10px}
  .con-grp,.con-side-foot{display:none}
  .con-side{display:block}
  .con-navs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .con-navs::-webkit-scrollbar{display:none}
  .con-nav{width:auto;flex:none;white-space:nowrap}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols2{grid-template-columns:minmax(0,1fr)}
  .heat{display:none}
  .arc-row{grid-template-columns:minmax(0,1fr) 84px;gap:8px 12px}
  .arc-row .hs{grid-column:1/-1;order:3}
  .arc-row .ct{display:none}
  .res-row{grid-template-columns:52px minmax(0,1fr);gap:9px}
  .res-row .ac{display:none}
  .det dl{grid-template-columns:minmax(0,1fr)}
  .det dt{margin-top:6px}
}
@media(max-width:420px){
  .con-view{padding:14px}
  .tiles{grid-template-columns:minmax(0,1fr)}
}

@media(prefers-reduced-motion:reduce){
  .spark .ln{stroke-dashoffset:0;animation:none}
  .spark .ar{opacity:.5;transition:none}
  .heat .hc{opacity:1;transform:none;transition:none}
  .demo-badge i,.con-live .dot{animation:none}
  .stream .sl{animation:none}
  .arc-row .st.wait svg{animation:none}
}

/* --------------------------------------------------- kullanıcılar */
.usr-row{
  display:grid;grid-template-columns:minmax(0,1fr) 104px 74px 66px;gap:13px;align-items:center;
  padding:9px 4px;border-bottom:1px solid rgba(38,48,62,.5);
}
.usr-row.hd{border-bottom-color:var(--panel-rule);padding-bottom:7px}
.usr-row.hd span{font:600 .625rem/1 var(--ui);color:#55606F;letter-spacing:.06em}
.usr-row .who{font-family:var(--mono);font-size:.75rem;color:#EAF0F6;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.usr-row .who small{display:block;font-size:.625rem;color:#5C6878;margin-top:2px}
.usr-row .vol{min-width:0}
.usr-row .vol b{display:block;font-family:var(--mono);font-size:.6875rem;color:#C9D2DD;
  font-weight:400;font-variant-numeric:tabular-nums}
.usr-row .vol i{display:block;height:3px;border-radius:2px;background:#1E2937;margin-top:4px;
  overflow:hidden}
.usr-row .vol i em{display:block;height:100%;background:var(--mint);width:0;
  transition:width .9s cubic-bezier(.4,0,.2,1)}
.usr-row .num{font-family:var(--mono);font-size:.6875rem;color:#7F8CA0;text-align:right;
  font-variant-numeric:tabular-nums}
.usr-row .num.rd{color:#E98A84}

/* ------------------------------------------------------ FortiGate */
.fgt-hd{display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  background:var(--panel-2);border-radius:9px;padding:14px 17px}
.fgt-hd .mdl{font:600 .875rem/1.3 var(--ui);color:#EAF0F6}
.fgt-hd .mdl small{display:block;font-family:var(--mono);font-size:.625rem;color:#5C6878;
  margin-top:4px;font-weight:400}
.fgt-hd .up{margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  font:600 .6875rem/1 var(--ui);color:#6EE7A8}
.fgt-hd .up i{width:6px;height:6px;border-radius:50%;background:#6EE7A8;font-style:normal}

.gauges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:11px}
.gauge{background:var(--panel-2);border-radius:9px;padding:15px 12px;text-align:center}
.gauge svg{width:78px;height:78px;margin:0 auto 9px;display:block;transform:rotate(-90deg)}
.gauge .bg{fill:none;stroke:#1E2937;stroke-width:7}
.gauge .fg{fill:none;stroke:var(--mint);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:220;stroke-dashoffset:220;
  transition:stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1)}
.gauge .fg.wr{stroke:#E9C884}
.gauge .lbl{font-size:.6875rem;color:#7F8CA0;font-weight:500}
.gauge .val{font-family:var(--mono);font-size:1.125rem;color:#EAF0F6;margin-top:3px;
  font-variant-numeric:tabular-nums}

.iface{margin-top:11px;background:var(--panel-2);border-radius:9px;padding:13px 17px}
.if-row{display:grid;grid-template-columns:84px 62px minmax(0,1fr) auto;gap:12px;
  align-items:center;padding:7px 0;border-bottom:1px solid rgba(38,48,62,.5)}
.if-row:last-child{border-bottom:0}
.if-row .nm{font-family:var(--mono);font-size:.75rem;color:#EAF0F6}
.if-row .st{font:600 .625rem/1 var(--ui);display:inline-flex;align-items:center;gap:6px}
.if-row .st i{width:6px;height:6px;border-radius:50%;font-style:normal}
.if-row .st.up{color:#6EE7A8}.if-row .st.up i{background:#6EE7A8}
.if-row .st.dn{color:#5C6878}.if-row .st.dn i{background:#3A4658}
.if-row .ip{font-family:var(--mono);font-size:.6875rem;color:#7F8CA0;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.if-row .tp{font-family:var(--mono);font-size:.6875rem;color:#C9D2DD;text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}

.vpn-row{display:grid;grid-template-columns:minmax(0,1fr) 96px 78px 84px;gap:12px;
  align-items:center;padding:8px 4px;border-bottom:1px solid rgba(38,48,62,.5)}
.vpn-row .u{font-family:var(--mono);font-size:.75rem;color:#EAF0F6;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vpn-row .m{font-family:var(--mono);font-size:.6875rem;color:#7F8CA0;
  font-variant-numeric:tabular-nums}
.vpn-row .m.r{text-align:right}
.bak{margin-top:11px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:rgba(110,231,168,.07);border:1px solid rgba(110,231,168,.18);
  border-radius:9px;padding:12px 16px;font:500 .75rem/1.4 var(--ui);color:#6EE7A8}
.bak span{font-family:var(--mono);font-size:.6875rem;color:#7F8CA0;margin-left:auto}

@media(max-width:860px){
  .gauges{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gauge svg{width:62px;height:62px}
  .usr-row{grid-template-columns:minmax(0,1fr) 88px 58px;gap:9px}
  .usr-row .num.blk{display:none}
  .if-row{grid-template-columns:76px 56px minmax(0,1fr);gap:9px}
  .if-row .tp{display:none}
  .vpn-row{grid-template-columns:minmax(0,1fr) 78px}
  .vpn-row .m.d{display:none}
}
@media(prefers-reduced-motion:reduce){
  .gauge .fg,.usr-row .vol i em{transition:none}
}