/* =====================================================================
   VALUE / WORKFLOW
   ===================================================================== */
.aldi-cb-hdr-wrapper, .aldi-cb-wrapper { font-family: var(--font-body); width: 100%; background: transparent; box-sizing: border-box; }
.aldi-cb-hdr-wrapper *, .aldi-cb-wrapper * { box-sizing: border-box; }
.aldi-cb-hdr-section { width: 100%; padding: 20px 0 0; margin: 0; }
.aldi-cb-hdr-container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-4); display: flex; flex-direction: column; align-items: center; width: 100%; }
.aldi-cb-hdr-content { text-align: center; max-width: 800px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0; }
.aldi-cb-judul { font-size: var(--fs-judul1); font-weight: var(--fw-black); color: var(--primary); margin: 0; padding: 0; letter-spacing: var(--ls-tight); text-align: center; line-height: var(--lh-tight); }
.aldi-cb-judul::after { content: ''; display: block; height: 1px; width: 120px; margin: 6px auto; background: linear-gradient(90deg, transparent 0%, var(--primary-border) 20%, var(--primary) 50%, var(--primary-border) 80%, transparent 100%); }
.aldi-cb-hdr-desc { font-size: var(--fs-text1); font-weight: var(--fw-light); line-height: var(--lh-normal); color: var(--text-secondary); margin: 0; padding: 0; text-align: center; }
.aldi-cb-container { max-width: var(--max-width); margin: 0 auto; padding: 56px 20px; width: 100%; }
.aldi-cb-tabs { display: flex; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-8); flex-wrap: wrap; }
.aldi-cb-tab { font-family: var(--font-body); font-size: var(--fs-tombol); font-weight: var(--fw-semibold); padding: 10px 22px; border-radius: var(--radius-pill); border: none; background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text-secondary); cursor: pointer; transition: var(--transition-hover), color var(--transition-fast); letter-spacing: var(--ls-wide); text-transform: uppercase; line-height: var(--lh-tight); }
.aldi-cb-tab:hover { color: var(--primary); box-shadow: var(--shadow-pressed); transform: translateY(2px); }
.aldi-cb-tab:active { box-shadow: var(--shadow-inset) !important; color: var(--primary); transform: translateY(2px) !important; }
.aldi-cb-tab--active { box-shadow: var(--shadow-inset); color: var(--primary); transform: translateY(2px); }
.aldi-cb-panel { display: none; }
.aldi-cb-panel--active { display: block; }
.aldi-cb-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; width: 100%; }
.aldi-cb-card { background: var(--surface); border-radius: var(--card-radius); padding: 24px 22px 28px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); transition: box-shadow 0.3s ease, transform 0.3s ease; position: relative; overflow: hidden; box-shadow: var(--card-shadow); }
.aldi-cb-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(var(--card-lift)); }
.aldi-cb-icon-box { width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); border-radius: var(--radius-circle); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--shadow-sm); transition: all 0.4s var(--ease-standard); }
.aldi-cb-card:hover .aldi-cb-icon-box { transform: scale(1.1); box-shadow: var(--shadow-lg); }
.aldi-cb-icon-box svg { width: 18px; height: 18px; }
.aldi-cb-title { font-size: var(--fs-judul2); font-weight: var(--fw-bold); color: var(--primary); margin: 0; line-height: var(--lh-snug); transition: all 0.3s var(--ease-standard); }
.aldi-cb-card:hover .aldi-cb-title { color: var(--primary); transform: translateY(-2px); }
.aldi-cb-desc { font-size: var(--fs-text1); font-weight: var(--fw-light); line-height: var(--lh-normal); color: var(--text-secondary); margin: 0; }
.aldi-cb-steps { display: flex; flex-direction: column; width: 100%; }
.aldi-cb-step-card { background: var(--surface); border-radius: var(--card-radius); padding: 20px var(--space-6); display: flex; flex-direction: row; align-items: center; gap: var(--space-4); transition: box-shadow 0.3s ease, transform 0.3s ease; position: relative; overflow: hidden; box-shadow: var(--card-shadow); }
.aldi-cb-step-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(var(--card-lift)); }
.aldi-cb-connector { width: 2px; height: var(--space-4); background: linear-gradient(to bottom, var(--primary-border), var(--primary-dim)); margin-left: 42px; }
.aldi-cb-number { width: 40px; height: 40px; min-width: 40px; border-radius: var(--radius-circle); background: linear-gradient(135deg, var(--primary), var(--primary-hover)); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: var(--fw-black); color: #fff; box-shadow: var(--shadow-sm); flex-shrink: 0; z-index: 1; line-height: var(--lh-tight); transition: all 0.4s var(--ease-standard); letter-spacing: var(--ls-wide); }
.aldi-cb-step-card:hover .aldi-cb-number { transform: scale(1.1); box-shadow: var(--shadow-lg); }
.aldi-cb-step-icon-box { width: 40px; height: 40px; min-width: 40px; background: linear-gradient(135deg, var(--primary), var(--primary-hover)); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; transition: all 0.4s var(--ease-standard); flex-shrink: 0; box-shadow: var(--shadow-sm); }
.aldi-cb-step-card:hover .aldi-cb-step-icon-box { transform: scale(1.05); box-shadow: var(--shadow-lg); }
.aldi-cb-step-icon-box svg { width: 18px; height: 18px; }
.aldi-cb-step-content { display: flex; flex-direction: column; gap: 5px; flex: 1; text-align: left; }
.aldi-cb-step-title { font-size: var(--fs-judul2); font-weight: var(--fw-bold); color: var(--primary); margin: 0; line-height: var(--lh-snug); transition: all 0.3s var(--ease-standard); text-align: left; }
.aldi-cb-step-card:hover .aldi-cb-step-title { color: var(--primary); transform: translateY(-2px); }
.aldi-cb-step-desc { font-size: var(--fs-text1); font-weight: var(--fw-light); line-height: var(--lh-normal); color: var(--text-secondary); margin: 0; text-align: left; }

@media(min-width:1441px) {
  .aldi-cb-container { padding: 40px 100px; }
  .aldi-cb-hdr-container { padding: 0 100px; }
}
@media(min-width:1025px) and (max-width:1440px) {
  .aldi-cb-container { padding: 40px 50px; }
  .aldi-cb-hdr-container { padding: 0 50px; }
}
@media(max-width:1024px) {
  .aldi-cb-container { padding: var(--space-6) var(--space-6); }
  .aldi-cb-hdr-container { padding: 0 var(--space-6); }
  .aldi-cb-grid { grid-template-columns: repeat(2,1fr); gap: var(--space-4); }
  .aldi-cb-card { padding: 20px 18px var(--space-6); }
  .aldi-cb-tabs { gap: var(--space-2); margin-bottom: var(--space-6); }
}
@media(max-width:768px) {
  .aldi-cb-card { padding: 18px var(--space-4) 22px; }
  .aldi-cb-step-card:hover { transform: none; }
  .aldi-cb-card:hover { transform: none; }
}
@media(max-width:599px) {
  .aldi-cb-container { padding: 20px 20px; }
  .aldi-cb-hdr-container { padding: 0 20px; }
  .aldi-cb-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .aldi-cb-card { border-radius: var(--card-radius-mobile); padding: var(--space-4) 14px 20px; }
  .aldi-cb-tabs { gap: var(--space-2); margin-bottom: 20px; }
  .aldi-cb-tab { padding: 8px 18px; }
  .aldi-cb-number { width: 34px; height: 34px; min-width: 34px; }
  .aldi-cb-step-icon-box { width: 34px; height: 34px; min-width: 34px; }
  .aldi-cb-step-card { padding: var(--space-4); gap: var(--space-3); border-radius: var(--radius-md); }
  .aldi-cb-connector { margin-left: 30px; height: var(--space-3); }
}