:root { --green-dark: #003300; --white: #ffffff; --black: #000000; --red: #ff0000; }
    body { margin: 0; font-family: 'Open Sans','Montserrat','Lato','Noto Sans','Pacifico','Lobster',sans-serif; max-width: 999px; 
        margin: auto; background-image: url('ibg.jpg'); background-repeat: repeat; background-attachment: fixed; background-position: top left; background-size: auto; 
        color: #000000; scroll-behavior: auto; }
    header { width: 100%; position: relative; }
    header img { width: 100%; height: auto; max-height: 630px; object-fit: cover; }
    nav {position: sticky; top: 0; background-color: #003300; display: flex; justify-content: space-between; align-items: center; 
      padding: 10px 20px; z-index: 1000;margin-top:-5px;}
    .nav-title { color:white;font-weight:bolder;font-size:19px;font-family:'pasifico',sans-serif;}
    .nav-menu { display: flex; gap: 19px; }
    .nav-menu a { color:white;text-decoration:none;font-weight:normal;font-size:14px;}
    .burger { display: none; color: white; font-size: 19px; cursor: pointer; }
    @media (max-width: 699px) {
    .nav-menu { display: none; flex-direction: column; background-color: #003300; position: absolute; top: 100%; right: 0; left: 0; padding: 10px; }
    .nav-menu.active { display: flex; } .burger { display: block; } }
    html { scroll-behavior: smooth; }
    h2 {font-size:18px;font-weight:bolder;}
    section {padding: 29px;border-radius:39px;}
    .profil { background:#f4f4f4;font-size:14px; }
    .profil div { margin: 10px 0; display: flex; justify-content: space-between; }
    .profil div span:first-child { text-align: right; flex: 1; }
    .profil div span:last-child { text-align: left; flex: 2; margin-left:5px;font-weight:900; }
    .profil div span.bold { font-weight: bold; }
    .produk-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
    .produk-card { background: white; border-radius: 10px; padding: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
      width: 18%; min-width: 190px; box-sizing: border-box; text-align: center; }
    .produk-card img { width: 100%; border-radius: 17px; height: auto; }
    .produk-card h4, .produk-card p, .produk-card span { margin: 5px 0; }
    @media (max-width: 600px) { .produk-card { width: 45%; } }
    @media (max-width: 200px) { .produk-card { width: 100%; } }
    .produk-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
    .produk-card { background: #ffffff; border-radius: 16px; padding: 15px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
      width: 18%; min-width: 190px; box-sizing: border-box; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; }
    .produk-card:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0,0,0,0.2); }
    .produk-card img { width: 100%; border-radius: 18px; height: auto; }
    .produk-card h4 { font-family: 'Montserrat', sans-serif; margin: 10px 0 5px; color: var(--green-dark); }
    .produk-card p { margin: 0; font-size: 14px; color: #333; }
    .produk-card span { display: block; margin-top: 6px; font-weight: bold; color: var(--red); }
    @media (max-width: 600px) { .produk-card { width: 100%; } }
    @media (max-width: 200px) { .produk-card { width: 100%; } }
    section#galeri, section#hubungi, section#hiburan, section#review { background: #f9f9f9; border-radius: 39px; 
      box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
    footer { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 100%; 
            background: var(--red); color: var(--white); font-size: 11px; font-weight: 700; text-align: center; padding: 5px; z-index: 1000; }
    .galeri-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
    .galeri-grid a { display: block; width: 22%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; }
    .galeri-grid img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 18px; }
    @media (max-width: 600px) { .galeri-grid a { width: 45%; } }
    @media (max-width: 200px) { .galeri-grid a { width: 48%; } } 
    p {font-size:14px;text-align:justify;}
    .search-container {text-align:center;margin-bottom:21px;}
    .search-container input {width:69%;max-width:400px;padding: 8px 12px;border-radius:11px;border: 1px dotted #ccc; font-size:14px;}
    table {width:91%;max-width:899px;margin: 0 auto;border-collapse:collapse;border-radius:17px;overflow:hidden;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);}
    thead {background-color:#006400;color:#fff;font-size:15px;}
    th,td {padding:11px 17px;text-align: center;}
    tbody tr:nth-child(odd) {background-color: #ffffff;}
    tbody tr:nth-child(even) {background-color: #f4f4f4;}
    tbody td {font-size:14px;color:#000;}     
    .beli-btn { margin-top: 10px; padding: 8px 14px; background-color: #006400; color: white; border: none; border-radius: 9px;
      cursor: pointer; font-size: 14px; }
    .beli-btn:hover { background-color: #228B22; }