/* =============================================================================
   DevNet DataCenter • Status UI Styles (HTML/CSS only)
   - Kartlar: üstte metrik şerit, altta bilgi + durum, en altta sparkline
   - Duruma göre renk: UP / WARN / DOWN
   - Tam ekran: sıkı layout, auto-fit grid; içerik taşmaz
   ========================================================================== */

/* ========== 0) Tema / Token'lar ========== */
:root{
  /* Renkler */
  --bg:#0a192f; --bg2:#112240;
  --panel:#0f1e37; --panel2:#0e1c33;
  --ink:#e6f1ff; --soft:#a8b2d1;
  --accent:#64ffda; --accent2:#23d6b0;
  --border:rgba(100,255,218,.15);

  /* Durum renkleri */
  --ok:#34d399;       /* UP   */
  --warn:#fbbf24;     /* WARN */
  --down:#f87171;     /* DOWN */

  /* Köşe / gölge / halka */
  --radius:12px; --radius-lg:16px;
  --elev-1:0 6px 18px rgba(0,0,0,.22);
  --elev-2:0 10px 28px rgba(0,0,0,.28);
  --elev-3:0 16px 36px rgba(0,0,0,.34);
  --ring:0 0 0 3px rgba(100,255,218,.25);

  /* Hareket */
  --dur-1:.16s; --dur-2:.28s; --dur:.20s;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* Dikey ritim */
  --header-h:64px;
  --space-1:6px; --space-2:10px; --space-3:14px;
  --space-4:18px; --space-5:24px; --space-6:32px;
  --lead:1.55; --lead-tight:1.35;
}

/* ========== 1) Reset / Temel ========== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  margin:0; color:var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(100,255,218,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(35,214,176,.08), transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  position:relative;
}
body::before{
  /* grid doku */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:28px 28px, 28px 28px;
  mask-image: radial-gradient(1200px 600px at 50% 10%, rgba(0,0,0,.6), rgba(0,0,0,1) 70%);
}
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:calc(var(--radius) - 2px) }
::selection{ background:rgba(100,255,218,.25) }

.container{ width:min(1200px,92vw); margin-inline:auto; padding-inline:clamp(4px,1vw,8px) }
.page{ padding:var(--space-5) 0 var(--space-6) }

h2,h3{ margin:var(--space-4) 0 var(--space-2); line-height:var(--lead-tight) }
h2{ font-size:clamp(1.10rem,1.2vw + .9rem,1.35rem); font-weight:800 }
h3{ font-size:clamp(1.00rem,1vw + .75rem,1.20rem); font-weight:700 }
.subtitle{ font-size:.95rem; color:var(--soft); letter-spacing:.2px }

/* ========== 2) Üst Şerit (Header) ========== */
.site-header{
  position:sticky; top:0; z-index:20;
  background:
    linear-gradient(135deg, rgba(10,25,47,.72), rgba(17,34,64,.72)),
    radial-gradient(1000px 500px at 10% 0%, rgba(100,255,218,.09), transparent 60%),
    linear-gradient(135deg,var(--bg) 0%, var(--bg2) 100%);
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 0 rgba(255,255,255,.04), 0 16px 24px rgba(0,0,0,.22);
  backdrop-filter:blur(8px) saturate(1.05);
  -webkit-backdrop-filter:blur(8px) saturate(1.05);
  isolation:isolate;
}
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:.35;
}
.head-inner{
  min-height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-block:.5rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.2px; color:var(--ink); text-decoration:none }
.brand-dot{ width:14px; height:14px; fill:var(--accent); filter:drop-shadow(0 0 10px rgba(100,255,218,.7)) }
.brand .accent{ color:var(--accent) }

