/* Stage DOSAB-BRANDING-2 · Ana Sayfa Teknolojik Operasyon Kokpiti */

/* Sadece index.html içinde çalışır. Diğer sayfalara ve İş Havuzu layoutuna dokunmaz. */



body.dosab-cockpit-page main,

body.dosab-cockpit-page .main,

body.dosab-cockpit-page .content,

body.dosab-cockpit-page .page-content{

  max-width:1760px !important;

}



.dosab-home-legacy-hidden{

  display:none !important;

}



.dosab-cockpit{

  --c-green:#0a8f43;

  --c-green-dark:#075f32;

  --c-green-soft:#eaf8ef;

  --c-lime:#23d36b;

  --c-ink:#101a14;

  --c-muted:#637267;

  --c-line:#d6eadf;

  --c-bg:#f5faf7;

  --c-card:#ffffff;

  --c-warn:#f59e0b;

  --c-danger:#dc2626;

  --c-info:#2563eb;

  --c-purple:#7c3aed;



  width:100%;

  max-width:1720px;

  margin:0 auto;

  padding:18px 18px 28px;

  color:var(--c-ink);

  box-sizing:border-box;

}



.dosab-cockpit *,

.dosab-cockpit *::before,

.dosab-cockpit *::after{

  box-sizing:border-box;

}



.dosab-cockpit a{

  color:inherit;

  text-decoration:none;

}



.dc-hero{

  position:relative;

  overflow:hidden;

  border-radius:28px;

  min-height:250px;

  padding:26px;

  color:#fff;

  background:

    radial-gradient(circle at 76% 22%, rgba(35,211,107,.30), transparent 28%),

    radial-gradient(circle at 18% 12%, rgba(255,255,255,.14), transparent 26%),

    linear-gradient(135deg,#062719 0%,#0a5d32 48%,#05301f 100%);

  box-shadow:0 24px 70px rgba(5,48,31,.26);

  border:1px solid rgba(255,255,255,.14);

}



.dc-hero::before{

  content:"";

  position:absolute;

  inset:0;

  background:

    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);

  background-size:42px 42px;

  mask-image:linear-gradient(90deg,rgba(0,0,0,.58),rgba(0,0,0,.1));

  pointer-events:none;

}



.dc-hero::after{

  content:"";

  position:absolute;

  right:-80px;

  top:-130px;

  width:430px;

  height:430px;

  border-radius:999px;

  border:1px solid rgba(255,255,255,.14);

  box-shadow:

    0 0 0 55px rgba(255,255,255,.03),

    0 0 0 110px rgba(255,255,255,.025),

    0 0 0 165px rgba(255,255,255,.018);

  pointer-events:none;

}



.dc-hero-main{

  position:relative;

  z-index:2;

  display:grid;

  grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);

  gap:22px;

  align-items:stretch;

}



.dc-eyebrow{

  display:inline-flex;

  align-items:center;

  gap:8px;

  padding:7px 11px;

  border-radius:999px;

  background:rgba(255,255,255,.10);

  border:1px solid rgba(255,255,255,.16);

  color:#d9fce4;

  font-size:12px;

  font-weight:900;

  letter-spacing:.04em;

  text-transform:uppercase;

}



.dc-dot{

  width:9px;

  height:9px;

  border-radius:999px;

  background:var(--c-lime);

  box-shadow:0 0 0 6px rgba(35,211,107,.12), 0 0 24px rgba(35,211,107,.9);

}



.dc-hero h1{

  margin:17px 0 10px;

  max-width:880px;

  font-size:clamp(32px,4vw,58px);

  line-height:.98;

  letter-spacing:-.045em;

  font-weight:950;

}



.dc-hero p{

  margin:0;

  max-width:760px;

  color:#d9f6e3;

  font-size:15px;

  line-height:1.55;

  font-weight:750;

}



.dc-hero-actions{

  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-top:20px;

}



.dc-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:9px;

  min-height:42px;

  padding:10px 14px;

  border-radius:14px;

  border:1px solid rgba(255,255,255,.18);

  background:rgba(255,255,255,.10);

  color:#fff;

  font-weight:900;

  font-size:13px;

  cursor:pointer;

  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;

}



.dc-btn:hover{

  transform:translateY(-1px);

  box-shadow:0 14px 28px rgba(0,0,0,.18);

}



