/* DOSMOS BERITA V6 — Article detail fix
   Goal: readable title, full uncropped cover, cleaner desktop/mobile article layout.
   Loaded last on /article/ so it safely overrides older portal rules. */

body[data-page="news"]{
  background:#070707 !important;
  color:#f5f5f5;
}

/* ===== DETAIL HERO ===== */
body[data-page="news"] .portal-detail-hero{
  position:relative !important;
  min-height:0 !important;
  padding:54px 0 42px !important;
  display:block !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background-color:#090909 !important;
  background-size:cover !important;
  background-position:center !important;
  border-bottom:1px solid rgba(246,199,68,.20) !important;
}
body[data-page="news"] .portal-detail-hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background:linear-gradient(90deg,rgba(5,5,5,.98) 0%,rgba(5,5,5,.90) 52%,rgba(5,5,5,.73) 100%) !important;
  animation:none !important;
  pointer-events:none !important;
}
body[data-page="news"] .portal-detail-hero::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background:radial-gradient(circle at 82% 20%,rgba(246,199,68,.16),transparent 36%),linear-gradient(180deg,transparent,rgba(0,0,0,.35)) !important;
  pointer-events:none !important;
}
body[data-page="news"] .portal-detail-hero .container{
  position:relative !important;
  z-index:2 !important;
  max-width:1120px !important;
}
body[data-page="news"] .portal-breadcrumb{
  margin-bottom:22px !important;
  color:#999 !important;
  font-size:12px !important;
}
body[data-page="news"] .portal-breadcrumb a{color:#bbb !important;text-decoration:none !important}
body[data-page="news"] .portal-breadcrumb strong{color:#f6c744 !important}
body[data-page="news"] .portal-detail-hero .eyebrow{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  margin:0 0 12px !important;
  padding:7px 10px !important;
  border:1px solid rgba(246,199,68,.30) !important;
  border-radius:999px !important;
  background:rgba(246,199,68,.08) !important;
  color:#f6c744 !important;
  font:800 10px/1 "Inter",sans-serif !important;
  letter-spacing:.10em !important;
}
body[data-page="news"] .portal-detail-hero h1,
body[data-page="news"] #detailTitle{
  max-width:980px !important;
  margin:0 0 14px !important;
  font-family:"Sora","Inter",sans-serif !important;
  font-size:clamp(34px,5.1vw,66px) !important;
  line-height:1.06 !important;
  letter-spacing:-.045em !important;
  font-weight:800 !important;
  color:#fff !important;
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  -webkit-text-fill-color:#fff !important;
  filter:none !important;
  text-shadow:0 3px 22px rgba(0,0,0,.75) !important;
  text-wrap:balance !important;
}
body[data-page="news"] .portal-detail-hero p,
body[data-page="news"] #detailSummary{
  max-width:780px !important;
  margin:0 !important;
  color:#d0d0d0 !important;
  font:500 15px/1.72 "Inter",sans-serif !important;
  text-shadow:0 2px 14px rgba(0,0,0,.55) !important;
}

/* ===== ARTICLE AREA ===== */
body[data-page="news"] main > .section{
  background:#070707 !important;
  padding:38px 0 54px !important;
}
body[data-page="news"] .portal-article-wrap{
  max-width:920px !important;
  padding-left:22px !important;
  padding-right:22px !important;
}

/* Cover: NEVER crop. 16:9 artwork stays fully visible on desktop + phones. */
body[data-page="news"] .portal-detail-banner,
body[data-page="news"] #detailBanner{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:16 / 9 !important;
  margin:0 auto 18px !important;
  border-radius:18px !important;
  border:1px solid rgba(246,199,68,.22) !important;
  overflow:hidden !important;
  background-color:#0b0b0b !important;
  background-size:contain !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  box-shadow:0 20px 50px rgba(0,0,0,.35) !important;
  transform:none !important;
}
body[data-page="news"] .portal-detail-banner::before,
body[data-page="news"] #detailBanner::before{display:none !important}
body[data-page="news"] .portal-detail-banner img,
body[data-page="news"] #detailBanner img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  background:#0b0b0b !important;
}

