@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
/* =========================================================
   1. COLOR VARIABLES (Ubah warna slide di sini)
   ========================================================= */
:root {
  --bg-slide-1: #00a8fd;
  --bg-slide-2: #2a79fc;
  --bg-slide-3: #304daa;
  --bg-slide-4: #304daa;
  --bg-slide-5: #f8f9fb;
  --bg-slide-6: #304daa;
  --bg-slide-7: #00a8fd;

  --btn-primary-bg: #4b61dd;
  --btn-primary-hover: #3b4ed8;
  --btn-disabled-bg: #4b61dd;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif !important;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden; /* Mencegah scrollbar muncul saat perpindahan slide */
  position: relative;
}

/* =========================================================
   HEADER STYLING (Logo & Home Button)
   ========================================================= */
.app-header {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100%;
  padding: 20px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100; /* Agar selalu tampil di atas konten slide */
  pointer-events: none;
}

/* Aktifkan kembali interaksi mouse khusus tombol & logo */
.brand-logo,
.btn-home {
  pointer-events: auto;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-weight: bold;
  font-size: 20px;
}

.logo-img {
  width: 130px;
  object-fit: contain;
}

/* Sembunyikan semua logo-img secara default */
.logo-img {
  display: none;
}

/* Hanya tampilkan logo pertama saat awal load */
.logo-img.logo-default {
  display: block;
}

.btn-home {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-right: 25px;
}

.btn-home img {
  width: 40px;
}

.btn-home:hover {
  transform: scale(1.1);
}

/* Ubah container menjadi ukuran penuh (100vw & 100vh) */
.app-container {
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  border-radius: 0; /* Hapus border radius agar menempel ke sudut layar */
  position: relative;
  overflow: hidden;
  box-shadow: none;
}

.slide {
  display: none;
  width: 100vw;
  height: 100vh;
  padding: 30px;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
}

.slide.active {
  display: flex;
}

/* =========================================================
   2. SLIDE BACKGROUND COLORS
   ========================================================= */
#slide-1 {
  background-color: var(--bg-slide-1);
}
#slide-2 {
  background-color: var(--bg-slide-2);
}
#slide-3 {
  background-color: var(--bg-slide-3);
}
#slide-4 {
  background-color: var(--bg-slide-4);
}
#slide-5 {
  background-color: var(--bg-slide-5);
}
#slide-6 {
  background-color: var(--bg-slide-6) !important;
}
#slide-7 {
  background-color: var(--bg-slide-7);
}

/* =========================================================
   3. COMPONENTS STYLING
   ========================================================= */
.card-box {
  background: #ffffff;
  width: 100%;
  height: 100%;
  max-width: 650px;
  max-height: 500px;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.slide-in-animation {
  animation: modalSlideIn 1s ease;
}

.slide-out-animation {
  animation: modalSlideOut 1s ease forwards;
}

.slide-in-animation-center {
  animation: modalSlideInCenter 1s ease;
}

.slide-out-animation-center {
  animation: slideOutCentered 1s ease forwards;
}

.card-title {
  font-weight: 600;
  font-size: 18px;
}

.card-box.glass-card {
  background: linear-gradient(
    45deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0.85) 100%
  );
}

.card-box.wide {
  max-width: 800px;
}

.relative {
  position: relative;
}