/* üst menü butonları */
.head-actions{ display:flex; gap:8px; flex-wrap:wrap }
.btn-home{
  --bg0:rgba(100,255,218,.08); --bg1:rgba(100,255,218,.14);
  --bd:rgba(100,255,218,.35);  --glow:0 10px 24px rgba(100,255,218,.18);
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .9rem; border-radius:12px; text-decoration:none;
  font-weight:700; letter-spacing:.2px; color:var(--ink);
  background:linear-gradient(180deg, var(--bg1), var(--bg0));
  border:1px solid var(--bd);
  box-shadow:0 2px 0 0 rgba(255,255,255,.05) inset, var(--glow);
  backdrop-filter:blur(8px) saturate(1.05);
  -webkit-backdrop-filter:blur(8px) saturate(1.05);
  transition:transform .15s var(--ease), box-shadow .2s var(--ease),
             color .15s var(--ease), border-color .2s var(--ease),
             background .2s var(--ease);
}
.btn-home i{ font-size:1rem; opacity:.95; transform:translateY(0); transition:transform .15s var(--ease) }
@media (pointer:fine){
  .btn-home:hover{
    transform:translateY(-1px); color:var(--accent);
    border-color:rgba(100,255,218,.55);
    background:linear-gradient(180deg, rgba(100,255,218,.18), rgba(100,255,218,.10));
    box-shadow:0 0 0 6px rgba(100,255,218,.08), 0 14px 30px rgba(100,255,218,.25);
  }
  .btn-home:hover i{ transform:translateY(-1px) }
}
.btn-home:active{ transform:translateY(0) scale(.99) }
.btn-home:focus-visible{ box-shadow:0 0 0 3px rgba(100,255,218,.35), var(--glow) }
.btn-home.is-accent{
  color:#0a192f; background:linear-gradient(90deg, var(--accent2), var(--accent));
  border-color:transparent; box-shadow:0 10px 24px rgba(35,214,176,.22);
}
@media (pointer:fine){ .btn-home.is-accent:hover{ color:#0a192f; filter:saturate(1.05) } }

/* ========== 3) Duyurular (Header altı) ========== */
.annc-wrap{
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.02); container-type:inline-size;
}
.annc{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--border) }
.annc:last-child{ border-bottom:0 }
.annc .msg{ color:var(--ink); opacity:.95 }
.annc .when{ color:var(--soft); font-size:.9rem }
.annc .tag{
  margin-left:auto; display:inline-flex; align-items:center; gap:.45rem;
  font-weight:800; font-size:.8rem; letter-spacing:.2px;
  padding:.22rem .6rem; line-height:1; border-radius:999px;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); color:var(--ink);
}
/* up/ok, warn, down/danger renkleri */
.annc .dot{ width:10px; height:10px; border-radius:50%; box-shadow:inset 0 0 0 4px rgba(255,255,255,.02) }
.annc.ok   .dot, .annc.up     .dot{ background:var(--ok) }
.annc.warn .dot               { background:var(--warn) }
.annc.down .dot, .annc.danger .dot{ background:var(--down) }
.annc.ok   .tag, .annc.up     .tag{ color:var(--ok) }
.annc.warn .tag               { color:var(--warn) }
.annc.down .tag, .annc.danger .tag{ color:var(--down) }