.dc-btn.primary{

  background:linear-gradient(135deg,#22c55e,#0a8f43);

  border-color:rgba(255,255,255,.18);

}



.dc-btn.light{

  background:#fff;

  color:#08301f;

  border-color:#fff;

}



.dc-live-panel{

  position:relative;

  border-radius:24px;

  padding:18px;

  background:rgba(255,255,255,.10);

  border:1px solid rgba(255,255,255,.16);

  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);

  backdrop-filter:blur(12px);

}



.dc-live-top{

  display:flex;

  justify-content:space-between;

  align-items:flex-start;

  gap:14px;

  margin-bottom:14px;

}



.dc-live-title{

  font-weight:950;

  font-size:16px;

}



.dc-live-sub{

  margin-top:4px;

  color:#d9f6e3;

  font-size:12px;

  font-weight:800;

}



.dc-clock{

  text-align:right;

  font-weight:950;

  font-size:24px;

  letter-spacing:-.04em;

}



.dc-date{

  color:#d9f6e3;

  font-size:11px;

  font-weight:850;

  margin-top:2px;

}



.dc-radar{

  position:relative;

  min-height:128px;

  margin:12px 0 8px;

  border-radius:22px;

  background:

    radial-gradient(circle at center, rgba(35,211,107,.22) 0 2px, transparent 3px),

    radial-gradient(circle at center, transparent 0 28px, rgba(255,255,255,.10) 29px 30px, transparent 31px 56px, rgba(255,255,255,.08) 57px 58px, transparent 59px 84px, rgba(255,255,255,.06) 85px 86px, transparent 87px),

    linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03));

  overflow:hidden;

}



.dc-radar::before{

  content:"";

  position:absolute;

  left:50%;

  top:50%;

  width:190px;

  height:190px;

  transform-origin:left top;

  background:conic-gradient(from 0deg, rgba(35,211,107,.46), transparent 55deg);

  animation:dcSweep 4.8s linear infinite;

}



@keyframes dcSweep{

  from{ transform:rotate(0deg); }

  to{ transform:rotate(360deg); }

}



.dc-node{

  position:absolute;

  width:12px;

  height:12px;

  border-radius:999px;

  background:#23d36b;

  box-shadow:0 0 0 7px rgba(35,211,107,.14), 0 0 22px rgba(35,211,107,.75);

}



.dc-node.n1{ left:20%; top:28%; }

.dc-node.n2{ left:61%; top:22%; }

.dc-node.n3{ left:74%; top:62%; }

.dc-node.n4{ left:34%; top:68%; }



.dc-status-line{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:8px;

}



.dc-mini-status{

  border-radius:14px;

  padding:10px;

  background:rgba(255,255,255,.09);

  border:1px solid rgba(255,255,255,.12);

}



.dc-mini-status b{

  display:block;

  font-size:18px;

  line-height:1;

}



.dc-mini-status span{

  display:block;

  margin-top:4px;

  color:#d9f6e3;

  font-size:10px;

  font-weight:850;

}



.dc-section{

  margin-top:18px;

}



.dc-kpis{

  display:grid;

  grid-template-columns:repeat(6,minmax(0,1fr));

  gap:12px;

}



.dc-kpi{

  position:relative;

  overflow:hidden;

  border-radius:22px;

  padding:17px;

  min-height:122px;

  background:#fff;

  border:1px solid var(--c-line);

  box-shadow:0 14px 36px rgba(10,143,67,.07);

}