.popup-box {
  position: absolute;
  top: 40px;
  right: 20px;
  width: 320px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.popup-title {
  font-weight: bold;
  color: #5b21b6;
  margin-bottom: 8px;
}

.popup-body {
  font-size: 12px;
  color: #4b5563;
}

.btn-primary {
  background-color: #4b61dd;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--btn-primary-hover);
}

.btn-primary:disabled,
.btn-primary.disabled {
  background-color: var(--btn-disabled-bg);
  cursor: not-allowed;
  opacity: 0.6;
}

.radio-group,
.channel-options {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.input-row,
.field-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

input[type="number"] {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  width: 200px;
}

.checkbox-card {
  background: #f3f4f6;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
}

.summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.summary-card {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
}

.stock-adjuster {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.btn-sm {
  padding: 4px 12px;
  border: 1px solid var(--btn-primary-bg);
  background: white;
  color: var(--btn-primary-bg);
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

.btn-sm:hover {
  background: var(--btn-primary-bg);
  color: white;
}

.success-icon {
  font-size: 48px;
  color: #10b981;
  width: 80px;
  height: 80px;
  border: 4px solid #10b981;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.text-center {
  text-align: center;
}

.timer-indicator {
  font-size: 11px;
  color: #6b7280;
  text-align: center;
}

/* =========================================================
   PENGATURAN KARTU & TABEL AGAR COMPACT (TANPA SCROLL)
   ========================================================= */

.card-box.profit-loss {
  height: auto;
  max-height: none;
  overflow: hidden;
  padding: 20px 16px;
}

.card-box.total-profit-loss {
  height: auto;
  max-height: none;
  padding: 20px 16px;
}

.table-responsive {
  width: 100%;
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  color: #1f2937;
}

/* TABEL 1: PROFIT & LOSS */
.pl-table th {
  background-color: #edf0f2;
  padding: 5px 8px;
  font-weight: 600;
  color: #0f172a;
}

.card-box.profit-loss .pl-table th {
  text-align: end;
}

.card-box.profit-loss .pl-table th:first-child {
  text-align: start;
}

.pl-table th.col-account {
  text-align: left;
  width: 35%;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.pl-table th:nth-child(5) {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.pl-table th.col-icon {
  width: 5%;
  color: #94a3b8;
  text-align: center;
}

.pl-table td {
  padding: 4px 8px;
  border-bottom: 1px solid #e2e8f0;
}

.pl-table tr:last-child td {
  border-bottom: none;
}

.pl-table td.row-label {
  font-weight: 600;
  color: #000000;
}

.pl-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #1e293b;
}

.pl-table tbody tr td:first-child,
.pl-table th:first-child {
  border-right: 2px solid #d9d9d9;
}

.card-box.total-profit-loss tr th {
  /* background-color: red; */
  white-space: nowrap;
}

.card-box.total-profit-loss tr th,
.card-box.total-profit-loss tbody tr td {
  border-right: none;
  padding: 5px 8px;
}

.card-box.total-profit-loss tbody tr td {
  text-align: center;
}

.card-box.total-profit-loss tbody tr td:first-child {
  text-align: start;
}

/* Styling Judul Slide */
.slide-title {
  text-align: center;
  color: #ffffff;
  margin-top: 15px;
}

.slide-title h1 {
  font-weight: 700;
  font-size: 24px;
  color: #ffffff;
  text-align: center;
  line-height: 1.4;
}

/* Container relatif agar popup bisa di-positioning absolut darinya */
.relative-container {
  position: relative;
}

/* Efek CardBox agak gelap / dimming pada Slide 2 */
.card-box.glass-card.dimmed {
  background: linear-gradient(
    45deg,
    rgba(230, 230, 230, 0.85) 0%,
    rgba(200, 200, 200, 0.65) 100%
  );
  filter: brightness(0.85);
  pointer-events: none;
}

/* POSISI POPUP NUMPUK DI SEBELAH KANAN CARD BOX */
.popup-box-overlay {
  position: absolute;
  top: 20%;
  right: -110%;
  z-index: 20;
  border-radius: 12px;
  overflow: hidden;
  filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.2));
  animation: popupFloating 7s ease-in-out infinite;
}

.popup-img {
  display: block;
  max-width: 50%;
  height: auto;

  /* opacity: 0; */
  /* visibility: hidden; */

  animation: popupCycle 20s infinite;
}

@keyframes popupFloating {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px); /* Jarak melayang ke atas */
  }
  100% {
    transform: translateY(0);
  }
}

/* Deklarasi Keyframes */
@keyframes popupCycle {
  /* 0% - 2.5%: Transisi MUNCUL dari kecil (0.5 detik pertama) */
  0% {
    opacity: 0;
    visibility: hidden;
    /* transform: translate(-50%, -50%) scale(0); */
  }
  2.5% {
    opacity: 1;
    visibility: visible;
    /* transform: translate(-50%, -50%) scale(1); */
  }

  /* 2.5% - 47.5%: Diam MUNCUL selama total ~10 detik */
  47.5% {
    opacity: 1;
    visibility: visible;
    /* transform: translate(-50%, -50%) scale(1); */
  }

  /* 47.5% - 50%: Transisi HILANG mengecil ke tengah (0.5 detik berikutnya) */
  50% {
    opacity: 0;
    visibility: hidden;
    /* transform: translate(-50%, -50%) scale(0); */
  }

  /* 50% - 100%: Diam HILANG selama 10 detik sisanya */
  100% {
    opacity: 0;
    visibility: hidden;
    /* transform: translate(-50%, -50%) scale(0); */
  }
}

/* =========================================================
   STYLING KHUSUS SLIDE 3 (GOAL TYPE)
   ========================================================= */

.goal-inner-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px 24px;
  border: 1px solid #e5e7eb;
  margin-bottom: 8px;
}