/* ========== 4) Toolbar (arama + filtre) ========== */
.toolbar{
  position:sticky; top:calc(var(--header-h) + 1px); z-index:9;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  margin:var(--space-3) 0; padding:10px;
  background:rgba(17,34,64,.55);
  border:1px solid var(--border); border-radius:12px;
  backdrop-filter:blur(6px) saturate(1.02);
  -webkit-backdrop-filter:blur(6px) saturate(1.02);
  box-shadow:0 12px 24px rgba(0,0,0,.22);
}
.search{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--border); background:var(--panel2);
  border-radius:12px; padding:.45rem .6rem
}
.search input{
  background:transparent; border:0; outline:0; color:var(--ink);
  min-width:240px; width:clamp(160px,28vw,320px); line-height:1.2;
}
.filters{
  display:flex; flex-wrap:nowrap; gap:8px; overflow:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  mask-image:linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
}
.filters::-webkit-scrollbar{ display:none }
.filters::before,.filters::after{ content:""; display:block; width:14px; flex:0 0 14px }
.chip{
  background:#152845; color:var(--ink);
  border:1px solid rgba(100,255,218,.25);
  padding:.45rem .8rem; border-radius:999px; white-space:nowrap;
  display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  transition: box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.chip.is-active{
  color:var(--accent);
  box-shadow:0 0 0 3px rgba(100,255,218,.15) inset, 0 8px 16px rgba(0,0,0,.18);
  border-color:rgba(100,255,218,.45);
}

/* ========== 5) Nameserver Kartları ========== */
.ns-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-bottom:22px;
}
.ns-card{
  position:relative; z-index:0; overflow:hidden;
  border:1px solid var(--border); border-radius:14px; background:var(--panel2);
  padding:14px; box-shadow:var(--elev-2);
  content-visibility:auto; contain-intrinsic-size:220px;
}
.ns-card::before{
  content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none; z-index:-1;
  border:1px solid transparent;
  background:
    linear-gradient(var(--panel2), var(--panel2)) padding-box,
    linear-gradient(120deg, rgba(100,255,218,.55), rgba(100,255,218,0) 40%, rgba(100,255,218,.45)) border-box;
}
.ns-head{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.ns-title{ font-weight:800; color:var(--ink); min-width:0 }
.badge.status{
  padding:.2rem .55rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  font-weight:800; font-size:.75rem;
  background:rgba(255,255,255,.06);
  display:inline-flex; align-items:center; gap:6px;
}
.badge.status.up  { color:var(--ok);   border-color:rgba(52,211,153,.45) }
.badge.status.warn{ color:var(--warn); border-color:rgba(251,191,36,.45) }
.badge.status.down{ color:var(--down); border-color:rgba(248,113,113,.45) }
.badge.status.up::before,
.badge.status.warn::before,
.badge.status.down::before{ content:""; width:8px; height:8px; border-radius:50%; display:inline-block }
.badge.status.up::before{ background:var(--ok) }
.badge.status.warn::before{ background:var(--warn) }
.badge.status.down::before{ background:var(--down) }

.ns-meta{ display:flex; gap:18px; margin-top:8px; color:var(--soft); flex-wrap:wrap }
.ns-meta span{ opacity:.75; margin-right:4px }
.ns-meta strong{ color:var(--ink); font-weight:800 }

.ns-bar{
  position:relative; height:10px; border-radius:999px;
  background:#0d1a2f; border:1px solid var(--border);
  overflow:hidden; margin-top:10px
}
.ns-bar > span{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:linear-gradient(90deg, var(--accent2), var(--accent));
  box-shadow:0 0 20px rgba(100,255,218,.35);
  transition:width .45s var(--ease);
}
.ns-bar > span::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  mix-blend-mode:screen; animation:sweep 2.4s linear infinite
}
@keyframes sweep{ from{ transform:translateX(-100%) } to{ transform:translateX(100%) } }

