/* MBS FAI - Ajakan gabung Komunitas Saham Syariah (app/Views/partials/kss_ajakan.php).
 * Dipakai di tiga halaman: beranda (#komunitas-saham-syariah, tepat di bawah Info Saham Syariah), Blog HIMA MBS,
 * dan /saham-syariah (templat Course, Bootstrap 4, tanpa main.css). Karena itu file ini MANDIRI: hanya butuh token
 * variables.css + Bootstrap Icons, tidak memakai .btn-mbs/.eyebrow dari main.css, dan tidak menetapkan font
 * (ikut font halaman: Nunito di situs utama, Open Sans di templat saham).
 * Pita terang bergradasi lembut; aksennya tombol bergradasi tema. */
.kss-section{ padding-top: 0; } /* section saham di atasnya sudah memberi jarak bawah */
.kss-ajakan{
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px 32px;
  padding: 32px 36px; border-radius: var(--r-lg); background: var(--mbs-grad-soft); color: var(--mbs-ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mbs-teal) 16%, transparent);
  text-align: left;
}
.kss-ajakan-ikon{
  width: 84px; height: 84px; flex-shrink: 0; overflow: hidden; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mbs-grad-main); color: var(--mbs-white); font-size: 2.1rem; line-height: 1;
}
.kss-ajakan-ikon img{ width: 100%; height: 100%; object-fit: cover; }
.kss-ajakan-teks{ min-width: 0; }
.kss-ajakan-label{ display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mbs-teal); }
.kss-ajakan-teks h2{
  margin: 6px 0 8px; font-family: inherit; font-weight: 700; font-style: normal; text-transform: none;
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem); line-height: 1.25; color: var(--mbs-ink); overflow-wrap: anywhere;
}
.kss-ajakan-teks p{ margin: 0; max-width: 62ch; color: var(--mbs-muted); font-size: 1rem; line-height: 1.6; }
.kss-ajakan-teks .kss-ajakan-catatan{ display: flex; gap: 8px; margin-top: 12px; font-size: .82rem; line-height: 1.5; }
.kss-ajakan-catatan .bi{ color: var(--mbs-teal); margin-top: 2px; }
.kss-ajakan-aksi{ display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.kss-ajakan-jumlah{ margin: 0; text-align: right; font-size: .85rem; color: var(--mbs-muted); }
.kss-ajakan-jumlah strong{ display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.1; color: var(--mbs-teal); }

/* Tombol: sama rupa dengan .btn-mbs-primary situs utama, ditulis ulang supaya juga jalan di templat saham */
.kss-tombol{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 26px;
  border-radius: var(--r-pill); background: var(--mbs-grad-main); color: var(--mbs-white);
  font-weight: 700; font-size: .95rem; line-height: 1.2; text-decoration: none; white-space: nowrap;
  box-shadow: var(--shadow-md); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.kss-tombol:hover, .kss-tombol:focus{ color: var(--mbs-white); text-decoration: none; }
.kss-tombol:focus-visible{ outline: 3px solid var(--mbs-blue-light); outline-offset: 3px; }
.kss-tombol:active{ transform: translateY(0); }
@media (hover: hover){ .kss-tombol:hover{ transform: translateY(-3px); box-shadow: var(--shadow-blue-hover); } }

/* Varian ringkas: pita di Blog HIMA dan halaman Saham Syariah */
.kss-ajakan--ringkas{ margin: 40px 0 32px; padding: 24px 28px; }
.kss-ajakan--ringkas .kss-ajakan-ikon{ width: 64px; height: 64px; font-size: 1.6rem; }
.kss-ajakan--ringkas .kss-ajakan-teks h2{ font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); }

/* Halaman /saham-syariah: tepat di bawah slider utama + kotak pintasannya, sebelum banner harga saham live */
.kss-saham{ padding: 56px 0 0; }
.kss-saham .kss-ajakan--ringkas{ margin: 0; }

@media (max-width: 991.98px){
  .kss-ajakan{ grid-template-columns: auto minmax(0, 1fr); }
  .kss-ajakan-aksi{ grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .kss-ajakan-jumlah{ text-align: left; }
  .kss-ajakan-jumlah strong{ display: inline; font-size: 1.3rem; }
}
@media (max-width: 575.98px){
  .kss-ajakan, .kss-ajakan--ringkas{ padding: 22px 18px; gap: 14px 16px; border-radius: var(--r-md); }
  .kss-ajakan-ikon, .kss-ajakan--ringkas .kss-ajakan-ikon{ width: 52px; height: 52px; font-size: 1.35rem; border-radius: var(--r-sm); align-self: start; }
  .kss-ajakan-label{ font-size: .68rem; }
  .kss-ajakan-teks p{ font-size: .92rem; }
  .kss-ajakan-aksi{ flex-direction: column; align-items: stretch; }
  .kss-tombol{ min-height: 44px; padding: 10px 18px; font-size: .88rem; }
  .kss-saham{ padding-top: 36px; }
}
/* Layar sangat sempit / font sistem besar: label tombol boleh dua baris daripada meluber keluar kartu */
@media (max-width: 22.49em){
  .kss-tombol{ white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce){
  .kss-tombol{ transition: none; }
}