.radio-options-group {
  display: flex;
  gap: 48px;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.custom-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.custom-radio input[type="radio"] {
  display: none;
}

.radio-circle {
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  transition: all 0.2s ease;
}

.custom-radio input[type="radio"]:checked + .radio-circle {
  border-color: #4b61dd;
}

.custom-radio input[type="radio"]:checked + .radio-circle::after {
  content: "";
  width: 10px;
  height: 10px;
  background-color: #4b61dd;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.radio-text {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
}

/* =========================================================
   STYLING TABEL KONTRIBUTOR
   ========================================================= */

.contributors-table {
  width: 100%;
  border-collapse: collapse;
}

.contributors-table tbody tr td:nth-child(2),
.contributors-table thead tr th:nth-child(2) {
  padding-left: 30px;
}

.contributors-table th {
  background-color: #f8fafc;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  text-align: left;
}

.contributors-table th.col-user {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.contributors-table th.col-action {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  width: 40px;
}

.amount-header-content {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sort-icon {
  color: #94a3b8;
}

.contributors-table td {
  padding: 12px 8px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.contributors-table tr:last-child td {
  border-bottom: none;
}

.contributors-table .col-amount {
  width: 210px;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar-img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.user-name {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}

.user-role {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

.input-amount-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  background-color: #ffffff;
  width: 100%;
}

.currency-prefix {
  background-color: #f8fafc;
  padding: 8px 12px;
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
  border-right: 1px solid #e2e8f0;
}

.input-amount {
  border: none;
  outline: none;
  padding: 8px 12px;
  font-size: 13px;
  color: #1e293b;
  font-weight: 600;
  width: 100%;
}

.btn-remove-item {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

/* =========================================================
   FIXED SLIDE 4 - GRID LAYOUT & SIDE-BY-SIDE CARDS
   ========================================================= */

.slide-4-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 960px;
  height: 100%;
}

.marketplace-card {
  width: 100%;
  max-width: 520px;
  transform: translateX(-160px);
  z-index: 10;
}

.marketplace-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.marketplace-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

.btn-close-card {
  background: none;
  border: none;
  font-size: 22px;
  color: #64748b;
  cursor: pointer;
}

.group-section {
  margin-bottom: 10px;
}

.group-badge {
  display: inline-block;
  background-color: #eff6ff;
  color: #3b82f6;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 6px;
}

.group-section:first-child .grid-options {
  display: grid;
  grid-template-columns: repeat(3, 105px);
  gap: 8px;
}

.grid-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.channel-card-item {
  cursor: pointer;
}

.channel-card-item input[type="checkbox"] {
  display: none;
}

.channel-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 105px;
  height: 60px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background-color: #ffffff;
  padding: 6px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.channel-box img {
  height: 20px;
  width: auto;
  object-fit: contain;
}

.channel-box span {
  font-size: 10px;
  font-weight: 700;
  color: #1e293b;
  text-align: center;
}

.channel-card-item input[type="checkbox"]:checked + .channel-box {
  border-color: #4b61dd;
  box-shadow: 0 0 0 2px rgba(75, 97, 221, 0.2);
  background-color: #f8fafc;
}

.product-popup-card {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 540px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #ffffff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  z-index: 20;
}

.product-popup-title {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: 0.5px;
  margin-top: 0;
  margin-bottom: 12px;
}

.product-inner-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 12px 16px 16px 16px;
  box-sizing: border-box;
}

.product-table-header {
  display: grid;
  grid-template-columns: 2.2fr 1fr 0.7fr 1.5fr 0.8fr;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #1e293b;
  background-color: #f8fafc;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  text-align: center;
}

.product-table-header span:first-child {
  text-align: left;
}

.product-item-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 0 16px 0;
}

.product-thumb {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  background-color: #fef3c7;
}

.product-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 2px 0;
}

.product-sub {
  font-size: 11px;
  color: #64748b;
}

.variants-list {
  display: flex;
  flex-direction: column;
}

.variant-row {
  display: grid;
  grid-template-columns: 2.2fr 1fr 0.7fr 1.5fr 0.8fr;
  align-items: center;
  padding: 10px 0;
  font-size: 11px;
  color: #334155;
  text-align: center;
  border-top: 1px solid #f1f5f9;
}

.var-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.var-name {
  font-weight: 700;
  font-size: 11px;
  color: #334155;
  white-space: nowrap;
}

.var-price,
.var-stock {
  font-size: 11px;
  color: #475569;
  font-weight: 500;
}

.input-price-box {
  /* pointer-events: none; */
  display: inline-flex;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  background-color: #ffffff;
  width: 105px;
  height: 30px;
  justify-self: center;
  box-sizing: border-box;
}

.input-price-box .prefix {
  background-color: #f1f5f9;
  padding: 0 8px;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
  border-right: 1px solid #e2e8f0;
}

.input-price-box input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 500;
  color: #334155;
  background: transparent;
  box-sizing: border-box;
}

.input-min-order {
  /* pointer-events: none; */
  display: inline-block;
  width: 48px !important;
  height: 30px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: #334155;
  outline: none;
  background-color: #ffffff;
  justify-self: center;
  box-sizing: border-box;
}

.input-min-order::-webkit-outer-spin-button,
.input-min-order::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-min-order[type="number"] {
  -moz-appearance: textfield;
}

.switch-toggle {
  /* pointer-events: none; */
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  flex-shrink: 0;
}

.switch-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-round {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: 0.2s;
  border-radius: 20px;
}

.slider-round:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.2s;
  border-radius: 50%;
}

input:checked + .slider-round {
  background-color: #3b50c5;
}

input:checked + .slider-round:before {
  transform: translateX(16px);
}

/* =========================================================
   FIXED SLIDE 4 POSITIONING & TITLE (SAFE FOR JS)
   ========================================================= */

#slide-3 {
  position: relative;
}

.slide-4-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 960px;
}

#slide-3 .slide-title {
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 30;
  width: 100%;
  pointer-events: none;
}

#slide-3 .slide-title h1 {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.4;
  margin: 0;
}

/* =========================================================
   SLIDE 5 - STOCK ADJUSTMENT STYLING (FIXED POSITION & DECOR)
   ========================================================= */

#slide-5 {
  position: relative;
}

.slide-5-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 960px;
}

/* Card Utama Digeser Agak Ke Kiri */
.stock-card {
  width: 100%;
  max-width: 720px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
  z-index: 10;
  transform: translateX(-20%);
}

.stock-card-title {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: 0.8px;
  margin-bottom: 16px;
}

.stock-inner-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

