* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif; color: #222; background: #fff; line-height: 1.6; }
.container { width: 90%; max-width: 1200px; margin: auto; }

/* Navigasi */
header { position: fixed; top: 0; width: 100%; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
nav { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; }
.logo { display: flex; align-items: center; gap: 12px; }
.logo img { width: 55px; height: 55px; object-fit: contain; }
.logo h1 { 
  font-family: Arial, Helvetica, sans-serif; /* Mengubah font menjadi seperti gambar */
  font-size: 24px; /* Sedikit dibesarkan agar seimbang */
  font-weight: 900; /* Dibuat sangat tebal (Black) */
  text-transform: uppercase; 
  letter-spacing: 1px; /* Memberi jarak tipis antar huruf agar persis logo */
  
  
  /* Trik Gradasi Teks (tetap dipertahankan) */
  background: linear-gradient(to bottom, #1a4bd6, #00105e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Tombol Hamburger (Disembunyikan di Komputer) */
.hamburger { display: none; font-size: 32px; cursor: pointer; color: #111; user-select: none; }

.logo p { font-size: 13px; color: #777; }
.menu { display: flex; gap: 30px; }
.menu a { text-decoration: none; color: #222; font-weight: 500; transition: 0.3s; }
.menu a:hover { color: #ff7b00; }

/* Hero Section (Khusus Beranda) */
.hero { margin-top: 80px; height: 100vh; background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url('Quarry.jpg'); background-size: cover; background-position: center; display: flex; align-items: center; text-align: center; color: white; }
.hero h2 { font-size: 72px; margin-bottom: 20px; font-weight: 800; }
.hero p { font-size: 20px; max-width: 800px; margin: auto; margin-bottom: 35px; color: #eee; }

/* Tombol & Layout Umum */
.btn { display: inline-block; padding: 15px 35px; background: #ff7b00; color: white; text-decoration: none; border-radius: 50px; font-weight: 600; transition: 0.3s; }
.btn:hover { background: #e36d00; transform: translateY(-3px); }
.page-content { padding: 140px 0 100px 0; min-height: 80vh; } /* Spacer untuk multi-page */
.section-title { text-align: center; margin-bottom: 60px; }
.section-title h3 { font-size: 42px; margin-bottom: 15px; }
.section-title p { color: #666; max-width: 700px; margin: auto; }

/* Halaman Tentang */
.about { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 50px; align-items: center; }
.about img { width: 100%; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.about-text h4 { font-size: 38px; margin-bottom: 20px; }

/* Halaman Produk */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.card { background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.08); transition: 0.3s; }
.card:hover { transform: translateY(-10px); }
.card img { width: 100%; height: 230px; object-fit: cover; }
.card-content { padding: 25px; }
.card-content h4 { font-size: 24px; margin-bottom: 10px; }

/* Halaman Armada */
.fleet { background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('Quarry.jpg'); background-size: cover; background-position: center; color: white; padding: 100px 0; border-radius: 20px; margin-top: 50px;}
.fleet-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 40px; }
.fleet-box { background: rgba(255,255,255,0.1); padding: 25px; border-radius: 18px; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.1); text-align: center; font-weight: 600; }

/* Halaman Karir */
.career-box { 
  background: #fff3e6; 
  padding: 40px; 
  border-radius: 20px; 
  text-align: center; 
  border: 2px dashed #ff7b00; 
  margin-top: 40px; 
  font-family: 'Times New Roman', Times, serif; /* Instruksi ganti font ke Times New Roman */
}
.career-box h4 { color: #ff7b00; font-size: 28px; margin-bottom: 15px; font-family: 'Times New Roman', Times, serif; }
.career-box p { color: #555; margin-bottom: 20px; font-size: 18px; font-family: 'Times New Roman', Times, serif; }

/* Halaman Kontak */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.contact-box { background: #f7f7f7; padding: 30px; border-radius: 20px; margin-bottom: 20px; }

/* Footer & WhatsApp Float */
footer { background: #111; color: #aaa; padding: 30px 0; text-align: center; margin-top: auto; }
.wa-float { position: fixed; right: 25px; bottom: 25px; background: #25D366; color: white; padding: 15px 25px; border-radius: 50px; text-decoration: none; font-weight: 700; box-shadow: 0 10px 25px rgba(0,0,0,0.2); z-index: 999; }

/* ========================================= */
/* KODE KHUSUS UNTUK TAMPILAN HP (RESPONSIF) */
/* ========================================= */
/* ========================================= */
/* KODE KHUSUS UNTUK TAMPILAN HP (RESPONSIF) */
/* ========================================= */
@media (max-width: 768px) {
  /* Header & Logo di HP */
  nav { flex-direction: row; justify-content: space-between; align-items: center; padding: 15px 5%; }
  .logo { flex-direction: row; gap: 8px; text-align: left; }
  .logo img { width: 40px; height: 40px; }
  .logo h1 { font-size: 14px; line-height: 1.1; letter-spacing: 0; }
  .logo p { display: none; } /* Sembunyikan teks kecil di bawah logo agar tidak sesak di HP */
  
  /* Munculkan Tombol Garis Tiga */
  .hamburger { display: block; }

  /* Desain Menu Tarik-Turun (Dropdown) */
  .menu {
    position: absolute;
    top: 100%; /* Turun tepat di bawah header */
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    flex-direction: column;
    text-align: center;
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    max-height: 0; /* Sembunyikan menu awalnya */
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    gap: 0; /* Reset gap */
  }
  
  /* Desain Item Menu di HP */
  .menu a { padding: 15px 0; border-bottom: 1px solid #eee; display: block; width: 100%; }
  .menu a:last-child { border-bottom: none; }

  /* Kelas ini yang akan dipanggil untuk memunculkan menu */
  .menu.aktif { max-height: 400px; border-top: 1px solid #eee; }

  /* Layout Halaman Lainnya di HP */
  .hero { margin-top: 0; padding-top: 120px; height: auto; min-height: 100vh; }
  .hero h2 { font-size: 38px; line-height: 1.2; margin-bottom: 15px; }
  .hero p { font-size: 16px; padding: 0 15px; }
  .page-content { padding-top: 120px; padding-bottom: 50px; }
  .section-title h3 { font-size: 28px; }
  .contact-grid, .about { grid-template-columns: 1fr; text-align: center; gap: 25px; }
  .wa-float { font-size: 13px; padding: 12px 20px; right: 15px; bottom: 15px; }
}