/* ======================================
   VARIABLES
====================================== */
:root {
    --primary-soft: #c9cede;
    --ring:         #e5e7eb;
    --ink:          #111827;
    --muted:        #6b7280;
  }
  
  /* ======================================
     BASE
  ====================================== */
  body {
    color: var(--ink);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  }
  
  /* ======================================
     UTILITIES (global kecil-kecil)
  ====================================== */
  .logo-box {
    align-items: center;
    background: var(--primary-soft);
    border-radius: .5rem;
    display: grid;
    font-weight: 600;
    height: 38px;
    place-items: center;
    width: 110px;
  }
  
  .pill {
    align-items: center;
    background: var(--primary-soft);
    border-radius: 999px;
    display: grid;
    font-weight: 600;
    height: 50px;
    place-items: center;
    width: 50px;
  }
  
  .mock {
    align-items: center;
    aspect-ratio: 16/10;
    background: var(--primary-soft);
    border: 1px solid var(--ring);
    border-radius: 1rem;
    color: var(--ink);
    display: grid;
    min-height: 280px;
    place-items: center;
    width: 100%;
  }
  
  .lead { color: var(--muted); }
  
  /* ======================================
     KATALOG PAGE
  ====================================== */
  
  /* --- HERO --- */
  .hero {
    background: var(--primary-soft) url('/images/hero-placeholder.jpg') center/cover no-repeat;
    border-radius: 1rem;
    height: 280px;
    overflow: hidden;
    position: relative;
  }
  .hero::after {
    background: rgba(0, 0, 0, .25);
    content: "";
    inset: 0;
    position: absolute;
  }
  .hero-inner {
    align-items: center;
    display: flex;
    height: 100%;
    padding-left: 1.5rem;
    position: relative;
    z-index: 1;
  }
  .hero-title {
    color: #fff;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
  }
  
  /* --- SEARCH --- */
  .catalog-search {
    display: flex;
    gap: .5rem;
    margin-bottom: 1.5rem;
  }
  .catalog-search input {
    border: 1px solid var(--ring);
    border-radius: .6rem;
    flex: 1;
    height: 44px;
    padding: 0 .9rem;
  }
  .catalog-search button {
    background: #fff;
    border: 1px solid var(--ring);
    border-radius: .6rem;
    cursor: pointer;
    font-weight: 600;
    height: 44px;
    padding: 0 1rem;
  }
  
  /* --- GRID --- */
  .catalog-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  @media (max-width: 1200px) {
    .catalog-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 768px) {
    .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 480px) {
    .catalog-grid { grid-template-columns: 1fr; }
  }
  
  /* --- CARD --- */
  .card-unit {
    background: #fff;
    border: 1px solid var(--ink);
    border-radius: .6rem;
    padding: 18px;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .card-unit:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    transform: translateY(-2px);
  }
  
  /* media (gambar) */
  .card-media {
    aspect-ratio: 4/3;
    background: var(--primary-soft);
    border-radius: .4rem;
    overflow: hidden;
    position: relative;
  }
  .card-media img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
  }
  .media-label {
    background: var(--primary-soft);
    border-radius: .4rem;
    bottom: 10px;
    color: var(--ink);
    font-size: .9rem;
    font-weight: 600;
    left: 10px;
    padding: .4rem .6rem;
    position: absolute;
    right: 10px;
    text-align: center;
  }
  
  /* content */
  .card-body { padding-top: 14px; }
  .card-title {
    color: var(--ink);
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 4px;
  }
  .card-sub {
    font-size: .92rem;
    font-weight: 600;
    margin-bottom: 6px;
  }
  .card-desc  { color: var(--muted); font-size: .9rem; }
  .card-price { font-weight: 800; margin-top: 6px; }
  .muted      { color: var(--muted); }
  
  /* actions */
  .card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
  }
  .btn-rent {
    background: #f7f7fb;
    border: 1px solid var(--ring);
    border-radius: .35rem;
    color: var(--ink);
    font-size: .78rem;
    padding: .35rem .6rem;
    text-decoration: none;
  }
  .btn-rent:hover { background: #eee; }
  
  /* ======================================
     UNIT DETAIL PAGE
  ====================================== */
  .unit-detail { color: var(--ink); }
  
  /* FOTO BESAR */
  .ud-photo {
    background: var(--primary-soft);
    border: 1px solid var(--ring);
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4/3;
    width: 100%;
  }
  .ud-photo img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
  }
  
  /* AVAILABILITY (kiri bawah) */
  .ud-availability {
    font-size: clamp(20px, 2.6vw, 34px);
    font-weight: 700;
    margin-top: 14px;
  }
  .ud-availability .ud-qty { margin-right: .35rem; }
  
  /* TITLE */
  .ud-title {
    border-bottom: 3px solid #b9bfe0;
    display: inline-block;
    font-size: clamp(24px, 3.2vw, 40px);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 18px;
    padding-bottom: 4px;
  }
  .ud-title .ud-type { font-weight: 700; }
  
  /* SPEC LIST dua kolom dengan ":" */
  .ud-specs,
  .ud-price-box { margin-bottom: 16px; }
  
  .ud-row {
    align-items: start;
    display: grid;
    gap: 10px;
    grid-template-columns: 180px 1fr;
    margin-bottom: .35rem;
  }
  .ud-row dt {
    color: var(--ink);
    font-weight: 600;
    padding-right: 22px;
    position: relative;
  }
  .ud-row dt::after {
    content: ":";
    position: absolute;
    right: 8px;
    top: 0;
  }
  .ud-row dd { color: var(--ink); margin: 0; }
  
  /* HARGA */
  .ud-price-box .ud-row dt { color: var(--muted); font-weight: 600; }
  .ud-price-box .ud-row:nth-child(1) dt { color: var(--ink); font-weight: 700; }
  
  /* ACTION (kanan bawah) */
  .ud-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 20px;
  }
  @media (min-width: 992px) {
    .ud-actions { justify-content: flex-end; }
  }
  
  /* RESPONSIVE ADJUSTMENTS */
  @media (max-width: 576px) {
    .ud-row { grid-template-columns: 130px 1fr; }
  }