/* ====== Ponpes 360 – Bootstrap 5 Theme (White & Blue) ====== */
/* Satu tempat untuk ganti warna utama */
:root {
  --primary: #0d6efd;               /* ganti di sini kalau mau biru lain */
  --text: #0f172a;                  /* slate-900 */
  --muted: #64748b;                 /* slate-500 */
  --border: #e6eef8;
  --soft: 0 10px 30px rgba(2, 6, 23, .06);
}

:root {
  --bs-primary: var(--primary);
  --bs-link-color: var(--primary);
  --bs-body-bg: #ffffff;
  --bs-body-color: var(--text);
}

/* Base */
html, body { background: #fff; color: var(--text); }
a { text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* Navbar */
.navbar { backdrop-filter: saturate(1.2) blur(4px); }
.navbar-brand .dot{
  width: 28px; height: 28px; border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, var(--primary), #0a58ca);
  display: inline-block; margin-right: .5rem; box-shadow: 0 0 16px rgba(13,110,253,.35);
}
.navbar .nav-link { color: #334155; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--primary); }
.navbar .nav-link.fw-semibold { color: var(--primary) !important; }

/* Hero / Slider */
.hero-wrap { margin-inline: 0; }
.hero-wrap .carousel-item > img{
  width: 100%;
  height: min(70vh, 720px);     /* full untuk desktop, pas untuk mobile */
  object-fit: cover;
}
.carousel-caption{
  right: auto; left: 2%; bottom: 3%;
  width: min(560px, 92vw);
  background: rgba(255,255,255,.92);
  color: #0b1f33;
  border: 1px solid var(--border);
  padding: .8rem 1rem;
  border-radius: .9rem;
  box-shadow: var(--soft);
}
.carousel-indicators [data-bs-target]{
  width: 8px; height: 8px; border-radius: 999px;
}

/* Section title */
.section-title{
  margin-bottom: .9rem;
  padding-bottom: .45rem;
  border-bottom: 1px dashed var(--border);
  color: #0b1f33;
}

/* Cards / Shadow */
.shadow-soft{ box-shadow: var(--soft); }
.card.border-0.shadow-soft { border-radius: 1rem; }

/* Virtual iframe */
.ratio.ratio-16x9{ border-radius: 1rem; overflow: hidden; box-shadow: var(--soft); }

/* Parts Grid */
.thumb-rect{ aspect-ratio: 16/10; width: 100%; object-fit: cover; border-radius: .8rem; }
.mini-thumb{ width: 48px; height: 48px; object-fit: cover; border-radius: .5rem; border:1px solid var(--border); cursor: pointer; }
.card .card-body h6{ color: #0b1f33; }

/* Sidebar / Widget */
.sidebar-sticky{ position: sticky; top: 88px; }
.card-promo img{ width: 96px; height: 72px; object-fit: cover; border-radius: .6rem; }

/* Footer */
footer{ background: #fff; }
footer .container{ color:#64748b; }

/* Tables (admin) */
.table thead th{ background:#f8fbff; color:#0b1f33; }
.table td, .table th{ vertical-align: middle; }

/* Forms (admin) */
.form-control, .form-select{
  border-color: var(--border);
}
.form-control:focus, .form-select:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}

/* Buttons */
.btn-primary{
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: #0a58ca;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-active-bg: #0a58ca;
}
.btn-outline-primary{
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
}

/* Utilities */
.border-soft{ border:1px solid var(--border); border-radius:.9rem; }

/* Responsive tweaks */
@media (max-width: 991.98px){
  .sidebar-sticky{ position: static; top: auto; }
  .carousel-caption{ width: 92vw; left: 50%; transform: translateX(-50%); }
}
@media (max-width: 575.98px){
  .card-promo img{ width: 80px; height: 64px; }
  .mini-thumb{ width: 44px; height: 44px; }
}