body[data-page="news"] .portal-article-meta{
  max-width:790px !important;
  margin:14px auto 18px !important;
  padding-bottom:18px !important;
  border-bottom:1px solid rgba(255,255,255,.09) !important;
  color:#a9a9a9 !important;
  font:600 12px/1.6 "Inter",sans-serif !important;
}
body[data-page="news"] .dosmos-article-tags{
  max-width:790px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
body[data-page="news"] .portal-news-content{
  max-width:790px !important;
  margin:8px auto 0 !important;
  color:#d7d7d7 !important;
  font-family:"Inter",sans-serif !important;
  font-size:17px !important;
  line-height:1.88 !important;
  letter-spacing:0 !important;
}
body[data-page="news"] .portal-news-content p{color:#d7d7d7 !important}
body[data-page="news"] .portal-news-content p:first-of-type{
  color:#f0f0f0 !important;
  font-size:18px !important;
  line-height:1.82 !important;
}
body[data-page="news"] .portal-news-content h1,
body[data-page="news"] .portal-news-content h2,
body[data-page="news"] .portal-news-content h3{
  font-family:"Sora","Inter",sans-serif !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background:none !important;
  text-shadow:none !important;
}
body[data-page="news"] .portal-news-content h2{
  margin-top:2em !important;
  font-size:27px !important;
}
body[data-page="news"] .portal-news-content h3{font-size:21px !important}
body[data-page="news"] .portal-news-content strong{color:#fff !important}
body[data-page="news"] .portal-news-content img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  margin:26px auto !important;
  border-radius:14px !important;
}

/* Related news keeps same DOSMOS dark identity. */
body[data-page="news"] .section-alt{
  background:#0b0b0b !important;
  border-top:1px solid rgba(246,199,68,.12) !important;
}
body[data-page="news"] .section-alt h2{color:#fff !important}

/* ===== PHONE / IPHONE / ANDROID ===== */
@media(max-width:768px){
  body[data-page="news"] .portal-detail-hero{
    padding:30px 0 28px !important;
    background-image:none !important;
    background:#090909 !important;
  }
  body[data-page="news"] .portal-detail-hero::before{
    background:linear-gradient(180deg,#090909,#0c0c0c) !important;
  }
  body[data-page="news"] .portal-detail-hero::after{
    background:radial-gradient(circle at 90% 0,rgba(246,199,68,.10),transparent 42%) !important;
  }
  body[data-page="news"] .portal-detail-hero .container{
    padding-left:20px !important;
    padding-right:20px !important;
  }
  body[data-page="news"] .portal-breadcrumb{
    margin-bottom:15px !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
    font-size:10px !important;
  }
  body[data-page="news"] .portal-detail-hero .eyebrow{
    margin-bottom:10px !important;
    padding:6px 9px !important;
    font-size:9px !important;
  }
  body[data-page="news"] .portal-detail-hero h1,
  body[data-page="news"] #detailTitle{
    font-size:clamp(28px,8.8vw,42px) !important;
    line-height:1.10 !important;
    letter-spacing:-.035em !important;
    margin-bottom:12px !important;
  }
  body[data-page="news"] .portal-detail-hero p,
  body[data-page="news"] #detailSummary{
    font-size:14px !important;
    line-height:1.65 !important;
    color:#c3c3c3 !important;
  }
  body[data-page="news"] main > .section{
    padding:22px 0 38px !important;
  }
  body[data-page="news"] .portal-article-wrap{
    width:100% !important;
    max-width:none !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }
  body[data-page="news"] .portal-detail-banner,
  body[data-page="news"] #detailBanner{
    width:100% !important;
    aspect-ratio:16 / 9 !important;
    margin:0 0 15px !important;
    border-radius:12px !important;
    background-size:contain !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
  }
  body[data-page="news"] .portal-article-meta,
  body[data-page="news"] .dosmos-article-tags,
  body[data-page="news"] .portal-news-content{
    max-width:100% !important;
  }
  body[data-page="news"] .portal-news-content{
    font-size:16px !important;
    line-height:1.82 !important;
  }
  body[data-page="news"] .portal-news-content p:first-of-type{
    font-size:16.5px !important;
    line-height:1.78 !important;
  }
  body[data-page="news"] .portal-news-content h2{
    margin-top:1.7em !important;
    font-size:23px !important;
    line-height:1.28 !important;
  }
  body[data-page="news"] .portal-news-content h3{font-size:19px !important}
  body[data-page="news"] .portal-news-content img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    margin:20px 0 !important;
    border-radius:10px !important;
  }
}

@media(max-width:390px){
  body[data-page="news"] .portal-detail-hero h1,
  body[data-page="news"] #detailTitle{font-size:29px !important}
  body[data-page="news"] .portal-article-wrap{padding-left:14px !important;padding-right:14px !important}
}

/* ===== V7: RELATED NEWS IMAGE VISIBILITY FIX =====
   Berita Lainnya must show the original thumbnail clearly at all times. */
