/* technogaming wp theme styles */
:root{ --gap:16px; --radius:14px; --accent:#d02424; --text:#0f172a; --muted:#64748b; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background:#fff; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; height:auto; }

.container{ width:min(1140px, 92%); margin:0 auto; }
.header{ padding:14px 0; border-bottom:1px solid #eee; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.brand{ font-weight:800; letter-spacing:-.3px; font-size:22px; }
.nav a{ margin-right:12px; font-weight:600; color:#374151; }
.nav a:last-child{ margin-right:0; }

.grid{ display:grid; grid-template-columns: 2.35fr 1fr; gap:24px; }
@media (max-width: 900px){ .grid{ grid-template-columns: 1fr; } }

/* Badge kategori */
.badge{ display:inline-block; background:var(--accent); color:#fff; font-weight:700; font-size:12px; padding:6px 10px; border-radius:999px; line-height:1; }
.meta{ color:var(--muted); font-size:12px; }
.meta .dot{ margin:0 6px; opacity:0.65; }

/* TOP PICKS */
.top-picks{ margin: 16px 0 6px; }
.top-picks-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.card{ border:0; background:transparent; }
.card-thumb{ position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:12px; }
.card-thumb img{ width:100%; height:100%; object-fit:cover; }
.card-body{ display:none; }
/* Hide Top Picks entirely on mobile */
@media (max-width: 768px){ .top-picks{ display:none !important; } }

/* LIST — kartu kecil */
.list{ display:flex; flex-direction:column; gap:14px; margin: 10px 0 28px; }
.item{ display:grid; grid-template-columns: 128px 1fr; gap:12px; padding:10px; border:1px solid #eee; border-radius:var(--radius); background:#fff; }
.item-thumb{ width:128px; height:128px; border-radius:12px; overflow:hidden; }
.item-thumb img{ width:100%; height:100%; object-fit:cover; }
.item-title{ font-weight:800; font-size:18px; line-height:1.25; margin:0 0 8px; }
.item-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
@media (max-width: 480px){ .item{ grid-template-columns: 112px 1fr; } .item-thumb{ width:112px; height:112px; } }

/* Sidebar: Hot artikel */
.hot-box{ background:#fff; border:1px solid #eee; border-radius:12px; padding:12px; }
.hot-head{ font-size:18px; font-weight:800; margin:0 0 10px; }
.hot-list{ display:flex; flex-direction:column; gap:12px; }
.hot-item{ display:grid; grid-template-columns: 110px 1fr; gap:10px; align-items:center; }
.hot-thumb{ width:110px; height:70px; border-radius:10px; overflow:hidden; }
.hot-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.hot-title{ font-weight:800; line-height:1.3; display:block; }

/* Sidebar list legacy */
.sidebar-list{ display:flex; flex-direction:column; gap:12px; }
.sidebar-item{ display:grid; grid-template-columns: 160px 1fr; gap:10px; align-items:center; }
.sidebar-item .thumb{ width:160px; height:100px; overflow:hidden; border-radius:10px; }
.sidebar-item .thumb img{ width:100%; height:100%; object-fit:cover; }

/* POST PAGE */
.post-header{ margin: 8px 0 14px; }
.post-title{ font-size: clamp(28px, 3.2vw, 38px); line-height:1.15; font-weight:900; margin: 10px 0 14px; letter-spacing:-.3px; }
.hero-figure{ margin: 0 0 16px; border-radius: 12px; overflow: hidden; background:#f3f4f6; }
.hero-figure img{ width:100%; height:auto; display:block; }
@supports (aspect-ratio: 16/9) {
  .hero-figure img{ aspect-ratio:16/9; object-fit:cover; }
}
.post-content{ font-size:17px; line-height:1.78; color:#0f172a; }
.post-content p{ margin: 0 0 1.05em; }
.post-content h2{ font-size: 24px; margin: 1.6em 0 .5em; font-weight:800; }
.post-content h3{ font-size: 20px; margin: 1.2em 0 .4em; font-weight:800; }
.post-content img{ border-radius: 12px; margin: 12px 0; }
.post-content blockquote{ margin:16px 0; padding:12px 16px; background:#fafafa; border-left:4px solid #e11d48; border-radius:8px; color:#334155; }

/* Related slider */
.related{ margin: 28px 0 10px; }
.related-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.related .swiper{ overflow:hidden; }
.related-card{ width:260px; }
.related-thumb{ position:relative; border-radius:12px; overflow:hidden; }
.related-thumb img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.related-title{ font-size:16px; font-weight:700; line-height:1.35; margin:.5rem .1rem 0; }
@media (max-width:640px){ .related-card{ width: 68vw; } .related-head .nav{ display:none; } }

/* Footer */
.footer{ border-top:1px solid #eee; margin-top:28px; padding:18px 0; color:#6b7280; font-size:13px; }

/* Helpers */
.content-col { max-width: 730px; }
.sidebar-col { position: relative; }