/* ===== BASIC ===== */ 
body 
{ font-family: Arial; margin:0; padding:0; background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url('../img/beground.jpeg'); background-size: cover; background-position: center; background-attachment: fixed; color:white; } 
/* ===== HEADER ===== */ 
header 
{ background: rgba(140, 198, 63, 0.85); 
  padding: 10px 0; box-shadow: 0 3px 8px rgba(0,0,0,0.15);
   animation: slideDown 0.6s ease-in-out; 
   backdrop-filter: blur(4px); }
   @keyframes slideDown { from {transform: translateY(-50px); opacity:0;} to {transform: translateY(0); opacity:1;} } 
   /* ===== NAVBAR ===== */ 
   .navbar 
   { display:flex; justify-content:space-between; align-items:center; padding:0 50px; background:transparent; } 
   .logo 
   { font-size:28px; color:white; font-weight:bold; } .navbar ul { display:flex; gap:25px; list-style:none; } 
   .navbar a { text-decoration:none; color:white; font-size:18px; padding:6px 10px; border-radius:5px; transition:0.3s; } .navbar a:hover { background:#F7931E; } 
   /* iframe navbar */ 
   .navframe 
   { width: 100%; height: 80px; border: none; } 
   /* ===== HERO ===== */ 
   .hero
    { background: rgba(247,147,30,0.85); padding:40px; text-align:left; display:flex; justify-content:center; align-items:center; gap:40px; color:white; border-radius: 15px; width: 85%; margin:40px auto; backdrop-filter: blur(3px); } 
    .hero-text h1 
    { font-size:40px; margin-bottom:10px; } 
    .hero-text p { font-size:18px; }
    .hero img { width:380px; border-radius:15px; } 
     /* ===== PRODUCT SECTION ===== */ 
    .title { text-align:center; font-size:30px; margin-top:40px; color:white; text-shadow:0 2px 5px rgba(0,0,0,0.3); }
     .product-grid { display:flex; justify-content:center; gap:30px; padding:20px; } 
     .card { background: rgba(255,255,255,0.9); padding:15px; border-radius:12px; width:250px; box-shadow:0 3px 10px rgba(0,0,0,0.2); text-align:center; color:#333; backdrop-filter: blur(3px); } 
     .card img { width:100%; border-radius:10px; } 
     .card h3 { margin-top:15px; }
     .price { color:#F7931E; font-size:20px; font-weight:bold; } 
      /* ===== FOOTER ===== */
       footer { background: rgba(140,198,63,0.85); color:white; text-align:center; padding:15px; margin-top:40px; backdrop-filter: blur(4px); }
        /* tombol */ 
        .btn-beli { display:inline-block; background:#F7931E; color:white; padding:10px 15px; border-radius:6px; text-decoration:none; font-size:16px; transition:0.3s; }
         .btn-beli:hover { background:#d87d14; }
          /* ===== FORM PEMBELIAN BOX (FIXED) ===== */ 
          .pembelian-box { width: 420px; /* kotak rapi, tidak melebar */ margin: 50px auto; /* posisi tengah */ background: rgba(255,255,255,0.92); padding: 30px; border-radius: 15px; box-shadow: 0 6px 22px rgba(0,0,0,0.35); color: #333; backdrop-filter: blur(6px); } .pembelian-box h2 { text-align: center; margin-bottom: 20px; font-size: 24px; color: #222; } /* Form rapi ke bawah */ .pembelian-box form { display: flex; flex-direction: column; gap: 12px; } .pembelian-box label { font-weight: bold; margin-bottom: -5px; color: #222; } .pembelian-box input, .pembelian-box textarea, .pembelian-box select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 8px; font-size: 15px; background: #fff; } .pembelian-box textarea { height: 80px; resize: none; } /* Tombol proses */ .pembelian-box .btn-beli { width: 100%; padding: 12px; margin-top: 5px; background: #F7931E; color: white; border: none; border-radius: 8px; font-size: 17px; cursor: pointer; transition: 0.25s; } .pembelian-box .btn-beli:hover { background: #d87d14; } .form-card { max-width: 450px; margin: 20px auto; background: rgba(255, 255, 255, 0.85); padding: 25px; border-radius: 15px; box-shadow: 0 5px 20px rgba(0,0,0,0.3); backdrop-filter: blur(6px); display: flex; flex-direction: column; } .form-card form { display: flex; flex-direction: column; gap: 10px; } .form-card input, .form-card textarea, .form-card select { padding: 10px; border: 1px solid #ccc; border-radius: 8px; font-size: 16px; width: 100%; } .form-card textarea { height: 70px; resize: none; } .btn { margin-top: 10px; padding: 12px; background: #ff8c1a; color: #fff; font-weight: bold; border: none; border-radius: 8px; cursor: pointer; transition: 0.2s; } .btn:hover { background: #e67e00; } .pdf-center { text-align: center; margin-top: 20px; } .btn-pdf { display: inline-block; margin-top: 15px; padding: 10px 18px; background: #ff6b00; color: #fff; font-weight: bold; text-decoration: none; border-radius: 8px; transition: 0.2s; } .btn-pdf:hover { background: #e65c00; }
     /* Agar halaman full tinggi & footer tetap di bawah */ 
     html, body 
     { height: 100%; } body { display: flex; flex-direction: column; }
      footer 
      { margin-top: auto;
         /* dorong footer ke paling bawah */ }
          /* ==== FIXED NAVBAR ==== */
           header
            { position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; }
    /* ==== FIXED NAVBAR ==== */ 
    header { position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; }
     /* iframe navbar juga dibuat fixed */ 
     .navframe { width: 100%; height: 80px; border: none; position: fixed; top: 0; left: 0; z-index: 9998; 
      /* sedikit di bawah header */ } 
      /* Atur konten supaya tidak ketiban navbar */ 
      body
       { padding-top: 90px !important; display: flex; flex-direction: column; }




       /* BOX khusus untuk halaman keranjang */
.keranjang-box {
  width: 85%;
  margin: 30px auto;
  background: rgba(255, 255, 255, 0.92);
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.35);
  color: #222;
  backdrop-filter: blur(5px);
}

/* warna text di tabel biar jelas */
.keranjang-box table th, 
.keranjang-box table td {
  color: #222;
  background: rgba(255,255,255,0.85);
}