/* Mesin 7 — Berita Viral + Berita Terpopuler. Homepage only. */
.pe-m7-section{margin:var(--pe-m7-section-top-d,38px) 0 var(--pe-m7-section-bottom-d,40px);font-family:var(--pe-font-family)}
.pe-m7-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,var(--pe-m7-popular-width,32%));gap:var(--pe-m7-shell-gap,34px);align-items:stretch;min-width:0}
.pe-m7-shell-no-popular{grid-template-columns:minmax(0,1fr)}
.pe-m7-shell-no-viral{grid-template-columns:minmax(280px,var(--pe-m7-popular-width,32%));justify-content:end}
.pe-m7-viral-column,.pe-m7-popular-column{min-width:0}
/* Mesin 7 advertising corridor. Scroll remains native; sticky is constrained by each shaft. */
.pe-m7-ad-corridor{width:100%;min-width:0}
.pe-m7-ad-mobile{display:none}
.pe-m7-ad-desktop{display:block;margin:0 0 26px}
.pe-m7-ad-shaft{position:relative;width:100%;min-width:0;box-sizing:border-box;overflow:visible;background:var(--pe-color-surface-alt)}
.pe-m7-ad-entry-buffer{display:block;width:100%;height:0;min-height:0;pointer-events:none}
.pe-m7-ad-desktop .pe-m7-ad-entry-buffer{height:var(--pe-m7-ad-buffer-d,0px)}
/* Native-sticky corridor, intentionally mirroring the successful Mesin 5
   rail model: the ad stays in normal flow, sticks natively, and is released
   automatically by the bottom of its shaft. The bottom padding is the lift
   travel; no runtime ad-height reservation or position switching is needed. */
