/* CSS modern, ringan, dan responsif */
:root{
  --bg: #0b1220;
  --bg-soft: #0f172a;
  --text: #e5e7eb;
  --muted:#94a3b8;
  --brand:#0ea5e9;
  --card:#0b1220;
  --ring:#38bdf8;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#ffffff; --bg-soft:#f1f5f9; --text:#0f172a; --muted:#475569; --card:#ffffff;
  }
}a
*{box-sizing:border-box}
html,body{margin:0; padding:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,'Helvetica Neue',Arial; color:var(--text); background:linear-gradient(120deg,var(--bg),var(--bg-soft));}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{max-width:1100px; margin:0 auto; padding:0 16px}
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px); background:color-mix(in oklab, var(--bg) 85%, transparent); border-bottom:1px solid color-mix(in oklab, var(--text) 10%, transparent)}
.site-header .container{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.brand img{width:28px; height:28px}
.nav{display:flex; align-items:center; gap:12px}
.nav-link{opacity:.9}
.nav-link:hover{opacity:1}
.btn{border:none; background:var(--brand); color:#031018; padding:10px 14px; border-radius:12px; font-weight:600; cursor:pointer; box-shadow:0 10px 25px -15px var(--brand)}
.btn.ghost{background:transparent; border:1px solid color-mix(in oklab, var(--brand) 40%, var(--text)); color:var(--text)}
.btn.outline{background:transparent; border:1px dashed var(--brand); color:var(--text)}

.hero{padding:48px 0}
.hero h1{font-size:clamp(28px,4vw,40px); margin:0 0 6px}
.hero p{color:var(--muted); margin-top:0}
.search-bar{display:grid; grid-template-columns:1fr minmax(140px,180px) minmax(160px,200px) auto auto; gap:10px; align-items:center; margin-top:18px}
.search-bar input, .search-bar select{height:44px; border-radius:10px; border:1px solid color-mix(in oklab, var(--text) 12%, transparent); background:var(--card); color:var(--text); padding:0 12px}
.switch{display:flex; gap:8px; align-items:center; color:var(--muted)}

.stats{display:flex; justify-content:space-between; align-items:center; margin:18px 0; color:var(--muted); font-size:14px}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid{grid-template-columns:1fr} .search-bar{grid-template-columns:1fr}}

.card{background:var(--card); border:1px solid color-mix(in oklab, var(--text) 10%, transparent); border-radius:16px; overflow:hidden; transition:.2s transform, .2s box-shadow}
.card:hover{transform:translateY(-2px); box-shadow:0 24px 40px -24px rgba(0,0,0,.35)}
.card .cover{aspect-ratio:16/10; object-fit:cover; width:100%}
.card .content{padding:12px}
.badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.badge{font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid color-mix(in oklab, var(--brand) 30%, var(--text)); opacity:.9}
.row{display:flex; justify-content:space-between; align-items:center; gap:8px}
.price{font-weight:700}
.meta{color:var(--muted); font-size:13px}
.actions{display:flex; gap:8px; margin-top:10px}
.icon-btn{border:1px solid color-mix(in oklab, var(--text) 14%, transparent); background:transparent; color:var(--text); padding:8px 10px; border-radius:10px; cursor:pointer}
.icon-btn[aria-pressed="true"]{border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand)}

.site-footer{border-top:1px solid color-mix(in oklab, var(--text) 10%, transparent); margin-top:32px}
.site-footer .container{display:flex; justify-content:space-between; align-items:center; padding:20px 16px; color:var(--muted)}

dialog{max-width:min(800px,96vw); border:none; border-radius:16px; padding:0; background:var(--card); color:var(--text);}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog article{padding:16px}
dl{display:grid; grid-template-columns:120px 1fr; gap:6px 14px; margin:0}
dt{color:var(--muted)}
/* Pagination untuk Content Khusus */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 1em;
  gap: 0.5em;
  flex-wrap: wrap;
}

.pagination button {
  padding: 0.5em 1em;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #f5f5f5;
  cursor: pointer;
  transition: background 0.3s ease;
}

.Pagination button:hover:not(:disabled) {
  background: #ddd;
}

.pagination button.active {
  background: #0066cc;
  color: white;
  font-weight: bold;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cover {
  width: 100%;
  height: auto;
  max-height: 350px; /* optional */
  object-fit: cover; /* crop jika perlu */
}