/* Header Table Slide 5 */
.stock-table-header {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1.6fr 0.8fr;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #1e293b;
  background-color: #f8fafc;
  padding: 10px 20px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.stock-table-header .col-qty,
.stock-table-header .col-adj {
  margin-left: -10px;
}

.stock-table-header .col-end {
  margin-left: 10px;
}

.badge-req {
  background-color: #e2e8f0;
  color: #64748b;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 4px;
}

/* Rows List */
.stock-list-rows {
  display: flex;
  flex-direction: column;
}

.stock-row {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1.6fr 0.8fr;
  align-items: center;
  padding: 12px 6px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 12px;
  color: #334155;
}

.stock-row:last-child {
  border-bottom: none;
}

.product-info-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stock-thumb {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  object-fit: cover;
  background-color: #fef3c7;
}

.current-qty-cell {
  margin-left: 0px;
  font-size: 12px;
  color: #475569;
}

.ending-qty-cell {
  margin-left: -62px;
  font-size: 13px;
  font-weight: 600;
  color: #3b50c5;
  text-align: center;
}

/* Container Segmented Control (Ukuran Fix & Tidak Bergeser) */
.btn-group-adj {
  display: inline-flex;
  align-items: center;
  background-color: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;
  width: 170px;
  margin-left: -10px;
  position: relative;
  z-index: 10;
  align-items: stretch;
}

/* Bagian Kiri (Area Switch Tab Add, Min, Set) */
.btn-adj-tab {
  flex: 1;
  background: transparent;
  border: none;
  padding: 6px 0;
  font-size: 11px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  border-radius: 7px;
  margin: 3px 1px;
  text-align: center;
  transition: all 0.2s ease;
}

.btn-adj-tab:first-child {
  margin-left: 3px;
}

/* Status Aktif Tab */
.btn-adj-tab.active {
  background-color: #ffffff !important;
  color: #3b50c5 !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Bagian Kanan (Hanya Display Indikator +50 / -50, Tidak Bisa Diklik) */
/* Bagian Kanan (Display Indikator) */
.btn-adj-val {
  width: 50px;
  min-width: 50px;
  background-color: #ffffff;
  border: none;
  border-left: 1px solid #cbd5e1;
  padding: 8px 0;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  white-space: nowrap;
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 15;
}

/* Matikan pointer-events bawaan untuk elemen anak */
.btn-adj-val * {
  pointer-events: none;
}

.btn-adj-val .sign-symbol {
  color: #3b50c5;
  font-weight: 700;
}

.btn-adj-val .num-val {
  color: #1e293b;
  font-weight: 600;
}

.btn-adj-val:hover {
  background-color: #f8fafc;
}

.btn-adj-val:active {
  background-color: #f1f5f9;
}

/* PERBAIKAN UTAMA: Aktifkan interaksi kursor saat mode edit aktif */
.btn-adj-val .num-val[contenteditable="true"] {
  pointer-events: auto !important; /* Agar klik/kursor bisa masuk ke teks angka */
  user-select: text !important; /* Agar teks angka bisa di-block/diketik */
  cursor: text !important; /* Mengubah kursor jadi mode ketik (I-beam) */
  outline: none !important;
  background-color: #f1f5f9;
  border-radius: 2px;
  padding: 0 4px;
  min-width: 25px;
  display: inline-block;
}

/* =========================================================
   DEKORASI LOGO MEKARI (GARIS MENYENTUH KIRI-BAWAH LOGO CARD)
   ========================================================= */

.decor-side-logo {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center; /* Memposisikan garis di sudut bawah */
  z-index: 5;
}

.dot-line-decor {
  width: 500px;
  height: 6px;
  /* margin-bottom: 0px; */
  margin-right: -12px;

  /* Buat lingkaran bulat sempurna dengan radius 2px (diameter 4px) */
  background-image: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 1) 0px,
    rgba(255, 255, 255, 1) 3px,
    transparent 3.1px
  );

  /* background-size: [jarak horizontal antar titik] [tinggi container] */
  background-size: 12px 6px;
  background-repeat: repeat-x;
  background-position: left center;

  /* Animasi menggeser sesuai ukuran background-size (10px) */
  animation: moveDotLine 0.5s linear infinite;
}

@keyframes moveDotLine {
  from {
    background-position: 0px center;
  }
  to {
    background-position: 12px center; /* Bergerak sejauh background-size (8px) */
  }
}

.icon-brand-card {
  width: 90px;
  height: 90px;
  background: #ffffff;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.icon-brand-card img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

#slide-5 .slide-title {
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 30;
  width: 100%;
}

/* =========================================================
   SLIDE 6 - BUDGET ALLOCATION LAYOUT STYLING
   ========================================================= */

#slide-5 {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  /* display: flex; */
  align-items: center;
  justify-content: center;
}

/* Kontainer Grup yang menyatukan Kartu, Tombol Next, dan Title */
.slide-content-group {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px; /* Jarak tetap konsisten antara kartu, tombol, dan judul */
  width: 100%;
  max-width: 960px;
}

.slide-6-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  width: 100%;
}

/* Kiri: Kartu Akun Utama */
.account-card {
  width: 380px !important;
  /* height: 300px; */
  max-height: none !important;
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  transform: translateX(18px);
}

