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

:root{
  --bg:       #0A0805;
  --bg-panel: #14100A;
  --bg-panel2:#1B150D;
  --line:     #2B2416;
  --gold:     #C6A15B;
  --gold-2:   #E8CE8E;
  --gold-dim: #7C6538;
  --cream:    #F4EFE2;
  --muted:    #948972;
}

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background: var(--bg);
  color: var(--cream);
  font-family: 'DM Sans', sans-serif;
  overflow-x: hidden;
}

.mono{ font-family:'Space Mono', monospace; }
a{ color:inherit; }
button{ font-family:inherit; }

/* ===== NAV ===== */
nav{
  position: sticky; top:0; z-index: 60;
  display:flex; align-items:center; justify-content:space-between;
  padding: .85rem 5vw;
  background: rgba(10,8,5,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.brand-mark{
  width:36px; height:36px; flex-shrink:0;
  border: 1px solid var(--gold-dim);
  display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond', serif; font-weight:700; font-size:1.15rem; color: var(--gold);
  transform: rotate(45deg);
}
.brand-mark span{ transform: rotate(-45deg); }
.brand-text{ line-height:1.15; }
.brand-text .name{ font-family:'Cormorant Garamond', serif; font-size:1.2rem; font-weight:600; color:var(--cream); }
.brand-text .cap{ font-family:'Space Mono', monospace; font-size:.6rem; letter-spacing:.22em; color: var(--gold); }

.nav-links{ display:flex; gap:2rem; align-items:center; }
.nav-links a{
  font-family:'Space Mono', monospace; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; color: var(--muted); transition:color .2s;
}
.nav-links a:hover{ color: var(--gold); }

.btn-nav{
  font-family:'Space Mono', monospace; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  background: var(--gold); color:#14100A; font-weight:700; text-decoration:none;
  padding:.6rem 1.1rem; border:1px solid var(--gold); white-space:nowrap;
}

@media (max-width: 760px){
  .nav-links{ display:none; }
}

/* ===== HERO ===== */
.hero{
  position:relative;
  padding: 3.4rem 5vw 3.4rem;
  display:grid; grid-template-columns: 1.15fr .85fr; gap:2rem; align-items:center;
  border-bottom: 1px solid var(--line);
  overflow:hidden;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  font-family:'Space Mono', monospace; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--gold); margin-bottom: 1.3rem;
}
.eyebrow::before{ content:''; width:24px; height:1px; background: var(--gold); flex-shrink:0; }
.hero h1{
  font-family:'Cormorant Garamond', serif;
  font-size: clamp(2.3rem, 5.4vw, 3.7rem);
  font-weight: 600; line-height: 1.08; letter-spacing:-.01em;
  margin-bottom: 1.2rem;
}
.hero h1 em{ font-style: italic; color: var(--gold); }
.hero p{ color: var(--muted); font-size: .95rem; line-height: 1.8; max-width: 500px; margin-bottom: 1.8rem; }

.hero-ctas{ display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom: 2rem; }
.btn-gold, .btn-outline{
  font-family:'Space Mono', monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  padding: .85rem 1.4rem; text-decoration:none; display:inline-block; cursor:pointer;
}
.btn-gold{ background: var(--gold); color:#14100A; font-weight:700; border:1px solid var(--gold); }
.btn-outline{ border: 1px solid var(--line); color: var(--cream); background:transparent; }
.btn-outline:hover{ border-color: var(--gold-dim); }

.stat-strip{ display:flex; gap:0; border-top: 1px solid var(--line); max-width: 480px; }
.stat{ flex:1; padding: 1.6rem 1.4rem 0 1.4rem; border-right: 1px solid var(--line); }
.stat:first-child{ padding-left:0; }
.stat:last-child{ border-right:none; padding-right:0; }
.stat-n{ font-family:'Cormorant Garamond', serif; font-size:1.6rem; font-weight:700; color: var(--gold); line-height:1; }
.stat-l{ font-family:'Space Mono', monospace; font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; color: var(--muted); margin-top:.35rem; }

.hero-graphic{ position:relative; display:flex; align-items:center; justify-content:center; height:340px; }
.orbit-svg{ width:100%; max-width:340px; height:auto; animation: spin 90s linear infinite; }
@media (prefers-reduced-motion: reduce){ .orbit-svg{ animation:none; } }
@keyframes spin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }
.ring{ fill:none; stroke: var(--line); stroke-width:1; }
.ring-1{ stroke: var(--gold-dim); opacity:.5; }
.node{ fill: var(--gold-dim); }
.hero-graphic-label{
  position:absolute; font-family:'Cormorant Garamond', serif; font-weight:700; font-size:2.6rem; color: var(--gold);
}

@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; padding-top: 2.2rem; }
  .hero-graphic{ display:none; }
}

