/*
Theme Name: Opalis Reels
Theme URI: https://example.com/opalis-reels
Author: Opalis
Author URI: https://example.com
Description: Tema WordPress minimalis untuk konten video reels (vertikal). Fitur: Custom Post Type "Reel", grid responsif, autoplay/pause saat scroll, infinite scroll via REST API, dan dukungan oEmbed (YouTube/TikTok/Instagram) atau file MP4 dengan poster dari Featured Image.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: opalis-reels
Tags: video, grid-layout, infinite-scroll, minimal, responsive
*/

/* Reset & base */
:root{
  --accent:#0ea5e9;
  --bg:#0b0b0c;
  --card:#121214;
  --muted:#a1a1aa;
  --text:#fafafa;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Arial,sans-serif}
a{color:var(--text);text-decoration:none}
a:hover{color:var(--accent)}

.container{max-width:1100px;margin:0 auto;padding:16px}
.site-header{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid #222}
.site-title{font-weight:700;font-size:20px;margin:0}
.site-nav{margin-left:auto;display:flex;gap:16px}
.badge{background:var(--accent);color:#001;display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;margin-left:8px}

.grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:14px}
@media(min-width:600px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:920px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.card{background:var(--card);border:1px solid #222;border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.card .media{position:relative;background:#000;aspect-ratio:9/16}
.card video,.card iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .body{padding:12px}
.card h2{font-size:16px;margin:0 0 6px 0}
.meta{color:var(--muted);font-size:13px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tag{border:1px solid #333;padding:2px 8px;border-radius:999px;color:var(--muted);font-size:12px}

.filterbar{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.filterbar input[type="search"]{background:#0f0f11;border:1px solid #222;color:var(--text);padding:10px 12px;border-radius:12px;flex:1;min-width:220px}
.button{background:#111;border:1px solid #222;color:var(--text);padding:10px 14px;border-radius:12px;cursor:pointer}
.button[aria-pressed="true"],.button.primary{background:var(--accent);color:#001;border-color:transparent}

.pillbar{display:flex;gap:8px;overflow:auto;padding-bottom:6px}
.pill{background:#0f0f11;border:1px solid #222;color:var(--muted);padding:8px 12px;border-radius:999px;white-space:nowrap}
.pill.active{background:var(--accent);color:#001;border-color:transparent}

.load-sentinel{height:1px}
.footer{border-top:1px solid #222;color:var(--muted);padding:24px 0;margin-top:32px;text-align:center}

.single-wrap{max-width:680px;margin:0 auto}
.single-media{background:#000;border-radius:16px;overflow:hidden;aspect-ratio:9/16;position:relative}
.single-media video,.single-media iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.single-title{font-size:22px;margin:14px 0 6px}
.single-meta{color:var(--muted);font-size:13px;margin-bottom:12px}
.nav-steps{display:flex;justify-content:space-between;margin:18px 0}
.nav-steps a{color:var(--muted)}
*/