/* ══════════════════════════════════════════════════════════════
   sharing.css — CSS untuk halaman Sharing portal
   Diekstrak dari: artikel, pendapat_pakar, micro_learning (native)
══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --primary-color:#667eea; --secondary-color:#764ba2;
  --ml-accent:#00d4aa; --ml-accent2:#6c63ff; --ml-accent3:#ff6b6b;
  --ml-gold:#fbbf24; --ml-text:#1e293b; --ml-muted:#64748b;
  --ml-border:#e8eef4; --ml-bg:#f0f4f8; --ml-card:#ffffff;
}

/* ─── PAGE HEADER ──────────────────────────────────────────── */
.page-header-ml {
  background:linear-gradient(135deg,#0a0e1a 0%,#1a1040 50%,#0d1f3c 100%);
  color:white; padding:55px 0 25px; position:relative; overflow:hidden;
}
.page-header-ml::before {
  content:''; position:absolute; top:-80px; right:-80px; width:350px; height:350px;
  background:radial-gradient(circle,rgba(108,99,255,.25) 0%,transparent 70%); border-radius:50%;
}
.page-header-ml::after {
  content:''; position:absolute; bottom:-60px; left:10%; width:250px; height:250px;
  background:radial-gradient(circle,rgba(0,212,170,.2) 0%,transparent 70%); border-radius:50%;
}
.subtitle-ml {
  font-family:'Plus Jakarta Sans',sans-serif; font-size:.9rem; letter-spacing:3px;
  text-transform:uppercase; color:var(--ml-accent); font-weight:600; margin-bottom:10px;
}
.header-title-ml {
  font-family:'Plus Jakarta Sans',sans-serif; font-size:2.8rem; font-weight:800;
  background:linear-gradient(135deg,#fff 30%,var(--ml-accent) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  margin-bottom:10px;
}
.header-sub-ml { color:rgba(255,255,255,.55); font-size:1rem; }
.search-bar-ml { max-width:520px; margin:0 auto; }
.search-input-ml {
  border-radius:50px; padding:14px 24px; border:2px solid rgba(0,212,170,.3);
  background:rgba(255,255,255,.07); color:white; font-size:.95rem; backdrop-filter:blur(10px);
}
.search-input-ml::placeholder { color:rgba(255,255,255,.4); }
.search-input-ml:focus {
  border-color:var(--ml-accent); background:rgba(255,255,255,.1); color:white;
  box-shadow:0 0 0 4px rgba(0,212,170,.15); outline:none;
}

/* ─── BREADCRUMB ───────────────────────────────────────────── */
.ml-breadcrumb {
  background:linear-gradient(135deg,#0a0e1a 0%,#1a1040 50%,#0d1f3c 100%); padding:14px 0;
}
.ml-breadcrumb .breadcrumb { margin:0; }
.ml-breadcrumb .breadcrumb-item a {
  color:var(--ml-accent); text-decoration:none; font-size:.85rem;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:600;
}
.ml-breadcrumb .breadcrumb-item.active {
  color:rgba(255,255,255,.55); font-size:.85rem; font-family:'Plus Jakarta Sans',sans-serif;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:320px;
}
.ml-breadcrumb .breadcrumb-item+.breadcrumb-item::before { color:rgba(255,255,255,.3); }

/* ─── KATEGORI PILLS ───────────────────────────────────────── */
.kategori-scroll {
  display:flex; gap:10px; overflow-x:auto; padding:4px 0 10px; scrollbar-width:none;
}
.kategori-scroll::-webkit-scrollbar { display:none; }
.kat-pill {
  flex-shrink:0; padding:8px 18px; border-radius:50px; background:white;
  border:1.5px solid #e2e8f0; color:#475569; font-size:.85rem; font-weight:500;
  cursor:pointer; transition:all .2s; white-space:nowrap;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.kat-pill:hover { border-color:#6c63ff; color:#6c63ff; }
.kat-pill.active { background:linear-gradient(135deg,#6c63ff,#00d4aa); color:white; border-color:transparent; }
.kat-count { background:rgba(255,255,255,.25); border-radius:20px; padding:1px 7px; font-size:.75rem; margin-left:4px; }
.kat-pill:not(.active) .kat-count { background:#e2e8f0; color:#64748b; }

/* ─── SECTION TITLES ───────────────────────────────────────── */
.section-title-ml {
  font-family:'Plus Jakarta Sans',sans-serif; font-size:1.3rem; font-weight:800;
  color:#1e293b; margin-bottom:1.25rem; display:flex; align-items:center; gap:8px;
}
.section-title {
  color:var(--primary-color); font-weight:700; margin-bottom:1.5rem; position:relative; padding-bottom:.5rem;
}
.section-title:after {
  content:''; position:absolute; bottom:0; left:0; width:60px; height:4px;
  background:linear-gradient(90deg,var(--secondary-color),transparent); border-radius:2px;
}

/* ─── ARTICLE CARD (Artikel listing) ──────────────────────── */
.article-card {
  background:white; border-radius:12px; overflow:hidden; border:1px solid #e2e8f0;
  transition:all .3s ease; height:100%; display:flex; flex-direction:column;
}
.article-card:hover { transform:translateY(-5px); box-shadow:0 10px 25px rgba(0,0,0,.1); }
.article-card img { width:100%; height:200px; object-fit:cover; }
.article-card-body { padding:1.5rem; flex-grow:1; display:flex; flex-direction:column; }
.article-card-body h5 { color:var(--primary-color); font-weight:600; margin-bottom:1rem; line-height:1.4; }
.article-card-body h5:hover { color:var(--secondary-color); }
.article-meta { color:#64748b; font-size:.85rem; margin-bottom:1rem; }
.article-meta i { color:var(--secondary-color); margin-right:.3rem; }
.article-stats {
  display:flex; gap:1rem; margin-top:auto; padding-top:1rem;
  border-top:1px solid #e2e8f0; font-size:.85rem; color:#64748b;
}
.article-stats span { display:flex; align-items:center; gap:.3rem; }

/* ─── SIDEBAR ──────────────────────────────────────────────── */
.sidebar-section {
  background:white; border-radius:12px; padding:1.5rem;
  border:1px solid #e2e8f0; margin-bottom:1.5rem;
}
.sidebar-title { color:var(--primary-color); font-weight:700; margin-bottom:1.25rem; font-size:1.1rem; }
.popular-article {
  background:white; padding:1.25rem; border-radius:8px; margin-bottom:1rem;
  border:1px solid #e2e8f0; transition:all .3s ease;
}
.popular-article:hover { box-shadow:0 5px 15px rgba(0,0,0,.08); transform:translateX(5px); }
.popular-article h6 { color:var(--primary-color); font-weight:600; margin-bottom:.5rem; }
.popular-rank {
  display:inline-block; background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));
  color:white; width:30px; height:30px; border-radius:50%; text-align:center;
  line-height:30px; font-weight:bold; font-size:.9rem; margin-right:.75rem;
}
.author-card {
  background:white; border-radius:12px; padding:1.5rem; text-align:center;
  border:1px solid #e2e8f0; transition:all .3s ease;
}
.author-card:hover { box-shadow:0 10px 25px rgba(0,0,0,.1); transform:translateY(-5px); }
.author-card img { width:100px; height:100px; border-radius:50%; object-fit:cover; margin-bottom:1rem; }
.author-card h6 { color:#1e293b; font-weight:600; margin-bottom:.5rem; }
.author-stats { color:var(--secondary-color); font-weight:500; font-size:.9rem; }

/* ─── SIDEBAR BOX (for video pages) ───────────────────────── */
.sidebar-box {
  background:white; border-radius:16px; padding:1.5rem; border:1px solid #e8eef4; margin-bottom:1.5rem;
}
.sidebar-heading {
  font-family:'Plus Jakarta Sans',sans-serif; font-size:1rem; font-weight:800; color:#1e293b;
  margin-bottom:1.25rem; display:flex; align-items:center; gap:8px;
}
.pop-item {
  display:flex; align-items:flex-start; gap:12px; padding:12px 0;
  border-bottom:1px solid #f1f5f9; transition:all .2s; cursor:pointer;
}
.pop-item:last-child { border-bottom:none; padding-bottom:0; }
.pop-item:hover { transform:translateX(4px); }
.pop-rank {
  flex-shrink:0; width:28px; height:28px; border-radius:8px;
  background:linear-gradient(135deg,#6c63ff,#00d4aa); color:white; font-weight:800;
  font-size:.8rem; display:flex; align-items:center; justify-content:center;
}
.pop-rank.rank-1 { background:linear-gradient(135deg,#fbbf24,#f59e0b); }
.pop-rank.rank-2 { background:linear-gradient(135deg,#94a3b8,#64748b); }
.pop-rank.rank-3 { background:linear-gradient(135deg,#cd7c2e,#a85f1a); }
.pop-info h6 {
  font-family:'Plus Jakarta Sans',sans-serif; font-size:.83rem; font-weight:700;
  color:#1e293b; margin-bottom:4px; line-height:1.35;
}
.pop-meta { font-size:.75rem; color:#94a3b8; display:flex; gap:10px; }
.pop-meta i { color:#6c63ff; margin-right:2px; }
.kat-sidebar-item {
  display:flex; align-items:center; justify-content:space-between; padding:10px 14px;
  border-radius:10px; margin-bottom:8px; border:1px solid #e8eef4; cursor:pointer; transition:all .2s;
}
.kat-sidebar-item:hover { background:linear-gradient(135deg,#6c63ff10,#00d4aa10); border-color:#6c63ff40; }
.kat-sidebar-left { display:flex; align-items:center; gap:10px; font-weight:600; font-size:.88rem; color:#334155; }
.kat-sidebar-count { background:#f1f5f9; color:#64748b; font-size:.75rem; font-weight:700; padding:2px 9px; border-radius:20px; }

/* ─── VIDEO CARD ───────────────────────────────────────────── */
.video-card {
  background:white; border-radius:16px; overflow:hidden; border:1px solid #e8eef4;
  transition:all .3s ease; height:100%; display:flex; flex-direction:column;
}
.video-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,.12); border-color:transparent; }
.video-thumb-wrap { position:relative; overflow:hidden; }
.video-thumb-wrap img { width:100%; height:180px; object-fit:cover; transition:transform .4s ease; }
.video-card:hover .video-thumb-wrap img { transform:scale(1.05); }
.video-play-icon {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0); transition:background .3s;
}
.video-card:hover .video-play-icon { background:rgba(0,0,0,.35); }
.video-play-icon i {
  font-size:2.5rem; color:white; opacity:0; transform:scale(.8); transition:all .3s;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.4));
}
.video-card:hover .video-play-icon i { opacity:1; transform:scale(1); }
.video-duration {
  position:absolute; bottom:10px; right:10px; background:rgba(0,0,0,.78); color:white;
  padding:2px 9px; border-radius:6px; font-size:.78rem; font-weight:700; font-family:'Plus Jakarta Sans',sans-serif;
}
.kat-label {
  position:absolute; top:10px; left:10px; background:var(--ml-accent2); color:white;
  padding:2px 10px; border-radius:20px; font-size:.72rem; font-weight:600; font-family:'Plus Jakarta Sans',sans-serif;
}
.video-card-body { padding:1.25rem; flex-grow:1; display:flex; flex-direction:column; }
.video-card-body h5 {
  font-family:'Plus Jakarta Sans',sans-serif; color:#1e293b; font-weight:700;
  font-size:.95rem; margin-bottom:.75rem; line-height:1.45;
}
.video-card:hover .video-card-body h5 { color:#6c63ff; }
.video-meta { color:#94a3b8; font-size:.8rem; margin-bottom:.75rem; display:flex; align-items:center; gap:6px; }
.video-meta img { width:24px; height:24px; border-radius:50%; object-fit:cover; border:2px solid #e2e8f0; }
.video-meta-name { color:#475569; font-weight:500; }
.video-stats { display:flex; gap:14px; margin-top:auto; padding-top:.85rem; border-top:1px solid #f1f5f9; font-size:.8rem; color:#94a3b8; }
.video-stats span { display:flex; align-items:center; gap:4px; }
.video-stats .stat-views i { color:#6c63ff; }
.video-stats .stat-likes i { color:#ff6b6b; }
.video-stats .stat-comments i { color:#00d4aa; }

/* ─── LOAD MORE ────────────────────────────────────────────── */
.btn-load-more {
  background:linear-gradient(135deg,#6c63ff,#00d4aa); color:white; border:none;
  border-radius:50px; padding:12px 36px; font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:700; font-size:.95rem; cursor:pointer; transition:all .3s;
  box-shadow:0 4px 20px rgba(108,99,255,.3);
}
.btn-load-more:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(108,99,255,.4); }

/* ─── DETAIL ARTICLE ───────────────────────────────────────── */
.article-header {
  background:white; border-radius:12px; padding:2rem; margin-bottom:2rem; border:1px solid #e2e8f0;
}
.article-title { color:var(--primary-color); font-weight:700; font-size:2rem; margin-bottom:1.5rem; line-height:1.3; }
.article-stats-row { display:flex; gap:2rem; margin-top:1.5rem; flex-wrap:wrap; }
.stat-item {
  display:flex; align-items:center; gap:.5rem; padding:.75rem 1.25rem;
  background:#f1f5f9; border-radius:8px; font-weight:600; transition:all .3s ease;
}
.stat-item i { font-size:1.2rem; }
.featured-image { width:100%; height:450px; object-fit:cover; border-radius:12px; margin-bottom:2rem; }
.article-content {
  background:white; border-radius:12px; padding:2.5rem; border:1px solid #e2e8f0; margin-bottom:2rem;
}
.article-content p { color:#334155; font-size:1.05rem; line-height:1.8; margin-bottom:1.5rem; text-align:justify; }
.article-content h3 { color:var(--primary-color); font-weight:700; margin-top:2rem; margin-bottom:1rem; }
.article-content h4 { color:var(--secondary-color); font-weight:600; margin-top:1.5rem; margin-bottom:.75rem; }
.article-content ul,.article-content ol { margin-bottom:1.5rem; padding-left:2rem; }
.article-content li { color:#334155; font-size:1.05rem; line-height:1.8; margin-bottom:.5rem; }
.author-box {
  background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));
  border-radius:12px; padding:2rem; color:white; margin-bottom:2rem;
}
.author-box-content { display:flex; gap:1.5rem; align-items:center; }
.author-box img { width:100px; height:100px; border-radius:50%; object-fit:cover; border:4px solid white; }
.author-box h4 { margin-bottom:.5rem; font-weight:700; }
.comment-section {
  background:white; border-radius:12px; padding:2rem; border:1px solid #e2e8f0; margin-bottom:2rem;
}
.comment-section h3 { color:var(--primary-color); font-weight:700; margin-bottom:1.5rem; }
.comment { padding:1.25rem; border-bottom:1px solid #e2e8f0; }
.comment:last-child { border-bottom:none; }
.comment-header { display:flex; align-items:center; gap:1rem; margin-bottom:.75rem; }
.comment-avatar { width:45px; height:45px; border-radius:50%; object-fit:cover; }
.comment-author { font-weight:600; color:var(--primary-color); }
.comment-date { color:#64748b; font-size:.85rem; }
.comment-text { color:#334155; line-height:1.6; margin-left:60px; }
.related-article {
  display:flex; gap:1rem; padding:1rem 0; border-bottom:1px solid #e2e8f0; transition:all .3s ease;
}
.related-article:last-child { border-bottom:none; }
.related-article:hover { background:#f8fafc; }
.related-article img { width:80px; height:80px; object-fit:cover; border-radius:8px; }
.related-article-content h6 { color:var(--primary-color); font-weight:600; font-size:.9rem; margin-bottom:.5rem; line-height:1.3; }
.related-article-meta { color:#64748b; font-size:.8rem; }
.share-buttons { display:flex; gap:.75rem; flex-wrap:wrap; }
.share-btn-art {
  padding:.75rem 1.25rem; border-radius:8px; border:none; color:white; font-weight:600;
  cursor:pointer; transition:all .3s ease;
}
.share-btn-art:hover { transform:translateY(-2px); box-shadow:0 5px 15px rgba(0,0,0,.2); }
.share-btn-art.facebook { background:#1877f2; }
.share-btn-art.twitter { background:#1da1f2; }
.share-btn-art.whatsapp { background:#25d366; }
.share-btn-art.linkedin { background:#0a66c2; }

/* ─── DETAIL VIDEO ─────────────────────────────────────────── */
.detail-wrap { max-width:1000px; margin:0 auto; padding:0 16px; }
.video-main-title {
  font-family:'Plus Jakarta Sans',sans-serif; font-size:1.65rem; font-weight:800;
  color:var(--ml-text); line-height:1.35; margin:2rem 0 1.25rem;
}
.yt-player-wrap {
  position:relative; width:100%; padding-top:56.25%; border-radius:20px; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.18); background:#000;
}
.yt-player-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }
.meta-strip {
  display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:1.1rem 0;
  border-bottom:1px solid var(--ml-border); margin-bottom:1.25rem;
}
.meta-author { display:flex; align-items:center; gap:10px; flex-grow:1; }
.meta-author-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.meta-author-name { font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:.92rem; color:var(--ml-text); }
.meta-author-date { font-size:.78rem; color:var(--ml-muted); }
.meta-stats { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.stat-badge {
  display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border-radius:50px;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; font-size:.82rem;
  border:1.5px solid var(--ml-border); background:white; color:var(--ml-muted);
  transition:all .2s; cursor:default; white-space:nowrap;
}
.stat-badge.views i { color:var(--ml-accent2); }
.stat-badge.likes i { color:var(--ml-accent3); }
.stat-badge.comments i { color:var(--ml-accent); }
.stat-badge.duration i { color:var(--ml-gold); }
.kat-badge {
  display:inline-flex; align-items:center; gap:5px; padding:6px 14px; border-radius:50px;
  background:linear-gradient(135deg,#6c63ff22,#00d4aa22); border:1.5px solid #6c63ff40;
  color:var(--ml-accent2); font-weight:700; font-size:.8rem; font-family:'Plus Jakarta Sans',sans-serif;
}
.desc-card {
  background:white; border-radius:16px; padding:1.75rem 2rem; border:1px solid var(--ml-border); margin-bottom:2.5rem;
}
.desc-card-title {
  font-family:'Plus Jakarta Sans',sans-serif; font-size:1rem; font-weight:800; color:var(--ml-text);
  margin-bottom:1rem; display:flex; align-items:center; gap:8px;
}
.desc-card-title::after { content:''; flex:1; height:2px; background:linear-gradient(90deg,var(--ml-accent2),transparent); border-radius:2px; }
.desc-content { color:#475569; font-size:.95rem; line-height:1.8; }
.desc-content p { margin-bottom:.85rem; }