/* ========== 6) Lokasyon + Sunucu Kartları ========== */
.loc-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.loc{
  position:relative; display:flex; flex-direction:column; min-width:0;
  border:1px solid var(--border); border-radius:16px; background:var(--panel2);
  box-shadow:var(--elev-2); overflow:hidden;
  transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.loc::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:60%;
  background:
    radial-gradient(800px 300px at 10% 0%, rgba(100,255,218,.08), transparent 60%),
    radial-gradient(600px 200px at 90% 20%, rgba(100,255,218,.06), transparent 60%);
  pointer-events:none;
}
@media (pointer:fine){
  .loc:hover{ transform:translateY(-3px); box-shadow:var(--elev-3); border-color:rgba(100,255,218,.35) }
}
.loc-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:var(--space-3) var(--space-4);
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  min-width:0;
}
.loc-title{ display:flex; align-items:center; gap:10px; font-weight:800; min-width:0 }
.flag{ width:22px; height:22px; border-radius:4px; overflow:hidden; background:#0d1a2f; border:1px solid var(--border) }
.flag img{ width:100%; height:100%; object-fit:cover }
.loc-body{ padding:var(--space-2) var(--space-4) var(--space-4); display:grid; gap:var(--space-2); min-height:0 }

/* --- Server kartı yeni layout --- */
.server{
  position:relative; border:1px solid var(--border); border-radius:14px;
  padding:12px 14px; background:var(--panel);
  display:grid; gap:10px; min-width:0; min-height:140px;
  /* grid alanları: üst metrik, alt bilgi+durum, sparkline */
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "metrics metrics"
    "meta    state"
    "spark   spark";
  box-shadow:var(--elev-1);
}
@media (pointer:fine){
  .server:hover{ transform:translateY(-2px); border-color:rgba(100,255,218,.35); box-shadow:0 12px 28px rgba(0,0,0,.3) }
}
@media (max-width:700px){
  .server{ grid-template-columns:1fr auto }
}

/* üstte metrik “pill” şeridi */
.s-metrics{
  grid-area:metrics;
  display:flex; flex-wrap:wrap; gap:8px;
  font-variant-numeric:tabular-nums;  /* hizalı sayılar */
}
.m{
  display:inline-flex; align-items:center; gap:8px;
  padding:.35rem .6rem; border-radius:10px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
}
.m i{
  opacity:.95; font-size:.95rem;
  width:1.05rem; height:1.05rem; display:grid; place-items:center;
  border-radius:999px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

/* alt satır: isim+rol solda, state sağda */
.s-meta{ grid-area:meta; display:flex; align-items:center; gap:8px; color:var(--soft); min-width:0 }
.s-name{ font-weight:800; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.badge.role{
  background:rgba(100,255,218,.12); border:1px solid rgba(100,255,218,.35);
  color:var(--accent); border-radius:999px; padding:.15rem .55rem; font-weight:700
}
.s-state{ grid-area:state; justify-self:end }
.badge.state{
  padding:.25rem .65rem; border-radius:999px; font-weight:800; border:1px solid transparent;
  background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  letter-spacing:.2px;
}
.badge.state.up  { color:var(--ok);   border-color:rgba(52,211,153,.45) }
.badge.state.warn{ color:var(--warn); border-color:rgba(251,191,36,.45) }
.badge.state.down{ color:var(--down); border-color:rgba(248,113,113,.55) }

/* sparkline genişlik doldurur */
.spark{ grid-area:spark; width:100%; height:36px; display:block; max-width:100%; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)) }

/* duruma göre kart zemini/çerçevesi */
.server:has(.badge.state.up){
  border-color:color-mix(in oklab, var(--ok) 55%, var(--border));
  background:linear-gradient(180deg, rgba(52,211,153,.10), transparent 60%), var(--panel);
  box-shadow:0 10px 24px rgba(52,211,153,.18);
}
.server:has(.badge.state.warn){
  border-color:color-mix(in oklab, var(--warn) 55%, var(--border));
  background:linear-gradient(180deg, rgba(251,191,36,.12), transparent 60%), var(--panel);
  box-shadow:0 10px 24px rgba(251,191,36,.18);
}
.server:has(.badge.state.down){
  border-color:color-mix(in oklab, var(--down) 60%, var(--border));
  background:linear-gradient(180deg, rgba(248,113,113,.12), transparent 60%), var(--panel);
  box-shadow:0 10px 24px rgba(248,113,113,.22);
}

/* ========== 7) Minimal Footer ========== */
.dvn-footer{
  position:relative; background:linear-gradient(135deg,var(--bg) 0%, var(--bg2) 100%);
  border-top:1px solid var(--border); color:var(--ink); overflow:hidden;
}
.dvn-footer-container{ width:min(1200px,92vw); margin-inline:auto; padding:16px 8px 26px }

/* sistem durumu şeridi */
.dvn-footer-status{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--border); border-radius:14px;
  padding:10px 12px; margin:6px 0 14px;
  background:linear-gradient(180deg, rgba(100,255,218,.06), rgba(100,255,218,.02));
}
@media (max-width:991px){ .dvn-footer-status{ flex-direction:column; align-items:stretch } }
.dvn-footer-status .ttl{ margin:0; font-size:1rem; display:flex; align-items:center; gap:8px }
.dvn-footer-status .badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.2rem .6rem; border-radius:999px; border:1px solid var(--border);
  background:rgba(100,255,218,.06); color:var(--ink); font-weight:700
}
.dvn-footer-status .badge .dot{ width:8px; height:8px; border-radius:50%; display:inline-block }
.dvn-footer-status .badge-ok   .dot{ background:var(--ok);   box-shadow:0 0 10px rgba(52,211,153,.5) }
.dvn-footer-status .badge-warn .dot{ background:var(--warn); box-shadow:0 0 10px rgba(251,191,36,.5) }
.dvn-footer-status .badge-down .dot{ background:var(--down); box-shadow:0 0 10px rgba(248,113,113,.5) }

