/* ====================================================== */
/* FINAL CALL TO ACTION SECTION */
/* Mengajak visitor bergabung dalam ekosistem */
/* ====================================================== */

.cta-section{

/* gradient background agar kuat secara visual */

background:linear-gradient(
135deg,
var(--primary-900),
var(--primary-700)
);

/* spacing */

padding:90px 0;

/* text putih */

color:white;

text-align:center;

position:relative;

/* separator */

border-bottom:3px solid transparent;

background:
linear-gradient(
135deg,
var(--primary-900),
var(--primary-700)
) padding-box,

linear-gradient(
90deg,
transparent,
rgba(0,200,180,0.35),
transparent
) border-box;

}


/* ====================================================== */
/* CTA TITLE */
/* ====================================================== */

.cta-title{

font-size:32px;

margin-bottom:10px;
color:white;
}


/* ====================================================== */
/* CTA DESCRIPTION */
/* ====================================================== */

.cta-desc{

font-size:16px;

opacity:0.8;

max-width:600px;

margin:auto;

margin-bottom:30px;
color:rgba(255,255,255,0.8);
}


/* ====================================================== */
/* CTA BUTTON AREA */
/* ====================================================== */

.cta-buttons{

display:flex;

flex-wrap:wrap;

gap:14px;

justify-content:center;

}


/* ====================================================== */
/* BUTTON STYLE */
/* ====================================================== */

.cta-btn-primary{

background:var(--accent-500);

color:white;

padding:14px 28px;

border-radius:var(--radius-md);

font-weight:600;
/* glow effect */

box-shadow:
0 6px 20px rgba(0,200,180,0.35);

/* smooth interaction */

transition:all 0.25s ease;
}

/* hover effect */

.cta-btn-primary:hover{

transform:translateY(-2px);

box-shadow:
0 12px 28px rgba(0,200,180,0.45);

}

/* outline button */

.cta-btn-secondary{

border:2px solid rgba(255,255,255,0.4);

color:white;

padding:14px 28px;

border-radius:var(--radius-md);

transition:all 0.25s ease;

}

.cta-btn-secondary:hover{

border-color:rgba(255,255,255,0.75);

background:rgba(255,255,255,0.08);

color:white;

}


/* ====================================================== */
/* RESPONSIVE - MOBILE                                    */
/* ====================================================== */

@media (max-width: 576px) {

  .cta-section {
    padding: 60px 0;
  }

  .cta-title {
    font-size: 24px;
  }

  .cta-desc {
    font-size: 14px;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }

}