/* ============================================================
   Yunus Emre Beyaz — home lab portfolio
   Monokrom tasarim sistemi

   RENK KURALI
   Tek bir renk var: beyaz. Hiyerarsi parlaklikla kurulur.
     #fff        aktif / link up / secili
     --txt-2     ikincil bilgi
     --txt-3     bosta, etiket
     --off       kapali port, olu link
   Durum farki renkle degil; dolgu/kontur, duz/kesikli kenarlik,
   check/cross isareti ve hareket ile anlatilir.
   Tek istisna: RJ45 oyunundaki tel renkleri. Orada renk
   dekorasyon degil, oyunun ta kendisi (T568B standardi).

   TIPOGRAFI
   Bastan sona JetBrains Mono. Basliklar buyuk harf + sik takip,
   govde metni normal, etiketler genis harf araligi.
   ============================================================ */

:root{
  /* yuzeyler */
  --bg:#08080a;
  --bg-2:#0b0b0e;
  --surface:#111114;
  --surface-2:#16161a;
  --surface-3:#1e1e23;

  /* kenarliklar */
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.14);
  --line-3:rgba(255,255,255,.28);

  /* metin */
  --txt:#ededee;
  --txt-2:#9c9ca3;
  --txt-3:#6a6a72;
  --txt-4:#45454c;

  /* durum (arayuz) */
  --hi:#ffffff;
  --on:#ffffff;
  --off:#26262c;

  /* DONANIM SINYALLERI — arayuzdeki tek renk kaynagi.
     Ledler ve kablolar gercek ekipmandaki gibi renkli; geri kalan her sey gri. */
  --led-on:#2fe08a;      /* link up            */
  --led-warn:#ffab2d;    /* muzakere / uyari   */
  --led-err:#ff4d4d;     /* hata / engellendi  */
  --cbl-yellow:#f2c230;  /* patch kablosu      */
  --cbl-blue:#2f7fe0;    /* patch kablosu      */
  --cbl-green:#39b96a;   /* patch kablosu      */
  --cbl-console:#7ec8e8; /* cisco konsol kablosu */

  /* metal tonlari — renk sayilmaz, monokrom kuralinin disinda degil icinde */
  --met-1:#8f959d; --met-2:#565b63; --met-3:#2b2e34; --met-ear:#3c3e46;
  --met-gold:#c9a13a; --met-shield:#949aa2; --met-screw:#4a4c53;

  --r-xs:3px; --r-sm:5px; --r:8px; --r-lg:12px;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  --shadow:0 30px 70px -32px rgba(0,0,0,.9);
  --gut:clamp(18px,4.5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--mono);font-size:14.5px;font-weight:400;line-height:1.72;
  letter-spacing:-.005em;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;font-family:var(--mono)}
h1,h2,h3,h4{margin:0;line-height:1.1;font-weight:700;letter-spacing:-.03em}
p{margin:0}
a{color:inherit;text-decoration:none}
b,strong{font-weight:700}
.muted{color:var(--txt-3)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:0}
::selection{background:#fff;color:#000}

/* ---------- arka plan ---------- */
.bg-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 85% 65% at 50% 0%,#000 25%,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 85% 65% at 50% 0%,#000 25%,transparent 80%);
}
.bg-glow{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(760px 420px at 18% -10%,rgba(255,255,255,.055),transparent 68%),
    radial-gradient(680px 400px at 88% 4%,rgba(255,255,255,.035),transparent 65%);
}

/* ---------- asama yonetimi ---------- */
.stage{display:none;position:relative;z-index:1}
body.stage-gate #gate{display:flex}
body.stage-cli  #cli{display:flex}
body.stage-site #site{display:block}
body.stage-gate,body.stage-cli{overflow:hidden;height:100%}

/* ---------- buton ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 20px;border-radius:var(--r-sm);border:1px solid var(--line-2);
  background:transparent;color:var(--txt);
  font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;
  cursor:pointer;white-space:nowrap;
  transition:background .18s,border-color .18s,color .18s,transform .18s;
}
.btn:hover{background:rgba(255,255,255,.06);border-color:var(--line-3);color:#fff}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:1px solid #fff;outline-offset:3px}
.btn-primary{background:#fff;color:#08080a;border-color:#fff;font-weight:700}
.btn-primary:hover{background:#d8d8dc;border-color:#d8d8dc;color:#08080a}
.btn-mini{padding:7px 13px;font-size:10.5px;letter-spacing:.12em}
.btn-ghost{background:transparent}
.btn[disabled]{opacity:.35;cursor:not-allowed;transform:none}

/* ---------- LED ---------- */
.led{
  width:7px;height:7px;border-radius:50%;display:inline-block;flex:none;
  background:var(--off);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)
}
.led-green{background:var(--led-on);box-shadow:0 0 9px rgba(47,224,138,.85)}
.led-amber{background:var(--led-warn);box-shadow:0 0 9px rgba(255,171,45,.8);animation:blink .6s steps(2,end) infinite}
.led-red{background:var(--led-err);box-shadow:0 0 9px rgba(255,77,77,.8)}
.led-off{background:var(--off)}
@keyframes blink{50%{opacity:.2}}
.dot-live{
  width:7px;height:7px;border-radius:50%;background:var(--led-on);display:inline-block;
  box-shadow:0 0 0 0 rgba(47,224,138,.55);animation:pulse 2.4s infinite
}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(47,224,138,0)}100%{box-shadow:0 0 0 0 rgba(47,224,138,0)}}

/* etiket tipografisi */
.sec-tag,.kicker,.gate-brand,.topo-title,.topo-hint,.tf,.rack-legend,
.link-state,.g-stats,.vm-top,.vm-res,.rp-when,.ticket-head,.foot-in,.port-lab,
.idp-role,.idp-contact i,.gate-id-t p{
  text-transform:uppercase;letter-spacing:.14em;font-weight:400
}

/* ============================================================
   ASAMA 1 — GATE / RACK
   ============================================================ */
#gate{min-height:100svh;align-items:center;padding:28px var(--gut);user-select:none;-webkit-user-select:none}
.gate-inner{width:min(1120px,100%);margin:0 auto;display:flex;flex-direction:column;gap:clamp(16px,3.4vh,34px)}
.gate-head{text-align:center}
.gate-brand{
  display:inline-flex;align-items:center;gap:10px;font-size:10.5px;
  color:var(--txt-3);border:1px solid var(--line);padding:7px 15px;border-radius:var(--r-xs)
}
.gate-brand .sep{margin:0 7px;color:var(--txt-4)}
.gate-title{
  font-size:clamp(20px,3.4vw,32px);font-weight:700;margin:22px 0 12px;
  text-transform:uppercase;letter-spacing:-.045em;line-height:1.1
}