/* ===== SECTION SHELL ===== */
.section{ padding: 4.4rem 5vw; border-bottom: 1px solid var(--line); }
.section-head{ max-width: 620px; margin-bottom: 2.6rem; }
.section-tag{
  font-family:'Space Mono', monospace; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--gold); margin-bottom:.7rem; display:flex; align-items:center; gap:.6rem;
}
.section-tag::before{ content:''; width:20px; height:1px; background:var(--gold); }
.section-title{
  font-family:'Cormorant Garamond', serif; font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight:600; color: var(--cream); line-height:1.15;
}
.section-sub{ color: var(--muted); font-size:.88rem; margin-top:.8rem; line-height:1.75; }

/* ===== GRID CARDS ===== */
.grid-featured{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap:1.6rem; }
.grid-full{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:1.3rem; }
.card{
  background: var(--bg-panel); border:1px solid var(--line);
  display:flex; flex-direction:column; transition: border-color .2s, transform .2s;
}
.card:hover{ border-color: var(--gold-dim); transform: translateY(-3px); }

/* ===== GALLERY ===== */
.gallery{ position:relative; aspect-ratio: 4/3; background:#100D08; overflow:hidden; }
.slide{ position:absolute; inset:0; opacity:0; transition:opacity .35s; }
.slide.active{ opacity:1; }
.slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.slide-placeholder{
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  background: repeating-linear-gradient(135deg, #14100A, #14100A 14px, #17130C 14px, #17130C 28px);
}
.slide-placeholder .mono-letter{
  width:52px; height:52px; border:1px solid var(--gold-dim); display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond', serif; font-size:1.5rem; color: var(--gold);
}
.slide-placeholder small{ font-family:'Space Mono', monospace; font-size:.6rem; letter-spacing:.08em; color: var(--muted); text-transform:uppercase; }

.g-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background: rgba(10,8,5,0.55); color: var(--gold-2); border: 1px solid var(--line);
  width:30px; height:30px; cursor:pointer; font-size:1rem; line-height:1;
}
.g-nav.prev{ left:8px; } .g-nav.next{ right:8px; }
.g-dots{ position:absolute; bottom:9px; left:0; right:0; display:flex; justify-content:center; gap:5px; }
.dot{ width:6px; height:6px; border-radius:50%; background: rgba(244,239,226,0.3); cursor:pointer; }
.dot.active{ background: var(--gold); }

.ribbon{
  position:absolute; top:10px; left:10px; z-index:2;
  font-family:'Space Mono', monospace; font-size:.58rem; letter-spacing:.08em; text-transform:uppercase;
  background: var(--gold); color:#14100A; font-weight:700; padding:.28rem .6rem;
}

.card-body{ padding: 1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }
.card-name-row{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; }
.card-name{ font-family:'Cormorant Garamond', serif; font-weight:600; font-size:1.35rem; color: var(--cream); }
.card-tags{ display:flex; flex-wrap:wrap; gap:.5rem; }
.pill{
  font-family:'Space Mono', monospace; font-size:.58rem; letter-spacing:.06em; text-transform:uppercase;
  color: var(--muted); border: 1px solid var(--line); padding:.22rem .55rem;
}
.card-desc{ font-size:.82rem; color: var(--muted); line-height:1.65; flex:1; }
.card-actions{ display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; margin-top:.3rem; }

.btn-order{
  font-family:'Space Mono', monospace; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
  background: var(--gold); color:#14100A; font-weight:700; text-decoration:none;
  padding:.65rem 1rem; display:inline-block; border: none;
}
.btn-order.disabled{ background:transparent; color: var(--muted); border:1px dashed var(--line); cursor:default; }
.link-site{ font-family:'Space Mono', monospace; font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color: var(--gold); text-decoration:none; border-bottom:1px solid transparent; }
.link-site:hover{ border-color: var(--gold); }

/* ===== KATEGORI ICON GRID ===== */
.kategori-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:1rem; }
.kategori-item{
  border:1px solid var(--line); background: var(--bg-panel); padding:1.5rem 1rem; text-align:center;
  cursor:pointer; transition: border-color .2s, background .2s;
}
.kategori-item:hover{ border-color: var(--gold-dim); background: var(--bg-panel2); }
.kategori-item svg{ width:28px; height:28px; stroke: var(--gold); fill:none; stroke-width:1.4; margin-bottom:.7rem; }
.kategori-item .k-name{ font-family:'Cormorant Garamond', serif; font-weight:600; font-size:1rem; color: var(--cream); }
.kategori-item .k-count{ font-family:'Space Mono', monospace; font-size:.6rem; color: var(--muted); margin-top:.3rem; }

