/* =============================== */
/* THEME COLORS                    */
/* =============================== */
:root {
  --brown-900: #3b2a1e;
  --brown-800: #4c3526;
  --brown-700: #5a3e2c;
  --brown-600: #6b4a31;
  --brown-500: #7a5436;
  --cream-50: #f8f4ef;
  --ink: #1b1b1b;
  --muted: #6b6b6b;
  --brand: #7a5436;
  --brand-contrast: #ffffff;
}

/* =============================== */
/* BASE TYPOGRAPHY & LAYOUT        */
/* =============================== */
body {
  font-family: 'Inter', system-ui, Arial, sans-serif;
  color: var(--ink);
  background: var(--cream-50);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.65;
}

h1, h2, .display-4, .display-5 {
  font-family: 'Playfair Display', serif;
}

.brand-text {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  letter-spacing: .3px;
}

.text-muted { color: var(--muted) !important; }

/* =============================== */
/* NAVBAR                          */
/* =============================== */
.navbar-brown {
  background: linear-gradient(180deg, rgba(91,62,45,.98), rgba(77,53,38,.98));
}

.navbar-brown .navbar-brand,
.navbar-brown .nav-link {
  color: #f7efe7;
}

.navbar-brown .nav-link.active,
.navbar-brown .nav-link:hover {
  color: #ffffff;
  opacity: .9;
}

.brand-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.navbar .navbar-brand {
  min-height: 56px;
  display: flex;
  align-items: center;
}

.navbar .btn-brand { margin-left: .5rem; }

/* =============================== */
/* BUTTONS                         */
/* =============================== */
.btn-brand {
  --bs-btn-color: var(--brand-contrast);
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: #684a33;
  --bs-btn-hover-border-color: #684a33;
  --bs-btn-active-bg: #5b3f2c;
  --bs-btn-active-border-color: #5b3f2c;
  border-radius: 10px;
  padding: .6rem 1.1rem;
}

.btn-outline-brown {
  color: var(--brown-800);
  border-color: var(--brown-600);
}

.btn-outline-brown:hover {
  color: #fff;
  background: var(--brown-700);
  border-color: var(--brown-700);
}

/* =============================== */
/* HERO SECTIONS                   */
/* =============================== */
.hero-home {
  background: linear-gradient(180deg, rgba(59,42,30,.55), rgba(59,42,30,.25)),
              url('../img/home-hero.JPG') center/cover no-repeat;
  min-height: 78vh;
  display: flex;
  align-items: center;
}

.hero-home .hero-title {
  color: #fff;
  font-size: clamp(2rem, 3.5vw + 1rem, 3.5rem);
}

.hero-home .hero-sub {
  color: #f3ede6;
  max-width: 740px;
}

.hero-about {
  background: linear-gradient(180deg, rgba(59,42,30,.55), rgba(59,42,30,.25)),
              url('../img/about-us.JPG') center/cover no-repeat;
  min-height: 60vh;
  display: flex;
  align-items: center;
}

/* =============================== */
/* SECTIONS                        */
/* =============================== */
.section-pad { padding: 64px 0; }

.card {
  border: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

.card .price {
  color: var(--brown-700);
  font-weight: 700;
}

/* Feature List (✓) */
.feature-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.feature-list li {
  padding-left: 28px;
  position: relative;
  margin: .4rem 0;
}
.feature-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brown-700);
  font-weight: 700;
}

/* See More Toggle */
.see-more {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease;
}
.see-more.expanded {
  max-height: 1000px;
}

/* Why Choose Us */
.why-choose-us {
  background: linear-gradient(180deg, #fff, #f6efe8);
  border-radius: 16px;
  padding: 48px 24px;
}

.choose-card {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.choose-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,.1);
}
.choose-card .icon {
  font-size: 38px;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f1e7dd;
  color: var(--brown-800);
  margin: 0 auto 12px;
}

/* =============================== */
/* CONTACT & MAP                   */
/* =============================== */
.contact-box,
.contact-form {
  background: #fff;
  border-radius: 16px;
}

.map-embed {
  border-radius: 12px;
  overflow: hidden;
}

/* =============================== */
/* GALLERY                         */
/* =============================== */
.gallery-wrap {
  background: #faf6f1;
  border-radius: 16px;
  padding: 24px;
}

.masonry {
  columns: 3 260px;
  column-gap: 1rem;
}
.masonry img {
  width: 100%;
  break-inside: avoid;
  border-radius: 12px;
  margin: 0 0 1rem 0;
}

/* =============================== */
/* FOOTER                          */
/* =============================== */
.site-footer {
  background: linear-gradient(180deg, #3b2a1e, #2f2218);
  color: #f4eee7;
}

.site-footer .btn-outline-light:hover {
  background: #f4eee7;
  color: #2f2218;
}

.footer-brand { font-family: 'Playfair Display', serif; }
.opacity-90 { opacity: .9; }

/* Logo di footer */
.footer-logo {
  width: 100px;   /* lebih besar */
  height: auto;   /* biar proporsional */
  object-fit: contain;
}

/* ===================== */
/* GALLERY STYLING       */
/* ===================== */
.gallery-section {
  background: #faf6f1; /* coklat muda elegan */
}

.gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #fff;
}

.gallery-card:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.gallery-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gallery-card:hover .gallery-img {
  transform: scale(1.1);
}

/* Section Title */
.gallery-section h2 {
  color: #422600;
  font-size: 2rem;
}

.gallery-section p {
  font-size: 1rem;
  color: #6c757d;
}

/* =============================== */
/* RESPONSIVE (Tablet & Mobile)    */
/* =============================== */
@media (max-width: 991.98px) {
  .hero-home { min-height: 64vh; }
  .navbar .btn-brand { display: none; }
}

@media (max-width: 575.98px) {
  .masonry { columns: 2 160px; }
}