/* ==== CoinsMerch · Minimal Luxe Dark ==== */

/* COLORS & TOKENS */
:root{
  --bg:#0b0b0c;           /* background utama */
  --surface:#121216;      /* panel/kartu */
  --line:#22222a;         /* garis/border halus */
  --text:#f4f4f6;         /* teks utama */
  --muted:#a6a6b2;        /* teks sekunder */
  --accent:#b48cff;       /* aksen mewah */
  --accent-2:#9b7aff;

  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --container:1220px;

  /* ukuran tipografi */
  --h1: clamp(28px, 3.2vw, 44px);
  --h2: clamp(22px, 2.4vw, 32px);
  --h3: clamp(18px, 2vw, 24px);
  --lead: 1.06rem;
}

/* RESET RINGKAS */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  letter-spacing:.2px;
}

/* CONTAINER */
.container{max-width:var(--container); margin-inline:auto; padding-inline:20px}

/* TYPOGRAPHY */
.gothic{
  font-family: "Cinzel", ui-serif, Georgia, serif;
  letter-spacing:.3px;
}
h1,h2,h3{margin:0 0 .6rem 0; font-weight:700}
h1{font-size:var(--h1)}
h2{font-size:var(--h2)}
h3{font-size:var(--h3)}
.lead{font-size:var(--lead); color:var(--muted)}

/* NAVBAR — minimal */
.navbar{
  position:sticky; top:0; z-index:100;
  background:rgba(12,12,14,.55);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.navbar .bar{display:flex; align-items:center; gap:18px; padding:14px 0}
.navbar .brand{
  font-family:"Cinzel", ui-serif, Georgia, serif;
  font-weight:700; letter-spacing:.4px; font-size:20px; color:var(--text); text-decoration:none;
}
.navbar .spacer{flex:1}
.navbar a.nav{color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:10px}
.navbar a.nav:hover{color:var(--text); background:rgba(255,255,255,.03)}
.navbar .cta{display:flex; gap:10px}

/* BUTTONS */
.btn{
  appearance:none; border:1px solid var(--line); background:transparent; color:var(--text);
  padding:.65rem 1rem; border-radius:12px; text-decoration:none; cursor:pointer;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-ghost{border-color:var(--line); background:rgba(255,255,255,.02)}
.btn-accent{border:0; background:var(--accent); color:#0c0c0d; font-weight:700}
.btn-accent:hover{background:var(--accent-2)}
.btn-min{padding:.45rem .8rem; border-radius:10px}

/* CARDS */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow: var(--shadow);
}
.card-body{padding:16px}
.card-grid{display:grid; gap:14px}
.card-grid.cols-4{grid-template-columns: repeat(4, minmax(0,1fr))}
@media (max-width: 1100px){.card-grid.cols-4{grid-template-columns: repeat(3,1fr)}}
@media (max-width: 760px){.card-grid.cols-4{grid-template-columns: repeat(2,1fr)}}
@media (max-width: 480px){.card-grid.cols-4{grid-template-columns: 1fr}}

.product-card img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-top-left-radius:var(--radius); border-top-right-radius:var(--radius);
  border-bottom:1px solid var(--line);
}
.badge{
  display:inline-block; font-size:.78rem; color:var(--text);
  border:1px solid var(--line); padding:.2rem .5rem; border-radius:10px;
  background:rgba(255,255,255,.02)
}
.price{font-weight:800}

/* HERO — simple dan mewah */
.hero{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--radius);
  background:
    radial-gradient(1200px 600px at -10% -20%, rgba(180,140,255,.08), transparent 60%),
    linear-gradient(135deg, #13131a 0%, #0b0b0c 100%);
}
.hero .inner{padding:40px 24px}
.hero .actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px}

/* UTILS */
.muted{color:var(--muted)}
.sep{height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent); margin:16px 0}
.center{display:flex; align-items:center; justify-content:center}

/* TABLE */
.table{width:100%; border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--line); padding:12px}
.table thead th{color:var(--muted); font-weight:600}

/* FORMS */
.input,.select,.textarea,.form-control,.form-select{
  background:#0e0e11; border:1px solid var(--line); color:var(--text);
  border-radius:12px; padding:.65rem .8rem
}
.form-control:focus,.form-select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 .25rem rgba(180,140,255,.15)}

/* FOOTER */
.footer{border-top:1px solid var(--line); padding:22px 0; color:var(--muted)}