.dc-kpi::after{

  content:"";

  position:absolute;

  right:-32px;

  top:-36px;

  width:105px;

  height:105px;

  border-radius:999px;

  background:var(--accent-soft,#eaf8ef);

}



.dc-kpi-top{

  position:relative;

  z-index:2;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

}



.dc-kpi-icon{

  width:42px;

  height:42px;

  border-radius:15px;

  display:grid;

  place-items:center;

  background:var(--accent-soft,#eaf8ef);

  color:var(--accent,#0a8f43);

  font-size:20px;

}



.dc-kpi-trend{

  padding:5px 8px;

  border-radius:999px;

  color:var(--accent,#0a8f43);

  background:var(--accent-soft,#eaf8ef);

  font-size:11px;

  font-weight:950;

}



.dc-kpi-value{

  position:relative;

  z-index:2;

  margin-top:15px;

  font-size:34px;

  line-height:1;

  font-weight:950;

  letter-spacing:-.04em;

}



.dc-kpi-label{

  position:relative;

  z-index:2;

  margin-top:6px;

  color:var(--c-muted);

  font-size:12px;

  font-weight:900;

}



.dc-grid{

  display:grid;

  grid-template-columns:minmax(0,1.55fr) minmax(360px,.75fr);

  gap:16px;

  align-items:start;

}



.dc-card{

  background:#fff;

  border:1px solid var(--c-line);

  border-radius:24px;

  box-shadow:0 14px 36px rgba(10,143,67,.07);

  overflow:hidden;

}



.dc-card-head{

  display:flex;

  justify-content:space-between;

  align-items:flex-start;

  gap:12px;

  padding:18px 18px 12px;

  border-bottom:1px solid #eef5f0;

}



.dc-card-title{

  font-size:16px;

  font-weight:950;

  letter-spacing:-.02em;

}



.dc-card-sub{

  margin-top:4px;

  color:var(--c-muted);

  font-size:12px;

  font-weight:800;

}



.dc-pill{

  display:inline-flex;

  align-items:center;

  gap:6px;

  padding:6px 9px;

  border-radius:999px;

  background:var(--c-green-soft);

  color:var(--c-green-dark);

  border:1px solid #bfebcf;

  font-size:11px;

  font-weight:950;

  white-space:nowrap;

}



.dc-command-grid{

  display:grid;

  grid-template-columns:repeat(3,minmax(0,1fr));

  gap:12px;

  padding:16px;

}



.dc-command{

  position:relative;

  min-height:128px;

  border-radius:20px;

  padding:15px;

  border:1px solid #e2f0e7;

  background:

    linear-gradient(135deg,#fff,#f7fcf9);

  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;

}



.dc-command:hover{

  transform:translateY(-2px);

  border-color:#bfe8cf;

  box-shadow:0 18px 38px rgba(10,143,67,.10);

}



.dc-command-icon{

  width:42px;

  height:42px;

  border-radius:16px;

  display:grid;

  place-items:center;

  background:var(--c-green-soft);

  color:var(--c-green-dark);

  font-size:20px;

  margin-bottom:12px;

}



.dc-command b{

  display:block;

  font-size:14px;

  font-weight:950;

}



.dc-command span{

  display:block;

  margin-top:6px;

  color:var(--c-muted);

  font-size:12px;

  font-weight:750;

  line-height:1.35;

}



.dc-flow{

  padding:14px 16px 16px;

}



.dc-flow-item{

  display:grid;

  grid-template-columns:42px minmax(0,1fr) auto;

  gap:12px;

  align-items:start;

  padding:13px 0;

  border-bottom:1px solid #eef5f0;

}



.dc-flow-item:last-child{

  border-bottom:0;

}



.dc-flow-icon{

  width:38px;

  height:38px;

  border-radius:14px;

  display:grid;

  place-items:center;

  background:var(--tone-bg,#eaf8ef);

  color:var(--tone,#0a8f43);

  font-size:18px;

}



.dc-flow-title{

  font-size:13px;

  font-weight:950;

}



.dc-flow-desc{

  margin-top:4px;

  color:var(--c-muted);

  font-size:12px;

  line-height:1.35;

  font-weight:750;

}



.dc-flow-time{

  color:#8a9b90;

  font-size:11px;

  font-weight:900;

  white-space:nowrap;

}



.dc-map{

  padding:16px;

}



.dc-zone{

  position:relative;

  min-height:285px;

  border-radius:22px;

  overflow:hidden;

  background:

    linear-gradient(rgba(10,143,67,.055) 1px, transparent 1px),

    linear-gradient(90deg, rgba(10,143,67,.055) 1px, transparent 1px),

    radial-gradient(circle at 50% 50%, #ffffff, #f1faf5);

  background-size:26px 26px,26px 26px,auto;

  border:1px solid #dceee4;

}



.dc-zone::before{

  content:"";

  position:absolute;

  inset:30px;

  border:2px dashed rgba(10,143,67,.22);

  border-radius:32px;

}



.dc-zone-core{

  position:absolute;

  left:50%;

  top:50%;

  transform:translate(-50%,-50%);

  width:118px;

  height:118px;

  border-radius:34px;

  display:grid;

  place-items:center;

  text-align:center;

  background:linear-gradient(135deg,#0a8f43,#075f32);

  color:#fff;

  box-shadow:0 22px 50px rgba(10,143,67,.28);

  font-weight:950;

  line-height:1.05;

}



.dc-zone-chip{

  position:absolute;

  display:inline-flex;

  align-items:center;

  gap:7px;

  padding:9px 11px;

  border-radius:999px;

  background:#fff;

  border:1px solid #d6eadf;

  box-shadow:0 12px 28px rgba(10,143,67,.09);

  color:#203127;

  font-size:12px;

  font-weight:950;

}



.dc-zone-chip i{

  width:9px;

  height:9px;

  border-radius:999px;

  background:#23d36b;

  box-shadow:0 0 0 5px rgba(35,211,107,.13);

}



.dc-zone-chip.z1{ left:8%; top:14%; }

.dc-zone-chip.z2{ right:9%; top:17%; }

.dc-zone-chip.z3{ left:11%; bottom:15%; }

.dc-zone-chip.z4{ right:10%; bottom:17%; }

.dc-zone-chip.z5{ left:40%; top:8%; }

.dc-zone-chip.z6{ left:41%; bottom:8%; }



.dc-health{

  padding:16px;

  display:grid;

  gap:10px;

}



.dc-health-row{

  display:grid;

  grid-template-columns:1fr auto;

  gap:12px;

  align-items:center;

  padding:12px;

  border-radius:16px;

  background:#f8fcfa;

  border:1px solid #e2f0e7;

}



.dc-health-name{

  display:flex;

  align-items:center;

  gap:10px;

  font-size:13px;

  font-weight:950;

}



.dc-health-dot{

  width:11px;

  height:11px;

  border-radius:999px;

  background:#23d36b;

  box-shadow:0 0 0 6px rgba(35,211,107,.12);

}



.dc-health-dot.warn{

  background:#f59e0b;

  box-shadow:0 0 0 6px rgba(245,158,11,.12);

}



.dc-health-dot.err{

  background:#dc2626;

  box-shadow:0 0 0 6px rgba(220,38,38,.12);

}



.dc-health-state{

  font-size:11px;

  font-weight:950;

  color:var(--c-green-dark);

}



.dc-health-state.warn{ color:#b45309; }

.dc-health-state.err{ color:#991b1b; }



.dc-footer-strip{

  display:grid;

  grid-template-columns:repeat(3,minmax(0,1fr));

  gap:12px;

}



.dc-alert{

  border-radius:22px;

  padding:16px;

  border:1px solid var(--line,#d6eadf);

  background:var(--bg,#fff);

  box-shadow:0 12px 30px rgba(10,143,67,.06);

}



.dc-alert b{

  display:flex;

  align-items:center;

  gap:8px;

  font-size:14px;

  font-weight:950;

}



.dc-alert span{

  display:block;

  margin-top:7px;

  color:var(--c-muted);

  font-size:12px;

  font-weight:750;

  line-height:1.4;

}



@media(max-width:1380px){

  .dc-kpis{

    grid-template-columns:repeat(3,minmax(0,1fr));

  }



  .dc-command-grid{

    grid-template-columns:repeat(2,minmax(0,1fr));

  }

}



@media(max-width:1080px){

  .dosab-cockpit{

    padding:12px 10px 22px;

  }



  .dc-hero-main,

  .dc-grid{

    grid-template-columns:1fr;

  }



  .dc-hero{

    padding:20px;

  }



  .dc-footer-strip{

    grid-template-columns:1fr;

  }

}



@media(max-width:720px){

  .dc-kpis,

  .dc-command-grid{

    grid-template-columns:1fr;

  }



  .dc-status-line{

    grid-template-columns:1fr;

  }



  .dc-flow-item{

    grid-template-columns:38px minmax(0,1fr);

  }



  .dc-flow-time{

    grid-column:2;

  }



  .dc-zone{

    min-height:340px;

  }



  .dc-zone-chip{

    position:static;

    margin:8px;

  }



  .dc-zone-core{

    position:relative;

    left:auto;

    top:auto;

    transform:none;

    margin:22px auto;

  }

}