/* Beli Mobil page */
.cars-hero { background:linear-gradient(120deg,#f3f7fc 0%,#fff 72%); padding:56px 5% 38px; }
.cars-hero-inner { max-width:1440px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,.65fr); gap:36px; align-items:center; }
.cars-eyebrow { color:#bd8b09; font-size:11px; font-weight:800; letter-spacing:1.8px; text-transform:uppercase; }
.cars-hero h1 { margin:13px 0 12px; max-width:760px; color:#0a2342; font:800 clamp(34px,4vw,52px)/1.12 'Poppins',sans-serif; letter-spacing:-1.5px; }
.cars-hero p { margin:0; max-width:650px; color:#687a90; font-size:15px; line-height:1.8; }
.cars-hero-note { justify-self:end; padding:22px 24px; border-radius:14px; background:#0a2342; color:#fff; box-shadow:0 16px 36px #0a23421c; max-width:300px; }
.cars-hero-note strong { display:block; font:700 17px 'Poppins',sans-serif; margin-bottom:6px; }
.cars-hero-note span { color:#d2deeb; font-size:12px; line-height:1.7; }
.cars-catalog { max-width:1440px; margin:0 auto; padding:30px 5% 76px; }
.cars-toolbar { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:22px; }
.cars-toolbar h2 { margin:0 0 5px; color:#0a2342; font:700 24px 'Poppins',sans-serif; }
.cars-toolbar p { margin:0; color:#718096; font-size:13px; }
.cars-search { width:min(100%,490px); display:flex; align-items:center; gap:10px; padding:6px; border:1px solid #e1e8f0; background:#fff; border-radius:10px; box-shadow:0 8px 22px #0a23420a; }
.cars-search .search-icon { padding-left:10px; color:#7d8ba0; font-size:20px; }
.cars-search input { flex:1; min-width:0; border:0; outline:0; padding:12px 4px; color:#0a2342; background:transparent; font:400 13px 'Poppins',sans-serif; }
.cars-search button { border:0; border-radius:7px; padding:12px 18px; background:#f7bd2c; color:#0a2342; font:700 12px 'Poppins',sans-serif; cursor:pointer; }
.cars-result-line { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:24px 0 15px; color:#718096; font-size:12px; }
.cars-result-line strong { color:#0a2342; }
.cars-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.cars-card { min-width:0; overflow:hidden; border:1px solid #e8edf3; border-radius:13px; background:#fff; box-shadow:0 8px 28px #10274408; transition:transform .2s,box-shadow .2s; }
.cars-card:hover { transform:translateY(-4px); box-shadow:0 18px 38px #10274414; }
.cars-card-image { position:relative; height:220px; overflow:hidden; background:#edf1f5; }
.cars-card-image img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.cars-card:hover .cars-card-image img { transform:scale(1.035); }
.cars-card-badge { position:absolute; left:14px; top:14px; padding:7px 10px; border-radius:6px; background:#f7bd2c; color:#0a2342; font-size:10px; font-weight:800; }
.cars-card-body { padding:18px; }
.cars-card-title { display:flex; justify-content:space-between; align-items:start; gap:10px; }
.cars-card-title h3 { margin:0; color:#0a2342; font:700 16px/1.45 'Poppins',sans-serif; }
.cars-card-year { flex:0 0 auto; padding:4px 7px; border-radius:5px; background:#f1f5f9; color:#53657b; font-size:11px; font-weight:700; }
.cars-card-meta { display:flex; flex-wrap:wrap; gap:8px 14px; margin:13px 0; color:#718096; font-size:11px; }
.cars-card-location { color:#718096; font-size:11px; padding-bottom:15px; border-bottom:1px solid #edf1f5; }
.cars-card-bottom { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:15px; }
.cars-card-price small { display:block; margin-bottom:4px; color:#8491a2; font-size:10px; }
.cars-card-price strong { color:#0a2342; font:800 17px 'Poppins',sans-serif; }
.cars-card-action { width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto; border-radius:9px; background:#0a2342; color:#fff; font-size:18px; }
.cars-empty { text-align:center; padding:60px 20px; border:1px dashed #cbd5e1; border-radius:14px; background:#f8fafc; }
.cars-empty h3 { color:#0a2342; font:700 21px 'Poppins',sans-serif; margin:0 0 8px; }
.cars-empty p { color:#718096; font-size:13px; }
body.dark-mode .cars-hero { background:#101923; }
body.dark-mode .cars-hero h1, body.dark-mode .cars-toolbar h2, body.dark-mode .cars-result-line strong, body.dark-mode .cars-card-title h3, body.dark-mode .cars-card-price strong { color:#eef4fb; }
body.dark-mode .cars-hero p, body.dark-mode .cars-toolbar p, body.dark-mode .cars-result-line, body.dark-mode .cars-card-meta, body.dark-mode .cars-card-location { color:#b7c4d3; }
body.dark-mode .cars-search, body.dark-mode .cars-card, body.dark-mode .cars-empty { background:#172330; border-color:#334354; }
body.dark-mode .cars-search input { color:#eef4fb; }
body.dark-mode .cars-card-year { background:#253446; color:#d6e0ec; }
@media(max-width:950px) { .cars-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .cars-hero-inner { grid-template-columns:1fr; } .cars-hero-note { justify-self:start; max-width:480px; } .cars-toolbar { align-items:stretch; flex-direction:column; } .cars-search { width:100%; max-width:none; } }
@media(max-width:600px) { .cars-hero { padding:38px 5% 28px; } .cars-hero h1 { font-size:34px; } .cars-hero p { font-size:13px; } .cars-hero-note { padding:17px; } .cars-catalog { padding:26px 5% 55px; } .cars-grid { grid-template-columns:1fr; gap:17px; } .cars-card-image { height:220px; } .cars-card-body { padding:16px; } .cars-toolbar h2 { font-size:21px; } .cars-search button { padding:11px 13px; } }

/* Responsive refinement for Beli Mobil page */
.cars-hero { padding: 30px 5% 22px; }
.cars-hero-inner { display:block; max-width:1440px; }
.cars-hero h1 { font-size:clamp(25px,2.6vw,34px); line-height:1.2; letter-spacing:-.6px; margin:8px 0; }
.cars-hero p { max-width:850px; font-size:12px; line-height:1.75; }
.cars-eyebrow { font-size:9px; letter-spacing:1.3px; }
.cars-catalog { padding-top:26px; }
.cars-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.cars-card-image { height:clamp(150px,18vw,220px); }
.cars-toolbar { align-items:center; }
@media (max-width: 900px) {
  .cars-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
  .cars-card-image { height:clamp(150px,28vw,220px); }
  .cars-card-body { padding:14px; }
  .cars-card-price strong { font-size:15px; }
}
@media (max-width: 640px) {
  .cars-hero { padding:22px 5% 18px; }
  .cars-hero h1 { font-size:25px; line-height:1.22; margin:7px 0; }
  .cars-hero p { font-size:11px; line-height:1.65; }
  .cars-catalog { padding:22px 4% 48px; }
  .cars-toolbar { gap:14px; }
  .cars-toolbar h2 { font-size:19px; }
  .cars-toolbar p { font-size:11px; line-height:1.6; }
  .cars-search { gap:5px; padding:5px; }
  .cars-search .search-icon { padding-left:5px; }
  .cars-search input { font-size:11px; padding:10px 2px; }
  .cars-search button { font-size:10px; padding:10px 9px; white-space:nowrap; }
  .cars-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .cars-card { border-radius:9px; }
  .cars-card-image { height:clamp(105px,31vw,165px); }
  .cars-card-badge { left:7px; top:7px; padding:5px 6px; font-size:8px; }
  .cars-card-body { padding:10px; }
  .cars-card-title { display:block; }
  .cars-card-title h3 { font-size:12px; line-height:1.4; }
  .cars-card-year { display:inline-block; margin-top:5px; font-size:9px; padding:3px 5px; }
  .cars-card-meta { gap:5px 8px; margin:9px 0; font-size:9px; }
  .cars-card-location { font-size:9px; padding-bottom:10px; overflow-wrap:anywhere; }
  .cars-card-bottom { padding-top:10px; gap:5px; }
  .cars-card-price small { font-size:8px; }
  .cars-card-price strong { font-size:11px; overflow-wrap:anywhere; }
  .cars-card-action { width:29px; height:29px; border-radius:7px; font-size:15px; }
}
@media (max-width: 360px) {
  .cars-grid { grid-template-columns:1fr; }
  .cars-card-image { height:190px; }
}

/* Match the homepage card proportions and prevent horizontal overflow */
.cars-hero, .cars-catalog { box-sizing:border-box; width:100%; min-width:0; }
.cars-hero-inner, .cars-toolbar, .cars-result-line, .cars-grid, .cars-card { min-width:0; }
.cars-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.cars-card-image { height:165px; }
.cars-card-body { padding:14px; }
.cars-card-title { display:block; }
.cars-card-title h3 { font-size:14px; line-height:1.45; min-height:38px; }
.cars-card-year { display:block; width:max-content; margin-top:6px; font-size:10px; }
.cars-card-price strong { font-size:15px; }
@media(max-width:1000px) { .cars-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:760px) { .cars-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .cars-card-image { height:clamp(105px,31vw,160px); } .cars-card-body { padding:10px; } .cars-card-title h3 { font-size:12px; min-height:34px; } .cars-card-price strong { font-size:12px; } .cars-card-meta { gap:6px; font-size:9px; } .cars-card-location { font-size:9px; } }
@media(max-width:360px) { .cars-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; } .cars-card-body { padding:8px; } .cars-card-title h3 { font-size:11px; } .cars-card-price strong { font-size:10px; } .cars-card-image { height:100px; } }

/* Rapikan jarak kartu mobil dan perbesar label tahun */
.cars-card-year { font-size: 12px; padding: 5px 8px; margin-top: 4px; line-height: 1.3; }
.cars-card-title h3 { margin-bottom: 0; }
.cars-card-meta { margin: 7px 0; }
.cars-card-location { padding-bottom: 7px; }
.cars-card-bottom { padding-top: 9px; }
@media (max-width: 760px) {
  .cars-card-year { font-size: 11px; padding: 4px 6px; margin-top: 3px; }
  .cars-card-meta { margin: 6px 0; }
  .cars-card-location { padding-bottom: 5px; }
  .cars-card-bottom { padding-top: 7px; }
}

/* Final card spacing adjustment: year slightly larger, details closer together */
.cars-card-title h3 { min-height: 0 !important; margin-bottom: 8px !important; }
.cars-card-year { font-size: 13px !important; padding: 5px 9px !important; margin-top: 0 !important; }
.cars-card-meta { margin: 8px 0 !important; gap: 6px 12px !important; }
.cars-card-location { padding-bottom: 6px !important; }
.cars-card-bottom { padding-top: 8px !important; }
@media (max-width: 760px) {
  .cars-card-title h3 { margin-bottom: 6px !important; }
  .cars-card-year { font-size: 12px !important; padding: 4px 7px !important; }
  .cars-card-meta { margin: 6px 0 !important; gap: 5px 8px !important; }
  .cars-card-location { padding-bottom: 5px !important; }
  .cars-card-bottom { padding-top: 6px !important; }
}

/* CMI: transmisi, bahan bakar, dan lokasi sejajar */
.cars-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 12px;
}
.cars-card-meta .cars-card-location {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  line-height: inherit;
  white-space: nowrap;
}
.cars-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* FINAL FIX: keep location beside transmission and fuel on listing cards */
.cars-card-meta {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 5px 9px !important;
  min-width: 0;
  white-space: nowrap;
}
.cars-card-meta > span {
  display: inline-flex !important;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
}
.cars-card-meta .cars-card-location {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 45%;
  padding: 0 !important;
  margin: 0 !important;
}