/* ============================================================
   STYUW — Extended Theme v2
   Di-load SETELAH /css/style.css
   ============================================================ */

:root{
  --bg-soft:#0F1420;
  --card-hover:#1A2130;
  --text-muted:#8B92A5;
  --text-dim:#5A6172;
  --teal:#6ee7b7;
  --teal-dim:#34d399;
  --orange:#FF8A3D;
  --blue:#4A9EFF;
  --shadow:0 8px 24px rgba(0,0,0,.5);
}

/* ============ HEADER BARU ============ */
header{
  display:block;
  padding:0;
  background:rgba(10,10,10,.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;
}
header .inner{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  width:100%;
  padding:1rem 1.5rem .5rem;
  justify-content:space-between;
}
.styuw-search{flex:1;min-width:180px;max-width:520px;position:relative}
.styuw-search input{
  width:100%;padding:.55rem 1rem .55rem 2.3rem;
  background:var(--card);border:1px solid var(--border);
  border-radius:24px;color:var(--fg);font-size:.9rem;
  outline:none;transition:.2s;font-family:inherit;
}
.styuw-search input:focus{border-color:var(--teal)}
.styuw-search::before{
  content:'🔍';position:absolute;left:14px;top:50%;
  transform:translateY(-50%);font-size:.85rem;opacity:.5;
}
.nav-right{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.icon-btn-h{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--border);
  font-size:.95rem;transition:.2s;cursor:pointer;color:var(--fg);
}
.icon-btn-h:hover{background:var(--card-hover);border-color:var(--teal)}
.avatar-h{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--teal),var(--blue));
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.8rem;color:#00241C;text-decoration:none;
}
.header-nav{
  display:flex;gap:1.5rem;flex-wrap:wrap;
  padding:.4rem 1.5rem .85rem;
}
.header-nav a{
  color:var(--muted);text-decoration:none;
  font-size:.9rem;transition:color .2s;
}
.header-nav a:hover,.header-nav a.active{color:var(--teal)}

/* ============ BREADCRUMB ============ */
.breadcrumb{padding:1.2rem 0 .4rem;font-size:.85rem;color:var(--text-muted)}
.breadcrumb a{color:var(--text-muted);text-decoration:none}
.breadcrumb a:hover{color:var(--teal)}
.breadcrumb span{color:var(--text-dim);margin:0 .4rem}
.breadcrumb .current{color:var(--fg)}

/* ============ PAGE HEAD ============ */
.page-head{margin-bottom:1.2rem}
.page-title{font-size:1.8rem;font-weight:800;margin-bottom:.3rem}
.page-sub{color:var(--text-muted);font-size:.95rem}

/* ============ FILTER CHIPS ============ */
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0 1.5rem}
.chip{
  padding:.42rem 1rem;border-radius:20px;
  background:var(--card);border:1px solid var(--border);
  font-size:.82rem;font-weight:600;color:var(--text-muted);
  transition:.2s;cursor:pointer;font-family:inherit;
}
.chip:hover{border-color:var(--teal);color:var(--fg)}
.chip.active{background:var(--teal);color:#00241C;border-color:var(--teal)}

/* ============ CARD (dipakai main.js) ============ */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1.2rem;
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;text-decoration:none;color:var(--fg);
  transition:transform .2s,border-color .2s,box-shadow .2s;
  display:flex;flex-direction:column;
  padding:0;text-align:left;align-items:stretch;gap:0;
}
.card:hover{
  transform:translateY(-4px);
  border-color:var(--teal);
  box-shadow:var(--shadow);
}
.card-thumb{
  aspect-ratio:16/9;position:relative;
  display:flex;align-items:center;justify-content:center;
  font-size:3.5rem;overflow:hidden;
  background:linear-gradient(135deg,#1F2A3D,#141824);
}
.card-thumb.game{background:linear-gradient(135deg,#3D1F2E,#141824)}
.card-thumb.book{background:linear-gradient(135deg,#1F2E3D,#141824)}
.card-thumb.audio{background:linear-gradient(135deg,#1F3D2E,#141824)}
.card-thumb img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;margin:0;border-radius:0;
}
.card-badge{
  position:absolute;top:.6rem;left:.6rem;
  padding:.2rem .6rem;border-radius:6px;
  font-size:.65rem;font-weight:800;letter-spacing:.05em;z-index:2;
}
.badge-free{background:var(--teal);color:#00241C}
.badge-paid{background:var(--blue);color:#fff}
.badge-owned{background:var(--orange);color:#fff}
.badge-premium{background:#f5c451;color:#3a2600}
.badge-coming-soon{background:var(--muted);color:#fff}
.card-body{padding:.9rem 1rem 1rem;flex:1;display:flex;flex-direction:column;gap:.3rem}
.card-title{
  font-size:.95rem;font-weight:700;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card-meta{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--text-muted)}
.card-meta .rating{color:#FFC93D;font-weight:700}
.card-price{margin-top:auto;padding-top:.4rem;font-size:.85rem;font-weight:800;color:var(--teal)}
.card-price.paid{color:var(--blue)}
.card-price.owned{color:var(--orange)}

/* ============ FOOTER BARU ============ */
.styuw-footer{
  margin-top:3rem;padding:2.5rem 0 1.5rem;
  background:var(--bg-soft);border-top:1px solid var(--border);
  text-align:left;font-size:.85rem;color:var(--text-muted);
}
.styuw-container{max-width:1100px;margin:0 auto;padding:0 1.5rem}
.footer-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:2rem;margin-bottom:2rem;
}
.footer-col h4{font-size:.85rem;font-weight:800;color:var(--fg);margin-bottom:.9rem;letter-spacing:.03em}
.footer-col a,.footer-col p{
  display:block;font-size:.8rem;color:var(--text-muted);
  margin-bottom:.55rem;text-decoration:none;line-height:1.5;
}
.footer-col a:hover{color:var(--teal)}
.footer-brand{
  display:block;
  height:36px;
  margin-bottom:.8rem;
  font-size:0;
  background-image:url('/assets/images/logo/wordmark-white.png');
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;
  max-width:140px;
}
.footer-bottom{
  padding-top:1.2rem;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:.8rem;font-size:.75rem;color:var(--text-dim);
}
.footer-selects{display:flex;gap:.5rem;flex-wrap:wrap}
.footer-selects select{
  padding:.35rem .6rem;background:var(--card);
  border:1px solid var(--border);border-radius:6px;
  color:var(--fg);font-size:.75rem;outline:none;font-family:inherit;
}
.footer-pay{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.pay-chip{
  padding:.2rem .5rem;border-radius:4px;
  background:var(--card);border:1px solid var(--border);
  font-size:.65rem;font-weight:700;color:var(--text-muted);
}

/* ============ RESPONSIVE ============ */
@media(max-width:768px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:1.5rem}
}
@media(max-width:640px){
  header .inner{padding:.75rem 1rem .3rem;gap:.5rem}
  .styuw-search{order:3;flex-basis:100%;max-width:none;min-width:0}
  .header-nav{padding:.4rem 1rem .75rem;gap:1rem}
  .page-title{font-size:1.5rem}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.8rem}
  .card-thumb{font-size:2.5rem}
  .card-body{padding:.7rem .8rem .8rem}
  .card-title{font-size:.85rem}
  .card-meta{font-size:.7rem}
}