/* ===== Tema SMART TUTOR LMS: biru navy + emas (mengikuti banner) ===== */
:root {
  --st-navy: #0f3d91;
  --st-navy-rgb: 15, 61, 145;
  --st-navy-gelap: #0a2a66;
  --st-biru: #1d5bd8;
  --st-emas: #f2a81d;
  --st-emas-rgb: 242, 168, 29;
  --st-emas-gelap: #c9840a;
  --st-krem: #fbf7ee;

  --bs-primary: var(--st-navy);
  --bs-primary-rgb: var(--st-navy-rgb);
  --bs-primary-text-emphasis: #0a2a66;
  --bs-primary-bg-subtle: #e3ebfa;
  --bs-primary-border-subtle: #b8c9ef;
  --bs-link-color: var(--st-navy);
  --bs-link-color-rgb: var(--st-navy-rgb);
  --bs-link-hover-color: var(--st-biru);
  --bs-link-hover-color-rgb: 29, 91, 216;
  --bs-warning: var(--st-emas);
  --bs-warning-rgb: var(--st-emas-rgb);
  --bs-body-color: #1f2937;
  --bs-border-radius: .6rem;
  --bs-border-radius-lg: .9rem;
}

body { background: #f6f8fc; }

/* Latar halaman selain Beranda: semburat navy & emas + pola titik halus */
body.latar-pola {
  background-color: #f6f8fc;
  background-image:
    radial-gradient(circle at 0% 0%, rgba(29, 91, 216, .10), transparent 34rem),
    radial-gradient(circle at 100% 100%, rgba(242, 168, 29, .13), transparent 32rem),
    radial-gradient(rgba(15, 61, 145, .075) 1px, transparent 1.5px);
  background-size: auto, auto, 22px 22px;
  background-attachment: fixed;
}

/* Komponen Bootstrap yang warnanya tertanam saat kompilasi */
.btn-primary {
  --bs-btn-bg: var(--st-navy); --bs-btn-border-color: var(--st-navy);
  --bs-btn-hover-bg: var(--st-navy-gelap); --bs-btn-hover-border-color: var(--st-navy-gelap);
  --bs-btn-active-bg: var(--st-navy-gelap); --bs-btn-active-border-color: var(--st-navy-gelap);
  --bs-btn-disabled-bg: var(--st-navy); --bs-btn-disabled-border-color: var(--st-navy);
  --bs-btn-focus-shadow-rgb: var(--st-navy-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--st-navy); --bs-btn-border-color: var(--st-navy);
  --bs-btn-hover-bg: var(--st-navy); --bs-btn-hover-border-color: var(--st-navy);
  --bs-btn-active-bg: var(--st-navy-gelap); --bs-btn-active-border-color: var(--st-navy-gelap);
  --bs-btn-focus-shadow-rgb: var(--st-navy-rgb);
}
.btn-emas {
  --bs-btn-color: #1f2937; --bs-btn-bg: var(--st-emas); --bs-btn-border-color: var(--st-emas);
  --bs-btn-hover-color: #111827; --bs-btn-hover-bg: #ffbb33; --bs-btn-hover-border-color: #ffbb33;
  --bs-btn-active-bg: var(--st-emas-gelap); --bs-btn-active-border-color: var(--st-emas-gelap);
  --bs-btn-focus-shadow-rgb: var(--st-emas-rgb);
  font-weight: 600;
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--st-navy); }
.nav { --bs-nav-link-color: var(--st-navy); --bs-nav-link-hover-color: var(--st-biru); }
.pagination { --bs-pagination-active-bg: var(--st-navy); --bs-pagination-active-border-color: var(--st-navy); --bs-pagination-color: var(--st-navy); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--st-navy); }
.form-control:focus, .form-select:focus { border-color: #8aa6e0; box-shadow: 0 0 0 .25rem rgba(var(--st-navy-rgb), .18); }
.form-check-input:checked { background-color: var(--st-navy); border-color: var(--st-navy); }
.text-bg-warning { color: #1f2937 !important; }
.card { --bs-card-border-radius: var(--bs-border-radius-lg); }

/* ===== Navbar & footer ===== */
.navbar-st {
  background: linear-gradient(90deg, var(--st-navy-gelap), var(--st-navy) 55%, var(--st-biru));
  border-bottom: 3px solid var(--st-emas);
}
.navbar-st .navbar-brand { letter-spacing: .02em; }
.navbar-st .nav-link { color: rgba(255, 255, 255, .82); }
.navbar-st .nav-link:hover, .navbar-st .nav-link:focus { color: #fff; }
.navbar-st .nav-link.active { color: var(--st-emas) !important; }

.footer-st { background: var(--st-navy-gelap); border-top: 3px solid var(--st-emas); }
.footer-st a { color: #fff; }

/* ===== Beranda ===== */
/* Foto tim GEN-H sebagai latar, diredam lapisan navy agar teks tetap terbaca */
body { --latar-aktif: var(--foto-latar); }
@media (max-width: 767.98px) { body { --latar-aktif: var(--foto-latar-kecil); } }

.hero-st {
  background:
    radial-gradient(1200px 400px at 85% -10%, rgba(var(--st-emas-rgb), .20), transparent 60%),
    linear-gradient(100deg, rgba(10, 42, 102, .95) 0%, rgba(15, 61, 145, .86) 42%, rgba(29, 91, 216, .58) 100%),
    var(--latar-aktif) center 38% / cover no-repeat;
  color: #fff;
}
@media (max-width: 991.98px) {
  .hero-st {
    background:
      linear-gradient(180deg, rgba(10, 42, 102, .80) 0%, rgba(15, 61, 145, .90) 55%, rgba(10, 42, 102, .96) 100%),
      var(--latar-aktif) center 30% / cover no-repeat;
  }
}
.hero-banner {
  border-radius: 1rem;
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, .35);
  border: 4px solid rgba(255, 255, 255, .9);
}
.hero-st .lead { color: rgba(255, 255, 255, .88); }
.pill-emas {
  display: inline-block; background: rgba(var(--st-emas-rgb), .18); color: #ffd27a;
  border: 1px solid rgba(var(--st-emas-rgb), .45); border-radius: 50rem;
  padding: .3rem .9rem; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}

.stat-st {
  margin-top: -2.25rem; position: relative; z-index: 2;
}
/* Ringkasan statistik beranda: satu panel datar, angka + label sebaris, dipisah garis tipis. */
.ringkasan-stat {
  display: grid; grid-template-columns: repeat(4, 1fr); padding: .9rem 0;
  background: #fff; border-radius: 1rem; box-shadow: 0 .5rem 1.5rem rgba(15, 61, 145, .08);
}
.ringkasan-stat .item {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .15rem .5rem;
  padding: .35rem 1rem; text-align: center; cursor: default; border-left: 1px solid var(--bs-border-color);
}
.ringkasan-stat .item:first-child { border-left: 0; }
.ringkasan-stat .angka { font-size: 1.6rem; font-weight: 800; color: var(--st-navy); line-height: 1.1; }
.ringkasan-stat .ikon { font-size: 1.35rem; color: var(--st-emas); align-self: center; line-height: 1; }
.ringkasan-stat .label { font-size: .9rem; color: var(--bs-secondary-color); }
@media (max-width: 991.98px) {
  .ringkasan-stat { grid-template-columns: repeat(2, 1fr); padding: .4rem 0; }
  .ringkasan-stat .item { padding: .7rem .5rem; }
  .ringkasan-stat .item:nth-child(odd) { border-left: 0; }
  .ringkasan-stat .item:nth-child(n+3) { border-top: 1px solid var(--bs-border-color); }
  .ringkasan-stat .angka { font-size: 1.35rem; }
  .ringkasan-stat .ikon { font-size: 1.15rem; }
  .ringkasan-stat .label { flex-basis: 100%; font-size: .85rem; }
}
.stat-angka { font-size: 1.9rem; font-weight: 800; color: var(--st-navy); line-height: 1.1; }

.judul-bagian { font-weight: 800; color: var(--st-navy-gelap); }
.judul-bagian::after {
  content: ""; display: block; width: 3rem; height: .3rem; margin-top: .5rem;
  background: var(--st-emas); border-radius: .2rem;
}
.text-center .judul-bagian::after, .judul-bagian.tengah::after { margin-left: auto; margin-right: auto; }

.ikon-bulat {
  width: 3.25rem; height: 3.25rem; border-radius: 1rem; display: inline-flex; align-items: center;
  justify-content: center; font-size: 1.5rem; flex-shrink: 0;
  background: var(--bs-primary-bg-subtle); color: var(--st-navy);
}
.ikon-bulat.emas { background: rgba(var(--st-emas-rgb), .18); color: var(--st-emas-gelap); }

.bg-krem { background: var(--st-krem); }
.cta-st {
  background: linear-gradient(120deg, var(--st-navy) 0%, var(--st-biru) 100%);
  color: #fff; border-radius: 1.25rem; position: relative; overflow: hidden;
}
.cta-st::after {
  content: ""; position: absolute; right: -4rem; top: -4rem; width: 14rem; height: 14rem;
  border-radius: 50%; background: rgba(var(--st-emas-rgb), .25);
}
.cta-st > * { position: relative; z-index: 1; }

/* ===== Umum ===== */
.hero { background: linear-gradient(135deg, var(--st-navy) 0%, var(--st-biru) 100%); }

.foto-kegiatan { aspect-ratio: 4 / 3; object-fit: cover; }

.card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 .75rem 1.75rem rgba(15, 61, 145, .15) !important; }

.kode-kelas { font-family: var(--bs-font-monospace); letter-spacing: .1em; }

/* ===== Header halaman (program, dashboard) ===== */
.page-head {
  background:
    radial-gradient(900px 300px at 90% -20%, rgba(var(--st-emas-rgb), .22), transparent 60%),
    linear-gradient(110deg, rgba(10, 42, 102, .96) 0%, rgba(15, 61, 145, .90) 55%, rgba(29, 91, 216, .78) 100%),
    var(--head-pakai) center 40% / cover no-repeat;
  color: #fff; padding: 2.25rem 0 4.5rem;
  /* Tiap halaman boleh memilih fotonya sendiri lewat --foto-head / --foto-head-kecil */
  --head-pakai: var(--foto-head, var(--latar-aktif));
}
@media (max-width: 767.98px) { .page-head { --head-pakai: var(--foto-head-kecil, var(--foto-head, var(--latar-aktif))); } }
.page-head .breadcrumb { --bs-breadcrumb-divider-color: rgba(255,255,255,.5); --bs-breadcrumb-item-active-color: rgba(255,255,255,.75); }
.page-head .breadcrumb a { color: #ffd27a; }
.page-head .lead, .page-head .sub { color: rgba(255,255,255,.82); }
.page-body { margin-top: -3rem; position: relative; z-index: 2; }

.avatar-st {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--st-emas); color: var(--st-navy-gelap); font-weight: 800; font-size: 1.35rem; flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(255,255,255,.25);
}

.stat-kartu { border: 0; box-shadow: 0 .75rem 2rem rgba(15, 61, 145, .12); }
.stat-kartu .label { font-size: .8rem; color: var(--bs-secondary-color); }
.ikon-bulat.hijau { background: #e3f5ea; color: #198754; }
.ikon-bulat.merah { background: #fde8ea; color: #dc3545; }
.ikon-bulat.ungu { background: #efe9fb; color: #6f42c1; }

.kartu-kelas { border: 0; overflow: hidden; }
.kartu-kelas .strip { height: .35rem; background: linear-gradient(90deg, var(--st-navy), var(--st-biru)); }
.kartu-kelas .strip.emas { background: linear-gradient(90deg, var(--st-emas-gelap), var(--st-emas)); }
.kartu-kelas .meta { font-size: .85rem; color: var(--bs-secondary-color); }
.kartu-kelas .card-footer { background: #f8faff; border-top: 1px solid #eef2fb; }

.daftar-rapi .list-group-item { border-color: #eef2fb; }

/* ===== Sidebar manajemen ===== */
.sidebar-st { background: #fff; border-radius: var(--bs-border-radius-lg); box-shadow: 0 .5rem 1.5rem rgba(15, 61, 145, .08); padding: 1rem .75rem; }
@media (min-width: 992px) { .sidebar-st { position: sticky; top: 5rem; } }
.sidebar-st .nav-link { color: #334155; border-radius: .6rem; padding: .5rem .75rem; font-size: .92rem; }
.sidebar-st .nav-link:hover { background: var(--bs-primary-bg-subtle); color: var(--st-navy); }
.sidebar-st .nav-link.active { background: linear-gradient(90deg, var(--st-navy), var(--st-biru)); color: #fff; box-shadow: 0 .35rem .9rem rgba(15, 61, 145, .25); }
.sidebar-st .grup { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; font-weight: 700; padding: .75rem .75rem .25rem; }

/* ===== Program ===== */
.kartu-program .card-body { padding: 1.5rem; }
.kartu-program .harga { font-weight: 700; color: var(--st-navy); }
.kartu-kelas-pilih { border: 1px solid #e5ecf8; transition: border-color .15s ease, box-shadow .15s ease; }
.kartu-kelas-pilih:hover { border-color: var(--st-biru); box-shadow: 0 .5rem 1.25rem rgba(15, 61, 145, .12); }
@media (min-width: 992px) { .form-lengket { position: sticky; top: 5.5rem; } }

#formulir { scroll-margin-top: 5.5rem; }

/* ===== Halaman login berlatar foto ===== */
.login-latar {
  background:
    linear-gradient(135deg, rgba(10, 42, 102, .88) 0%, rgba(15, 61, 145, .78) 50%, rgba(29, 91, 216, .62) 100%),
    var(--latar-aktif) center 38% / cover no-repeat;
  min-height: calc(100vh - 4rem);
  display: flex; align-items: center;
}
.login-latar .card { border: 0; box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, .35); backdrop-filter: blur(2px); }
.login-latar .sambutan { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }

/* ===== Pita foto samar di atas halaman sekunder (form, manajemen) =====
   Foto dari --foto, memudar ke latar pola di bawahnya. */
.latar-atas { position: relative; isolation: isolate; }
.latar-atas::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 24rem; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(246, 248, 252, .72), rgba(246, 248, 252, .86)),
    var(--foto-kecil, var(--foto)) center 35% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent);
  mask-image: linear-gradient(180deg, #000 35%, transparent);
}
@media (min-width: 768px) { .latar-atas::before { background-image: linear-gradient(180deg, rgba(246, 248, 252, .72), rgba(246, 248, 252, .86)), var(--foto); } }

/* ===== Bagian berlatar foto kegiatan (Beranda) =====
   Setiap bagian mengisi --foto / --foto-kecil lewat atribut style.
   Lapisan warna memudar ke warna halaman di tepi atas & bawah agar transisi halus. */
.bagian-foto { --foto-pakai: var(--foto); position: relative; }
@media (max-width: 767.98px) { .bagian-foto { --foto-pakai: var(--foto-kecil, var(--foto)); } }

.latar-terang {
  background:
    linear-gradient(180deg, #f6f8fc 0%, rgba(246, 248, 252, .88) 16%, rgba(246, 248, 252, .86) 84%, #f6f8fc 100%),
    var(--foto-pakai) center / cover no-repeat;
}
.latar-krem {
  background:
    linear-gradient(180deg, #f6f8fc 0%, rgba(251, 247, 238, .9) 15%, rgba(251, 247, 238, .88) 85%, #f6f8fc 100%),
    var(--foto-pakai) center 30% / cover no-repeat;
}
.latar-navy {
  background:
    linear-gradient(180deg, rgba(10, 42, 102, .93) 0%, rgba(15, 61, 145, .84) 50%, rgba(10, 42, 102, .93) 100%),
    var(--foto-pakai) center 35% / cover no-repeat;
  color: #fff;
}
.latar-navy .judul-bagian { color: #fff; }
.latar-navy .text-body-secondary { color: rgba(255, 255, 255, .78) !important; }

@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  /* Parallax lembut: foto diam, lapisan warna ikut bergulir */
  .latar-terang, .latar-krem, .latar-navy, .cta-foto { background-attachment: scroll, fixed; }
}

.langkah-st {
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 1rem; backdrop-filter: blur(4px); height: 100%;
}
.langkah-st .nomor {
  width: 3rem; height: 3rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--st-emas); color: var(--st-navy-gelap); font-weight: 800; font-size: 1.25rem;
}

.cta-foto {
  background:
    linear-gradient(115deg, rgba(10, 42, 102, .95) 0%, rgba(15, 61, 145, .86) 55%, rgba(29, 91, 216, .70) 100%),
    var(--foto-pakai) center 40% / cover no-repeat;
}

/* Galeri suasana belajar */
.galeri-st { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .galeri-st { grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; height: 32rem; }
  .galeri-st .utama { grid-row: 1 / span 2; }
}
.galeri-st figure { position: relative; margin: 0; overflow: hidden; border-radius: 1rem; min-height: 14rem; box-shadow: 0 .75rem 2rem rgba(15, 61, 145, .15); }
.galeri-st img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; position: absolute; inset: 0; }
.galeri-st figure:hover img { transform: scale(1.05); }
.galeri-st figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.25rem 1rem; color: #fff; font-weight: 600;
  background: linear-gradient(180deg, transparent, rgba(10, 42, 102, .85));
}

/* ===== Log aktivitas ===== */
.ikon-bulat.kecil { width: 2.25rem; height: 2.25rem; font-size: 1rem; flex-shrink: 0; }
.log-baris + .log-baris { border-top: 1px solid #eef2fb; }
.min-w-0 { min-width: 0; }
.peran-admin { background: rgba(220, 53, 69, .12); color: #b02a37; }
.peran-tutor { background: rgba(15, 61, 145, .12); color: var(--st-navy); }
.peran-siswa { background: rgba(25, 135, 84, .14); color: #146c43; }
.peran-pengunjung { background: #eef1f6; color: #5c6779; }

/* ===== Halaman panduan ===== */
@media (min-width: 992px) { .panduan-isi { position: sticky; top: 1.5rem; } }
.panduan section { scroll-margin-top: 1.5rem; }
.panduan section + section { margin-top: 2.25rem; }
.panduan h2 { font-size: 1.2rem; font-weight: 800; color: var(--st-navy-gelap); margin-bottom: .85rem; }
.panduan h2 .no { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem;
  margin-right: .5rem; border-radius: 50%; background: var(--st-navy); color: #fff; font-size: .95rem; }
.panduan ol.langkah { padding-left: 1.25rem; }
.panduan ol.langkah li { margin-bottom: .4rem; }
.panduan .tips { border-left: 4px solid var(--st-emas); background: rgba(var(--st-emas-rgb), .1);
  border-radius: .5rem; padding: .75rem 1rem; font-size: .925rem; margin: 1rem 0; }
.panduan figure { margin: 1rem 0 0; }
.panduan figure img { width: 100%; height: auto; border-radius: .75rem; border: 1px solid var(--bs-border-color);
  box-shadow: 0 .5rem 1.25rem rgba(15, 61, 145, .08); }
.panduan figcaption { font-size: .85rem; color: var(--bs-secondary-color); margin-top: .4rem; }

/* ===== Tabel daftar di Manajemen: huruf sedikit lebih kecil, sel lebih lega, tidak mepet ke tepi ===== */
.tabel-data { font-size: .875rem; }
.tabel-data > :not(caption) > * > * { padding: .75rem .85rem; }
.tabel-data > :not(caption) > * > :first-child { padding-left: 1.4rem; }
.tabel-data > :not(caption) > * > :last-child { padding-right: 1.4rem; }
.tabel-data thead th { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  color: var(--bs-secondary-color); }
.tabel-data .btn-sm { padding: .2rem .45rem; }