@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
:root{--brand-500:#2563eb;--brand-600:#1d4ed8;--brand-400:#3b82f6;--brand-50:#eff6ff;--accent-500:#0ea5e9;--accent-600:#0284c7;--ink-900:#0f172a;--ink-700:#334155;--ink-600:#475569;--ink-500:#64748b;--ink-100:#e2e8f0;--bs-body-font-family:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-body-color:var(--ink-900);--bs-body-bg:#f7fafc;--bs-primary:var(--brand-500);--bs-primary-rgb:37,99,235;--bs-secondary:var(--ink-600);--bs-success:#10b981;--bs-info:var(--accent-500);--bs-warning:#f59e0b;--bs-danger:#ef4444;--bs-border-radius:.75rem;--bs-border-radius-sm:.5rem;--bs-border-radius-lg:1rem;--bs-border-color:#e5e7eb;--shadow-1:0 8px 24px rgba(15,23,42,.08);--shadow-2:0 12px 28px rgba(15,23,42,.12);--ring:0 0 0 .25rem rgba(37,99,235,.22)}
.navbar{--bs-navbar-padding-y:.6rem;backdrop-filter:saturate(1.2) blur(6px);box-shadow:var(--shadow-1)}
.navbar .navbar-brand{font-weight:800;letter-spacing:.2px}
.navbar .nav-link{font-weight:500;color:var(--ink-700);transition:color .15s ease,opacity .15s ease}
.navbar .nav-link.active,.navbar .nav-link:hover{color:var(--bs-primary)}
.card{border:0;border-radius:var(--bs-border-radius);box-shadow:var(--shadow-1);transition:transform .16s ease,box-shadow .16s ease;background:#fff}
.card .card-title,.card h5,.card h6{letter-spacing:.2px}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.btn{border-radius:calc(var(--bs-border-radius) - .25rem);font-weight:600;letter-spacing:.2px;transition:transform .12s ease,filter .12s ease,box-shadow .12s ease}
.btn-primary{background:linear-gradient(180deg,var(--brand-500),var(--brand-600));border-color:var(--brand-600);box-shadow:0 6px 14px rgba(37,99,235,.25)}
.btn-primary:hover{filter:brightness(1.02);transform:translateY(-1px)}
.btn-outline-primary{color:var(--brand-600);border-color:var(--brand-400)}
.btn-outline-primary:hover{background:var(--brand-50);color:var(--brand-600)}
.form-control,.form-select,.form-check-input{border-radius:calc(var(--bs-border-radius) - .35rem);border-color:var(--bs-border-color);transition:box-shadow .12s ease,border-color .12s ease}
.form-control:focus,.form-select:focus{border-color:var(--brand-400);box-shadow:var(--ring)}
.form-check-input:focus{box-shadow:var(--ring)}
.form-label{font-weight:600;color:var(--ink-700)}
.input-group-text{border-radius:calc(var(--bs-border-radius) - .35rem);background:#f1f5f9;border-color:var(--bs-border-color)}
.table{--bs-table-bg:#fff;--bs-table-striped-bg:rgba(2,6,23,.02);--bs-table-hover-bg:rgba(2,6,23,.035);border-color:var(--bs-border-color)}
.table thead th{position:sticky;top:0;z-index:1;background:#fff;box-shadow:inset 0 -1px 0 var(--bs-border-color)}
.table tbody tr:hover{background:var(--bs-table-hover-bg)}
.table th,.table td{vertical-align:middle}
.badge{border-radius:999px;font-weight:600}
.badge.text-bg-light{color:var(--ink-700)}
.shadow-raise{box-shadow:var(--shadow-1)}
.text-muted-2{color:var(--ink-600)!important}
.rounded-xl{border-radius:var(--bs-border-radius-lg)!important}
.empty-state{text-align:center;padding:2rem 1rem;color:var(--ink-600)}
.empty-state .icon{display:inline-flex;width:48px;height:48px;align-items:center;justify-content:center;background:var(--brand-50);color:var(--brand-600);border-radius:12px;margin-bottom:.75rem}
.progress{height:8px;border-radius:999px}
.progress-bar{border-radius:999px}
@media (prefers-color-scheme:dark){
  :root{--bs-body-bg:#0b1220;--bs-body-color:#e5e7eb;--bs-border-color:#1f2937}
  .navbar{background:#0f172a!important}
  .card{background:#0f172a}
  .table{--bs-table-bg:#0f172a;color:#e5e7eb}
  .input-group-text{background:#111827}
}
.btn-sunset {
  background: linear-gradient(90deg, #ff7e5f, #feb47b);
  border: none;
  color: white;
  transition: opacity 0.2s ease;
}
.btn-sunset:hover {
  opacity: 0.85;
}
.table-hover tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.03);
  transition: background-color 0.2s ease;
}

.form-control:focus {
  border-color: #4facfe;
  box-shadow: 0 0 0 0.25rem rgba(79, 172, 254, 0.25);
}

.section-tahfizh { background: linear-gradient(120deg, #89f7fe, #66a6ff); }
.section-tahsin  { background: linear-gradient(120deg, #fddb92, #d1fdff); }
.section-amaliah { background: linear-gradient(120deg, #f6d365, #fda085); }


/* --- Background halaman global --- */
html, body {
  height: 100%;
  min-height: 100%;
}

/* Matikan background lama (kalau ada inline di layout) */
body {
  background: transparent !important;
  position: relative;
}

/* Lapisan gambar fixed di belakang semua konten */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("https://raport.insan-qurani.com/uploads/1.jpg?v=2") center/cover no-repeat;
  opacity: 0.35;            /* 35% terlihat */
  pointer-events: none;     /* jangan blok klik */
  z-index: -1;              /* selalu di belakang */
}

/* (Opsional) kalau mau konten agak “mengambang” di atas background */
.card {
  backdrop-filter: saturate(120%) blur(0px);
  /* kalau terlalu putih menutup bg, turunkan opasitas latar kartu */
  background-color: rgba(255,255,255,0.9);
}

/*Header-footer*/
@charset "UTF-8";

/* ====== Layout frame (sticky footer) ====== */
.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-header { /* pembungkus header (navbar + brandbar) */
  background: transparent;
}

.site-main { /* area konten utama */
  flex: 1 0 auto;
  padding-block: 16px 28px; /* jarak atas/bawah default */
}

.site-footer {
  flex-shrink: 0;
  padding: 18px 0;
  border-top: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,0.65);
  backdrop-filter: saturate(120%) blur(2px);
  font-size: 0.9rem;
}

/* ====== Brandbar (logo center) ====== */
.brandbar {
  display: grid;
  place-items: center;
  padding: 14px 0 8px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,0.65);
  backdrop-filter: saturate(120%) blur(2px);
}

.brandbar img {
  max-height: 60px;      /* logo maksimal 60px tinggi */
  width: auto;           /* biarkan lebar menyesuaikan proporsi */
  display: block;
  margin: 0 auto;        /* pastikan posisi center */
  object-fit: contain;   /* potong/padatkan tanpa merusak rasio */
}


.brandbar .brand-fallback {
  font-weight: 700;
  letter-spacing: .3px;
  font-size: 1.05rem;
  opacity: .9;
}

/* Opsional: beri sedikit jarak ekstra dari brandbar ke konten */
body .container.section-first {
  margin-top: 10px;
}

/* Micro-interactions kecil untuk link footer */
.site-footer a {
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color .2s ease, color .2s ease;
}
.site-footer a:hover {
  color: inherit;
  border-bottom-color: currentColor;
}

/*APP MENU*/
.app-menu {
  margin-top: 20px;
}

.app-menu h5 {
  font-weight: 600;
  text-align: center;
}

.app-menu small {
  display: block;
  text-align: center;
  margin-bottom: 15px;
  color: #6b7280;
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 15px;
  justify-items: center;
}

.app-item {
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.app-item img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.app-item span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
}

.app-item:hover {
  transform: translateY(-4px);
}