@font-face{font-family:Poppins;src:local("Poppins"), local("Poppins-Regular");}
:root{
--bg:#f7f8fa;--card:#ffffff;--muted:#6b7280;--text:#0f172a;
--brand:#ff8fab;--brand-2:#7c3aed;--border:#e5e7eb;--shadow:0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Poppins, system-ui, -apple-system, Arial}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
/* Header */
.header{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,#fff,rgba(255,255,255,.92));backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--border)}
.header-inner{max-width:980px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 14px}
.logo{height:34px}
.login-icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,110,166,.1);color:#d946ef;font-size:18px;border:1px solid var(--border)}
/* Main wrapper */
/*.container{max-width:980px;margin:0 auto;padding:12px}
/* Featured */
/*.featured{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;margin-top:8px}
.featured-media{width:100%;height:50vh;background:#000;display:grid;place-items:center;overflow:hidden}
.featured-media video,.featured-media img{width:100%;height:100%;object-fit:cover}
.featured-meta{padding:12px 14px}
.featured-title{margin:6px 0 4px;font-size:20px;line-height:1.2}
.featured-sub{color:var(--muted);font-size:13px} */
/* Swipe */
.swipe{display:flex;gap:10px;overflow-x:auto;padding:12px 2px 4px;scroll-snap-type:x mandatory}
.swipe::-webkit-scrollbar{height:6px}
.swipe-item{scroll-snap-align:start;min-width:32%;background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.swipe-thumb{height:140px;background:#000;overflow:hidden}
.swipe-thumb video,.swipe-thumb img{width:100%;height:100%;object-fit:cover}
.swipe-cap{padding:8px 10px;font-size:13px}
/* Footer nav */
.navbar{position:sticky;bottom:0;z-index:50;background:#fff;border-top:1px solid var(--border)}
.navbar-inner{max-width:980px;margin:0 auto;display:flex;align-items:center;justify-content:space-around;padding:10px}
.nav-btn{background:#fff;border:1px solid var(--border);padding:10px 12px;border-radius:999px;box-shadow:var(--shadow);display:flex;gap:8px;align-items:center;font-weight:600}
.nav-btn .dot{width:10px;height:10px;border-radius:50%;background:var(--brand);display:inline-block}
/* Halaman Laporan (Shorts) */
.filterbar{display:flex;gap:8px;flex-wrap:wrap;margin:8px 2px}
.filterbar .input{min-width:120px}
.shorts{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.short-card{background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.short-media{width:100%;height:86vh;background:#000;display:grid;place-items:center}
.short-media video,.short-media img{width:100%;height:100%;object-fit:cover}
.short-meta{padding:12px 14px}
.short-title{margin:6px 0;cursor:pointer}
.short-desc{display:none;color:var(--muted);line-height:1.5}
.short-desc.show{display:block}
/* Form & komponen */
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}
.card.pad{padding:14px}
.input, select, textarea{width:100%;border:1px solid var(--border);border-radius:12px;padding:10px 12px;font:inherit;background:#fff}
label{display:block;margin:10px 0 6px;font-weight:600}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{border:none;border-radius:12px;padding:10px 12px;font-weight:700;cursor:pointer}
.btn.brand{background:var(--brand);color:#fff}
.btn.outline{background:#fff;border:1px solid var(--border)}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--border);font-size:12px}
/* Admin table */
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px;text-align:left;font-size:14px}
.actions{display:flex;gap:6px;flex-wrap:wrap}
select.reaction{padding:6px 8px;border-radius:10px;border:1px solid var(--border)}
/* Analytics */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:var(--shadow)}
.bar{height:10px;background:var(--brand);border-radius:6px}
.chart-row{display:flex;gap:10px;align-items:center}
.chart-row .label{width:160px;color:var(--muted);font-size:12px}
.chart-row .barwrap{flex:1;background:#f1f5f9;border-radius:6px;overflow:hidden}
/* Overlay komentar */
.comment-panel {
position: fixed;
left: 0; right: 0; bottom: -100%;
height: 60vh; /* proporsional, setengah layar */
background: #fff;
border-radius: 16px 16px 0 0;
box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
transition: bottom 0.35s ease;
display: flex;
flex-direction: column;
z-index: 200;
}
.comment-panel.show {
bottom: 0;
}
.comment-header {
padding: 10px 14px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 600;
}
.comment-list {
flex: 1;
overflow-y: auto;
padding: 10px 14px;
}
.comment-item {
margin-bottom: 10px;
font-size: 14px;
border-bottom: 1px solid #eee;
padding-bottom: 6px;
}
.comment-form {
border-top: 1px solid var(--border);
padding: 8px 14px;
display: flex;
gap: 8px;
}
.comment-form input {
flex: 1;
border: 1px solid var(--border);
border-radius: 12px;
padding: 8px 12px;
}
.nav-icon {
width: 20px; /* kecil & konsisten */
height: 20px;
margin-right: 6px;
vertical-align: middle;
display: inline-block;
object-fit: contain; /* jaga proporsi */
}
.admin-icon {
width: 24px; /* bisa 20–28px sesuai kebutuhan */
height: 24px;
display: inline-block;
object-fit: contain;
}
/* Ikon dalam rail */
.rail-icon{
width: 22px; /* sesuaikan ukuran ikon */
height: 22px;
object-fit: contain;
display: block;
pointer-events: none; /* biar klik tetap ke button, bukan ke ![]()
*/
}
/* State hover/active untuk tombol (tanpa mengubah JS Anda) */
.rail-btn{
transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease;
}
.rail-btn:hover{
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.rail-btn:active{
transform: translateY(0);
}
/* Saat tombol aktif (mis. like/fav sudah ON) JS Anda sudah menambah .active */
.rail-btn.active{
background: var(--brand);
color: #fff;
border-color: transparent;
}
/* Jika ikon Anda berupa SVG hitam (monokrom), ini bikin efek “tint” saat aktif */
.rail-btn.active .rail-icon{
filter: brightness(0) invert(1); /* putih */
}
/* Fokus aksesibilitas */
.rail-btn:focus{
outline: 2px solid var(--brand);
outline-offset: 2px;
}
/* Spasi angka di rail */
.rail-count{
margin-top: -2px; /* rapikan sedikit */
}
/* Hilangkan kotak latar, border, dan bayangan tombol aksi */
.action-rail .rail-btn{
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0;
width: 44px; height: 44px;
display: grid; place-items: center;
-webkit-appearance: none; /* matikan default iOS Safari */
appearance: none;
outline: none;
}
/* Jika pakai ![]()
atau