.medsos-block{ margin-bottom:44px; }
.medsos-block:last-child{ margin-bottom:0; }

.medsos-block-head{
  display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap;
}
.medsos-block-head .plat-ico{
  width:42px; height:42px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.medsos-block-head.ig .plat-ico{ background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af); }
.medsos-block-head.tt .plat-ico{ background:#111; }
.medsos-block-head h3{ font-size:19px; color:#fff; }
.medsos-block-head .handle{ color:var(--muted); font-size:13.5px; display:block; margin-top:2px; }
.medsos-block-head .btn{ margin-left:auto; }

.medsos-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  align-items:start; /* kartu kosong (Lihat lebih banyak...) tidak lagi
    ikut ditarik setinggi kartu video TikTok yang sudah dimuat & memang
    tinggi secara alami — cuma kartu yang beneran ada videonya yang besar */
}
@media (max-width:900px){ .medsos-grid{ grid-template-columns:1fr; } }

.medsos-feed-card{
  display:flex; align-items:center; gap:18px;
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:22px 24px; transition:.15s border-color, .15s transform;
}
.medsos-feed-card:hover{ border-color:#e1306c; transform:translateY(-2px); }
.medsos-feed-card-ico{
  width:56px; height:56px; border-radius:14px; flex-shrink:0;
  background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af);
  display:flex; align-items:center; justify-content:center;
}
.medsos-feed-card-text{ flex:1; min-width:0; }
.medsos-feed-card-text b{ display:block; color:#fff; font-size:16.5px; font-family:Oswald,sans-serif; }
.medsos-feed-card-text span{ display:block; color:var(--muted); font-size:13.5px; margin-top:4px; line-height:1.5; }
.medsos-feed-card-arrow{ font-size:22px; color:var(--muted2); flex-shrink:0; }
.medsos-feed-card:hover .medsos-feed-card-arrow{ color:#e1306c; }

.medsos-embed-box{
  border-radius:14px; overflow:hidden; background:var(--surface);
  border:1px solid var(--border); display:flex; align-items:stretch;
  min-height:260px; position:relative;
}
.medsos-embed-box iframe{ width:100% !important; }

.medsos-embed-box.medsos-empty{
  align-items:center; justify-content:center; padding:26px 18px;
}

/* Kartu "facade" — belum memuat apa pun, cuma ikon play. Skrip/iframe
   asli baru dimuat begitu diklik (lihat medsos-page.js). */
.medsos-facade{
  align-items:center; justify-content:center; cursor:pointer;
  background-size:cover; background-position:center; background-color:#111;
}
.medsos-facade.tt-facade{
  background:linear-gradient(135deg,#222,#000);
  aspect-ratio:9/16; min-height:0;
  background-size:contain; background-repeat:no-repeat; /* full preview thumbnail, tidak dipotong */
}
.medsos-facade.ig-facade{
  background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af);
  aspect-ratio:9/16; min-height:0;
}
.medsos-facade.video-facade{ min-height:0; aspect-ratio:9/16; background-color:#000; }

/* Kartu video (blok "Video") — ditanam & auto-play langsung, bukan facade. */
.medsos-embed-box.video-embed{ min-height:0; aspect-ratio:9/16; background-color:#000; }
.medsos-embed-box.video-embed video{ width:100% !important; height:100%; display:block; }
.medsos-embed-box.video-embed.video-pending{ background-size:cover; background-position:center; }

.medsos-play{
  width:56px; height:56px; border-radius:50%; flex-shrink:0;
  background:rgba(0,0,0,.55); border:2px solid rgba(255,255,255,.85);
  display:flex; align-items:center; justify-content:center;
  transition:.15s transform, .15s background;
}
.medsos-facade:hover .medsos-play,
.medsos-facade:focus-visible .medsos-play{
  transform:scale(1.08); background:rgba(0,0,0,.8);
}
.medsos-facade:focus-visible{ outline:2px solid var(--orange2); outline-offset:2px; }

/* Sementara embed asli sedang diproses setelah diklik (sebelum jadi
   iframe atau berpindah ke kartu fallback). */
.medsos-embed-box.medsos-loading{ align-items:center; justify-content:center; }
.medsos-fallback{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-align:center; color:var(--muted); font-size:13.5px; font-weight:600;
}
.medsos-fallback:hover{ color:var(--orange2); }
.medsos-fallback .ico{
  width:44px; height:44px; border-radius:50%; display:flex;
  align-items:center; justify-content:center;
  background:var(--surface3);
}