/* ticker */
.dvn-footer-status .ticker-link{ flex:1 1 auto; min-width:0; text-decoration:none }
.dvn-footer-status .ticker{
  position:relative; overflow:hidden; height:28px; line-height:28px;
  border:1px solid var(--border); border-radius:999px; padding:0 10px; width:100%;
  background:rgba(100,255,218,.07);
  mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  will-change:transform;
}
.dvn-footer-status .ticker-list{
  display:flex; gap:32px; padding:0; margin:0; list-style:none;
  white-space:nowrap; animation:dvnTicker 26s linear infinite;
}
.dvn-footer-status .ticker-list:hover{ animation-play-state:paused }
.dvn-footer-status .ticker-list li{ display:flex; align-items:center; gap:8px; min-width:max-content; font-size:.92rem; color:var(--ink) }
@keyframes dvnTicker{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .dvn-footer-status .ticker-list{ animation-duration:0s } }

/* alt satır minimal */
.dvn-footer-bottom.minimal{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding-top:6px;
}
.brand-mini{ display:flex; align-items:center; gap:8px; color:var(--soft) }
.brand-mini-logo{ display:block }
.brand-mini-text{ font-weight:800; color:var(--ink) }
.brand-mini .sep{ opacity:.5; margin-inline:6px }
.legal-mini{ display:flex; gap:12px; flex-wrap:wrap }
.legal-mini a{ color:var(--soft); text-decoration:none }
.legal-mini a:hover{ color:var(--accent) }
.social-mini{ display:flex; gap:10px }
.social-mini .link{
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:999px; border:1px solid var(--border);
  background:rgba(255,255,255,.04); color:var(--ink); text-decoration:none;
  transition:transform var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.social-mini .link:hover{
  transform:translateY(-2px); color:var(--accent);
  background:rgba(100,255,218,.06); box-shadow:0 10px 24px rgba(35,214,176,.15)
}

/* Yukarı dön */
.dvn-footer-top{
  position:fixed; right:18px; bottom:18px; z-index:20;
  width:42px; height:42px; display:grid; place-items:center;
  border-radius:999px; border:1px solid var(--border);
  background:rgba(255,255,255,.06); color:var(--ink); cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.3);
  opacity:0; pointer-events:none; transform:translateY(6px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease)
}
.dvn-footer-top.show{ opacity:1; pointer-events:auto; transform:none }
.dvn-footer-top:hover{ background:rgba(100,255,218,.12) }

/* ========== 9) Erişilebilirlik / Motion Guardrails ========== */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition:none !important; scroll-behavior:auto !important }
}
@media (prefers-contrast:more){
  .chip.is-active{ box-shadow:0 0 0 3px rgba(100,255,218,.35) inset }
  .badge.state, .badge.status{ background:rgba(255,255,255,.08) }
  .btn-home{ border-color:rgba(100,255,218,.6) }
}

/* ========== 10) Responsive İnce Ayarlar ========== */
@media (max-width:900px){
  .brand-text{ font-size:.98rem }
}
@media (max-width:540px){
  .toolbar{ padding:8px }
  .search input{ min-width:140px }
  .ns-meta{ flex-wrap:wrap; row-gap:6px }
  .s-metrics{ gap:8px }
  .spark{ height:28px }
  .head-actions{ display:flex; gap:8px; flex-wrap:wrap }
}

/* ========== 8) Tam Ekran Modu (iyileştirilmiş kompakt pano) ========== */
/* Not: JS body’ye .is-fullscreen ekliyor; filtre reset JS’te zaten var. */

.is-fullscreen {
  --fs-pad-x: clamp(10px, 2vw, 22px);
  --fs-gap: 10px;
  --fs-card-pad: 10px 12px;
  --fs-radius: 14px;
}

.is-fullscreen .hide-on-fs { display: none !important; }

.is-fullscreen .container,
.is-fullscreen #main {
  width: 100%;
  max-width: 100%;
  padding: var(--space-3) var(--fs-pad-x);
}

.is-fullscreen body,
.is-fullscreen #statusArea {
  overflow: auto; /* içerik fazla ise kaydır */
}

/* Üst araç çubuğu daha kompakt */
.is-fullscreen .toolbar{
  margin: var(--space-2) 0 var(--space-3);
  padding: 8px 10px;
  gap: 8px;
}

