:root {
    --primary-teal: #a4b697;
    --line-teal: #8f9b88;
    --text-dark: #555555;
    --text-light: #888888;
    --red-strike: #cc4b4b;
    --bg-color: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Lato', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-dark);
    line-height: 1.6;
}

.container { max-width: 1100px; margin: 0 auto; padding: 60px 20px; }

.back-link { display: inline-block; text-decoration: none; color: var(--text-dark); font-size: 16px; margin-bottom: 40px; transition: color 0.3s ease; }
.back-link .text { text-decoration: underline; }
.back-link:hover { color: var(--primary-teal); }

.hero-section { display: flex; gap: 50px; align-items: center; margin-bottom: 80px; }
.hero-image { flex: 1; }

/* UPDATE DI BAGIAN SINI BRO */
.hero-image img { 
    width: 100%; 
    aspect-ratio: 4 / 3; /* Memaksa frame jadi landscape (lebar > tinggi) */
    max-height: 450px; /* Batas aman supaya gambar tidak terlalu raksasa di layar lebar */
    border-radius: 15px; 
    object-fit: cover; /* Menjaga proporsi gambar agar tidak gepeng */
    object-position: center 20%; /* Fokus pemotongan di area agak atas (biasanya posisi wajah/judul utama) */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
}

.hero-content { flex: 1; }

.category { font-size: 16px; color: var(--text-light); display: block; margin-bottom: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.title { font-size: 36px; font-weight: 300; color: var(--text-dark); line-height: 1.3; margin-bottom: 20px; letter-spacing: 1px; }

.pricing { font-size: 24px; margin-bottom: 25px; display: flex; gap: 15px; align-items: center; }
.current-price { color: var(--primary-teal); font-weight: bold; font-size: 28px; }
.old-price { color: var(--red-strike); text-decoration: line-through; font-size: 20px; opacity: 0.8; }

.description { font-size: 16px; color: var(--text-light); line-height: 1.8; }

.details-section { display: flex; gap: 60px; margin-bottom: 80px; }
.detail-column { flex: 1; display: flex; flex-direction: column; gap: 40px; }
.detail-item { width: 100%; }

.detail-title { font-size: 20px; font-weight: 700; color: var(--text-dark); margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid var(--line-teal); }
.detail-list { list-style-type: none; padding-left: 10px; }
.detail-list li { position: relative; padding-left: 20px; margin-bottom: 12px; color: var(--text-light); font-size: 15px; }
.detail-list li::before { content: "•"; position: absolute; left: 0; color: var(--primary-teal); font-size: 20px; top: -2px; }
.detail-text { color: var(--text-light); font-size: 15px; line-height: 1.7; }

.cta-section { text-align: center; padding: 40px 0; }
.btn-reservasi { background-color: var(--primary-teal); color: #ffffff; border: none; padding: 15px 40px; font-size: 16px; font-weight: 700; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; font-family: inherit; letter-spacing: 0.5px; }
.btn-reservasi:hover { background-color: #8f9b88; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(164, 182, 151, 0.3); }

@media (max-width: 800px) {
    .hero-section { flex-direction: column; gap: 30px; margin-bottom: 50px; }
    .hero-image img { aspect-ratio: 16 / 10; max-height: 350px; } /* Sedikit lebih memanjang mendatar di layar HP */
    .details-section { flex-direction: column; gap: 40px; }
    .title { font-size: 28px; }
}