/* Banner Saldo Biru di Dalam Kartu Utama */
.acc-balance-banner {
  background-image: url("../images/bg-card.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  min-height: 110px;

  border-radius: 12px;
  padding: 22px 24px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.acc-label {
  font-size: 17px;
  color: #ffff;
  font-weight: 500;
}

.acc-amount-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.acc-amount-val {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.acc-currency-icon {
  display: flex;
  font-size: 14px;
  margin-top: 5px;
}

.coin-badge {
  position: absolute;
  right: 15px;
  bottom: 12px;
  font-size: 24px;
}

.sparkle-icon {
  position: absolute;
  top: 12px;
  right: 15px;
  font-size: 14px;
}

/* List Roles & Avatar */
.acc-roles-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.acc-role-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid #f1f5f9;
}

.acc-role-row:last-child {
  border-bottom: none;
}

.role-title {
  font-size: 15px;
  font-weight: 600;
  color: #626262;
}

.avatar-group {
  display: flex;
  align-items: center;
}

.avatar-group img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff;
  margin-left: -8px;
}

.avatar-group img:first-child {
  margin-left: 0;
}

/* Styling Kontainer & Gambar Garis SVG */
.connector-lines-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 -10px; /* Menyesuaikan jarak spasi antar kartu */
}

.connector-lines-container img {
  /* width: 200px; */
  height: 280px;
  /* height: auto; */
  object-fit: contain;
}

/* Kanan: Stack 3 Kartu Budget */
.assigned-budget-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 280px;
  transform: translateX(-35px);
}

.budget-sub-card {
  background-image: url("../images/bg-right-card.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  min-height: 95px;

  border-radius: 12px;
  padding: 16px 18px;
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(59, 80, 197, 0.25);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bgt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: #ffff;
  margin-bottom: 8px;
}

.bgt-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bgt-label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.bgt-input-wrap {
  background: #ffffff;
  border-radius: 6px;
  padding: 4px 8px;
}

.bgt-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
  padding: 2px 0;
}

/* Tombol Next & Judul Bawah Slide 6 */
#slide-5 .btn-primary {
  width: 320px;
  max-width: 100%;
  z-index: 9999 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

#slide-5 .slide-title {
  text-align: center;
  width: 100%;
  pointer-events: none;
}

#slide-5 .slide-title h1 {
  font-size: 18px;
  font-weight: 700;
  color: #000000;
  line-height: 1.3;
  margin-top: -20px;
}

/* =========================================================
   SLIDE 7 - READY TO SELL (GRID 2X2 SUMMARY)
   ========================================================= */

#slide-6 {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  /* background-color: var(--bg-slide-7); */
  /* display: flex; */
  align-items: center;
  justify-content: center;
}

/* Tombol Panah Navigasi Samping */
.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #ffffff;
  font-size: 20px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  transition: background 0.2s;
}

.nav-arrow:hover {
  background: rgba(255, 255, 255, 0.4);
}

.nav-left {
  left: 30px;
}
.nav-right {
  right: 30px;
}

/* Kontainer Utama Grup Slide 7 */
.slide-7-content-group {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 80%;
  padding: 0 20px;
  box-sizing: border-box;
}

.slide-7-title h1 {
  font-size: 26px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  margin: 0;
}

/* Grid 2x2 Kartu Rekap */
.summary-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  width: 100%;
  box-sizing: border-box;
}

.sum-card-box {
  width: 100%;
  background: #2e5ab4;
  border-radius: 5px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  min-height: 100%;
  overflow: visible;
}

.sum-card-box:first-child {
  overflow: visible !important;
}

.sum-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 400;
  color: #ffff;
}

.sum-icon-badge {
  width: 35px;
  height: 35px;
  background: transparent;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.sum-icon-badge img {
  width: 100%;
}

.sum-icon-badge img.stock-allocation-icon {
  width: 215%;
  margin-left: 115%;
}

.sum-card-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center;  */
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 11px;
  color: #334155;
  border: none;
}

.sum-card-inner h3 {
  font-weight: 500;
  padding: 5px;
}

.sum-card-inner h3 span {
  font-weight: 700;
}

.sum-sub-header {
  font-size: 13px;
  color: #334155;
  margin-top: 4px;
  margin-bottom: 4px;
  font-weight: 700;
}

/* =========================================================
   STYLING TABEL GOAL TYPE (MENYESUAIKAN KODE ASLI)
   ========================================================= */
.goal-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  color: #334155;
}

.goal-summary-table th {
  background-color: #edf0f2;
  color: #0f172a;
  font-weight: 700;
  padding: 5px 8px;
  text-align: left;
  /* border-radius: 4px; */
}

.goal-summary-table th:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.goal-summary-table th:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.goal-summary-table th.text-left,
.goal-summary-table td.text-left {
  text-align: left;
}

.goal-summary-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.goal-summary-table tr:last-child td {
  border-bottom: none;
}

/* Mengatur lebar kolom tabel Goal Type agar kolom kedua lebih besar */
.goal-summary-table th:first-child,
.goal-summary-table td:first-child {
  width: 40%; /* Lebar kolom pertama (Kontributor) dikurangi sedikit */
}

.goal-summary-table th:last-child,
.goal-summary-table td:last-child {
  width: 60%; /* Lebar kolom kedua (Achievement) diperbesar */
  text-align: left !important;
}

.sum-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sum-user-info img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.sum-name {
  font-weight: 700;
  color: #1e293b;
  font-size: 10px;
}

