/* ===== ZEYNAVIER STYLE — elegan, syar'i, gelap-emas ===== */
:root{
  --hitam:#0d0d0d;
  --hitam2:#1a1a1a;
  --abu:#f5f3f0;
  --emas:#c9a24b;
  --emas2:#e3c477;
  --putih:#ffffff;
  --teks:#2b2b2b;
  --abu-teks:#777;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',sans-serif;
  color:var(--teks);
  background:var(--putih);
  line-height:1.7;
}
.container{max-width:1140px;margin:0 auto;padding:0 20px}
h1,h2,.logo{font-family:'Playfair Display',serif}

/* NAV */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(13,13,13,.92);backdrop-filter:blur(8px);
  padding:14px 0;
}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.logo{color:var(--emas2);font-size:22px;font-weight:700;text-decoration:none;letter-spacing:1px;display:flex;align-items:center;gap:10px}
.logo-img{height:34px;width:auto;border-radius:6px}
.nav-links{display:flex;gap:26px}
.nav-links a{color:#eee;text-decoration:none;font-size:15px;transition:.2s}
.nav-links a:hover{color:var(--emas2)}
.nav-order{margin-left:10px}
.hamburger{display:none;background:none;border:none;color:var(--emas2);font-size:26px;cursor:pointer}

/* BUTTONS */
.btn-order,.btn-primary{
  display:inline-block;text-decoration:none;font-weight:600;font-size:15px;
  padding:12px 26px;border-radius:30px;transition:.25s;cursor:pointer;border:none;
}
.btn-order{background:var(--emas);color:var(--hitam)}
.btn-order:hover{background:var(--emas2);transform:translateY(-2px)}
.btn-primary{background:var(--hitam);color:var(--putih)}
.btn-primary:hover{background:var(--hitam2);transform:translateY(-2px)}
.btn-order.big{font-size:17px;padding:16px 40px;margin-top:24px}

/* HERO */
.hero{
  background:linear-gradient(135deg,#0d0d0d 0%,#1f1f1f 100%);
  color:var(--putih);
  padding:150px 0 90px;
}
.hero-inner{display:flex;align-items:center;gap:50px}
.hero-text{flex:1}
.hero h1{font-size:54px;color:var(--emas2);margin-bottom:10px}
.hero-slogan{font-size:20px;color:#ddd;margin-bottom:18px;font-weight:300}
.hero-sub{color:#bbb;max-width:460px;margin-bottom:30px}
.promo-banner{
  display:inline-block;background:var(--emas);color:var(--hitam);
  font-weight:700;font-size:14px;padding:8px 16px;border-radius:30px;margin-bottom:18px;
  box-shadow:0 4px 14px rgba(201,162,75,.4);
}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-image{flex:1;display:flex;justify-content:center}
.hero-card{
  width:260px;height:340px;border:2px solid var(--emas);
  border-radius:14px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  font-family:'Playfair Display',serif;font-size:34px;color:var(--emas2);
  background:radial-gradient(circle at 50% 30%,#222,#0d0d0d);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.hero-card span{font-size:18px;color:#bbb;font-family:'Inter';margin-top:8px}
.hero-logo{
  width:300px;height:300px;border-radius:18px;overflow:hidden;
  border:2px solid var(--emas);box-shadow:0 20px 50px rgba(0,0,0,.5);
  background:#0d0d0d;display:flex;align-items:center;justify-content:center;
}
.hero-logo img{width:100%;height:100%;object-fit:cover}

/* SECTION */
.section{padding:80px 0}
.section-title{font-size:38px;text-align:center;color:var(--hitam);margin-bottom:8px}
.section-title.left{text-align:left}
.section-sub{text-align:center;color:var(--abu-teks);margin-bottom:46px}
.section-sub.left,.section-sub{margin-left:auto;margin-right:auto}

/* TRUST BADGES */
.trust-badges{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.trust-badge{
  background:var(--hitam);color:var(--emas2);border-radius:12px;
  padding:14px 22px;text-align:center;min-width:150px;border:1px solid var(--emas);
}
.tb-num{display:block;font-size:24px;font-weight:700;font-family:'Playfair Display',serif}
.tb-label{display:block;font-size:13px;color:#ccc;margin-top:2px}

/* FAQ */
.faq{background:var(--abu)}
.faq-list{max-width:760px;margin:0 auto}
.faq-item{
  background:#fff;border:1px solid #e6e6e6;border-radius:10px;
  margin-bottom:12px;padding:0 20px;cursor:pointer;
}
.faq-item summary{
  font-weight:600;padding:16px 0;list-style:none;position:relative;color:var(--hitam);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:0;font-size:22px;color:var(--emas);font-weight:700}
.faq-item[open] summary::after{content:"−"}
.faq-item p{padding:0 0 16px;color:var(--abu-teks);font-size:15px}

/* KATALOG */
.produk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.produk{
  border:1px solid #ececec;border-radius:14px;overflow:hidden;
  background:#fff;transition:.25s;display:flex;flex-direction:column;
}
.produk:hover{box-shadow:0 14px 34px rgba(0,0,0,.1);transform:translateY(-4px)}
.produk img{width:100%;height:300px;object-fit:cover}
.produk-gallery{position:relative;width:100%;height:300px;overflow:hidden;background:#f0f0f0}
.produk-gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:.3s}
.produk-gallery img.active{opacity:1}
.gal-prev,.gal-next{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(13,13,13,.55);color:#fff;border:none;cursor:pointer;
  width:34px;height:34px;border-radius:50%;font-size:20px;line-height:1;
}
.gal-prev{left:8px}.gal-next{right:8px}
.gal-prev:hover,.gal-next:hover{background:var(--emas)}
.gal-dots{position:absolute;bottom:8px;left:0;right:0;display:flex;gap:5px;justify-content:center}
.gal-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6)}
.gal-dots span.active{background:var(--emas)}
.produk-body{padding:18px;display:flex;flex-direction:column;flex:1}
.produk-nama{font-weight:600;font-size:16px;margin-bottom:6px}
.produk-harga{color:var(--emas);font-weight:700;font-size:17px;margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.produk-harga-lama{color:var(--abu-teks);font-weight:400;font-size:14px;text-decoration:line-through}
.produk-desc{font-size:14px;color:var(--abu-teks);flex:1;margin-bottom:14px}
.produk .btn-order{text-align:center}
.btn-detail{background:none;border:1px solid var(--emas);color:var(--emas);font-weight:600;font-size:14px;padding:10px;border-radius:8px;cursor:pointer;margin-bottom:14px;transition:.2s}
.btn-detail:hover{background:var(--emas);color:var(--hitam)}

/* MODAL */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:200;padding:20px}
.modal.open{display:flex}
.modal-box{background:#fff;border-radius:14px;max-width:560px;width:100%;max-height:85vh;overflow:auto;padding:30px}
.modal-box h3{font-family:'Playfair Display',serif;font-size:24px;color:var(--hitam);margin-bottom:16px}
.modal-box pre{font-family:'Inter',sans-serif;white-space:pre-wrap;font-size:14px;line-height:1.8;color:var(--teks)}
.modal-close{float:right;background:none;border:none;font-size:24px;cursor:pointer;color:var(--abu-teks)}

/* ABOUT */
.about{background:var(--abu)}
.about-inner{display:flex;gap:50px;align-items:center}
.about-text{flex:1}
.about-list{list-style:none;margin-top:18px}
.about-list li{margin-bottom:10px;color:var(--teks)}
.about-badge{
  flex:0 0 220px;height:220px;border-radius:50%;
  background:var(--hitam);color:var(--emas2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;font-size:48px;
  border:3px solid var(--emas);
}
.about-badge span{font-size:18px;font-family:'Inter';color:#ccc}

/* TESTIMONI */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testi{
  background:var(--abu);border-radius:14px;padding:26px;
  border-left:4px solid var(--emas);
}
.testi p{font-style:italic;margin-bottom:14px}
.testi-stars{color:#e3a800;font-size:16px;margin-bottom:8px}
.testi .nama{font-weight:600;color:var(--hitam);font-style:normal}

/* BLOG */
.blog{background:var(--abu)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.06)}
.blog-body{padding:22px}
.blog-tgl{font-size:13px;color:var(--emas);font-weight:600}
.blog-card h3{font-family:'Playfair Display',serif;font-size:20px;margin:8px 0 10px;color:var(--hitam)}
.blog-card p{font-size:14px;color:var(--abu-teks)}

/* KONTAK */
.kontak{background:linear-gradient(135deg,#0d0d0d,#1f1f1f);color:#fff}
.kontak .section-title{color:var(--emas2)}
.kontak .section-sub{color:#bbb}
.kontak-inner{text-align:center;display:flex;flex-direction:column;align-items:center}
.kontak-info{margin:20px 0;font-size:16px}
.kontak-info p{margin-bottom:8px}
.sosmed{display:flex;gap:16px;justify-content:center;margin-top:6px}
.sosmed a{
  color:var(--hitam);background:var(--emas2);text-decoration:none;
  padding:9px 18px;border-radius:24px;font-size:14px;font-weight:600;transition:.2s;
}
.sosmed a:hover{background:#fff}

/* FOOTER */
.footer{background:var(--hitam);color:#999;text-align:center;padding:30px 0}
.footer-sub{font-size:13px;color:#666;margin-top:6px}

/* RESPONSIVE */
@media(max-width:900px){
  .produk-grid{grid-template-columns:repeat(2,1fr)}
  .testi-grid,.blog-grid{grid-template-columns:1fr}
  .hero-inner,.about-inner{flex-direction:column;text-align:center}
  .about-badge{margin-top:20px}
  .nav-links{
    position:absolute;top:60px;left:0;right:0;background:var(--hitam2);
    flex-direction:column;gap:0;max-height:0;overflow:hidden;transition:.3s;
  }
  .nav-links.open{max-height:320px}
  .nav-links a{padding:14px 20px;border-bottom:1px solid #333}
  .hamburger{display:block}
  .nav-order{display:none}
  .hero h1{font-size:40px}
}
@media(max-width:520px){
  .produk-grid{grid-template-columns:1fr}
}