@media(min-width:901px){.single-post .pe-single-main{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:start;}.single-post .pe-single-main>.pe-article-reader-tools{grid-column:1;grid-row:1;align-self:start;}.single-post .pe-single-main>.pe-article-detail{grid-column:2;grid-row:1;min-width:0;}.pe-article-reader-tools{position:sticky;top:108px;z-index:20;display:flex;flex-direction:column;align-items:center;gap:8px;width:44px;padding:7px 4px;box-sizing:border-box;border:1px solid var(--pe-color-border);border-radius:999px;background:var(--pe-color-surface);box-shadow:0 6px 18px rgba(0,0,0,.08);}body.admin-bar .pe-article-reader-tools{top:140px;}}.pe-reader-tool{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;min-width:34px;min-height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--pe-color-text);cursor:pointer;}.pe-reader-tool svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;}.pe-reader-tool:hover,.pe-reader-tool:focus-visible,.pe-reader-tool[aria-pressed="true"]{background:var(--pe-color-surface-alt);color:var(--pe-color-text);}.pe-reader-tool:focus-visible{outline:2px solid var(--pe-color-accent);outline-offset:2px;}.pe-reader-theme-sun,.pe-reader-theme-moon{display:inline-flex}.pe-reader-theme-moon{display:none}.pe-reader-theme[aria-pressed="true"] .pe-reader-theme-sun{display:none}.pe-reader-theme[aria-pressed="true"] .pe-reader-theme-moon{display:inline-flex}.pe-reader-theme:hover,.pe-reader-theme:focus-visible,.pe-reader-theme[aria-pressed="true"]{background:var(--pe-color-surface-alt);color:var(--pe-color-text);}.pe-reader-voice{background:#c62828;color:#fff;filter:none;}.pe-reader-voice:hover,.pe-reader-voice:focus-visible,.pe-reader-voice[aria-pressed="true"]{background:#c62828;color:#fff;filter:brightness(1.06);}.pe-reader-voice svg{color:#fff;stroke:#fff;}.pe-reader-tool:disabled{opacity:.38;cursor:not-allowed;}.pe-reader-voice-pause{display:none;}.pe-reader-voice-play{display:inline-flex;}.pe-reader-voice[data-state="speaking"] .pe-reader-voice-play{display:none;}.pe-reader-voice[data-state="speaking"] .pe-reader-voice-pause{display:inline-flex;}.single-post .pe-article-detail{--pe-reader-font-delta:0px;}.single-post .pe-article-detail .pe-content :is(p,li,blockquote,td,pre,code,small){font-size:calc(var(--pe-article-body-size-d,18px) + var(--pe-reader-font-delta))!important;}.single-post .pe-article-detail .pe-content :is(p,li,blockquote,td) :is(span,a,strong,b,em,i,u,s,del,ins,mark){font-size:inherit!important;}.single-post .pe-article-detail .pe-content .pe-article-toc li{font-size:calc(var(--pe-article-body-size-d,18px) - 3px)!important;}.single-post .pe-article-detail .pe-content .pe-article-toc a{font-size:inherit!important;}.single-post .pe-article-detail .pe-content .pe-read-also,.single-post .pe-article-detail .pe-content .pe-read-also *{font-size:var(--pe-font-read_also-desktop)!important;}@media(max-width:900px){.single-post .pe-single-main{display:block!important;}.single-post #main{padding-bottom:82px!important;}.pe-article-reader-tools{position:fixed!important;z-index:1800;top:auto!important;right:auto!important;left:50%!important;bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;transform:translateX(-50%)!important;display:flex;align-items:center;justify-content:center;gap:9px;padding:7px 10px;border:1px solid var(--pe-color-border);border-radius:999px;background:var(--pe-color-surface);box-shadow:0 8px 24px rgba(0,0,0,.18);}.pe-reader-tool{width:42px;height:42px;min-width:42px;min-height:42px;}.pe-reader-tool svg{width:24px;height:24px;}.single-post .pe-article-detail .pe-content :is(p,li,blockquote,td,pre,code,small){font-size:calc(var(--pe-article-body-size-m,17px) + var(--pe-reader-font-delta))!important;}.single-post .pe-article-detail .pe-content .pe-article-toc li{font-size:calc(var(--pe-article-body-size-m,17px) - 3px)!important;}.single-post .pe-article-detail .pe-content .pe-read-also,.single-post .pe-article-detail .pe-content .pe-read-also *{font-size:var(--pe-font-read_also-mobile)!important;}}@media(prefers-reduced-motion:reduce){.pe-reader-tool{transition:none!important;}}
.pe-article-reader-tools{font-family:var(--pe-font-family);}

/* Single Article Focus Mode
 * Presentation-only: Global design/media tokens remain the semantic authority. */
.pe-reader-focus-toggle{
  background:var(--pe-color-accent);
  color:#fff;
}
.pe-reader-focus-toggle:hover,.pe-reader-focus-toggle:focus-visible,.pe-reader-focus-toggle[aria-pressed="true"]{
  background:var(--pe-color-accent);
  color:#fff;
  filter:brightness(1.06);
}
.pe-reader-focus-document,.pe-reader-focus-close{display:inline-flex}
.pe-reader-focus-close{display:none}
.pe-reader-focus-toggle[aria-pressed="true"] .pe-reader-focus-document{display:none}
.pe-reader-focus-toggle[aria-pressed="true"] .pe-reader-focus-close{display:inline-flex}
html.pe-reader-focus-boot body.single-post .pe-reader-focus-toggle[hidden]{display:inline-flex!important}
html.pe-reader-focus-boot body.single-post .pe-reader-focus-document{display:none}
html.pe-reader-focus-boot body.single-post .pe-reader-focus-close{display:inline-flex}
.pe-reader-focus-toggle svg{stroke:#fff}

/* Stored per-article Focus is restored before paint without creating a second
 * layout/provider. The head bootstrap remains authoritative until
 * article-reader.js has applied runtime Focus and continuation scroll. */
body.single-post.pe-reader-focus .pe-m4-header-ads--mobile-row,
body.single-post.pe-reader-focus .pe-install-banner,
body.single-post.pe-reader-focus .pe-sticky-stack,
body.single-post.pe-reader-focus .pe-tag-strip-desktop,
body.single-post.pe-reader-focus .pe-desktop-side-ads,
body.single-post.pe-reader-focus .pe-m4-b4,
body.single-post.pe-reader-focus .pe-footer,
html.pe-reader-focus-boot body.single-post .pe-m4-header-ads--mobile-row,
html.pe-reader-focus-boot body.single-post .pe-install-banner,
html.pe-reader-focus-boot body.single-post .pe-sticky-stack,
html.pe-reader-focus-boot body.single-post .pe-tag-strip-desktop,
html.pe-reader-focus-boot body.single-post .pe-desktop-side-ads,
html.pe-reader-focus-boot body.single-post .pe-m4-b4,
html.pe-reader-focus-boot body.single-post .pe-footer{
  display:none!important;
}

body.single-post.pe-reader-focus .pe-mobile-ad-cover,
html.pe-reader-focus-boot body.single-post .pe-mobile-ad-cover{
  background:var(--pe-color-background);
}

body.single-post.pe-reader-focus .pe-single-layout,
html.pe-reader-focus-boot body.single-post .pe-single-layout{
  grid-template-columns:minmax(0,1fr)!important;
  gap:0!important;
  width:min(calc(100% - 32px),900px)!important;
  max-width:900px!important;
  padding-top:24px!important;
}
body.single-post.pe-reader-focus .pe-single-main,
html.pe-reader-focus-boot body.single-post .pe-single-main{
  width:100%!important;
  min-width:0;
}

body.single-post.pe-reader-focus .pe-article-breadcrumb,
body.single-post.pe-reader-focus .pe-article-actions-top,
body.single-post.pe-reader-focus .pe-content .pe-read-also,
body.single-post.pe-reader-focus .pe-content .pe-article-toc,
body.single-post.pe-reader-focus .pe-article-tags,
body.single-post.pe-reader-focus .pe-article-related-card,
body.single-post.pe-reader-focus .pe-article-sidebar,
body.single-post.pe-reader-focus .pe-article-m6-recommendation,
html.pe-reader-focus-boot body.single-post .pe-article-breadcrumb,
html.pe-reader-focus-boot body.single-post .pe-article-actions-top,
html.pe-reader-focus-boot body.single-post .pe-content .pe-read-also,
html.pe-reader-focus-boot body.single-post .pe-content .pe-article-toc,
html.pe-reader-focus-boot body.single-post .pe-article-tags,
html.pe-reader-focus-boot body.single-post .pe-article-related-card,
html.pe-reader-focus-boot body.single-post .pe-article-sidebar,
html.pe-reader-focus-boot body.single-post .pe-article-m6-recommendation{
  display:none!important;
}

body.single-post.pe-reader-focus .pe-article-header,
html.pe-reader-focus-boot body.single-post .pe-article-header{scroll-margin-top:16px}
body.single-post.pe-reader-focus .pe-content,
html.pe-reader-focus-boot body.single-post .pe-content{scroll-margin-top:16px}
body.admin-bar.single-post.pe-reader-focus .pe-article-header,
body.admin-bar.single-post.pe-reader-focus .pe-content{scroll-margin-top:48px}

@media(min-width:901px){
  body.single-post.pe-reader-focus .pe-article-reader-tools,
  html.pe-reader-focus-boot body.single-post .pe-article-reader-tools{
    top:24px;
  }
  body.admin-bar.single-post.pe-reader-focus .pe-article-reader-tools,
  html.pe-reader-focus-boot body.admin-bar.single-post .pe-article-reader-tools{
    top:56px;
  }
}

@media(max-width:900px){
  body.single-post.pe-reader-focus .pe-single-layout,
  html.pe-reader-focus-boot body.single-post .pe-single-layout{
    width:calc(100% - 28px)!important;
    max-width:900px!important;
    padding-top:18px!important;
  }
  body.single-post.pe-reader-focus .pe-single-main,
  html.pe-reader-focus-boot body.single-post .pe-single-main{
    box-sizing:border-box;
    padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;
  }
  .pe-article-reader-tools{
    transition:transform .18s ease,opacity .18s ease;
  }
  .pe-article-reader-tools.pe-reader-tools-bottom-hidden,
  body.single-post.pe-search-open .pe-article-reader-tools{
    opacity:0;
    pointer-events:none;
    transform:translate(-50%,calc(100% + 40px + env(safe-area-inset-bottom,0px)))!important;
  }
}

@media(max-width:782px){
  body.admin-bar.single-post.pe-reader-focus .pe-article-header,
  body.admin-bar.single-post.pe-reader-focus .pe-content{scroll-margin-top:62px}
}

@media(prefers-reduced-motion:reduce){
  .pe-reader-focus-toggle,.pe-reader-voice,.pe-article-reader-tools{transition:none!important}
}

/* Mobile Voice is Focus-only. Keep it absent on the normal article from first paint. */
@media(max-width:900px){
  body.single-post:not(.pe-reader-focus) .pe-reader-voice{display:none!important;}
  html.pe-reader-focus-boot body.single-post .pe-reader-voice{display:inline-flex!important;}
}

/* Mobile Voice readiness UI: visual-only, Focus-only; Desktop remains untouched. */
@media(max-width:900px){
  body.single-post.pe-reader-focus .pe-reader-voice{position:relative;overflow:visible;}
  body.single-post.pe-reader-focus .pe-reader-voice[data-state="starting"] .pe-reader-voice-play,
  body.single-post.pe-reader-focus .pe-reader-voice[data-state="starting"] .pe-reader-voice-pause{display:none;}
  body.single-post.pe-reader-focus .pe-reader-voice[data-state="starting"]::after{
    content:"";width:18px;height:18px;box-sizing:border-box;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:pe-spin .75s linear infinite;
  }
  body.single-post.pe-reader-focus .pe-reader-voice[data-error="1"]::before{
    content:"Voice tidak tersedia di perangkat ini.";position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);width:220px;max-width:78vw;padding:8px 10px;box-sizing:border-box;border-radius:9px;background:#20242a;color:#fff;font-size:12px;line-height:1.35;font-weight:600;text-align:center;white-space:normal;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.22);z-index:4;
  }
}

@media(max-width:900px) and (prefers-reduced-motion:reduce){body.single-post.pe-reader-focus .pe-reader-voice[data-state="starting"]::after{animation:none!important;}}