.pe-m7-ad-desktop .pe-m7-ad-shaft{padding:0}
.pe-m7-ad-desktop .pe-m7-ad-shaft::after{content:"";display:block;width:100%;height:var(--pe-m7-ad-lift-d,120vh);pointer-events:none}
.pe-m7-ad-sticky{position:sticky;z-index:2;min-width:0;width:100%;box-sizing:border-box;transform:none;transition:none!important;will-change:auto}
.pe-m7-ad-desktop .pe-m7-ad-sticky{top:var(--pe-m7-ad-sticky-top-d,50px)}
@media(min-width:768px) and (max-width:900px){.pe-m7-ad-desktop .pe-m7-ad-sticky{top:max(var(--pe-m7-ad-sticky-top-d,50px),var(--pe-m7-live-header-offset,0px))}}
body.admin-bar .pe-m7-ad-desktop .pe-m7-ad-sticky{top:calc(var(--pe-m7-ad-sticky-top-d,50px) + 32px)}
@media(min-width:768px) and (max-width:900px){body.admin-bar .pe-m7-ad-desktop .pe-m7-ad-sticky{top:max(var(--pe-m7-ad-sticky-top-d,50px),var(--pe-m7-live-header-offset,0px))}}
.pe-m7-ad-media{width:100%;min-width:0;overflow:hidden;border-radius:var(--pe-m7-ad-radius,0px);background:transparent}
.pe-m7-ad-media a{display:block;width:100%;color:inherit;text-decoration:none}
.pe-m7-ad-media img{display:block;width:100%;max-width:100%;height:auto;border-radius:inherit}
.pe-m7-ad-cue{box-sizing:border-box;width:100%;margin:0;padding:var(--pe-m7-ad-cue-pad-top,10px) 12px var(--pe-m7-ad-cue-pad-bottom,8px);background:var(--pe-color-surface-alt);color:var(--pe-color-title);font-family:var(--pe-font-family);font-size:var(--pe-m7-ad-cue-size-d,12px);font-weight:var(--pe-m7-ad-cue-weight,600);line-height:1.35;text-align:center}
.pe-m7-heading{margin:0 0 var(--pe-m7-heading-bottom,18px)!important}
.pe-m7-heading h2{margin:0 0 12px!important;line-height:1.18!important;font-family:var(--pe-font-family)!important;font-size:var(--pe-font-section-desktop)!important;font-weight:var(--pe-font-weight-section-desktop)!important}
.pe-m7-heading .pe-heading-first{color:var(--pe-color-section-first)!important}
.pe-m7-heading .pe-heading-rest{color:var(--pe-color-section-rest)!important}
.pe-m7-heading .pe-heading-rule{width:100%;height:var(--pe-m7-rule-height,2px)!important;background:var(--pe-color-section-rule)!important}
.pe-m7-heading .pe-heading-rule span{display:block;width:var(--pe-m7-accent-width,72px)!important;height:var(--pe-m7-accent-height,3px)!important;background:var(--pe-color-section-first)!important}
.pe-m7-title-mobile{display:none}
/* Viral desktop: framed top 3 + five right-thumbnail rows. */
.pe-m7-featured-frame{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--pe-m7-feature-gap,16px);padding:var(--pe-m7-frame-padding,14px);border:1px solid var(--pe-color-border);border-radius:var(--pe-m7-frame-radius,8px);background:var(--pe-color-surface-alt)}
.pe-m7-featured-count-1{grid-template-columns:minmax(0,1fr)}
.pe-m7-featured-count-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pe-m7-viral-item{min-width:0;margin:0}
.pe-m7-featured-frame .pe-m7-viral-item{display:block}
.pe-m7-viral-thumb{display:block;position:relative;overflow:hidden;background:var(--pe-color-media);text-decoration:none;border-radius:var(--pe-image-radius)}
.pe-m7-featured-frame .pe-m7-viral-thumb{width:100%;aspect-ratio:var(--pe-m7-d-feature-ratio,16 / 9)}
.pe-m7-viral-thumb img{display:block;width:100%!important;height:100%!important;object-fit:cover!important;transition:transform var(--pe-image-zoom-duration) var(--pe-image-motion-ease)}
.pe-m7-viral-item:hover .pe-m7-viral-thumb img,.pe-m7-viral-item:focus-within .pe-m7-viral-thumb img{transform:scale(var(--pe-image-zoom-scale))}
.pe-m7-featured-frame .pe-m7-viral-copy{margin-top:9px}
.pe-m7-meta{display:flex;align-items:center;flex-wrap:wrap;gap:5px;min-width:0;font-family:var(--pe-font-family);font-size:var(--pe-font-meta-desktop);font-weight:var(--pe-font-weight-meta-desktop);line-height:1.3}
.pe-m7-category{color:var(--pe-color-meta-accent)}
.pe-m7-time,.pe-m7-dot{color:var(--pe-color-meta)}
.pe-m7-viral-title{margin:5px 0 0;padding:0;font-family:var(--pe-font-family);font-weight:var(--pe-font-weight-layout-desktop);line-height:var(--pe-m7-d-title-line,1.34);letter-spacing:-.12px}
.pe-m7-featured-frame .pe-m7-viral-title{font-size:var(--pe-font-layout-desktop)}
.pe-m7-viral-title a{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;color:var(--pe-color-title)!important;text-decoration:none}
.pe-m7-featured-frame .pe-m7-viral-title a{-webkit-line-clamp:var(--pe-m7-d-feature-lines,3)}
.pe-m7-viral-title a:hover,.pe-m7-viral-title a:focus-visible{color:var(--pe-color-title-hover)!important}
.pe-m7-viral-list{display:flex;flex-direction:column;gap:var(--pe-m7-list-row-gap,16px);margin-top:var(--pe-m7-list-top-gap,18px)}
.pe-m7-viral-list .pe-m7-viral-item{display:grid;grid-template-columns:minmax(0,1fr) var(--pe-m7-d-list-thumb-w,132px);gap:var(--pe-m7-d-list-content-gap,16px);align-items:center}
.pe-m7-viral-list .pe-m7-viral-copy{grid-column:1;grid-row:1;min-width:0}
.pe-m7-viral-list .pe-m7-viral-thumb{grid-column:2;grid-row:1;width:var(--pe-m7-d-list-thumb-w,132px);height:var(--pe-m7-d-list-thumb-h,88px)}
.pe-m7-viral-list .pe-m7-viral-title{font-size:var(--pe-font-layout-desktop)}
.pe-m7-viral-list .pe-m7-viral-title a{-webkit-line-clamp:var(--pe-m7-d-list-lines,3)}
/* Popular desktop rail; sticky remains constrained by the M7 section height. */
.pe-m7-popular-column{position:relative}
.pe-m7-popular-sticky{position:sticky;top:var(--pe-m7-pop-d-sticky-top,72px);min-width:0}
body.admin-bar .pe-m7-popular-sticky{top:calc(var(--pe-m7-pop-d-sticky-top,72px) + 32px)}
@media(min-width:768px) and (max-width:900px){.pe-m7-popular-sticky,body.admin-bar .pe-m7-popular-sticky{top:max(var(--pe-m7-pop-d-sticky-top,72px),var(--pe-m7-live-header-offset,0px))}}
.pe-m7-popular-list{display:flex;flex-direction:column;gap:var(--pe-m7-pop-d-row-gap,18px)}
.pe-m7-popular-item{display:grid;grid-template-columns:var(--pe-m7-pop-d-rank-size,44px) minmax(0,1fr);gap:var(--pe-m7-pop-d-item-gap,12px);align-items:center;min-width:0}
.pe-m7-popular-rank{display:grid;place-items:center;align-self:center;box-sizing:border-box;padding:0;margin:0;text-align:center;width:var(--pe-m7-pop-d-rank-size,44px);height:var(--pe-m7-pop-d-rank-size,44px);border-radius:50%;background:var(--pe-color-surface-alt);color:var(--pe-color-section-first)!important;text-decoration:none;font-family:var(--pe-font-family);font-size:var(--pe-m7-pop-d-rank-font-size,16px);font-weight:var(--pe-m7-pop-d-rank-weight,700);line-height:1;transition:background-color var(--pe-m7-hover-duration,.18s) ease,color var(--pe-m7-hover-duration,.18s) ease,transform var(--pe-m7-hover-duration,.18s) ease}
.pe-m7-popular-copy{min-width:0}
.pe-m7-popular-meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-family:var(--pe-font-family);font-size:var(--pe-font-meta-desktop);font-weight:var(--pe-font-weight-meta-desktop);line-height:1.3}
.pe-m7-popular-category{color:var(--pe-color-meta-accent)}
.pe-m7-popular-time,.pe-m7-popular-dot{color:var(--pe-color-meta)}
.pe-m7-popular-title{margin:5px 0 0;padding:0;font-family:var(--pe-font-family);font-size:var(--pe-font-layout-desktop);font-weight:var(--pe-font-weight-layout-desktop);line-height:var(--pe-m7-pop-d-title-line,1.34);letter-spacing:-.1px}
.pe-m7-popular-title a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--pe-m7-pop-d-title-lines,3);overflow:hidden;color:var(--pe-color-title)!important;text-decoration:none}
.pe-m7-popular-title a:hover,.pe-m7-popular-title a:focus-visible{color:var(--pe-color-title-hover)!important}
@media(min-width:768px) and (hover:hover) and (pointer:fine){
  .pe-m7-popular-rank:hover{background:var(--pe-color-section-first);color:var(--pe-color-on-accent)!important;transform:translateY(-1px)}
}
@media(min-width:768px){
  .pe-m7-popular-rank:focus-visible{outline:2px solid var(--pe-color-section-first);outline-offset:3px;background:var(--pe-color-section-first);color:var(--pe-color-on-accent)!important}
}
@media(max-width:767px){
  .pe-m7-section{margin-top:var(--pe-m7-section-top-m,30px);margin-bottom:var(--pe-m7-section-bottom-m,34px)}
  .pe-m7-shell{display:flex;flex-direction:column;gap:var(--pe-m7-mobile-shell-gap,28px)}
  .pe-m7-ad-desktop{display:none}
  .pe-m7-ad-mobile{display:block;margin:0 0 20px}
  .pe-m7-ad-mobile .pe-m7-ad-entry-buffer{height:var(--pe-m7-ad-buffer-m,0px)}
  .pe-m7-ad-mobile .pe-m7-ad-shaft{padding:0}
  .pe-m7-ad-mobile .pe-m7-ad-shaft::after{content:"";display:block;width:100%;height:var(--pe-m7-ad-lift-m,40vh);pointer-events:none}
  .pe-m7-ad-mobile .pe-m7-ad-sticky{
    top:calc(var(--pe-m7-live-header-offset,0px) + var(--pe-m7-ad-sticky-top-m,0px));
  }
  .pe-m7-ad-cue{font-size:var(--pe-m7-ad-cue-size-m,11px)}
  .pe-m7-heading h2{font-family:var(--pe-font-family)!important;font-size:var(--pe-font-section-mobile)!important;font-weight:var(--pe-font-weight-section-mobile)!important}
  .pe-m7-title-desktop{display:none}.pe-m7-title-mobile{display:inline}
  .pe-m7-featured-frame,.pe-m7-viral-list{display:contents}
  .pe-m7-viral-column{display:flex;flex-direction:column;min-width:0}
  .pe-m7-viral-column>.pe-m7-heading{order:0}
  .pe-m7-featured-frame .pe-m7-viral-item,.pe-m7-viral-list .pe-m7-viral-item{margin-top:var(--pe-m7-mobile-row-gap,14px)}
  .pe-m7-featured-frame .pe-m7-viral-item-1{display:block;margin-top:0;padding:var(--pe-m7-m-hero-padding,12px);border:1px solid var(--pe-color-border);border-radius:var(--pe-m7-m-hero-radius,12px);background:var(--pe-color-surface-alt);overflow:hidden}
  .pe-m7-featured-frame .pe-m7-viral-item:not(.pe-m7-viral-item-1),.pe-m7-viral-list .pe-m7-viral-item{display:grid;grid-template-columns:minmax(0,1fr) var(--pe-m7-m-list-thumb-w,108px);gap:var(--pe-m7-m-list-content-gap,12px);align-items:center}
  .pe-m7-featured-frame .pe-m7-viral-item:not(.pe-m7-viral-item-1) .pe-m7-viral-thumb,.pe-m7-viral-list .pe-m7-viral-thumb{grid-column:2;grid-row:1;width:var(--pe-m7-m-list-thumb-w,108px);height:var(--pe-m7-m-list-thumb-h,92px);aspect-ratio:auto;border-radius:var(--pe-image-radius)}
  .pe-m7-featured-frame .pe-m7-viral-item:not(.pe-m7-viral-item-1) .pe-m7-viral-copy,.pe-m7-viral-list .pe-m7-viral-copy{grid-column:1;grid-row:1;min-width:0;margin-top:0}
  .pe-m7-featured-frame .pe-m7-viral-item-1 .pe-m7-viral-thumb{width:100%;aspect-ratio:var(--pe-m7-m-hero-ratio,16 / 9);border-radius:var(--pe-image-radius)}
  .pe-m7-featured-frame .pe-m7-viral-item-1 .pe-m7-viral-copy{margin-top:9px}
  .pe-m7-meta{font-family:var(--pe-font-family);font-size:var(--pe-font-meta-mobile);font-weight:var(--pe-font-weight-meta-mobile)}
  .pe-m7-category{color:var(--pe-color-meta-accent)}.pe-m7-time,.pe-m7-dot{color:var(--pe-color-meta)}
  .pe-m7-viral-title{font-family:var(--pe-font-family);font-size:var(--pe-font-layout-mobile);font-weight:var(--pe-font-weight-layout-mobile);line-height:var(--pe-m7-m-title-line,1.32)}
  .pe-m7-viral-title a{color:var(--pe-color-title)!important}
  .pe-m7-featured-frame .pe-m7-viral-item:not(.pe-m7-viral-item-1) .pe-m7-viral-title a,.pe-m7-viral-list .pe-m7-viral-item .pe-m7-viral-title a{-webkit-line-clamp:var(--pe-m7-m-list-lines,3)}
  .pe-m7-featured-frame .pe-m7-viral-item-1 .pe-m7-viral-title{font-size:calc(var(--pe-font-layout-mobile) + 3px)}
  .pe-m7-featured-frame .pe-m7-viral-item-1 .pe-m7-viral-title a{-webkit-line-clamp:var(--pe-m7-m-hero-lines,3)}
  .pe-m7-viral-title a:hover,.pe-m7-viral-title a:focus-visible{color:var(--pe-color-title-hover)!important}
  .pe-m7-popular-column{margin-top:4px}.pe-m7-popular-sticky{position:static;top:auto}
  body.admin-bar .pe-m7-popular-sticky{top:auto}
  .pe-m7-popular-list{gap:var(--pe-m7-pop-m-row-gap,18px)}
  .pe-m7-popular-item{grid-template-columns:var(--pe-m7-pop-m-rank-size,44px) minmax(0,1fr);gap:var(--pe-m7-pop-m-item-gap,12px)}
  .pe-m7-popular-rank{width:var(--pe-m7-pop-m-rank-size,44px);height:var(--pe-m7-pop-m-rank-size,44px);background:var(--pe-color-surface-alt);color:var(--pe-color-section-first)!important;font-family:var(--pe-font-family);font-size:var(--pe-m7-pop-m-rank-font-size,16px);font-weight:var(--pe-m7-pop-m-rank-weight,700)}
  .pe-m7-popular-meta{font-family:var(--pe-font-family);font-size:var(--pe-font-meta-mobile);font-weight:var(--pe-font-weight-meta-mobile)}
  .pe-m7-popular-category{color:var(--pe-color-meta-accent)}
  .pe-m7-popular-time,.pe-m7-popular-dot{color:var(--pe-color-meta)}
  .pe-m7-popular-title{font-family:var(--pe-font-family);font-size:var(--pe-font-layout-mobile);font-weight:var(--pe-font-weight-layout-mobile);line-height:var(--pe-m7-pop-m-title-line,1.34)}
  .pe-m7-popular-title a{-webkit-line-clamp:var(--pe-m7-pop-m-title-lines,3);color:var(--pe-color-title)!important}
  .pe-m7-popular-title a:hover,.pe-m7-popular-title a:focus-visible{color:var(--pe-color-title)!important}
}
@media(max-width:480px){.pe-m7-featured-frame .pe-m7-viral-item:not(.pe-m7-viral-item-1),.pe-m7-viral-list .pe-m7-viral-item{gap:var(--pe-m7-m-list-content-gap-small,10px)}}
@media(prefers-reduced-motion:reduce){
  .pe-m7-viral-thumb img,.pe-m7-popular-rank{transition:none!important}
  .pe-m7-viral-item:hover .pe-m7-viral-thumb img,.pe-m7-viral-item:focus-within .pe-m7-viral-thumb img,.pe-m7-popular-rank:hover{transform:none!important}
}



/* Phase 4 runtime alignment: viral media consumes Global Image Zoom. */
.pe-m7-viral-thumb>img{transform:scale(1);transform-origin:center center;transition:transform var(--pe-image-zoom-duration) var(--pe-image-motion-ease)!important;will-change:transform}
.pe-m7-viral-item:hover .pe-m7-viral-thumb>img,.pe-m7-viral-item:focus-within .pe-m7-viral-thumb>img{transform:scale(var(--pe-image-zoom-scale))!important}
@media(prefers-reduced-motion:reduce){.pe-m7-viral-thumb>img,.pe-m7-viral-item:hover .pe-m7-viral-thumb>img,.pe-m7-viral-item:focus-within .pe-m7-viral-thumb>img{transition:none!important;transform:none!important;will-change:auto}}