/* Konten Bawah (Why/Promo/Contact) - Ported & Adapted for Muis Feb 11 */
/* Scoped to .ck-konten-bawah */

.ck-konten-bawah {
  /* Dimensions & Spacing */
  /* --container: 1120px; REMOVED: Use theme container */

  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.25rem;
  --s6: 1.5rem;
  --s7: 2rem;
  --s8: 2.75rem;

  --radius: 22px;
  --radius-sm: 14px;

  /* Color Mapping to Muis Feb 11 Theme Variables */
  /* If theme vars are missing, fallbacks are provided */
  --surface: var(--color-white, #ffffff);
  --border: var(--color-slate-200, #e2e8f0);
  --muted: var(--color-slate-500, #64748b);

  --brand-700: var(--color-slate-800, #1e293b);
  --brand-900: var(--color-slate-900, #0f172a);

  /* Mapping Accent (Orange in Source) to Primary Red in Target */
  --accent-700: var(--color-gov-600, #b91c1c);
  --accent-500: var(--color-gov-500, #d62727);
}

/* Container Adapter */
/* We expect the parent .container to handle width. 
   We just ensure we don't break out of it. */
/* Container override removed */

/* Sections */
.ck-konten-bawah .section {
  padding: var(--s8) 0;
}

.ck-konten-bawah .section--tint {
  /* Using slate-50 as tint base */
  background: linear-gradient(180deg, transparent, var(--color-gov-50, #f1faff), transparent);
}

.ck-konten-bawah .section__head {
  margin-bottom: var(--s6);
}

.ck-konten-bawah .section__title {
  margin: 0;
  font-size: clamp(1.55rem, 2.1vw, 2.1rem);
  letter-spacing: -0.015em;
  color: var(--brand-900);
}

.ck-konten-bawah .section__sub {
  margin: var(--s2) 0 0;
  color: var(--muted);
  max-width: 70ch;
}

.ck-konten-bawah .small {
  font-size: 0.92rem;
}

.ck-konten-bawah .muted {
  color: var(--muted);
}

/* Buttons */
.ck-konten-bawah .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.05rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 750;
  letter-spacing: 0.2px;
  box-shadow: none;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  line-height: 1.2;
}

.ck-konten-bawah .btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
  transition: transform 150ms ease;
}

.ck-konten-bawah .btn:active {
  transform: translateY(0);
}

/* Button Variants */
.ck-konten-bawah .btn--primary {
  background: var(--accent-500);
  color: white;
}

.ck-konten-bawah .btn--primary:hover {
  background: var(--accent-700);
}

.ck-konten-bawah .btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--brand-900);
}

.ck-konten-bawah .btn--ghost:hover {
  background: var(--color-slate-100, #f1f5f9);
}

.ck-konten-bawah .btn--soft {
  background: var(--color-gov-100, #e3f4fe);
  border-color: var(--color-gov-200, #c5ebfd);
  color: var(--brand-900);
}

.ck-konten-bawah .btn--sm {
  padding: 0.6rem 0.8rem;
  font-size: 0.92rem;
}

/* Why Features Grid */
.ck-konten-bawah .features {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s5);
}

.ck-konten-bawah .feature {
  grid-column: span 6;
  background: #d62727 !important;
  color: white !important;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s6);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.05);
  /* Simplified shadow */
}

.ck-konten-bawah .feature__title {
  margin: 0 0 var(--s3);
  font-size: 1.05rem;
  font-weight: 850;
  color: white !important;
}

.ck-konten-bawah .feature__text {
  margin: 0;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Promo Section */
.ck-konten-bawah .promo {
  padding: var(--s8) 0;
}

.ck-konten-bawah .promo__inner {
  display: flex !important;
  flex-direction: column;
  gap: var(--s6);
  align-items: stretch;
}

.ck-konten-bawah .promo__copy {
  background: #000000 !important;
  background-image: none !important;
  background-color: #000000 !important;
  color: white !important;
  padding: var(--s6);
  border-radius: var(--radius);
}

.ck-konten-bawah .promo__copy .promo__title {
  color: white !important;
}

.ck-konten-bawah .promo__copy .promo__text {
  color: rgba(255, 255, 255, 0.8) !important;
}

.ck-konten-bawah .promo__copy .btn--ghost {
  color: white !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.ck-konten-bawah .promo__copy .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
}

/* Desktop Fix (Horizontal) */
@media (min-width: 1024px) {
  .ck-konten-bawah .promo__inner {
    display: flex !important;
    flex-direction: row;
    gap: 2rem;
    align-items: stretch;
  }

  .ck-konten-bawah .promo__copy {
    flex: 1 1 50%;
  }

  .ck-konten-bawah .promo__panel {
    flex: 1 1 50%;
  }
}



.ck-konten-bawah .promo__title {
  margin: 0;
  font-size: clamp(1.55rem, 2.1vw, 2.1rem);
  letter-spacing: -0.015em;
  color: var(--brand-900);
}

.ck-konten-bawah .promo__text {
  margin: var(--s3) 0 0;
  color: var(--muted);
}

.ck-konten-bawah .promo__actions {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s5);
}

.ck-konten-bawah .promo__panel {
  /* Removed span 6 dependency */
  /* Background changed to white as requested */
  background: #ffffff;
  color: var(--brand-900);
  border-radius: var(--radius);
  padding: var(--s6);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
}

.ck-konten-bawah .promo__badge {
  display: inline-block;
  font-weight: 850;
  letter-spacing: .3px;
  opacity: .85;
  margin-bottom: var(--s4);
}

.ck-konten-bawah .promo__list {
  margin: 0;
  padding-left: 1.05rem;
}

.ck-konten-bawah .promo__list li {
  margin: .35rem 0;
}

/* Contact Section */
.ck-konten-bawah .contact-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s5);
}

.ck-konten-bawah .contact-card {
  grid-column: span 4;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s6);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.05);
}

.ck-konten-bawah .contact-card__title {
  margin: 0 0 var(--s3);
  font-size: 1.05rem;
  font-weight: 850;
  color: var(--brand-900);
}

.ck-konten-bawah .contact-card__text {
  margin: 0;
  color: var(--muted);
}

.ck-konten-bawah .contact-card__actions {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s5);
}

.ck-konten-bawah .link-strong {
  font-weight: 800;
  color: var(--brand-900);
}

/* Responsive */
@media (max-width: 980px) {
  .ck-konten-bawah .feature {
    grid-column: span 12;
  }



  .ck-konten-bawah .contact-card {
    grid-column: span 12;
  }
}