.sum-role {
  font-size: 8px;
  color: #64748b;
}

.sum-progress-area {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  font-size: 10px;
}

.sum-progress-area span:first-child {
  color: #1e293b;
  font-weight: 700;
  min-width: 35px;
  text-align: left;
}

.progress-fill {
  height: 100%;
  background: #3b50c5;
  position: relative;
}

.progress-fill::after {
  content: "";
  position: absolute;
  right: -3px;
  top: -2.5px;
  width: 8px;
  height: 8px;
  background-color: #3b50c5;
}

.val-end {
  color: #64748b;
  font-size: 9px;
  text-align: right;
  display: block;
}

/* Preview Marketplace Channels */
.sum-channels-preview {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

.sum-channel-pill {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 11px;
  color: #1e293b;
}

/* Budget Allocation Preview Row */
.budget-preview-row {
  display: flex;
  gap: 8px;
}

.sum-bgt-box {
  flex: 1;
  width: 178px;
  height: 110px;
  background-image: url("../images/bg-right-card.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 10px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sum-bgt-top {
  font-size: 10px;
  opacity: 0.9;
  line-height: 1.2;
  /* position: relative; */
}

.sum-bgt-val {
  display: block; /* Memaksa margin-top dan margin-bottom aktif */
  width: 100%;
  font-size: 11px;
  font-weight: 700;
  margin-top: 18px !important; /* Gunakan !important jika tertimpa alignment flexbox parent */
}

.bgt-title {
  margin-top: 8px;
  display: block;
  font-size: 15px;
}

.bgt-sub {
  display: block;
  font-size: 11px;
}

/* Tombol Start Sales */
.btn-start-sales {
  /* width: 800px; */
  width: 50%;
  border: none;
  border-radius: 8px;
  height: 40px;
  background-color: #ffffff !important;
  color: #3b50c5 !important;
  font-weight: 700;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.btn-start-sales.is-glowing {
  /* opacity: 1; */
  animation: startSalesborderGlow 2s infinite ease-in-out !important;
}

.btn-start-sales:hover {
  background-color: #f8fafc !important;
}

/* Efek Highlight Glowing untuk Semua Tombol Utama yang Aktif (Not Disabled) */
.btn-primary:not(:disabled):not(.disabled) {
  /* border: 2px solid #00a8fd !important; */
  /* box-shadow: 0 0 12px rgba(0, 168, 253, 0.6); */
  animation: borderGlow 2s infinite ease-in-out;
}

/* Matikan animasi & glow saat tombol dalam posisi Disabled */
.btn-primary:disabled,
.btn-primary.disabled {
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
}

/* Keyframes Animasi Glowing */
@keyframes borderGlow {
  0% {
    box-shadow: 0 0 0px #4b61dd;
  }
  50% {
    box-shadow: 0 0 16px rgba(0, 168, 253, 0.9);
  }
  100% {
    box-shadow: 0 0 0px #4b61dd;
  }
}

@keyframes slideUpBtn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes startSalesborderGlow {
  0% {
    box-shadow: 0 0 0px #00a8fd;
  }
  50% {
    box-shadow: 0 0 16px rgba(6, 110, 255, 0.9);
  }
  100% {
    box-shadow: 0 0 0px #00a8fd;
  }
}

/* Styling Progress Wrapper (Tumpuk Atas & Bawah) */
.sum-progress-wrapper {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}

.sum-progress-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

#sum-contrib-p1,
#sum-contrib-p2 {
  color: #1e293b;
  font-weight: 500;
  font-size: 11px;
}

/* Badge Persen */
.ach-percent-badge {
  background-color: #eff6ff;
  color: #3b82f6;
  font-size: 8px;
  font-weight: 500;
  padding: 1px 5px;
  border-radius: 4px;
}

/* Kontainer Progress Bar */
.progress-bar-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  /* max-width: 180px; */
}

.progress-bar-bg {
  width: 100%;
  height: 5px;
  background: #cbd5e1;
  border-radius: 3px;
  overflow: hidden; /* Memastikan isi fill tidak keluar dan tanpa bulatan */
}

.progress-fill {
  height: 100%;
  background: #3b50c5;
  /* border-radius: 3px; */
  width: 0%;
}

/* Teks target maksimal di bawah ujung kanan garis */
.val-end {
  color: #64748b;
  font-size: 9px;
  text-align: right;
  display: block;
  margin-top: -1px;
}

/* =========================================================
   STYLING KARTU CHOOSEN MARKETPLACE (MENYESUAIKAN SLIDE SEBELUMNYA)
   ========================================================= */

.sum-channels-preview {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 6px 0;
}

/* Menggunakan style layout channel-card-item agar seragam dengan slide sebelumnya */
.sum-channels-preview .sum-channel-card,
.channel-card-item .channel-box {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 75px;
  box-sizing: border-box;
}

.sum-channels-preview .sum-channel-logo,
.channel-card-item .channel-box img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.sum-channels-preview .sum-channel-name,
.channel-card-item .channel-box span {
  font-weight: 700;
  font-size: 9px;
  color: #1e293b;
  text-align: center;
  white-space: nowrap;
}

/* =========================================================
   STYLING STOCK ALLOCATION (RAPI, TANPA GAP VERTIKAL, GAMBAR BESAR)
   ========================================================= */

#slide-6 .stock-summary-preview {
  background: #ffffff !important;
  border-radius: 8px;
  padding: 8px !important;
  overflow-y: auto;
  max-height: 190px;
  border: none !important;
  box-shadow: none !important;
}

