* {
  box-sizing: border-box;
}


:root {

  --bg: #070a10;

  --surface: #10141d;

  --surface-2: #141923;

  --surface-3: #181e2a;

  --border: rgba(255,255,255,.075);

  --border-light: rgba(255,255,255,.11);

  --text: #f5f7fb;

  --muted: #929caf;

  --muted-2: #667084;

  --blue: #3ca8f5;

  --blue-light: #69b9ff;

  --purple: #8b5cf6;

  --green: #45d483;

  --orange: #ffad3d;

  --pink: #ff5d83;

}


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  min-height: 100vh;

  background:

    radial-gradient(
      circle at 10% -10%,
      rgba(60,168,245,.13),
      transparent 30%
    ),

    radial-gradient(
      circle at 100% 15%,
      rgba(139,92,246,.10),
      transparent 28%
    ),

    var(--bg);

  color: var(--text);

  font-family:
    Inter,
    Arial,
    sans-serif;

}


/* ================= BACKGROUND ================= */

.bg-glow {

  position: fixed;

  width: 320px;

  height: 320px;

  border-radius: 50%;

  filter: blur(100px);

  opacity: .12;

  pointer-events: none;

  z-index: -1;

}


.glow-one {

  background: #1688dc;

  left: -150px;

  top: 250px;

}


.glow-two {

  background: #7038dd;

  right: -150px;

  bottom: 100px;

}


/* ================= DASHBOARD ================= */

.dashboard {

  width: min(
    1480px,
    calc(100% - 50px)
  );

  margin: auto;

  padding:
    32px 0 30px;

}


/* ================= HEADER ================= */

.topbar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 30px;

  padding-bottom: 28px;

  border-bottom:
    1px solid var(--border);

}


.brand {

  display: flex;

  align-items: center;

  gap: 14px;

}


.brand-mark {

  width: 48px;

  height: 48px;

  border-radius: 14px;

  display: grid;

  place-items: center;

  font-size: 21px;

  font-weight: 800;

  background:
    linear-gradient(
      135deg,
      #2e9ae9,
      #6b5ce7
    );

  box-shadow:
    0 10px 30px
    rgba(60,168,245,.20);

}


.brand-small {

  color: #6ca9df;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .2em;

}


h1 {

  margin:
    4px 0 4px;

  font-size:
    clamp(25px, 3vw, 38px);

  line-height: 1;

  letter-spacing: -.045em;

}


h1 span {

  color: var(--blue-light);

}


.brand p {

  margin: 0;

  color: var(--muted);

  font-size: 11px;

}


.top-actions {

  display: flex;

  align-items: center;

  gap: 10px;

}


.live-status {

  display: flex;

  align-items: center;

  gap: 8px;

  height: 38px;

  padding:
    0 13px;

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

  border-radius: 10px;

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

  color: #c7cedb;

  font-size: 10px;

  font-weight: 700;

}


.status-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #f6b73c;

}


.refresh-btn {

  height: 38px;

  border:
    1px solid
    rgba(60,168,245,.30);

  border-radius: 10px;

  background:
    rgba(60,168,245,.10);

  color: #cce8ff;

  padding:
    0 14px;

  cursor: pointer;

  font-size: 11px;

  font-weight: 700;

  transition: .2s;

}


.refresh-btn:hover {

  background:
    rgba(60,168,245,.19);

  transform:
    translateY(-1px);

}


/* ================= KPI ================= */

.kpi-grid {

  display: grid;

  grid-template-columns:
    1.3fr 1fr 1fr 1fr;

  gap: 14px;

  margin:
    20px 0 42px;

}


.kpi-card {

  min-height: 126px;

  padding: 19px;

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

  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.015)
    );

  box-shadow:
    0 15px 40px
    rgba(0,0,0,.15);

}


.kpi-primary {

  background:
    linear-gradient(
      145deg,
      rgba(60,168,245,.15),
      rgba(60,168,245,.035)
    );

  border-color:
    rgba(60,168,245,.17);

}


.kpi-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  color: var(--muted);

  font-size: 10px;

  font-weight: 700;

}


