/* asset/css/style.css */
/* Fallback styling supaya tetap rapi walau Bootstrap belum ter-load */

/* ===== Base ===== */
:root{
  --radius: 14px;
  --shadow: 0 6px 18px rgba(0,0,0,.08);
  --border: 1px solid rgba(0,0,0,.08);
  --dark: #111;
  --muted: #6c757d;
  --bg: #f6f7f9;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color:#111;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.45;
}
a{ color:#0d6efd; text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ===== Container ===== */
.container{
  width: min(1080px, calc(100% - 32px));
  margin-inline: auto;
}
.container-fluid{ width: 100%; }

/* ===== Utilities (yang sering dipakai di halaman) ===== */
.bg-light{ background: var(--bg); }
.bg-white{ background:#fff; }
.bg-dark{ background: var(--dark); }
.text-muted{ color: var(--muted); }
.fw-bold{ font-weight: 700; }
.fw-semibold{ font-weight: 600; }
.small{ font-size: .875rem; }

.p-3{ padding: 1rem; }
.p-4{ padding: 1.25rem; }
.p-5{ padding: 1.75rem; }
.py-2{ padding-top:.5rem; padding-bottom:.5rem; }
.py-4{ padding-top:1.25rem; padding-bottom:1.25rem; }
.py-5{ padding-top:1.75rem; padding-bottom:1.75rem; }
.mb-0{ margin-bottom:0; }
.mb-1{ margin-bottom:.25rem; }
.mb-2{ margin-bottom:.5rem; }
.mb-3{ margin-bottom:1rem; }
.mb-4{ margin-bottom:1.25rem; }

.rounded{ border-radius: var(--radius); }
.rounded-3{ border-radius: var(--radius); }
.shadow-sm{ box-shadow: var(--shadow); }
.h-100{ height:100%; }
.w-100{ width:100%; }
.overflow-hidden{ overflow:hidden; }

.d-flex{ display:flex; }
.flex-wrap{ flex-wrap: wrap; }
.gap-2{ gap:.5rem; }
.justify-content-between{ justify-content: space-between; }
.justify-content-center{ justify-content:center; }
.align-items-center{ align-items:center; }
.align-items-start{ align-items:flex-start; }
.text-end{ text-align:right; }
.text-center{ text-align:center; }

/* ===== Navbar (fallback) ===== */
.navbar{
  background: var(--dark);
  color:#fff;
}
.navbar .container{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: .75rem 0;
}
.navbar-brand{
  color:#fff;
  font-weight:700;
  letter-spacing:.2px;
  text-decoration:none;
}
.navbar-toggler{ display:none; } /* fallback: selalu tampil menu */
.navbar-nav{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap:.5rem;
  flex-wrap: wrap;
}
.nav-link{
  color: rgba(255,255,255,.9);
  padding: .45rem .7rem;
  border-radius: 10px;
  text-decoration:none;
}
.nav-link:hover{
  background: rgba(255,255,255,.08);
  text-decoration:none;
}

/* ===== Grid fallback untuk row/col-xx ===== */
.row{
  display:flex;
  flex-wrap:wrap;
  margin: -8px;
}
.row.g-3{ margin:-10px; }
.row > [class*="col-"]{
  padding: 8px;
  width: 100%;
}
.row.g-3 > [class*="col-"]{ padding: 10px; }

/* responsive col */
@media (min-width:576px){
  .col-sm-6{ width:50%; }
}
@media (min-width:992px){
  .col-lg-3{ width:25%; }          /* ✅ 4 card sejajar di PC */
  .col-lg-4{ width:33.3333%; }
  .col-lg-5{ width:41.6667%; }
  .col-lg-6{ width:50%; }
  .col-lg-7{ width:58.3333%; }
}

/* ===== Card ===== */
.card{
  background:#fff;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card-body{ padding: 1rem; }
.card-title{ margin:0 0 .4rem; font-weight:700; }
.card-text{ margin:0 0 .8rem; color: var(--muted); }

/* ===== Ratio (FIX) ===== */
/* Membuat parent punya tinggi walau anak absolute */
.ratio{
  position: relative;
  width: 100%;
  padding-top: 0 !important;
}
.ratio::before{
  content: "";
  display: block;
  padding-top: var(--ratio, 56.25%);
}
.ratio > *{
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* set rasio */
.ratio-16x9{ --ratio: 56.25%; }
.ratio-3x2 { --ratio: 66.6667%; }
.ratio-2x3 { --ratio: 150%; }      /* ✅ portrait seperti contoh */
.ratio-4x5 { --ratio: 125%; }

.bg-secondary-subtle{ background:#eef1f4; }
.object-fit-cover{ object-fit: cover; }

/* ===== Buttons ===== */
.btn{
  display:inline-block;
  padding:.5rem .85rem;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 600;
  cursor:pointer;
  text-decoration:none !important;
}
.btn-sm{ padding:.35rem .65rem; border-radius: 10px; font-size:.9rem; }
.btn-dark{ background:#111; color:#fff; border-color:#111; }
.btn-dark:hover{ filter: brightness(.92); }
.btn-outline-dark{ background:transparent; color:#111; border-color:#111; }
.btn-outline-dark:hover{ background:#111; color:#fff; }
.btn-outline-danger{ background:transparent; color:#dc3545; border-color:#dc3545; }
.btn-outline-danger:hover{ background:#dc3545; color:#fff; }
.w-100{ width:100%; }

/* ===== Badge ===== */
.badge{
  display:inline-block;
  padding:.28rem .5rem;
  border-radius: 999px;
  font-size:.75rem;
  font-weight:700;
}
.text-bg-dark{ background:#111; color:#fff; }

/* ===== Alert ===== */
.alert{
  border-radius: var(--radius);
  padding: .85rem 1rem;
  border: var(--border);
  background:#fff;
}
.alert-info{ border-left: 5px solid #0dcaf0; }
.alert-success{ border-left: 5px solid #198754; }
.alert-warning{ border-left: 5px solid #ffc107; }
.alert-danger{ border-left: 5px solid #dc3545; }

/* ===== Table fallback (cart) ===== */
.table-responsive{ overflow:auto; }
.table{
  width:100%;
  border-collapse: collapse;
  background:#fff;
}
.table th, .table td{
  padding:.75rem;
  border-bottom: var(--border);
}
.table-striped tbody tr:nth-child(odd){ background:#fafafa; }
.align-middle td, .align-middle th{ vertical-align: middle; }

/* ===== Headline fallback ===== */
.display-6{ font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 800; }
.fs-4{ font-size: 1.5rem; }

/* ============================
   Standar card layanan
   ============================ */

/* Card layanan: tombol selalu menempel bawah */
.card-service { display: flex; flex-direction: column; }
.card-service .card-body { display: flex; flex-direction: column; }
.card-service .card-body .btn { margin-top: auto; }

/* Gambar card layanan: poster-like */
.card-service img{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* ✅ pas penuh seperti poster */
  object-position: center;
  padding: 0;
  background: transparent;
}