/*
  Bootstrap Lite (fallback)
  ------------------------------------
  Tujuan: halaman tetap rapi ketika Bootstrap CDN tidak bisa di-load.
  Ini BUKAN pengganti penuh Bootstrap—hanya subset class yang dipakai di project ini.
*/

:root{
  --bs-body-font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  --bs-body-font-size: 14px;
  --bs-body-line-height: 1.45;
  --bs-body-color: #0f172a;
  --bs-body-bg: #ffffff;
  --bs-border-color: #e5e7eb;
  --bs-muted: #64748b;
  --bs-shadow-sm: 0 4px 16px rgba(15, 23, 42, .10);
}

/* Base */
html,body{height:100%;}
body{
  margin:0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  background: var(--bs-body-bg);
}
img{max-width:100%; height:auto;}

/* Links */
a{color:#0d6efd; text-decoration:none;}
a:hover{text-decoration:underline;}

/* Typography helpers */
.small{font-size:.875em;}
.fw-bold{font-weight:700;}
.fw-semibold{font-weight:600;}
.text-muted{color:var(--bs-muted) !important;}
.text-truncate{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* Spacing (subset) */
.mt-1{margin-top:.25rem !important;}
.mt-2{margin-top:.5rem !important;}
.mt-3{margin-top:1rem !important;}
.mt-4{margin-top:1.5rem !important;}
.mb-0{margin-bottom:0 !important;}
.mb-2{margin-bottom:.5rem !important;}
.py-2{padding-top:.5rem !important; padding-bottom:.5rem !important;}
.py-3{padding-top:1rem !important; padding-bottom:1rem !important;}
.py-4{padding-top:1.5rem !important; padding-bottom:1.5rem !important;}
.pb-5{padding-bottom:3rem !important;}
.px-3{padding-left:1rem !important; padding-right:1rem !important;}

/* Layout helpers */
.d-flex{display:flex !important;}
.justify-content-between{justify-content:space-between !important;}
.justify-content-around{justify-content:space-around !important;}
.align-items-center{align-items:center !important;}
.gap-1{gap:.25rem !important;}
.gap-2{gap:.5rem !important;}
.gap-3{gap:1rem !important;}
.w-100{width:100% !important;}

/* Container */
.container{
  width:100%;
  margin-left:auto;
  margin-right:auto;
  padding-left:16px;
  padding-right:16px;
}
@media (min-width: 576px){.container{max-width:540px;}}
@media (min-width: 768px){.container{max-width:720px;}}
@media (min-width: 992px){.container{max-width:960px;}}
@media (min-width: 1200px){.container{max-width:1140px;}}

/* Grid (subset) */
.row{display:flex; flex-wrap:wrap; margin-left:-.5rem; margin-right:-.5rem;}
.row > *{padding-left:.5rem; padding-right:.5rem;}
.g-3{--g:1rem; margin-left:calc(var(--g) * -0.5); margin-right:calc(var(--g) * -0.5);}
.g-3 > *{padding-left:calc(var(--g) * 0.5); padding-right:calc(var(--g) * 0.5); margin-top:var(--g);}

.col-6{flex:0 0 auto; width:50%;}
.col-lg-3{flex:0 0 auto; width:100%;}
@media (min-width: 992px){.col-lg-3{width:25%;}}

/* Card */
.card{
  background:#fff;
  border:1px solid var(--bs-border-color);
  border-radius:.75rem;
}
.card-body{padding:12px;}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:.55rem .9rem;
  border-radius:.75rem;
  border:1px solid transparent;
  cursor:pointer;
  user-select:none;
  text-decoration:none;
  font-weight:600;
  line-height:1;
}
.btn:active{transform:translateY(1px);}
.btn-sm{padding:.45rem .75rem; font-size:.9em; border-radius:.65rem;}
.btn-light{background:#fff; border-color:rgba(255,255,255,.65); color:#0f172a;}
.btn-outline-danger{background:transparent; border-color:#ef4444; color:#ef4444;}
.btn-outline-danger:hover{background:#ef4444; color:#fff;}

/* Border + radius */
.border{border:1px solid var(--bs-border-color) !important;}
.rounded-pill{border-radius:999px !important;}
.rounded-start-pill{border-top-left-radius:999px !important; border-bottom-left-radius:999px !important;}
.rounded-end-pill{border-top-right-radius:999px !important; border-bottom-right-radius:999px !important;}

/* Shadow */
.shadow-sm{box-shadow: var(--bs-shadow-sm) !important;}
.shadow-lg{box-shadow: 0 14px 40px rgba(15,23,42,.18) !important;}

/* Forms (subset) */
.input-group{display:flex; align-items:stretch; width:100%;}
.input-group-text{
  display:flex;
  align-items:center;
  padding:.55rem .8rem;
  border:1px solid var(--bs-border-color);
  background:#fff;
}
.form-control{
  flex:1 1 auto;
  min-width:0;
  padding:.55rem .8rem;
  border:1px solid var(--bs-border-color);
  outline:none;
  border-radius:.75rem;
  background:#fff;
}
.form-control:focus{border-color:rgba(13,110,253,.55); box-shadow:0 0 0 3px rgba(13,110,253,.15);}

/* Navbar (minimal) */
.navbar{position:relative; display:flex; align-items:center; min-height:56px;}
.navbar.bg-white{background:#fff;}
.navbar-light .navbar-brand{color:#0f172a;}
.navbar-brand{font-weight:800;}

/* Carousel (visual only, without JS) */
.carousel{position:relative;}
.carousel-inner{position:relative; width:100%; overflow:hidden;}
.carousel-item{display:none;}
.carousel-item.active{display:block;}
.carousel-control-prev,
.carousel-control-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:0;
  background:rgba(15,23,42,.25);
  display:flex;
  align-items:center;
  justify-content:center;
}
.carousel-control-prev{left:10px;}
.carousel-control-next{right:10px;}
.carousel-control-prev-icon,
.carousel-control-next-icon{
  width:14px;
  height:14px;
  display:block;
  border:solid rgba(255,255,255,.95);
  border-width:0 3px 3px 0;
}
.carousel-control-prev-icon{transform:rotate(135deg);}
.carousel-control-next-icon{transform:rotate(-45deg);}
.carousel-indicators{
  position:absolute;
  left:0; right:0;
  bottom:10px;
  display:flex;
  justify-content:center;
  gap:8px;
}
.carousel-indicators button{
  width:8px; height:8px;
  border-radius:999px;
  border:0;
  background:rgba(255,255,255,.55);
}
.carousel-indicators button.active{background:#fff;}

/* Utility */
.bg-light{background:#f8f9fa !important;}
.bg-white{background:#fff !important;}
.text-decoration-none{text-decoration:none !important;}
.border-end-0{border-right:0 !important;}
.border-start-0{border-left:0 !important;}