.kpi-icon {

  width: 28px;

  height: 28px;

  border-radius: 8px;

  display: grid;

  place-items: center;

  background:
    rgba(60,168,245,.10);

  color: var(--blue-light);

  font-size: 13px;

}


.kpi-card strong {

  display: block;

  margin:
    12px 0 5px;

  font-size: 33px;

  letter-spacing: -.04em;

}


.kpi-card small {

  color: var(--muted-2);

  font-size: 9px;

}


/* ================= SECTION HEADER ================= */

.section-header {

  display: flex;

  justify-content: space-between;

  align-items: end;

  gap: 20px;

  margin-bottom: 15px;

}


.section-label {

  font-size: 9px;

  letter-spacing: .2em;

  font-weight: 800;

  color: #65a9df;

}


.section-header h2 {

  margin:
    5px 0 4px;

  font-size: 21px;

  letter-spacing: -.025em;

}


.section-header p {

  margin: 0;

  color: var(--muted);

  font-size: 10px;

}


.last-updated {

  color: var(--muted-2);

  font-size: 9px;

}


/* ================= PROFILE ================= */

.profile-grid {

  display: grid;

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

  gap: 16px;

  margin-bottom: 44px;

}


.profile-card {

  min-width: 0;

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

  border-radius: 17px;

  background:
    rgba(16,20,29,.90);

  overflow: hidden;

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.17);

}


.card-header {

  padding:
    17px 18px;

  border-bottom:
    1px solid var(--border);

}


.card-header > div {

  display: flex;

  align-items: center;

  gap: 10px;

}


.card-number {

  display: grid;

  place-items: center;

  width: 27px;

  height: 27px;

  border-radius: 8px;

  background:
    rgba(60,168,245,.09);

  border:
    1px solid
    rgba(60,168,245,.15);

  color: var(--blue-light);

  font-size: 8px;

  font-weight: 800;

}


.card-header h3 {

  margin: 0;

  font-size: 13px;

}


.card-header p {

  margin:
    3px 0 0;

  color: var(--muted-2);

  font-size: 8px;

}


/*
  INI BAGIAN PENTING.

  Chart dan legend berdampingan.
*/

.profile-content {

  display: grid;

  grid-template-columns:
    minmax(190px, 1fr)
    minmax(135px, .8fr);

  align-items: center;

  min-height: 270px;

  padding:
    15px 16px 18px;

}


.donut-wrapper {

  position: relative;

  width: 100%;

  height: 230px;

}


.donut-wrapper canvas {

  width: 100% !important;

  height: 100% !important;

}


/* ================= CUSTOM LEGEND ================= */

.custom-legend {

  display: flex;

  flex-direction: column;

  gap: 7px;

  max-height: 220px;

  overflow-y: auto;

  padding-right: 3px;

}


.custom-legend::-webkit-scrollbar {

  width: 3px;

}


.custom-legend::-webkit-scrollbar-thumb {

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

  border-radius: 20px;

}


.legend-item {

  display: grid;

  grid-template-columns:
    8px 1fr auto;

  align-items: center;

  gap: 7px;

  min-width: 0;

}


.legend-color {

  width: 8px;

  height: 8px;

  border-radius: 3px;

}


.legend-name {

  min-width: 0;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

  color: #aeb7c8;

  font-size: 8px;

}


.legend-percent {

  color: #f1f5f9;

  font-size: 8px;

  font-weight: 800;

}


.legend-count {

  grid-column:
    2 / 4;

  margin-top: -5px;

  color: #606b7e;

  font-size: 7px;

}


/* ================= QUESTIONS ================= */

.questions-header {

  margin-top: 2px;

}


.question-badge {

  padding:
    7px 10px;

  border-radius: 8px;

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

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

  color: var(--muted);

  font-size: 8px;

  font-weight: 800;

}


.question-grid {

  display: grid;

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

  gap: 16px;

}


.question-card {

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

  border-radius: 16px;

  background:
    rgba(16,20,29,.86);

  padding:
    18px;

  min-height: 300px;

}


