:root{
  --cream:#fbf7f2; --soft:#f4ece5; --beige:#eee3da; --gold:#a57945;
  --dark:#151515; --muted:#6e625b; --line:#e6dbd2;
}
*{box-sizing:border-box} body{margin:0;background:#fff;color:var(--dark);font-family:Arial,Helvetica,sans-serif} a{text-decoration:none;color:inherit}.container{width:min(90%,1130px);margin:auto}

.topbar{
  height:35px;
  background:#f2e8df;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  align-items:center;
  font-size:13px;
  color:#222;
}

.topbar div{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
}


.header {
  height: 105px;
  display: flex;
  justify-content: center; /* Membuat logo tepat di tengah horizontal */
  align-items: center;    /* Membuat logo tepat di tengah vertikal */
  padding: 0 20px;
  background: #fff;
}

.brand {
  text-align: center;
  color: var(--gold);
  font-family: Georgia, serif;
}

.brand span {
  display: block;
  font-size: 42px;
  letter-spacing: -1px;
  line-height: 1;
}

.brand small {
  display: block;
  margin-top: 7px;
  font-size: 10px;
  letter-spacing: 7px;
  color: #a08366;
}


/* Bagian Hero Baru */
.hero {
  height: 376px;
  position: relative;
  overflow: hidden; /* Penting agar gambar kedua tidak meluber keluar */
}

/* Container untuk menampung semua gambar banner */
.hero-slider {
  display: flex;
  width: 300%; /* Karena ada 2 gambar */
  height: 100%;
  transition: transform 0.8s ease-in-out; /* Kecepatan geser */
}

/* Aturan untuk masing-masing gambar di dalam slider */
.hero-slider img {
  width: 33.333%; /* Mengambil 50% dari total lebar slider (sama dengan lebar layar) */
  height: 100%;
  object-fit: cover;
}

.hero-copy {
  position: absolute;
  left: 8.4%;
  top: 58px;
  z-index: 5; /* Pastikan teks ada di atas gambar */
}

.hero-copy p{font-family:Georgia,serif;font-size:13px;letter-spacing:7px;color:var(--gold);margin:0 0 17px}.hero-copy h1{font:500 56px/1.05 Georgia,serif;margin:0 0 18px}.hero-copy span{display:block;font-size:15px;line-height:1.55;color:#3d3937;margin-bottom:25px}.btn{display:inline-flex;align-items:center;gap:14px;border-radius:28px;padding:13px 26px;font-weight:700;font-size:13px;letter-spacing:.8px}.btn.dark{background:#171717;color:#fff}.btn.small{padding:10px 22px;font-size:11px}.dots{position:absolute;left:50%;bottom:19px;transform:translateX(-50%);display:flex;gap:11px}.dots i{width:11px;height:11px;background:#fff;border-radius:50%;display:block}.dots i:first-child{background:var(--gold)}.features{margin-top:13px;background:#fbf8f5;border-radius:12px;display:grid;grid-template-columns:repeat(4,1fr);padding:24px 26px;box-shadow:0 1px 12px rgba(150,120,90,.08)}.features article,.service-strip article{display:flex;gap:18px;align-items:center;border-right:1px solid var(--line);padding:0 26px}.features article:last-child,.service-strip article:last-child{border-right:0}.feature-icon{font-size:36px;color:var(--gold)}h3{margin:0}.features h3{font-size:11px}.features p{font-size:11px;line-height:1.45;margin:7px 0 0;color:#444}.category-section{padding-top:30px}.section-title{display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:21px}.section-title span{width:48px;height:1px;background:#d9c8b9}.section-title h2,.products-head h2{font:600 17px Georgia,serif;letter-spacing:2px}.categories{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}

.cat-card{position:relative;border-radius:9px;overflow:hidden;height:170px;background:var(--soft)}

.cat-card strong {
  position: absolute;
  left: 20px;
  bottom: 17px;
  /* Mengikuti gaya font di bagian Product */
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 14px;
  font-weight: 600; /* Sedikit lebih tebal agar terbaca jelas */
  letter-spacing: 1px;
  text-transform: uppercase; /* Agar tetap terlihat seperti judul kategori */
}

.cat-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* Ini kunci agar gambar memenuhi kotak tanpa gepeng */
  display: block;
}

.cat-card b{position:absolute;right:13px;bottom:11px;background:#fff;border-radius:50%;width:25px;height:25px;text-align:center;line-height:25px;color:#b58a5a}.products-section{padding-top:40px}.products-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.products-head a{font:700 12px Georgia,serif;letter-spacing:1.5px}.products{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.product{position:relative;background:#f8f3ef;border:1px solid #eadfd8;border-radius:9px;overflow:hidden;padding-bottom:10px}.product img{width:100%;height:125px;object-fit:cover;display:block}.product h3{font-size:12px;font-weight:500;margin:9px 10px 4px}.product p{font-size:12px;color:#9b6f3c;margin:0 10px 4px}.product div{font-size:11px;color:#b58232;margin:0 10px 6px}.product small{color:#333}.product em{font-style:normal;font-size:11px;color:#555;margin-left:10px}.product button{position:absolute;right:10px;top:9px;border:0;background:#fff;border-radius:50%;width:24px;height:24px;font-size:18px}.badge{position:absolute;left:10px;top:10px;background:#d3ae7b;color:#fff;font-size:10px;font-weight:700;padding:3px 9px;border-radius:12px}.member{position:relative;height:136px;margin-top:36px;border-radius:12px;overflow:hidden}.member img{width:100%;height:100%;object-fit:cover}.member-copy{position:absolute;left:40px;top:23px}
.gift{
  position: absolute;
  left: 0;
  top: 0;
}
.gift img{
  width: 70px;
  height: 70px;
  object-fit: contain;
}
.member-copy{
  position: absolute;
  left: 40px;
  top: 25px;
  padding-left: 20px; /* ini kuncinya */
}


.member-copy h2,.member-copy p,.member-copy a{margin-left:78px}.member-copy h2{font:500 17px Georgia,serif;letter-spacing:1px;margin-top:0;margin-bottom:7px}.member-copy p{font-size:12px;line-height:1.35;margin-top:0;margin-bottom:8px}.discount{position:absolute;right:47px;top:13px;width:99px;height:99px;border:2px solid #fff;border-radius:50%;background:rgba(255,255,255,.7);text-align:center;padding-top:13px;color:#9a7140;font:14px Georgia,serif}.discount strong{font-size:38px;font-weight:400}.service-strip{margin-top:15px;background:#faf3ef;display:grid;grid-template-columns:repeat(4,1fr);padding:22px 58px}.service-strip span{font-size:29px}.service-strip h3{font-size:11px}.service-strip p{font-size:11px;line-height:1.4;margin:5px 0 0;color:#555}.footer{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1.7fr;gap:30px;padding-top:30px}.footer h2{font:400 31px Georgia,serif;color:var(--gold);margin:0 0 28px}.footer h3{font:700 10px Georgia,serif;letter-spacing:1px;margin-bottom:12px}.footer a,.footer p{display:block;font-size:10px;line-height:1.8;color:#444}.newsletter form{display:flex;border:1px solid #e1d6cd;border-radius:8px;overflow:hidden;margin-top:12px}.newsletter input{flex:1;border:0;padding:13px;font-size:10px;background:#fbfaf8}.newsletter button{border:0;background:#f4ede8;color:#ae8551;font-size:19px;width:46px}.copyright{text-align:center;font-size:10px;color:#555;margin:18px 0 12px}@media(max-width:800px){
 .topbar{
    height:auto;
    padding:7px 10px;
    grid-template-columns:1fr;
    gap:4px;
    font-size:11px;
  }
.header{height:88px;padding:0 20px;grid-template-columns:40px 40px 1fr 70px}.brand span{font-size:30px}.brand small{letter-spacing:3px}.hero{height:520px}.hero img{object-position:60% center}.hero-copy{left:7%;top:40px}.hero-copy h1{font-size:44px}.features,.categories,.products,.service-strip,.footer{grid-template-columns:1fr 1fr}.products{gap:12px}.features article,.service-strip article{border-right:0;border-bottom:1px solid var(--line);padding:14px}.cat-card{height:140px}.member-copy{left:18px}.discount{right:15px}.footer{padding-bottom:20px}}@media(max-width:520px){.header{grid-template-columns:36px 36px 1fr 58px;padding:0 14px}.brand span{font-size:25px}.brand small{font-size:8px}.header-actions{gap:10px;font-size:21px}.hero-copy h1{font-size:38px}.features,.categories,.products,.service-strip,.footer{grid-template-columns:1fr}.product img{height:180px}.member{height:180px}.discount{display:none}}
/* FIX TOPBAR */
.topbar{
  width:100% !important;
  height:35px !important;
  background:#f2e8df !important;
  display:flex !important;
  flex-direction:row !important;
  justify-content:space-around !important;
  align-items:center !important;
  gap:20px !important;
  padding:0 40px !important;
  border-radius:0 !important;
  position:relative !important;
  top:auto !important;
  left:auto !important;
  font-size:13px !important;
}

.topbar div{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:auto !important;
  background:transparent !important;
  color:#222 !important;
  white-space:nowrap !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;
}

.feature-icon {
  width: 40px;      /* Atur lebar area ikon */
  height: 40px;     /* Atur tinggi area ikon */
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon img {
  width: 100%;      /* Ikon akan mengikuti lebar 40px di atas */
  height: auto;     /* Tinggi otomatis agar proporsional */
  object-fit: contain; /* Memastikan gambar tidak terpotong */
}

.service-strip article span {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold); /* Menggunakan warna emas brand Anda */
  min-width: 40px;
}

.service-strip svg {
  width: 32px;
  height: 32px;
  stroke: var(--gold); /* Memberikan warna emas pada garis ikon */
}


/* MOBILE FIX */
@media (max-width: 600px){

  body{
    overflow-x:hidden;
  }

  .topbar{
    height:auto !important;
    padding:6px 10px !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:3px !important;
    font-size:12px !important;
    text-align:center !important;
  }

  .topbar div{
    justify-content:center !important;
    white-space:normal !important;
  }

.header{
  height:100px !important;
  padding:0 18px !important;
  display: flex !important;
  justify-content: center !important;
}

  .brand span{
    font-size:32px !important;
  }

  .brand small{
    font-size:9px !important;
    letter-spacing:4px !important;
  }


/* GUNAKAN KODE INI UNTUK MENGGANTINYA */

.hero { 
  height: 450px !important; /* Tinggi dikurangi agar tidak terlalu nge-zoom */
}

.hero-slider img { 
  width: 33.333% !important; 
  height: 100% !important; 
  object-fit: cover !important;
  /* 80% memastikan wajah model di sisi kanan gambar tetap terlihat di HP */
  object-position: 80% center !important; 
}

.hero-copy {
  left: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important; /* Membuat teks tepat di tengah vertikal */
  width: 85% !important;
}

.hero-copy h1 {
  font-size: 32px !important; /* Ukuran lebih pas untuk layar iPhone */
  line-height: 1.1 !important;
  margin-bottom: 10px !important;
}

.hero-copy span {
  font-size: 14px !important;
  line-height: 1.4 !important;
  display: block !important;
  max-width: 220px !important; /* Mencegah teks menutupi wajah model */
}

.btn {
  padding: 12px 24px !important;
  font-size: 13px !important;
  margin-top: 10px !important;
}


  .dots{
    display:none !important;
  }

  .features{
    grid-template-columns:1fr !important;
    padding:35px 28px !important;
    gap:0 !important;
  }

  .features article{
    border-right:0 !important;
    border-bottom:1px solid #e6dbd2 !important;
    padding:25px 10px !important;
  }

  .features article:last-child{
    border-bottom:0 !important;
  }

  .feature-icon{
    font-size:46px !important;
    min-width:70px !important;
  }

  .features h3{
    font-size:20px !important;
  }

  .features p{
    font-size:18px !important;
  }

  .categories,
  .products,
  .service-strip,
  .footer{
    grid-template-columns:1fr !important;
  }
  
  .products {
    /* Gunakan 2 kolom agar gambar tidak terlalu kecil, tapi tetap rapi */
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
    padding: 0 10px;
  }

  .product {
    height: auto !important; /* Biarkan tinggi menyesuaikan konten */
  }

  .product img {
    /* UBAH BAGIAN INI */
    height: 150px !important; /* Turunkan tinggi sedikit agar proporsional */
    object-fit: contain !important; /* ATAU gunakan 'cover' jika ingin penuh tapi tidak gepeng */
    background: #fff; /* Tambah background putih jika menggunakan 'contain' */
    width: 100% !important;
  }

  /* Sesuaikan font agar muat dalam 2 kolom */
  .product h3 {
    font-size: 13px !important;
    margin: 8px 10px 4px !important;
  }
  
  .product p {
    font-size: 12px !important;
  }
}