/* kapi kimlik seridi — kim oldugu ilk karede belli olsun */
.gate-id{
  display:inline-flex;align-items:center;gap:15px;text-align:left;margin-top:22px;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 18px;background:var(--surface)
}
.gate-id-av{
  width:44px;height:44px;border-radius:var(--r-xs);flex:none;display:grid;place-items:center;
  background:#fff;color:#08080a;font-weight:700;font-size:12px;letter-spacing:.06em
}
.gate-id-t h1{font-size:clamp(16px,2.2vw,21px);text-transform:uppercase;letter-spacing:-.035em}
.gate-id-t p{margin-top:6px;font-size:9.5px;color:var(--txt-3);line-height:1.6}
.gate-acts{display:flex;gap:10px;flex-wrap:wrap}
.gate-direct{
  display:inline-flex;align-items:center;align-self:center;min-height:40px;padding:8px 2px;
  background:none;border:0;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt-4);cursor:pointer;
  text-decoration:underline;text-underline-offset:4px
}
.gate-direct:hover{color:var(--txt-2)}
.gate-direct:focus-visible{outline:1px solid #fff;outline-offset:3px}
.gate-sub{color:var(--txt-2);max-width:62ch;margin:0 auto;font-size:clamp(12.5px,1.4vw,14px);line-height:1.8}
.gate-sub b{color:#fff;font-weight:500;border-bottom:1px solid var(--line-3)}
.gate-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.gate-log{font-size:11px;color:var(--txt-3);min-height:18px;flex:1;min-width:250px;letter-spacing:.02em}
.gate-log b{color:#fff;font-weight:400}

.rack-wrap{position:relative}
.rack{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,var(--surface),var(--bg-2));
  border:1px solid var(--line-2);box-shadow:var(--shadow);touch-action:none
}
.rack svg{width:100%;height:auto;display:block}
.rack-legend{
  display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:14px;
  font-size:10px;color:var(--txt-4)
}
.rack-legend span{display:inline-flex;align-items:center;gap:8px}

/* SVG rack parcalari */
.sw-body{fill:var(--surface-2);stroke:rgba(255,255,255,.1)}
.sw-face{fill:url(#faceGrad)}
.sw-label{font-family:var(--mono);font-size:11px;fill:#c9c9cf;letter-spacing:.1em;font-weight:500}
.sw-sub{font-family:var(--mono);font-size:8.5px;fill:#5a5a62;letter-spacing:.06em}
/* port-slot artik SADECE durum/hit katmani; jak gorseli altindaki
   katmanlardan geliyor. Dolgu verilirse kovugu ve altin pimleri orter. */
.port-slot{fill:none;stroke:none;stroke-width:1.6;pointer-events:none;transition:stroke .16s}
.port-slot:hover{stroke:rgba(255,255,255,.55)}
.port-slot.occupied{cursor:default}
.port-slot.target{stroke:var(--cbl-yellow);stroke-width:1.8}
.rk-bezel{pointer-events:none}
.port-pin{fill:#2e2e35}
.port-lab{font-family:var(--mono);font-size:6.5px;fill:#45454c}
.rack-rail{fill:#0c0c0f;stroke:rgba(255,255,255,.06)}
.rack-screw{fill:#1e1e23;stroke:rgba(255,255,255,.05)}
.cable{fill:none;stroke-linecap:round;pointer-events:none}
.cable-shadow{stroke:rgba(0,0,0,.6);stroke-width:9}
.cable-core{stroke-width:6}
.cable-hi{stroke:rgba(255,255,255,.16);stroke-width:1.4}
.plug{cursor:grab}
.plug:active{cursor:grabbing}
.grabbing .plug{filter:drop-shadow(0 0 11px rgba(242,194,48,.8))}
.hot{animation:hotpulse 1.8s ease-in-out infinite}
@keyframes hotpulse{0%,100%{opacity:.2}50%{opacity:.85}}

/* ============================================================
   ASAMA 2 — TERMINAL
   ============================================================ */
#cli{min-height:100svh;align-items:center;justify-content:center;padding:clamp(10px,3vw,38px)}
.term{
  width:min(1020px,100%);height:min(78svh,720px);display:flex;flex-direction:column;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow);position:relative
}
.term::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px)
}
.term-bar{
  display:flex;align-items:center;gap:12px;padding:10px 13px;
  background:rgba(255,255,255,.02);border-bottom:1px solid var(--line);flex:none
}
.tb-dots{display:flex;gap:6px}
.tb-dots i{width:8px;height:8px;border-radius:50%;background:var(--off)}
.tb-dots i:first-child{background:#5a5a62}
.tb-title{font-size:10.5px;color:var(--txt-4);flex:1;text-align:center;letter-spacing:.1em}
.term-body{
  flex:1;overflow-y:auto;padding:18px clamp(13px,2.4vw,24px);
  font-size:12.5px;line-height:1.65;outline:none;
  scrollbar-width:thin;scrollbar-color:#26262c transparent
}
.term-body::-webkit-scrollbar{width:8px}
.term-body::-webkit-scrollbar-thumb{background:#26262c;border-radius:8px}
.term-out{white-space:pre-wrap;word-break:break-word;color:var(--txt-2)}
/* terminal vurgu skalasi — hepsi gri tonu */
.term-out .c{color:#fff}
.term-out .g{color:var(--led-on)}
.term-out .a{color:var(--led-warn)}
.term-out .v{color:var(--txt-2)}
.term-out .d{color:var(--txt-4)}
.term-out .k{color:#c9c9cf}
.term-out .h{color:#fff}
.term-out .w{color:#fff;font-weight:700}
/* hata: terminaldeki klasik ters video */
.term-out .r{background:var(--led-err);color:#0a0a0c;padding:0 5px}
.term-line{display:flex;flex-wrap:wrap;align-items:baseline;font-size:12.5px}
.term-prompt{color:#fff;margin-right:9px;white-space:nowrap}
.term-input{white-space:pre-wrap;word-break:break-all;color:var(--txt)}
.caret{display:inline-block;width:8px;height:14px;background:#fff;margin-left:1px;animation:blink 1.1s steps(2,end) infinite;vertical-align:-2px}
.term-chips{
  display:flex;gap:7px;padding:10px 13px;flex-wrap:wrap;flex:none;
  border-top:1px solid var(--line);background:rgba(255,255,255,.02)
}
.chip{
  font-size:10.5px;padding:6px 11px;border-radius:var(--r-xs);cursor:pointer;
  border:1px solid var(--line-2);background:transparent;color:var(--txt-3);transition:.18s
}
.chip:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.06)}

/* ============================================================
   ASAMA 3 — SITE
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:14px;
  padding:12px var(--gut);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  background:rgba(8,8,10,.82);border-bottom:1px solid var(--line)
}
.nav-brand{display:flex;align-items:center;gap:12px;flex:none}
.nav-logo{
  width:34px;height:34px;border-radius:var(--r-xs);display:grid;place-items:center;
  font-weight:700;font-size:11px;letter-spacing:.06em;color:#08080a;background:#fff
}
.nav-brand-txt{display:flex;flex-direction:column;font-weight:700;font-size:13px;line-height:1.3;letter-spacing:-.02em}
.nav-brand-txt em{font-style:normal;font-size:9.5px;color:var(--txt-4);letter-spacing:.16em;text-transform:uppercase;font-weight:400}
.nav-links{display:flex;gap:1px;flex:1;justify-content:center;flex-wrap:nowrap;min-width:0}
.nav-links button{
  background:none;border:0;padding:8px 12px;border-radius:var(--r-xs);cursor:pointer;
  font-size:11px;font-weight:400;color:var(--txt-3);transition:.18s;white-space:nowrap;
  text-transform:uppercase;letter-spacing:.1em
}
.nav-links button:hover{color:#fff;background:rgba(255,255,255,.05)}
.nav-links button.on{color:#08080a;background:#fff;font-weight:700}
.nav-right{display:flex;align-items:center;gap:10px;flex:none}
.link-state{
  display:inline-flex;align-items:center;gap:8px;font-size:9.5px;color:var(--txt-2);
  border:1px solid rgba(47,224,138,.3);padding:6px 11px;border-radius:var(--r-xs)
}
.nav-burger{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:8px}
.nav-burger span{width:18px;height:1.5px;background:var(--txt);border-radius:1px;transition:.22s}

/* hero */
.hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(28px,4.5vw,64px);
  align-items:center;padding:clamp(40px,8vh,96px) var(--gut) clamp(32px,6vh,72px);max-width:1480px;margin:0 auto
}
.kicker{
  display:inline-flex;align-items:center;gap:10px;font-size:10px;color:var(--txt-3);
  border:1px solid var(--line);border-radius:var(--r-xs);padding:7px 13px;margin-bottom:26px
}
/* hero kimlik blogu — statik markup, JS calismasa da okunur */
.idp{display:flex;align-items:center;gap:16px}
.idp-av{
  width:52px;height:52px;border-radius:var(--r-xs);flex:none;display:grid;place-items:center;
  background:#fff;color:#08080a;font-weight:700;font-size:13px;letter-spacing:.06em
}
.idp-name{
  font-size:clamp(27px,4.6vw,50px);font-weight:700;text-transform:uppercase;
  letter-spacing:-.05em;line-height:1.02
}
.idp-role{margin-top:8px;font-size:10.5px;color:var(--txt-2)}
.idp-claim{
  margin:22px 0 0;font-size:clamp(17px,2.4vw,26px);font-weight:700;line-height:1.15;
  text-transform:uppercase;letter-spacing:-.04em;color:var(--txt-2)
}
.idp-contact{
  list-style:none;padding:0;margin:0 0 26px;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line)
}
.idp-contact a,.idp-contact span{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:44px;padding:9px 14px;background:var(--bg);font-size:12px;
  transition:background .18s,color .18s
}
.idp-contact a:hover{background:var(--surface);color:#fff}
.idp-contact a:hover b{color:#fff}
.idp-contact a:focus-visible{outline:1px solid #fff;outline-offset:-2px}
.idp-contact i{font-style:normal;font-size:9.5px;color:var(--txt-4);flex:none}
.idp-contact b{font-weight:400;color:var(--txt);word-break:break-word;text-align:right}
/* baslikta tek kelimeyi konturla ayirir - monokrom vurgu */
.grad{
  color:transparent;
  -webkit-text-stroke:1.2px rgba(255,255,255,.72);
  text-stroke:1.2px rgba(255,255,255,.72)
}
@supports not ((-webkit-text-stroke:1px #fff) or (text-stroke:1px #fff)){
  .grad{color:var(--txt-3);-webkit-text-stroke:0}
}
.hero-lead{color:var(--txt-2);font-size:clamp(13px,1.5vw,15px);max-width:58ch;margin:16px 0 24px;line-height:1.8}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.hero-stats{
  list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1px;padding:0;margin:40px 0 0;background:var(--line);border:1px solid var(--line)
}
.hero-stats li{padding:16px;background:var(--bg)}
.hero-stats b{display:block;font-size:22px;font-weight:700;color:#fff;letter-spacing:-.04em}
.hero-stats span{font-size:9.5px;color:var(--txt-4);letter-spacing:.14em;text-transform:uppercase}

/* topoloji karti */
.topo-card{
  border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow)
}
.topo-head,.topo-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 15px;flex-wrap:wrap}
.topo-head{border-bottom:1px solid var(--line)}
.topo-foot{border-top:1px solid var(--line)}
.topo-title,.topo-hint,.tf{font-size:9.5px;color:var(--txt-4)}
.topo-hint{color:#fff}
.tf{display:inline-flex;align-items:center;gap:8px}
.tf b{color:#fff;font-weight:500}
.topo-stage{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;background:var(--bg-2)}
/* dar modda viewBox 340: olcek ~1.0, yazilar gercek CSS px degerinde okunur */
.topo-stage.tc .tp-name{font-size:11px}
.topo-stage.tc .tp-sub,.topo-stage.tc .tp-role{font-size:8.2px}
.topo-info{
  padding:10px 15px;border-top:1px solid var(--line);font-size:9.5px;
  color:var(--txt-4);letter-spacing:.06em;line-height:1.7;min-height:38px
}
.topo-info b{color:#fff;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.topo-stage svg{width:100%;height:auto;display:block}
.tp-link{stroke:rgba(255,255,255,.12);stroke-width:1.4;fill:none;stroke-dasharray:4 5}
.tp-link.up{stroke:rgba(47,224,138,.45);stroke-dasharray:none;stroke-width:1.6}
.tp-node{cursor:pointer}
/* dugumler de rack'teki cihazlarla ayni anodize metal (defs rackkit.js'te) */
.tp-box{fill:url(#rk-face);stroke:rgba(255,255,255,.14);stroke-width:1;transition:stroke .2s}
.tp-node:hover .tp-box{stroke:rgba(255,255,255,.5)}
.tp-node.on .tp-box{stroke:rgba(255,255,255,.55)}
.tp-node.drop .tp-box{stroke:#fff;stroke-width:1.8}
.tp-name{font-family:var(--mono);font-size:8px;fill:#9c9ca3;letter-spacing:.08em;pointer-events:none}
.tp-node.on .tp-name{fill:#fff}
.tp-sub,.tp-role{font-family:var(--mono);font-size:6.4px;fill:#50505a;letter-spacing:.05em;pointer-events:none}
.tp-ico{fill:none;stroke:#6a6a72;stroke-width:1.3;pointer-events:none}
.tp-node.on .tp-ico{stroke:#fff}
.tp-halo{fill:none;stroke:#fff;stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center}
.tp-node.drop .tp-halo{opacity:.5;animation:halo 1.2s ease-out infinite}
@keyframes halo{0%{transform:scale(.97);opacity:.55}100%{transform:scale(1.09);opacity:0}}
.pkt{fill:url(#pktC)}
.pkt.g{fill:url(#pktG)}
.tp-cable{stroke:var(--cbl-console);stroke-width:2.6;fill:none;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(126,200,232,.5))}
.tp-plug{fill:#1e1e23;stroke:var(--cbl-console);stroke-width:1.2}
.tp-console{cursor:grab}

/* panel / kilit */
.panel{position:relative;max-width:1480px;margin:0 auto;padding:clamp(40px,7vh,88px) var(--gut);scroll-margin-top:72px}
.panel-in{transition:opacity .5s ease,filter .5s ease,transform .5s ease}
/* kilit artik icerigi GIZLEMEZ; yalnizca 'kesfedilmedi' der */
.panel.locked .panel-in{opacity:1;filter:none;pointer-events:auto;transform:none}
.panel.locked .sec-head{border-bottom-style:dashed}
.panel:not(.locked) .sec-head{border-bottom-style:solid}
.panel-lock{
  position:absolute;top:clamp(26px,4.4vh,54px);right:var(--gut);z-index:3;
  display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:9px 14px;
  border:1px solid var(--line-2);border-radius:var(--r-xs);background:rgba(8,8,10,.88);
  color:var(--txt-3);cursor:pointer;text-align:left;font-family:var(--mono);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  transition:opacity .45s ease,border-color .18s,color .18s
}
.panel-lock:hover{border-color:var(--line-3);color:#fff}
.panel-lock:focus-visible{outline:1px solid #fff;outline-offset:3px}
.panel-lock b{color:var(--txt-2);font-weight:400}
.panel:not(.locked) .panel-lock{opacity:0;pointer-events:none;visibility:hidden}
.panel.just-open .panel-in{animation:popin .6s cubic-bezier(.2,.8,.25,1)}
@keyframes popin{from{transform:translateY(10px)}to{transform:none}}

.sec-head{margin-bottom:34px;border-bottom:1px solid var(--line);padding-bottom:20px}

/* ---------- bolum cihazi: her bolum bagli oldugu cihazin panelinin altinda ---------- */
.unit{margin:-8px 0 34px}
.unit-svg{width:100%;height:auto;display:block}
.unit .plug{cursor:grab}
.unit.grabbing .plug{cursor:grabbing}
.unit.grabbing{cursor:grabbing}
.unit-cap{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;
  font-size:9.5px;color:var(--txt-4);letter-spacing:.14em;text-transform:uppercase
}
.unit-cap b{color:var(--txt-2);font-weight:500}
.unit-st::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:8px;
  vertical-align:1px;background:var(--led-warn);box-shadow:0 0 8px rgba(255,171,45,.7)
}
.unit.on .unit-st{color:var(--txt-2)}
.unit.on .unit-st::before{background:var(--led-on);box-shadow:0 0 8px rgba(47,224,138,.8)}
.unit-foot{max-width:1480px;margin:0 auto;padding:26px var(--gut) 0}
/* erisim noktasi radyo dalgalari */
.ap-w{fill:none;stroke:#fff;stroke-width:1;opacity:.05}
/* dalgalar yalnizca AP PoE ile beslenip yayina basladiginda */
.unit.ap-live .ap-w{animation:apw 2.4s ease-out infinite}
.unit.ap-live .ap-w2{animation-delay:.4s}
.unit.ap-live .ap-w3{animation-delay:.8s}

/* panel terminali: takilan her kablo buraya log basar */
.u-term{
  margin-top:10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-2);
  padding:10px 13px;font-size:11px;line-height:1.7;color:var(--txt-2)
}
.u-out:empty{display:none}
.u-out:not(:empty){margin-bottom:7px;padding-bottom:7px;border-bottom:1px dashed var(--line)}
.u-ln{white-space:pre-wrap;word-break:break-word}
.u-ln.ok{color:var(--led-on)}
.u-ln.warn{color:var(--led-warn)}
.u-ln.d{color:var(--txt-4)}
.u-ts{color:var(--txt-4)}
.u-hint{color:var(--txt-3)}
.u-hint b{color:#fff;font-weight:500}
.u-prompt{color:#fff;margin-right:4px}

/* kablo takilinca ilgili icerik: yesil serit = link up */
.job.linked,.rp.linked{box-shadow:inset 3px 0 0 var(--led-on)}
.job.linked .job-port{color:var(--led-on);border-color:rgba(47,224,138,.5)}
.skill-card.linked{background:var(--surface);box-shadow:inset 0 3px 0 var(--led-on)}
.vm.linked{background:var(--surface);box-shadow:inset 0 3px 0 var(--led-on)}
.contact-info.linked{box-shadow:0 0 0 1px rgba(47,224,138,.45)}
@keyframes apw{0%{opacity:.55}70%,100%{opacity:.04}}
.sec-tag{display:inline-block;font-size:9.5px;color:var(--txt-4);margin-bottom:16px}
.sec-head h2{font-size:clamp(24px,3.8vw,40px);text-transform:uppercase;letter-spacing:-.045em}
.sec-desc{color:var(--txt-3);margin-top:12px;font-size:12.5px}

.card{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:clamp(18px,2.2vw,26px)}

/* hakkinda */
.about-grid{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1px;
  align-items:stretch;background:var(--line);border:1px solid var(--line)
}
.about-main,.about-side{background:var(--bg);border:0;border-radius:0;padding:clamp(20px,2.4vw,30px)}
.cfg{font-size:12.5px;line-height:1.95;color:var(--txt-2)}
.cfg .k{color:#fff;font-weight:500}
.cfg .s{color:var(--txt)}
.cfg .c{color:var(--txt-4)}
.cfg .h{color:#c9c9cf}
.cfg p{margin:0}
.cfg .txt{
  font-size:13.5px;color:var(--txt);line-height:1.85;margin:18px 0;
  padding:14px 0 14px 18px;border-left:1px solid var(--line-3)
}
.id-card{display:flex;flex-direction:column;gap:18px;border:0;border-radius:0;background:transparent;padding:0}
.id-top{display:flex;align-items:center;gap:14px}
.id-av{
  width:48px;height:48px;border-radius:var(--r-xs);flex:none;display:grid;place-items:center;
  font-weight:700;color:#08080a;font-size:13px;letter-spacing:.06em;background:#fff
}
.id-top div b{display:block;font-size:14px;letter-spacing:-.02em}
.id-top div span{font-size:9.5px;color:var(--txt-4);text-transform:uppercase;letter-spacing:.14em}
.id-rows{display:grid;gap:11px;font-size:11.5px}
.id-rows div{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);padding-bottom:10px}
.id-rows div:last-child{border:0;padding:0}
.id-rows i{font-style:normal;color:var(--txt-4);text-transform:uppercase;letter-spacing:.12em;font-size:9.5px;flex:none}
.id-rows b{font-weight:400;color:var(--txt);text-align:right;word-break:break-word}

/* deneyim */
.timeline{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.job{background:var(--bg);transition:background .25s}
.job:hover,.job.open{background:var(--surface)}
.job-head{display:flex;align-items:center;gap:16px;padding:20px clamp(16px,2vw,26px);cursor:pointer;background:none;border:0;width:100%;text-align:left}
.job-port{
  font-size:9.5px;color:var(--txt-3);border:1px solid var(--line-2);
  border-radius:var(--r-xs);padding:5px 9px;flex:none;letter-spacing:.08em
}
.job.open .job-port{color:#fff;border-color:var(--line-3)}
.job-t{flex:1;min-width:0}
.job-t b{display:block;font-size:15px;letter-spacing:-.025em}
.job-t span{font-size:11.5px;color:var(--txt-3)}
.job-when{font-size:10px;color:var(--txt-3);flex:none;text-align:right;letter-spacing:.06em}
.job-when i{font-style:normal;display:block;color:var(--led-on);font-size:9px;text-transform:uppercase;letter-spacing:.14em}
.job-arrow{flex:none;transition:transform .3s;color:var(--txt-4)}
.job.open .job-arrow{transform:rotate(90deg);color:#fff}
.job-body{max-height:0;overflow:hidden;transition:max-height .45s cubic-bezier(.3,.9,.3,1)}
.job-body ul{margin:0;padding:0 clamp(16px,2vw,26px) 22px 54px;list-style:none;display:grid;gap:12px}
.job-body li{position:relative;font-size:13px;color:var(--txt-2);line-height:1.8}
.job-body li::before{content:"";position:absolute;left:-20px;top:11px;width:8px;height:1px;background:var(--line-3)}
.job-tags{display:flex;gap:6px;flex-wrap:wrap;padding:0 clamp(16px,2vw,26px) 22px 54px}
.tag{font-size:9.5px;padding:4px 9px;border-radius:var(--r-xs);border:1px solid var(--line);color:var(--txt-3);letter-spacing:.08em;text-transform:uppercase}

/* yetenekler */
.skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.skill-card{background:var(--bg);padding:24px;transition:background .25s}
.skill-card:hover{background:var(--surface)}
.sk-head{display:flex;align-items:center;gap:13px;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.sk-ico{width:32px;height:32px;border-radius:var(--r-xs);display:grid;place-items:center;flex:none;border:1px solid var(--line-2)}
.sk-ico svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.5}
.sk-head b{font-size:13.5px;letter-spacing:-.02em}
.sk-head span{display:block;font-size:9px;color:var(--txt-4);letter-spacing:.14em;text-transform:uppercase}
.sk-list{display:grid;gap:14px}
.sk-row{display:grid;gap:7px}
.sk-row-t{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;color:var(--txt-2)}
.sk-row-t i{font-style:normal;font-size:10px;color:var(--txt-4);flex:none}
.bar{height:2px;background:rgba(255,255,255,.08);overflow:hidden}
.bar span{display:block;height:100%;width:0;background:#fff;transition:width 1.1s cubic-bezier(.2,.8,.25,1)}

/* projeler */
.vms{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.vm{background:var(--bg);display:flex;flex-direction:column;transition:background .25s}
.vm:hover{background:var(--surface)}
.vm-top{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line);font-size:9.5px;color:var(--txt-4)}
.vm-top b{color:var(--txt-2);font-weight:400;flex:1;letter-spacing:.08em}
.vm-body{padding:20px 18px;flex:1}
.vm-body h3{font-size:14.5px;margin-bottom:12px;letter-spacing:-.025em;text-transform:uppercase}
.vm-body p{font-size:12.5px;color:var(--txt-2);line-height:1.8}
.vm-meta{display:flex;gap:6px;flex-wrap:wrap;padding:0 18px 20px}
.vm-res{display:flex;gap:16px;padding:12px 18px;border-top:1px solid var(--line);font-size:9.5px;color:var(--txt-4)}
.vm-res em{font-style:normal;color:#fff}

/* egitim */
.restore{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.rp{display:flex;align-items:flex-start;gap:16px;background:var(--bg);padding:20px 22px;transition:background .25s}
.rp:hover{background:var(--surface)}
.rp-ico{width:34px;height:34px;border-radius:var(--r-xs);display:grid;place-items:center;flex:none;border:1px solid var(--line-2)}
.rp-ico svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:1.5}
.rp-t{flex:1;min-width:0}
.rp-t b{display:block;font-size:13.5px;letter-spacing:-.02em}
.rp-t span{font-size:12px;color:var(--txt-3);line-height:1.7}
.rp-when{
  font-size:9.5px;color:var(--txt-2);flex:none;border:1px solid var(--line-2);
  padding:5px 11px;border-radius:var(--r-xs);margin-top:3px
}

/* ---------- LAB ---------- */
.lab-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px}
.lab-tab{
  display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:var(--r-xs);cursor:pointer;
  border:1px solid var(--line-2);background:transparent;font-size:11px;font-weight:400;
  color:var(--txt-3);transition:.2s;text-transform:uppercase;letter-spacing:.1em
}
.lab-tab:hover{border-color:var(--line-3);color:#fff}
.lab-tab.on{background:#fff;border-color:#fff;color:#08080a;font-weight:700}
.lab-tab .ok{color:inherit;font-size:11px}
.lab-stage{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.g-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 22px;border-bottom:1px solid var(--line)}
.g-head h3{font-size:14px;text-transform:uppercase;letter-spacing:-.02em}
.g-head p{font-size:11.5px;color:var(--txt-3);margin-top:6px;line-height:1.7}
.g-head p b{color:#fff;font-weight:500}
.g-stats{display:flex;gap:18px;font-size:9.5px;color:var(--txt-4);flex-wrap:wrap}
.g-stats b{color:#fff;font-weight:700;font-size:12px}
.g-body{padding:clamp(16px,2vw,24px)}
.g-foot{padding:14px 22px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.g-msg{font-size:11px;color:var(--txt-3);flex:1;min-width:200px;line-height:1.6}
.g-msg.ok{color:var(--led-on)}
.g-msg.ok::before{content:"[OK] ";font-weight:700}
.g-msg.bad{color:var(--led-err)}
.g-msg.bad::before{content:"[!!] ";font-weight:700}

/* firewall */
.fw-canvas-wrap{position:relative;border-radius:var(--r-sm);overflow:hidden;background:var(--bg-2);border:1px solid var(--line)}
#fwCanvas{width:100%;height:auto;display:block;touch-action:manipulation}
.fw-keys{
  display:flex;gap:1px;justify-content:center;margin-top:18px;flex-wrap:wrap;
  background:var(--line-2);border:1px solid var(--line-2);border-radius:var(--r-xs);overflow:hidden
}
.key-btn{
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 28px;cursor:pointer;
  border:0;background:var(--bg);font-weight:700;font-size:12px;transition:.15s;min-width:150px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--txt-2)
}
.key-btn small{font-size:9px;color:var(--txt-4);font-weight:400;letter-spacing:.1em}
.key-btn.allow{color:var(--led-on)}
.key-btn.allow::before{content:"\2713";font-size:15px;line-height:1}
.key-btn.deny{color:var(--led-err)}
.key-btn.deny::before{content:"\2715";font-size:15px;line-height:1}
.key-btn.allow:hover,.key-btn.allow.hit{background:var(--led-on);color:#06140c}
.key-btn.deny:hover,.key-btn.deny.hit{background:var(--led-err);color:#180606}
.key-btn:hover small,.key-btn.hit small{color:rgba(0,0,0,.55)}

/* vlan */
.vlan-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:24px}
.vl-pool,.vl-panel{display:grid;gap:6px;align-content:start}
.vl-pool h4,.vl-panel h4{font-size:9.5px;color:var(--txt-4);letter-spacing:.16em;text-transform:uppercase;margin:0 0 6px}
.vl-dev{
  display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:var(--r-xs);cursor:grab;
  border:1px solid var(--line-2);background:var(--bg);font-size:12px;
  transition:.18s;user-select:none;touch-action:none
}
.vl-dev:hover{border-color:#fff;background:var(--surface-2)}
.vl-dev.dragging{opacity:.35}
.vl-dev.placed{opacity:.2;pointer-events:none;border-style:dashed}
.vl-dev i{width:8px;height:8px;border-radius:2px;flex:none}
.vl-dev span{font-size:9.5px;color:var(--txt-4);margin-left:auto;letter-spacing:.1em}
.vl-port{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-xs);min-height:50px;
  border:1px dashed var(--line-2);background:transparent;font-size:10.5px;color:var(--txt-4);transition:.18s
}
.vl-port.over{border-color:#fff;background:rgba(255,255,255,.07);border-style:solid}
.vl-port .vp-id{color:var(--txt-2);flex:none;letter-spacing:.08em}
.vl-port .vp-vlan{padding:4px 9px;border-radius:var(--r-xs);font-size:9px;flex:none;letter-spacing:.1em}
.vl-port .vp-fill{flex:1;text-align:right;font-size:12px}
.vl-port.good{border-color:rgba(47,224,138,.55);border-style:solid;background:rgba(47,224,138,.06)}
.vl-port.good .vp-fill{color:var(--led-on)}
.vl-port.good .vp-fill::before{content:"\2713  "}
.vl-port.bad{border-color:var(--led-err);background:rgba(255,77,77,.07);animation:shake .4s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.vl-ghost{position:fixed;z-index:999;pointer-events:none;opacity:.95;transform:translate(-50%,-50%);background:var(--surface-3)}

/* rj45 */
.rj-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:start}
.rj-slots,.rj-pool{display:grid;gap:6px;align-content:start}
.rj-slot{
  display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--r-xs);min-height:46px;
  border:1px dashed var(--line-2);background:transparent;transition:.16s
}
.rj-slot.over{border-color:#fff;background:rgba(255,255,255,.07)}
.rj-slot .pin{font-size:9.5px;color:var(--txt-4);width:42px;flex:none;letter-spacing:.1em}
.rj-slot.good{border-style:solid;border-color:rgba(47,224,138,.5)}
.rj-slot.bad{border-color:var(--led-err);animation:shake .4s}
.wire{
  display:flex;align-items:center;gap:11px;padding:9px 13px;border-radius:var(--r-xs);cursor:grab;
  border:1px solid var(--line-2);background:var(--bg);font-size:11.5px;
  user-select:none;touch-action:none;transition:.16s;flex:1
}
.wire:hover{border-color:#fff;background:var(--surface-2)}
.wire.placed{opacity:.22;pointer-events:none}
/* tel renkleri gercek kalir: oyunun konusu T568B renk sirasi */
.wire .sw{width:28px;height:12px;border-radius:2px;flex:none;border:1px solid rgba(0,0,0,.5)}
.rj-plug{margin-top:20px;display:flex;justify-content:center}
.rj-note{font-size:10px;color:var(--txt-4);margin-top:12px;text-align:center;letter-spacing:.06em}

/* rozet */
.badge-won{
  display:flex;align-items:center;gap:18px;margin-top:20px;padding:22px 24px;border-radius:var(--r);
  border:1px solid var(--line-3);background:var(--surface-2)
}
.badge-won b{display:block;font-size:13.5px;text-transform:uppercase;letter-spacing:.04em}
.badge-won span{font-size:12px;color:var(--txt-2);line-height:1.75}

/* iletisim */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:22px;align-items:start}
.contact-info{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);padding:0;border-radius:var(--r);overflow:hidden}
.ci-row{display:flex;align-items:center;gap:14px;padding:18px;background:var(--bg);transition:.2s}
.ci-row:hover{background:var(--surface)}
.ci-ico{width:34px;height:34px;border-radius:var(--r-xs);display:grid;place-items:center;flex:none;border:1px solid var(--line-2)}
.ci-ico svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:1.5}
.ci-row div{min-width:0}
.ci-row b{display:block;font-size:13px;word-break:break-word;font-weight:500}
.ci-row span{font-size:9px;color:var(--txt-4);letter-spacing:.16em;text-transform:uppercase}
.ping-box{
  padding:18px;font-size:10.5px;background:var(--bg);min-height:100px;
  white-space:pre-wrap;color:var(--txt-3);line-height:1.75
}
.ping-box .g{color:var(--led-on)}
.ticket{display:grid;gap:15px}
.ticket-head{display:flex;justify-content:space-between;align-items:center;font-size:9.5px;color:var(--txt-4);border-bottom:1px solid var(--line);padding-bottom:14px}
.ticket-head b{color:#fff;font-weight:500}
.ticket label{display:grid;gap:7px;font-size:9.5px;color:var(--txt-4);text-transform:uppercase;letter-spacing:.14em}
.ticket input,.ticket textarea,.ticket select{
  width:100%;padding:12px 14px;border-radius:var(--r-xs);border:1px solid var(--line-2);
  background:var(--bg);color:var(--txt);font-size:13px;transition:.18s;resize:vertical;
  text-transform:none;letter-spacing:-.005em
}
.ticket input::placeholder,.ticket textarea::placeholder{color:var(--txt-4)}
.ticket input:focus,.ticket textarea:focus,.ticket select:focus{outline:none;border-color:#fff}
.ticket input:user-invalid,.ticket textarea:user-invalid{border-color:var(--txt-3);border-style:dashed}
.ticket-note{font-size:10px;color:var(--txt-4);line-height:1.7;letter-spacing:0;text-transform:none}
/* bot tuzagi: ekran disinda, ekran okuyucudan da gizli */
.ticket-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.ticket .btn:disabled{opacity:.55;cursor:progress}
.ticket-note a{color:#fff;text-decoration:underline;text-underline-offset:2px}

/* footer */
.foot{border-top:1px solid var(--line);margin-top:56px}
.foot-in{
  max-width:1480px;margin:0 auto;padding:26px var(--gut);display:flex;align-items:center;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:9.5px;color:var(--txt-4)
}

/* toast */
.toast{
  position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);z-index:200;opacity:0;
  pointer-events:none;transition:.3s cubic-bezier(.2,.8,.25,1);
  background:#fff;color:#08080a;border-radius:var(--r-xs);
  padding:12px 20px;font-size:11px;font-weight:500;box-shadow:var(--shadow);
  max-width:92vw;text-align:center;letter-spacing:.02em
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- responsive ---------- */
@media (max-width:1300px){
  .nav-brand-txt{display:none}
  .link-state{display:none}
}
@media (max-width:1040px){
  .nav-brand-txt{display:flex;font-size:12px;white-space:nowrap}
  .nav-brand-txt em{display:none}
}
@media (max-width:380px){ .nav-brand-txt{display:none} }
@media (max-width:1040px){
  .hero{grid-template-columns:1fr;gap:40px}
  .about-grid,.contact,.vlan-wrap,.rj-wrap{grid-template-columns:1fr}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:var(--bg-2);border-bottom:1px solid var(--line);padding:8px;gap:1px;display:none
  }
  .nav-links.open{display:flex}
  .nav-links button{text-align:left;padding:12px 14px}
  .nav-burger{display:flex}
}
@media (max-width:640px){
  .toast{line-height:1.5;padding:11px 16px}
  .chip{min-height:40px;display:inline-flex;align-items:center}
  .panel-lock{position:static;margin-bottom:18px}
  .panel:not(.locked) .panel-lock{display:none}
  .gate-id{width:100%}
  /* ozet uzarsa bile iletisim ve CTA katlamanin ustunde kalsin */
  .hero-left{display:flex;flex-direction:column}
  .kicker{order:1}.idp{order:2}.idp-claim{order:3}.idp-contact{order:4}
  .hero-cta{order:5}.hero-lead{order:6;margin:18px 0 0}.hero-stats{order:7}
  .topo-hint{font-size:9px}
  .g-head{padding:14px 16px}
  .fw-keys .key-btn{flex:1;min-width:0;padding:14px 10px}
  .lab-tab{font-size:10px;padding:10px 13px}
  .gate-foot{justify-content:center}
  .job-when{display:none}
  .job-body ul,.job-tags{padding-left:24px}
  .term{height:82svh}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .rp{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* =====================[gate]===================== kapi rack'i (boot.js) */
/* cb82ae4 dili: duz koyu yuz, ince kenar, kucuk portlar. Metal govde yok. */
.gt-rail{fill:#0c0c0f;stroke:rgba(255,255,255,.06)}
.gt-hole{fill:#050506;stroke:rgba(255,255,255,.045);stroke-width:.8}
.gt-body{fill:var(--surface-2);stroke:rgba(255,255,255,.1)}
.gt-pah{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1}
.gt-label{font-family:var(--mono);font-size:11px;fill:#c9c9cf;letter-spacing:.1em;font-weight:500}
.gt-sub{font-family:var(--mono);font-size:8.5px;fill:#5a5a62;letter-spacing:.06em}
.gt-lab{font-family:var(--mono);font-size:6.5px;fill:#45454c;text-transform:uppercase;letter-spacing:.14em}
.gt-sfp{fill:#0c0c0f;stroke:rgba(255,255,255,.12)}
.gt-sfp-in{fill:#050506;stroke:rgba(255,255,255,.04);stroke-width:.6}
.gt-con{fill:#0c0c0f;stroke:rgba(255,255,255,.16)}
/* port: cerceve + 8P8C kovugu; dolu portta fisin arkasi, bosta altin pimler */
.gt-jack{fill:#0c0c0f;stroke:rgba(255,255,255,.16);stroke-width:1;transition:stroke .18s}
.gt-insert{fill:#1c1c21;stroke:rgba(255,255,255,.13);stroke-width:.6}
.gt-pins{fill:none;stroke:#b8923a;opacity:.62}
.gt-hit{fill:transparent;pointer-events:none}
.gt-port.is-hot .gt-hit,.gt-port.is-err .gt-hit{pointer-events:all;cursor:pointer}
.gt-port.is-err .gt-hit{cursor:not-allowed}
.gt-port.is-hot:hover .gt-jack{stroke:rgba(255,255,255,.7)}
/* hedef: ince, nabiz gibi atan sari cerceve (eski kapidaki gibi) */
.gt-ring{fill:none;stroke:var(--cbl-yellow);stroke-width:1;opacity:.5;animation:gtHot 1.8s ease-in-out infinite;pointer-events:none}
.gt-port.target .gt-ring{animation:none;opacity:1;stroke-width:1.5;fill:rgba(242,194,48,.07)}
.gt-port.target .gt-jack{stroke:rgba(255,255,255,.55)}
@keyframes gtHot{0%,100%{opacity:.18}50%{opacity:.8}}
.gt-busy .gt-ring{animation:none;opacity:0}
/* kablolar: golge + koyu kenar + govde + parlama (stroke sirasi JS'te) */
.gt-cbl{fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.gt-cbl-sh{stroke:rgba(0,0,0,.5)}
.gt-cbl-hi{stroke:rgba(255,255,255,.32)}
.gt-static,.gt-splug,.gt-bezel{pointer-events:none}
/* takili fisin ustune binen port cercevesi kopyasi: kovuk disini orter */
.gt-jack-fill{fill:#0c0c0f}
.gt-lip{fill:none;stroke:rgba(0,0,0,.7);stroke-width:.5}
.gt-jack-edge{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1;transition:stroke .09s}
.gt-flag-b{fill:#d9dade;stroke:rgba(0,0,0,.35);stroke-width:.4}
.gt-flag-t{font-family:var(--mono);font-size:4.6px;fill:#16161a;letter-spacing:.02em;font-weight:500}
/* oynanabilir fis: eski kapinin sari hale filtresi yerine sadece imlec */
#rack .plug{outline:none}
#rack.grabbing .plug{filter:none;cursor:grabbing}
.gt-focus{fill:none;stroke:none;pointer-events:none}
#rack .plug:focus-visible .gt-focus{stroke:#fff;stroke-width:.8;stroke-dasharray:2 1.6}
.gt-busy .plug{cursor:default}
/* err-disabled: kisa, sonumlu sarsinti (reduced-motion'da JS cagirmaz) */
#rack.gt-shake{animation:gtShake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes gtShake{
  15%{transform:translateX(-4px)}30%{transform:translateX(3.5px)}45%{transform:translateX(-2.5px)}
  60%{transform:translateX(1.8px)}75%{transform:translateX(-.8px)}100%{transform:none}
}
.gt-leg-err{display:inline-flex;align-items:center;gap:8px;color:var(--txt-3)}
/* kapi ekrana sigmazsa buton ve "oyunu atla" ulasilabilir kalsin: ortak
   stage kurali govdeyi kilitliyor, kapi icin dikey kaydirma acilir. Rack'in
   bos yerinden kaydirilabilir; surukleme yalnizca fisten baslar. */
body.stage-gate{overflow-x:hidden;overflow-y:auto;height:auto}
#rack{touch-action:pan-y}
#rack .plug{touch-action:none}
/* genis ekranda kapinin tamami (baslik, rack, buton) tek ekrana sigsin:
   rack yuksekligi = genislik x 430/900, geri kalan icerik ~510px.
   760px tabani: kisa ekranda rack cok kuculmesin (kaydirma acik); 640 alti
   zaten boot.js dar yerlesimi olurdu. */
@media (min-width:700px){
  #gate .gate-inner{width:min(1120px,100%,max(760px,(100vh - 512px) * 2.093))}
  @supports (height:100svh){
    #gate .gate-inner{width:min(1120px,100%,max(760px,(100svh - 512px) * 2.093))}
  }
}

/* =====================[units]==================== bolum panelleri, ariza oyunu (units.js) */
/* surukleme parlamasi yalnizca eldeki fisin halkasindan gelir; butun fislere
   drop-shadow filtresi uygulamak her karede onlarca filtre demek */
.unit.grabbing .plug{filter:none}
.unit .port-slot.dead{cursor:not-allowed}
/* durum satiri port adi tasir: tr buyutme "Gi1/0/1"i "Gİ1/0/1" yapardi */
.unit-st{text-transform:none;letter-spacing:.06em}
.unit-clean{font-style:normal;color:var(--led-on);margin-left:10px;letter-spacing:.1em}
.u-ln.err{color:var(--led-err)}
.u-warn{font-style:normal;color:var(--txt-4)}

/* ariza banner'i: panel ile altyazi arasinda */
.u-fault{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:10px;padding:11px 14px;
  border:1px solid rgba(255,77,77,.45);border-left:3px solid var(--led-err);border-radius:var(--r-sm);
  background:rgba(255,77,77,.055);font-size:11px;line-height:1.65;color:var(--txt-2)
}
.u-fault b{color:var(--led-err);font-weight:700;font-size:10.5px;letter-spacing:.08em;flex:1 0 100%}
.u-fault span{flex:1 1 280px}
.u-fault .btn{border-color:rgba(255,77,77,.55);color:#fff;flex:none}
.u-fault .btn:hover{background:var(--led-err);color:#180606;border-color:var(--led-err)}
.u-wait{font-style:normal;color:var(--led-warn);animation:blink 1s steps(2,end) infinite;flex:none}
.unit.shake .unit-svg{animation:shake .38s}

/* internet kesik: nav rozeti kirmizi, dar ekranda da gorunur */
.link-state.down{color:var(--led-err);border-color:rgba(255,77,77,.6);cursor:pointer;font-weight:700}
.link-state.down .led{animation:blink .5s steps(2,end) infinite}
.nav-right .link-state.down{display:inline-flex}
.tp-link.down{stroke:rgba(255,77,77,.75);stroke-dasharray:3 4;stroke-width:1.6}
.pkt.r{fill:url(#pktR)}
@media (max-width:640px){
  .u-fault{padding:10px 12px}
  .nav-right .link-state.down{font-size:8.5px;padding:5px 8px;gap:6px}
}

/* =====================[cert]===================== lab sertifikasi (games.js) */
/* uc gorev bitince .lab-stage'in altina eklenen panel; arayuz monokrom,
   renk yalnizca led ve sertifikanin kendisinde */
.cert{
  margin-top:20px;border:1px solid var(--line-3);border-radius:var(--r);background:var(--surface);
  overflow:hidden;scroll-margin-top:84px
}
.cert.fresh{animation:certIn .6s cubic-bezier(.2,.8,.25,1) both}
@keyframes certIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cert-top{padding:20px 24px 18px;border-bottom:1px solid var(--line);display:grid;gap:8px}
.cert-kick{
  display:inline-flex;align-items:center;gap:9px;font-size:9.5px;color:var(--txt-2);
  text-transform:uppercase;letter-spacing:.14em
}
.cert-top h3{font-size:clamp(17px,2vw,22px);text-transform:uppercase;letter-spacing:-.02em}
.cert-top p{font-size:12px;color:var(--txt-3);max-width:74ch;line-height:1.75}

.cert-grid{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.7fr);
  grid-template-areas:"form prev" "acts prev";grid-template-rows:auto 1fr;
  gap:0 28px;padding:24px;align-items:start
}
.cert-form{grid-area:form;display:grid;gap:8px;min-width:0}
.cert-lbl{font-size:9.5px;color:var(--txt-2);text-transform:uppercase;letter-spacing:.14em}
.cert-in{
  width:100%;min-height:46px;padding:12px 14px;border-radius:var(--r-xs);border:1px solid var(--line-2);
  background:var(--bg);color:var(--txt);font-size:14px;transition:border-color .18s
}
.cert-in::placeholder{color:var(--txt-4)}
.cert-in:focus{outline:none;border-color:#fff}
.cert-in[aria-invalid="true"]{border-color:var(--led-err)}
.cert-hint{font-size:10px;color:var(--txt-4);line-height:1.6}
.cert-err{font-size:11px;color:var(--led-err);line-height:1.6;min-height:1.6em}
.cert-err:not(:empty)::before{content:"[!!] ";font-weight:700}
.cert-meta{
  margin:4px 0 0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-xs);overflow:hidden
}
.cert-meta div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 12px;background:var(--bg)}
.cert-meta dt{font-size:9.5px;color:var(--txt-4);text-transform:uppercase;letter-spacing:.14em;flex:none}
.cert-meta dd{margin:0;font-size:11.5px;color:var(--txt);text-align:right;min-width:0;overflow-wrap:anywhere}
.cert-acts{grid-area:acts;display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;align-self:start}
.cert-acts .btn{flex:1 1 130px}
.cert-acts .btn[aria-disabled="true"]{opacity:.4}
.cert-acts .btn[aria-disabled="true"]:hover{transform:none}
.cert-prev{grid-area:prev;margin:0;display:grid;gap:10px;min-width:0}
/* kagit hissi: golge + ince kenar; canvas ic cozunurlugu sabit, gorunen genislik akiskan */
.cert-prev canvas{
  display:block;width:100%;height:auto;aspect-ratio:2000/1414;border-radius:2px;background:#f7f6f2;
  box-shadow:0 26px 60px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.1)
}
.cert-prev figcaption{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:9.5px;color:var(--txt-4);text-transform:uppercase;letter-spacing:.14em
}
@media (max-width:1040px){
  .cert-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"form" "prev" "acts";grid-template-rows:auto;gap:18px}
  .cert-acts{margin-top:0}
}
@media (max-width:640px){
  .cert-top{padding:16px}
  .cert-grid{padding:16px}
  .cert-acts .btn{min-height:46px}
}