#slide-6 .sum-stock-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
}

#slide-6 .sum-stock-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Memperbesar ukuran gambar produk jadi lebih besar */
#slide-6 .sum-stock-img {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  object-fit: contain;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

#slide-6 .stock-adj-cell {
  display: flex;
  align-items: center;
  flex: 1;
  position: relative;
  z-index: 5;
}

/* Container utama kontrol agar pas rapat tanpa padding luar */
#slide-6 .btn-group-adj {
  margin-left: 3px;
  display: flex;
  align-items: stretch;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
  font-size: 10px;
  font-weight: 600;
  color: #475569;
  width: 95%;
  box-sizing: border-box;
  padding: 0px; /* Dibuat 0 agar tidak ada jarak/padding aneh di atas-bawah */
  gap: 0px;
}

/* Tombol tab (Add, Min, Set) */
#slide-6 .btn-adj-tab {
  background: transparent;
  border: none;
  padding: 6px 8px;
  margin: 2px; /* Memberikan jarak tipis di dalam container agar kotak putih Add pas mentok */
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  color: #64748b;
  font-weight: 600;
  font-size: 9.5px;
}

/* Kotak putih aktif untuk Add, dibuat agar tingginya pas mentok */
#slide-6 .btn-adj-tab.active {
  background: #ffffff;
  color: #3b50c5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-weight: 700;
  margin: 2px;
}
#slide-6 .btn-adj-val.btn-adj-action {
  background: #ffffff;
  border: none;
  border-left: 1px solid #cbd5e1;
  border-radius: 0;
  /* padding: 6px 10px; */
  cursor: pointer;
  text-align: center;
  color: #334155;
  font-weight: 700;
  font-size: 10.5px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Mengubah perataan ke kiri jika ingin digeser ke kiri */
  padding-left: 12px; /* Gunakan padding positif untuk mengatur jarak dari garis pembatas */
  height: 100%;
}

/* =========================================================
   STYLING BUDGET ALLOCATION (SLIDE 7)
   ========================================================= */

#slide-6 .budget-summary-preview {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  overflow-y: auto;
  max-height: 200px;
}

#slide-6 .sum-budget-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}

#slide-6 .sum-budget-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  border: 1px solid #e2e8f0;
}

#slide-6 .sum-budget-top {
  background: linear-gradient(135deg, #2b4cd8 0%, #1d35a1 100%);
  padding: 12px 14px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  min-height: 65px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#slide-6 .sum-budget-title {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 2px;
}

#slide-6 .sum-budget-category {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
}

#slide-6 .sum-budget-sparkle {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 24px;
  color: #facc15;
  opacity: 0.9;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#slide-6 .sum-budget-bottom {
  background: #ffffff;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#slide-6 .sum-budget-label {
  font-size: 9px;
  font-weight: 700;
  color: #3b50c5;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

#slide-6 .sum-budget-value {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

#sum-bg-transport,
#sum-bg-meals,
#sum-bg-ads {
  width: 112.5%;
  margin-top: 20px;
  margin-left: -10px;
}

#slide-6 .sum-bgt-bottom {
  background-color: #ffffff !important;
  color: #0f172a;
  margin: 20px 0 !important; /* Menghilangkan margin atas agar rapat ke bagian biru */
  padding: 12px 14px; /* Sesuaikan padding dalam sesuai selera */
  width: 100%;
  height: 80px;
  box-sizing: border-box; /* Agar padding tidak merusak lebar 100% */
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom-left-radius: 12px; /* Sudut bawah melengkung rapi */
  border-bottom-right-radius: 12px;
}

#slide-6 .sum-bgt-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #3b50c5 !important;
  letter-spacing: 0.6px !important;
  margin-bottom: 3px !important;
}

#slide-6 .sum-bgt-money {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
}

/* =========================================================
   FIX UNTUK MENYAMAKAN LEBAR (WIDTH) KE-4 KARTU SLIDE 7
   ========================================================= */

/* 1. Kunci pembungkus grid utama Slide 7 agar kolom kiri & kanan membagi 50%-50% persis */
#slide-6 .summary-grid,
#slide-6 .grid-summary-wrapper,
#slide-6 .slide-content {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 2. Kunci elemen kartu agar tidak melebar melebihi kolom grid */
#slide-6 .sum-card-box {
  width: 100% !important;
  min-width: 0 !important; /* KUNCI UTAMA: Mencegah konten di dalam meluapkan kartu */
  box-sizing: border-box !important;
}

/* 3. Perbaiki Grid Budget Allocation agar muat rapi di dalam kartu */
#slide-6 .budget-preview-row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* 4. Perbaiki Grid Stock Allocation agar tidak mendorong kartu keluar */
#slide-6 .sum-stock-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* =========================================================
   STYLING SLIDE 8 (HANYA MENGGUNAKAN IKON SVG)
   ========================================================= */

#slide-7 {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 100vh !important;
  background-color: #17b1ff !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

#slide-7 .setup-success-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 450px;
  text-align: center;
}