.question-number {

  color: #66a9de;

  font-size: 8px;

  letter-spacing: .15em;

  font-weight: 800;

}


.question-title {

  margin-top: 7px;

  font-size: 12px;

  line-height: 1.45;

  font-weight: 700;

}


.question-chart {

  position: relative;

  height: 215px;

  margin-top: 12px;

}


.empty-state {

  margin-top: 15px;

  min-height: 180px;

  border:
    1px dashed var(--border);

  border-radius: 10px;

  display: grid;

  place-items: center;

  text-align: center;

  color: var(--muted-2);

  font-size: 9px;

  line-height: 1.6;

}


/* ================= FOOTER ================= */

footer {

  margin-top: 45px;

  padding:
    20px 0 5px;

  border-top:
    1px solid var(--border);

  display: flex;

  justify-content: space-between;

  gap: 20px;

  color: var(--muted-2);

  font-size: 8px;

  line-height: 1.7;

}


footer strong {

  color: #bdc6d5;

}


.footer-credit {

  text-align: right;

}


/* ================= TOAST ================= */

.toast {

  position: fixed;

  right: 20px;

  bottom: 20px;

  padding:
    11px 15px;

  border-radius: 10px;

  background:
    #171d28;

  border:
    1px solid var(--border-light);

  color: #dce4ef;

  font-size: 9px;

  opacity: 0;

  transform:
    translateY(15px);

  pointer-events: none;

  transition: .25s;

  z-index: 50;

}


.toast.show {

  opacity: 1;

  transform:
    translateY(0);

}


/* ================= TABLET ================= */

@media (max-width: 1150px) {

  .kpi-grid {

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

  }


  .profile-grid {

    grid-template-columns:
      1fr;

  }


  .profile-content {

    grid-template-columns:
      minmax(260px, .9fr)
      1fr;

  }

}


/* ================= MOBILE ================= */

@media (max-width: 750px) {

  .dashboard {

    width:
      calc(100% - 28px);

    padding-top: 20px;

  }


  .topbar {

    align-items: flex-start;

    flex-direction: column;

  }

  /* ================================
   PRODUCTION TEAM
================================ */

.production-team {
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.team-header {
  margin-bottom: 22px;
}

.team-header h2 {
  margin: 0;
}

.team-header p {
  margin-top: 6px;
  opacity: 0.6;
  font-size: 12px;
}

.team-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.team-member {
  padding: 18px;

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;

  background: rgba(255, 255, 255, 0.025);
}

.team-role {
  display: block;

  margin-bottom: 8px;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.12em;

  opacity: 0.55;
}

.team-name {
  display: block;

  font-size: 13px;
  font-weight: 600;

  line-height: 1.4;
}

.team-detail {
  display: block;

  margin-top: 5px;

  font-size: 10px;

  opacity: 0.5;
}


/* ================================
   DEVELOPMENT CREDIT
================================ */

.development-credit {
  margin-top: 28px;
  padding-top: 22px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  font-size: 10px;
  line-height: 1.7;

  opacity: 0.65;
}

.development-credit > strong {
  display: block;

  margin-bottom: 7px;

  color: #fff;

  font-size: 11px;
}

.development-credit p {
  margin: 2px 0;
}

.development-credit p strong {
  color: #fff;
}


/* MOBILE */

@media (max-width: 800px) {

  .team-list {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 520px) {

  .team-list {
    grid-template-columns: 1fr;
  }

}


  .top-actions {

    width: 100%;

    justify-content:
      flex-start;

  }


  .kpi-grid {

    grid-template-columns:
      1fr;

  }


  .section-header {

    align-items: flex-start;

    flex-direction: column;

  }


  .profile-content {

    grid-template-columns:
      1fr;

  }


  .donut-wrapper {

    height: 245px;

  }


  .custom-legend {

    max-height: none;

    margin-top: 5px;

  }


  .question-grid {

    grid-template-columns:
      1fr;

  }


  footer {

    flex-direction: column;

  }


  .footer-credit {

    text-align: left;

  }

}