/* Nameserver grid */
.is-fullscreen .ns-grid{
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--fs-gap);
}
.is-fullscreen .ns-card{
  padding: var(--fs-card-pad);
  min-height: 96px;
  border-radius: var(--fs-radius);
}

/* Lokasyon / Sunucu grid – esnek, taşma yok */
.is-fullscreen .loc-grid{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--fs-gap);
}

/* ===== Sunucu kartı: üstte metrikler, ortada spark, altta kimlik+durum ===== */
.is-fullscreen .server{
  padding: var(--fs-card-pad);
  min-height: 132px;
  border-radius: var(--fs-radius);

  display: grid;
  grid-template-areas:
    "metrics metrics metrics"
    "spark   spark   spark"
    "meta    meta    state";
  grid-template-columns: 1fr 1fr auto;
  row-gap: 8px; column-gap: 10px;

  /* kart ve içeriğin taşmaması için */
  min-width: 0;
}
.is-fullscreen .server *{ min-width: 0; }

/* ÜST – Metrikler (ms / cpu / ram / loss) */
.is-fullscreen .s-metrics{
  grid-area: metrics;
  display: flex; flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Metrik pill – sade, okunur, taşmayan yapı */
.is-fullscreen .m{
  display: inline-flex; align-items: center; gap: 8px;
  padding: .32rem .56rem;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  font-variant-numeric: tabular-nums;
  max-width: 100%;
}
.is-fullscreen .m i{
  width: 1rem; height: 1rem; display: grid; place-items: center;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  font-size: .9rem; opacity: .95; flex: 0 0 auto;
}
.is-fullscreen .m strong{ color: var(--ink); font-weight: 800 }
.is-fullscreen .m small{ color: var(--soft) }
.is-fullscreen .m strong,
.is-fullscreen .m small{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

/* ORTA – Sparkline alanı daha okunur */
.is-fullscreen .spark{
  grid-area: spark;
  width: 100%;
  height: 48px;               /* normalden büyük, ama çok da yer kaplamaz */
  max-width: 100%;
  display: block;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.06);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

/* ALT – Kimlik/rol ve durum */
.is-fullscreen .s-meta{
  grid-area: meta;
  display: flex; align-items: center; gap: 8px;
  font-size: .95rem;
}
.is-fullscreen .s-name{
  font-weight: 800; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.is-fullscreen .badge.role{
  max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: .16rem .5rem;
  border-radius: 10px;
}

.is-fullscreen .s-state{
  grid-area: state;
  margin-left: 0;
  display: flex; align-items: center; justify-content: flex-end;
}
.is-fullscreen .badge.state{
  font-size: .85rem;
  padding: .22rem .55rem;
}

/* Duruma göre kart vurgusu (okunur, sakin) */
.is-fullscreen .server:has(.badge.state.up){
  border-color: color-mix(in oklab, var(--ok) 55%, var(--border));
  background: linear-gradient(180deg, rgba(52,211,153,.10), transparent 65%), var(--panel);
  box-shadow: 0 8px 20px rgba(52,211,153,.18);
}
.is-fullscreen .server:has(.badge.state.warn){
  border-color: color-mix(in oklab, var(--warn) 55%, var(--border));
  background: linear-gradient(180deg, rgba(251,191,36,.12), transparent 65%), var(--panel);
  box-shadow: 0 8px 20px rgba(251,191,36,.18);
}
.is-fullscreen .server:has(.badge.state.down){
  border-color: color-mix(in oklab, var(--down) 60%, var(--border));
  background: linear-gradient(180deg, rgba(248,113,113,.12), transparent 65%), var(--panel);
  box-shadow: 0 8px 22px rgba(248,113,113,.22);
}

/* Nameserver ve sunucu kartı yoğunluğu – daha da kompakt ekranlar için */
@media (max-width: 920px){
  .is-fullscreen .spark{ height: 44px; }
  .is-fullscreen .m{ padding: .28rem .5rem; }
}
@media (max-width: 640px){
  .is-fullscreen .loc-grid{ grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .is-fullscreen .spark{ height: 40px; }
  .is-fullscreen .badge.role{ max-width: 160px; }
}