body[data-page="news"] #relatedNewsGrid .news-card-media{
  background:#101010 !important;
  overflow:hidden !important;
}
body[data-page="news"] #relatedNewsGrid .news-card-image,
body[data-page="news"] #relatedNewsGrid img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
  mix-blend-mode:normal !important;
  visibility:visible !important;
}
body[data-page="news"] #relatedNewsGrid .news-card-overlay{
  background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 42%) !important;
  opacity:1 !important;
}
body[data-page="news"] #relatedNewsGrid .news-card::before,
body[data-page="news"] #relatedNewsGrid .news-card::after,
body[data-page="news"] #relatedNewsGrid .news-card-media::before,
body[data-page="news"] #relatedNewsGrid .news-card-media::after{
  filter:none !important;
}
@media(hover:hover) and (pointer:fine){
  body[data-page="news"] #relatedNewsGrid .news-card:hover .news-card-image,
  body[data-page="news"] #relatedNewsGrid .news-card:hover img{
    opacity:1 !important;
    filter:none !important;
    -webkit-filter:none !important;
  }
}
@media(max-width:768px){
  body[data-page="news"] #relatedNewsGrid .news-card-media{
    aspect-ratio:16 / 9 !important;
  }
  body[data-page="news"] #relatedNewsGrid .news-card-image,
  body[data-page="news"] #relatedNewsGrid img{
    object-fit:contain !important;
    background:#090909 !important;
  }
}

/* V8 PREMIUM ARTICLE POLISH */
body[data-page="news"] .portal-detail-hero{background:#080808!important;padding:48px 0 38px!important}
body[data-page="news"] .portal-detail-hero::before{background:radial-gradient(circle at 75% 20%,rgba(225,170,38,.12),transparent 30%),linear-gradient(90deg,#070707 0%,#0b0b0b 100%)!important}
body[data-page="news"] .portal-detail-hero h1,body[data-page="news"] #detailTitle{font-size:clamp(36px,4.7vw,62px)!important;line-height:1.08!important;text-shadow:none!important}
body[data-page="news"] .portal-detail-banner,body[data-page="news"] #detailBanner{border-color:rgba(225,170,38,.3)!important;background:#050505!important;box-shadow:0 24px 65px rgba(0,0,0,.42)!important}
body[data-page="news"] .portal-detail-banner img,body[data-page="news"] #detailBanner img{object-fit:contain!important;opacity:1!important;filter:none!important}
body[data-page="news"] .portal-news-content{font-size:17px!important;line-height:1.9!important;color:#d5d5d5!important}
body[data-page="news"] .portal-news-content h2{padding-top:4px;border-top:1px solid rgba(225,170,38,.13)}
body[data-page="news"] #relatedNewsGrid{gap:22px!important}
body[data-page="news"] #relatedNewsGrid .news-card{border:1px solid rgba(225,170,38,.18)!important;border-radius:14px!important;overflow:hidden!important;background:#0d0d0d!important;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease!important}
body[data-page="news"] #relatedNewsGrid .news-card:hover{transform:translateY(-4px)!important;border-color:rgba(225,170,38,.55)!important;box-shadow:0 18px 42px rgba(0,0,0,.32)!important}
body[data-page="news"] #relatedNewsGrid .news-card-media{aspect-ratio:16/9!important;background:#050505!important}
body[data-page="news"] #relatedNewsGrid .news-card-image,body[data-page="news"] #relatedNewsGrid img{object-fit:contain!important;opacity:1!important;filter:none!important;background:#050505!important}
body[data-page="news"] #relatedNewsGrid .news-card-overlay{display:none!important}
@media(max-width:768px){body[data-page="news"] .portal-detail-hero{padding:26px 0 24px!important}body[data-page="news"] .portal-detail-hero h1,body[data-page="news"] #detailTitle{font-size:clamp(27px,8vw,38px)!important;line-height:1.13!important}body[data-page="news"] .portal-detail-banner,body[data-page="news"] #detailBanner{aspect-ratio:16/9!important;border-radius:13px!important}body[data-page="news"] .portal-detail-banner img,body[data-page="news"] #detailBanner img{object-fit:contain!important}body[data-page="news"] .portal-news-content{font-size:16px!important;line-height:1.82!important}body[data-page="news"] #relatedNewsGrid{grid-template-columns:1fr!important;gap:18px!important}body[data-page="news"] #relatedNewsGrid .news-card-media{aspect-ratio:16/9!important}body[data-page="news"] #relatedNewsGrid .news-card-image,body[data-page="news"] #relatedNewsGrid img{object-fit:contain!important}}