/* ===== TRUST POINTS ===== */
.trust-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:1.4rem; }
.trust-item{ display:flex; gap:1rem; align-items:flex-start; }
.trust-num{
  font-family:'Space Mono', monospace; font-size:.7rem; color: var(--gold); border:1px solid var(--gold-dim);
  width:30px; height:30px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.trust-item h4{ font-family:'Cormorant Garamond', serif; font-size:1.05rem; font-weight:600; color: var(--cream); margin-bottom:.3rem; }
.trust-item p{ font-size:.8rem; color: var(--muted); line-height:1.6; }

/* ===== DIREKTORI LENGKAP CONTROLS ===== */
.controls{
  display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; margin-bottom: 2rem;
  padding-bottom: 1.6rem; border-bottom: 1px solid var(--line);
}
.search-box{ position:relative; flex: 1 1 240px; max-width:320px; }
.search-box input{
  width:100%; background: var(--bg-panel); border: 1px solid var(--line);
  color: var(--cream); font-family:'DM Sans',sans-serif; font-size:.84rem;
  padding: .75rem 1rem .75rem 2.1rem; outline:none; transition: border-color .2s;
}
.search-box input::placeholder{ color: var(--muted); }
.search-box input:focus{ border-color: var(--gold-dim); }
.search-box .ico{ position:absolute; left:.75rem; top:50%; transform:translateY(-50%); color: var(--muted); font-size:.8rem; }

select.loc-select{
  background: var(--bg-panel); border:1px solid var(--line); color: var(--cream);
  font-family:'Space Mono', monospace; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
  padding: .7rem .9rem; outline:none; cursor:pointer;
}

.filters{ display:flex; flex-wrap:wrap; gap:.5rem; }
.filter-btn{
  font-family:'Space Mono', monospace; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase;
  background: transparent; color: var(--muted); border: 1px solid var(--line);
  padding: .55rem .9rem; cursor:pointer; transition: all .2s;
}
.filter-btn:hover{ border-color: var(--gold-dim); color: var(--cream); }
.filter-btn.active{ background: var(--gold); border-color: var(--gold); color: #14100A; font-weight:700; }

.count-note{ font-family:'Space Mono', monospace; font-size:.66rem; color: var(--muted); margin-left:auto; }

.empty-state{
  text-align:center; padding: 3.5rem 1rem; color: var(--muted); grid-column: 1/-1;
  font-family:'Space Mono', monospace; font-size:.76rem; letter-spacing:.05em; border:1px dashed var(--line);
}

/* ===== FOOTER ===== */
footer{ padding: 3rem 5vw 2rem; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap:2rem; margin-bottom:2.4rem; }
.footer-brand .name{ font-family:'Cormorant Garamond', serif; font-size:1.3rem; color: var(--cream); margin-bottom:.5rem; }
.footer-brand p{ font-size:.8rem; color: var(--muted); line-height:1.7; max-width:260px; }
.footer-col h5{ font-family:'Space Mono', monospace; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color: var(--gold); margin-bottom:1rem; }
.footer-col a{ display:block; font-size:.82rem; color: var(--muted); text-decoration:none; margin-bottom:.6rem; background:none; border:none; text-align:left; cursor:pointer; }
.footer-col a:hover{ color: var(--gold); }
.newsletter-row{ display:flex; border:1px solid var(--line); }
.newsletter-row input{ flex:1; background:transparent; border:none; color: var(--cream); font-size:.8rem; padding:.7rem .8rem; outline:none; }
.newsletter-row button{ background: var(--gold); color:#14100A; border:none; padding:0 1rem; cursor:pointer; font-weight:700; }
.footer-bottom{ border-top:1px solid var(--line); padding-top:1.6rem; text-align:center; color: var(--muted); font-size:.78rem; }
.footer-bottom a{ color: var(--gold); text-decoration:none; }

@media (max-width: 760px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px){
  .footer-grid{ grid-template-columns: 1fr; }
  .section{ padding: 3rem 6vw; }
}