/* css/style.css — small, modern responsive styles */
:root{
    --accent:#ff6600;
    --muted:#666;
    --bg:#f8f8f9;
    --maxw:1100px;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  }
  
  *{box-sizing:border-box}
  body{margin:0;color:#222;background:var(--bg);line-height:1.5}
  .container{max-width:var(--maxw);margin:0 auto;padding:18px}
  .site-header{background:#fff;border-bottom:1px solid #eee}
  .site-header .container{display:flex;align-items:center;justify-content:space-between;padding:14px 18px}
  .brand{font-weight:700;color:var(--accent);text-decoration:none;font-size:20px}
  .site-header nav a{margin-left:14px;color:#333;text-decoration:none}
  .site-header .btn, .btn{background:var(--accent);color:#fff;padding:8px 14px;border-radius:8px;text-decoration:none;display:inline-block}
  .hero{padding:40px 0}
  .hero-grid{display:grid;grid-template-columns:1fr 420px;gap:24px;align-items:center}
  .hero-text h1{font-size:36px;margin:0 0 12px}
  .lead{color:var(--muted);margin-bottom:16px}
  .cta{background:var(--accent);padding:12px 20px;border-radius:10px;color:#fff;text-decoration:none}
  .ghost{background:transparent;border:1px solid #ddd;padding:10px 14px;border-radius:10px;margin-left:10px;text-decoration:none;color:#333}
  
  .card{background:#fff;padding:18px;border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,0.03)}
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .price{font-weight:700;margin:10px 0;color:var(--accent)}
  .gallery img{width:100%;height:160px;object-fit:cover;border-radius:8px}
  .narrow{max-width:700px;margin:0 auto;padding:40px 18px}
  .form-card{display:block;background:#fff;padding:18px;border-radius:10px}
  .form-card label{display:block;margin-bottom:12px}
  .form-card input[type="text"], .form-card input[type="email"], .form-card input[type="tel"], .form-card select, .form-card input[type="file"]{
    width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;margin-top:6px
  }
  .table{width:100%;border-collapse:collapse;background:#fff}
  .table th,.table td{padding:10px;border-bottom:1px solid #eee;text-align:left}
  .map-placeholder{height:220px;background:#eee;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#888}
  
  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr; text-align:center}
    .grid-3{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:600px){
    .grid-3{grid-template-columns:1fr}
  }

  .hero-image img {
    max-width: 100%;   /* supaya tidak melebihi lebar layar */
    height: auto;      /* menjaga proporsi */
    display: block;    /* hilangkan extra space */
    margin: 0 auto;    /* center */
  }