/* style.css - material native */
:root{
  --pink:#e91e63; --pink-dark:#ad1457; --purple:#9c27b0;
  --bg:#f5f5f5; --surface:#ffffff; --text:#212121;
  --text-muted:#5f6368; --divider:#e0e0e0;
  --radius:8px; --shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.navbar{
  background:var(--pink); color:#fff; margin:0;
  padding:14px 16px; font-size:17px; font-weight:600;
  position:sticky; top:0; z-index:10; box-shadow:var(--shadow);
}
.navbar a{color:#fff;text-decoration:none}
.wrap{max-width:820px;margin:0 auto;padding:16px}
h1{font-size:20px;font-weight:600;margin:18px 0 10px;line-height:1.3}
h5{font-size:15px;font-weight:600;margin:22px 0 10px;color:var(--text)}
iframe{width:100%;height:480px;border:0;background:#000;border-radius:var(--radius);display:block}
@media (max-width:600px){ iframe{height:260px} }
.pink-text{color:var(--pink)}
.bold-text{font-weight:600}
.purple{background:var(--purple)}
.white-text{color:#fff}
.pink{background:var(--pink)}
p{color:var(--text-muted);margin:12px 0}
span.pink.white-text{padding:3px;border-radius:4px;display:inline-block}
b.purple.white-text{padding:3px;border-radius:4px}
.btn{
  display:block; text-align:center; text-decoration:none;
  padding:14px 18px; margin:14px 0; border-radius:var(--radius);
  font-size:16px; font-weight:600; color:#fff; background:var(--pink);
  box-shadow:var(--shadow); transition:background .2s,transform .1s;
  width:100%;
}
.btn:active{transform:scale(.99)}
.btn:hover{background:var(--pink-dark)}

/* ==== Info box ==== */
.info-box{
  background:linear-gradient(135deg,#fce4ec,#f3e5f5);
  border-left:4px solid var(--pink);
  border-radius:var(--radius);
  padding:12px 14px;
  margin:16px 0;
  font-size:13px;
  color:var(--text);
  line-height:1.55;
}
.info-box strong{ color:var(--pink-dark) }
@media (min-width:768px){ .info-box{ font-size:14px; padding:14px 16px; } }

/* ==== Grid card rekomendasi video ==== */
#random_video_cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:8px;
}
@media (min-width:768px){
  #random_video_cards{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
}
.vcard{
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  min-width:0;
  text-decoration:none;
  color:var(--text);
}
.vthumb{
  width:100%;
  background:#000;
  overflow:hidden;
  line-height:0;
}
.vthumb img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}
.vthumb-empty{
  aspect-ratio:16/9;
  background:linear-gradient(135deg,#e91e63,#9c27b0);
}
.vbody{
  padding:8px 10px 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.vtitle{
  font-size:13px;
  font-weight:700;
  color:#000;
  line-height:1.3;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  word-break:break-word;
  min-height:34px;
}
@media (min-width:768px){
  .vtitle{ font-size:14px; }
}
.vbtn{
  display:block;
  text-align:center;
  background:var(--pink);
  color:#fff;
  font-size:12px;
  font-weight:600;
  text-decoration:none;
  padding:8px 10px;
  border-radius:6px;
  white-space:nowrap;
}
.vbtn:hover{ background:var(--pink-dark) }

footer{margin:30px 0 10px;text-align:center;color:var(--text-muted);font-size:12px}
footer a{color:var(--pink);text-decoration:none}