:root{
  --bg:#120a06;
  --card:#1a0f0a;
  --muted:#b6a79a;
  --text:#f2ece6;
  --line:rgba(255,255,255,.10);
  --accent:#d06f1f;  /* orange tua */
  --accent2:#7a3f1a; /* coklat */
}

body{
  background:
    radial-gradient(1200px 700px at 15% 0%, rgba(208,111,31,.22), transparent 58%),
    radial-gradient(900px 600px at 90% 10%, rgba(122,63,26,.18), transparent 60%),
    var(--bg);
  color:var(--text);
}

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

.nav-glass{
  background: rgba(18,10,6,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.logo-img{ width:34px; height:34px; object-fit:contain; }

.brand-title{
  font-weight: 850;
  letter-spacing: .2px;
  font-size: 1.18rem; /* diperbesar */
}
@media (max-width:576px){
  .brand-title{ font-size: 1.10rem; }
}

.hero{ padding: 18px 0 8px; }
.hero-slide{
  position: relative;
  min-height: 52vh;
  background-size: cover;
  background-position: center;
  display:flex;
  align-items:flex-end;
}
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(0,0,0,.62), rgba(0,0,0,.10));
}
.hero-content{
  position: relative;
  padding: 28px;
  max-width: 760px;
}
@media (max-width: 576px){
  .hero-content{ padding: 18px; }
  .hero-slide{ min-height: 42vh; }
}

.section-head{ display:flex; flex-direction:column; gap:6px; margin-bottom: 14px; }
.section-title{ font-weight: 900; margin:0; }
.section-sub{ color: var(--muted); margin:0; }

.chips{
  display:flex; gap:10px;
  overflow:auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar{ display:none; }
.chip{
  white-space: nowrap;
  border:1px solid var(--line);
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-weight: 700;
  font-size: .92rem;
  cursor:pointer;
  user-select:none;
}
.chip.active{
  border-color: rgba(208,111,31,.65);
  background: rgba(208,111,31,.16);
}

.product-card{
  border:1px solid var(--line);
  border-radius: 14px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.product-card:hover{
  transform: translateY(-3px);
  border-color: rgba(208,111,31,.55);
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
}

.product-img{
  position: relative;
  aspect-ratio: 1/1; /* kotak biar rapi grid kecil */
  overflow:hidden;
  background: rgba(255,255,255,.04);
}
.product-img img{
  width:100%; height:100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .25s ease;
}
.product-card:hover .product-img img{ transform: scale(1.08); }

.badge-float{
  position:absolute; left:8px; top:8px;
  background: rgba(208,111,31,.92);
  color:#1a120c;
  border-radius: 999px;
  padding: 6px 8px;
  font-weight: 900;
  font-size: .72rem;
}
.badge-featured{ background: rgba(122,63,26,.92); color:#f7efe8; }

.badge-cat{
  position:absolute; right:8px; top:8px;
  background: rgba(0,0,0,.38);
  color: rgba(242,236,230,.92);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 6px 8px;
  font-weight: 800;
  font-size: .72rem;
  backdrop-filter: blur(6px);
}

.product-body{
  padding: 10px 10px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.product-title{
  margin:0;
  font-weight: 900;
  font-size: .95rem;
  line-height: 1.2;
}
.product-code{
  color: var(--muted);
  font-size: .82rem;
}

/* Mode grid kecil di HP: teks lebih kecil */
@media (max-width:576px){
  .product-body{ padding: 8px 8px 10px; gap:4px; }
  .product-title{ font-size: .78rem; }
  .product-code{ font-size: .72rem; }
}

.modal-content{
  background: rgba(26,15,10,.96);
  border:1px solid var(--line);
  color: var(--text);
}
.modal-header{ border-bottom:1px solid var(--line); }
.modal-footer{ border-top:1px solid var(--line); }

.contact-box{
  border:1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  background: rgba(255,255,255,.03);
}
.map-wrap{
  border-radius: 16px;
  overflow:hidden;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.map-wrap iframe{ width:100%; height:320px; border:0; display:block; }

.footer{
  border-top:1px solid var(--line);
  padding: 18px 0;
  color: rgba(242,236,230,.86);
}

.admin-fab{
  position: fixed;
  left: 14px;
  bottom: 14px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(208,111,31,.18);
  border: 1px solid rgba(208,111,31,.45);
  backdrop-filter: blur(10px);
  text-decoration:none;
  z-index: 9999;
}
.admin-fab:hover{ background: rgba(208,111,31,.26); }
.admin-fab svg{ width: 22px; height: 22px; fill: rgba(242,236,230,.92); }

.testi-swiper .swiper-slide{
  min-height: 170px;
}

.stars{
  display:flex;
  gap:2px;
  align-items:center;
  justify-content:flex-end;
  min-width: 86px;
}
.star{
  font-size: 16px;
  line-height: 1;
}
.star.on{ color: var(--accent); }
.star.off{ color: rgba(242,236,230,.25); }

.testi-swiper .swiper-slide{
  min-height: 170px;
}
.search-input{
  background: rgba(255,255,255,.04);
  border:1px solid var(--line);
  color: var(--text);
}
.search-input::placeholder{ color: rgba(182,167,154,.75); }
.search-input:focus{
  background: rgba(255,255,255,.05);
  border-color: rgba(208,111,31,.60);
  color: var(--text);
  box-shadow: 0 0 0 .25rem rgba(208,111,31,.15);
}

/* stars */
.stars{
  display:flex; gap:2px; align-items:center; justify-content:flex-end;
  min-width: 86px;
}
.star{ font-size: 16px; line-height: 1; }
.star.on{ color: var(--accent); }
.star.off{ color: rgba(242,236,230,.25); }

.testi-swiper .swiper-slide{ min-height: 170px; }