/* Menghilangkan border & background lingkaran CSS */
#slide-7 .success-icon-circle {
  width: auto;
  height: auto;
  border: none !important;
  background: transparent !important;
  margin-bottom: 24px;
}

/* Mengatur ukuran gambar SVG */
#slide-7 .success-icon-circle img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  display: block;
}

/* Judul Setup Success */
#slide-7 .success-title {
  color: #ffffff;
  font-size: 38px;
  font-weight: 700;
  margin: 0 0 50px 0;
  letter-spacing: -0.5px;
}

/* Tombol Back to Home Putih */
#slide-7 .btn-reset-success {
  width: 100%;
  max-width: 420px;
  background-color: #ffffff;
  color: #3b50c5;
  border: none;
  border-radius: 12px;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transition:
    transform 0.15s ease,
    background-color 0.15s ease;
}

#slide-7 .btn-reset-success:hover {
  background-color: #f8fafc;
  transform: translateY(-1px);
}

/* =========================================================
   ANIMASI SLIDE 7 (SETUP SUCCESS) - TRIGGER AKTIF
   ========================================================= */

/* Pastikan elemen awal tersembunyi jika slide tidak aktif */
#slide-7 .success-icon-circle,
#slide-7 .success-title,
#slide-7 .btn-reset-success {
  opacity: 0;
}

.btn-reset-success.is-glowing {
  opacity: 1 !important;
  /* border: 2px solid #00a8fd !important; */
  animation: startResetborderGlow 2s infinite ease-in-out !important;
}

@keyframes startResetborderGlow {
  0% {
    box-shadow: 0 0 0px #00a8fd;
  }
  50% {
    box-shadow: 0 0 16px rgba(6, 110, 255, 0.9);
  }
  100% {
    box-shadow: 0 0 0px #00a8fd;
  }
}

/* 1. Ikon Centang (Bounce / Pop-in) saat Slide 7 Aktif */
#slide-7.active .success-icon-circle {
  animation: popInSuccess 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s
    forwards;
}

/* 2. Judul h2 "Setup success" saat Slide 7 Aktif */
#slide-7.active .success-title {
  animation: fadeInUpText 0.6s ease 0.6s forwards;
}

/* 3. Tombol "Back to home" saat Slide 7 Aktif */
#slide-7.active .btn-reset-success.animate-in {
  animation: fadeInUpBtn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.9s forwards;
}

/* --- KEYFRAMES --- */
@keyframes popInSuccess {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  70% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeInUpText {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUpBtn {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================
   FLOATING NAV BUTTONS (KIRI & KANAN LAYAR)
   ========================================================= */
.nav-btn {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: transparent;
  /* color: #ffffff; */
  border: none;
  /* border-radius: 50%; */
  /* font-size: 20px; */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  /* backdrop-filter: blur(4px); */
  transition: all 0.2s ease;
  user-select: none;
}

.nav-btn img {
  width: 100%;
}

.nav-btn:hover:not(:disabled) {
  /* background-color: rgba(255, 255, 255, 0.85); */
  /* color: #1e293b; */
  transform: translateY(-50%) scale(1.1);
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); */
}

.nav-btn:disabled {
  opacity: 0;
  display: none;
  cursor: not-allowed;
}

.nav-btn-prev {
  left: 30px;
}

.nav-btn-next {
  right: 30px;
}

@keyframes modalSlideIn {
  from {
    transform: translatex(100vw);
    opacity: 0;
  }
  to {
    transform: translatex(0);
    opacity: 1;
  }
}

@keyframes modalSlideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-150vh);
    opacity: 0;
  }
}

@keyframes modalSlideInCenter {
  from {
    transform: translate(calc(-50% + 100vw), -50%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

@keyframes modalSlideOutCenter {
  from {
    transform: translate(calc(-50% + 100vw), -50%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

@keyframes slideOutCentered {
  from {
    opacity: 1;
    transform: translate(-50%, -50%); /* Posisi awal: pas di tengah layar */
  }
  to {
    opacity: 0;
    transform: translate(
      calc(-50% - 100vw),
      -50%
    ); /* Posisi akhir: geser 100px ke kanan */
  }
}

/* Container Utama Slide Rekap */
.slide-7-content-group {
  animation: fadeInGroup 0.8s ease forwards;
}

/* Animasi Muncul Berurutan (Durasi diperlambat jadi 0.9s) */
.sum-card-box {
  opacity: 0;
  transform: translateY(25px) scale(0.95);
  animation: popUpCard 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Jeda Waktu Muncul Antar Kartu (Diperlambat) */
.sum-card-box:nth-child(1) {
  animation-delay: 0.25s;
} /* Goal Type */
.sum-card-box:nth-child(2) {
  animation-delay: 0.5s;
} /* Marketplace */
.sum-card-box:nth-child(3) {
  animation-delay: 0.75s;
} /* Stock Allocation */
.sum-card-box:nth-child(4) {
  animation-delay: 1s;
} /* Budget Allocation */

/* Animasi Tombol Start Sales (Muncul Paling Akhir) */
.btn-start-sales.animate-in {
  opacity: 0;
  transform: translateY(30px);
  animation: slideUpBtn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.25s forwards;
}

/* Keyframes Animasi */
@keyframes popUpCard {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slideUpBtn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}