.popup-notif {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.popup-notif.hidden {
  display: none;
}
.popup-content {
  background: #fff;
  padding: 20px 25px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  max-width: 350px;
  width: 80%;
  animation: fadeIn 0.3s ease-out;
}
.popup-content p {
  margin-bottom: 15px;
  font-size: 1rem;
  color: #333;
}
.popup-content button {
  padding: 8px 16px;
  background: #0077cc;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.popup-content button:hover {
  background: #005fa3;
}
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}



.share-buttons {
  margin:10px 0;
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.share-buttons span {
  font-weight:600;
  color:#333;
  margin-right:6px;
}
.share-btn {
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#555;
  text-decoration:none;
  transition:transform 0.2s ease, opacity 0.2s ease;
}
.share-btn svg {
  width:16px;
  height:16px;
}
.share-btn:hover {
  transform:scale(1.1);
  opacity:0.9;
}
.share-btn.fb { background:#1877f2; }
.share-btn.tw { background:#1da1f2; }
.share-btn.wa { background:#25d366; }
.share-btn.li { background:#0a66c2; }

/* Related Articles */
.related-articles {
  margin-top:20px;
}
.related-articles h3 {
  font-size:1.3rem;
  margin-bottom:12px;
}
.related-list {
  display:flex;
  flex-wrap:wrap;
  gap:15px;
}
.related-item {
  flex:1 1 calc(50% - 8px);
  border:1px solid #eee;
  border-radius:6px;
  overflow:hidden;
  transition:transform .2s;
}
.related-item:hover {
  transform:translateY(-3px);
}
.related-item img {
  width:100%;
  height:140px;
  object-fit:cover;
}
.related-text {
  padding:8px;
}
.related-text h4 {
  margin:0 0 4px;
  font-size:0.95rem;
  font-weight:700;
}
.related-text p {
  margin:0;
  font-size:0.8rem;
  color:#555;
}

/* Container */
.container {
  max-width:1200px;
  margin:auto;
  padding:15px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.article-hero {
  position:relative;
  height:350px;
  background-size:cover;
  background-position:center;
  border-radius:8px;
}
.hero-overlay {
  background:rgba(0,0,0,0.5);
  padding:15px 20px;
  color:#fff;
  text-align:center;
  border-radius:8px;
}
.hero-overlay h1 {
  font-size:1.8rem;
  margin-bottom:4px;
}
.hero-overlay p {
  margin:2px 0;
  font-size:0.9rem;
}

/* Main content */
.article-main {
  display:flex;
  gap:25px;
}
.article-content {
  flex:3;
  line-height:1.7;
  font-size:1rem;
  color:#121212;
}
.article-content img,
.article-content video {
  max-width:100%;
  margin:12px 0;
  border-radius:6px;
}
.article-media {
  margin:15px 0;
  text-align:center;
}
.pull-quote {
  margin:15px 0;
  padding:12px 15px;
  border-left:4px solid #0077cc;
  font-style:italic;
  background:#f7f7f7;
  color:#333;
  font-size:1rem;
}

/* Sidebar */
.sidebar {
  flex:1;
  position:sticky;
  top:90px;
}
.trending-list {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.trending-item img {
  width:100%;
  height:100px;
  object-fit:cover;
  border-radius:4px;
  margin-bottom:4px;
}
.trending-item a {
  text-decoration:none;
  color:#121212;
  font-size:0.85rem;
}
.trending-item a:hover {
  color:#0077cc;
  text-decoration:underline;
}

/* Related Tags */
.related-tags {
  margin-top:20px;
}
.related-tags h3 {
  font-size:1.2rem;
  margin-bottom:8px;
}
.tags-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.tags-list a {
  background:#ff6f3c;
  color:#fff;
  padding:5px 12px;
  border-radius:20px;
  font-size:0.85rem;
  text-decoration:none;
}
.tags-list a:hover {
  background:#333;
}

/* Related Top Stories */
.related-top-stories {
  margin-top:25px;
}
.related-top-stories h3 {
  font-size:1.3rem;
  margin-bottom:12px;
}
.related-top-stories .related-list {
  display:flex;
  flex-wrap:wrap;
  gap:15px;
}


/* Responsive */
@media(max-width:1024px) {
  .article-main {
    flex-direction:column;
  }
  .sidebar {
    position:relative;
    top:auto;
  }
}
@media(max-width:480px) {
  .related-item {
    flex:1 1 100%;
  }
}