/**
 * ==========================================================
 * SISTEM SUNYI - MODE HENING v1.6.1 FINAL
 * File: /addons/sistem-sunyi/js/ss-mode-hening.css
 *
 * Fitur:
 * - Compact contextual pill di bawah judul artikel
 * - Fullscreen centered modal
 * - Dark/light mode
 * - Font size controls A- / A+
 * - Reading progress
 * - TOC side rail
 * - Scrollbar reader lebih lega
 * - Font scale lebih stabil untuk paragraph, lead, list,
 *   blockquote, dan special block
 * ==========================================================
 */

.ssqm-context-trigger-wrap{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  margin:10px 0 14px;
  line-height:1;
  position:relative;
  z-index:9999;
}

.ssqm-context-trigger{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:7px 12px 7px 8px;
  border-radius:999px;
  border:1px solid rgba(138,106,36,.3);
  background:rgba(255,250,241,.1);
  color:#102033;
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.01em;
  line-height:1;
  cursor:pointer;
  text-decoration:none !important;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  backdrop-filter:blur(12px);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
}

.ssqm-context-trigger:hover{
  transform:translateY(-1px);
  border-color:rgba(138,106,36,.58);
  box-shadow:0 14px 34px rgba(0,0,0,.12);
}

.ssqm-trigger-mark{
  width:22px;
  height:22px;
  display:inline-grid;
  place-items:center;
  border-radius:50%;
  color:#8a6a24;
  border:1px solid rgba(138,106,36,.26);
  background:rgba(214,184,113,.14);
  font-size:12px;
}

body.ssqm-open .ssqm-context-trigger-wrap{
  opacity:0;
  pointer-events:none;
}

/* ==========================================================
   ROOT THEME VARIABLES
========================================================== */

.ssqm-root{
  --ssqm-bg:#fffaf1;
  --ssqm-bg2:#f4eddf;
  --ssqm-head:rgba(255,250,241,.90);
  --ssqm-text:#102033;
  --ssqm-title:#081b32;
  --ssqm-muted:#637081;
  --ssqm-soft:#263a50;
  --ssqm-border:rgba(16,32,51,.12);
  --ssqm-border-soft:rgba(16,32,51,.09);
  --ssqm-gold:#8a6a24;
  --ssqm-gold2:#d6b871;
  --ssqm-chip:rgba(255,255,255,.54);
  --ssqm-card:rgba(255,255,255,.42);

  --ssqm-reader-font:18px;
  --ssqm-reader-line:1.88;
  --ssqm-special-line:1.86;
  --ssqm-list-line:1.88;
  --ssqm-quote-line:1.72;

  --ssqm-shadow:0 34px 110px rgba(0,0,0,.34);

  position:fixed;
  inset:0;
  z-index:2147483000;
  display:none;
  pointer-events:none;
}

.ssqm-root[data-font-scale="1"]{
  --ssqm-reader-font:20px;
  --ssqm-reader-line:1.94;
  --ssqm-special-line:1.92;
  --ssqm-list-line:1.94;
  --ssqm-quote-line:1.76;
}

.ssqm-root[data-font-scale="2"]{
  --ssqm-reader-font:22px;
  --ssqm-reader-line:2.00;
  --ssqm-special-line:1.96;
  --ssqm-list-line:2.00;
  --ssqm-quote-line:1.80;
}

.ssqm-root[data-theme="dark"]{
  --ssqm-bg:#07101d;
  --ssqm-bg2:#0b1627;
  --ssqm-head:rgba(7,16,29,.90);
  --ssqm-text:#eef3f5;
  --ssqm-title:#f5f0e6;
  --ssqm-muted:#aeb9c2;
  --ssqm-soft:#d6dde2;
  --ssqm-border:rgba(255,255,255,.13);
  --ssqm-border-soft:rgba(255,255,255,.09);
  --ssqm-gold:#d6b871;
  --ssqm-gold2:#f0d99a;
  --ssqm-chip:rgba(255,255,255,.07);
  --ssqm-card:rgba(255,255,255,.055);
  --ssqm-shadow:0 34px 120px rgba(0,0,0,.58);
}

.ssqm-root.is-open{
  display:block;
  pointer-events:auto;
}

/* ==========================================================
   MODAL
========================================================== */

.ssqm-backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,8,14,.64);
  backdrop-filter:blur(10px);
  opacity:0;
  transition:opacity .22s ease;
}

.ssqm-root.is-open .ssqm-backdrop{
  opacity:1;
}

.ssqm-modal{
  position:absolute;
  inset:24px;
  display:flex;
  flex-direction:column;
  width:auto;
  max-width:1320px;
  margin:0 auto;
  background:
    radial-gradient(circle at 18% 0%, rgba(214,184,113,.12), transparent 34%),
    linear-gradient(180deg,var(--ssqm-bg) 0%,var(--ssqm-bg2) 100%);
  color:var(--ssqm-text);
  border:1px solid rgba(138,106,36,.22);
  border-radius:30px;
  box-shadow:var(--ssqm-shadow);
  overflow:hidden;
  transform:translateY(16px) scale(.985);
  opacity:0;
  transition:transform .24s ease, opacity .24s ease;
}

.ssqm-root.is-open .ssqm-modal{
  transform:translateY(0) scale(1);
  opacity:1;
}

/* ==========================================================
   HEADER
========================================================== */

.ssqm-head{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 22px;
  border-bottom:1px solid var(--ssqm-border-soft);
  background:var(--ssqm-head);
  backdrop-filter:blur(14px);
}

.ssqm-brand{
  min-width:0;
}

.ssqm-kicker{
  display:block;
  margin-bottom:3px;
  color:var(--ssqm-gold);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:850;
}

.ssqm-brand strong{
  display:block;
  color:var(--ssqm-title);
  font-size:15px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ssqm-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.ssqm-font-group{
  display:inline-flex;
  align-items:center;
  height:40px;
  padding:3px;
  border-radius:999px;
  border:1px solid var(--ssqm-border);
  background:var(--ssqm-chip);
}

.ssqm-font-btn{
  width:36px;
  height:32px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--ssqm-title);
  font-size:13px;
  line-height:1;
  font-weight:850;
  cursor:pointer;
  transition:background .16s ease, opacity .16s ease, color .16s ease;
}

.ssqm-font-btn:hover:not(:disabled){
  background:rgba(214,184,113,.14);
  color:var(--ssqm-gold);
}

.ssqm-font-btn:disabled{
  opacity:.38;
  cursor:not-allowed;
}

.ssqm-theme-toggle,
.ssqm-close{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid var(--ssqm-border);
  background:var(--ssqm-chip);
  color:var(--ssqm-title);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
}

.ssqm-close{
  font-size:24px;
}

.ssqm-theme-toggle:hover,
.ssqm-close:hover{
  transform:translateY(-1px);
  border-color:rgba(214,184,113,.34);
  background:rgba(214,184,113,.12);
}

/* ==========================================================
   PROGRESS
========================================================== */

.ssqm-progress{
  flex:0 0 auto;
  height:2px;
  background:rgba(138,106,36,.10);
  overflow:hidden;
}

.ssqm-progress span{
  display:block;
  width:0%;
  height:100%;
  background:linear-gradient(90deg,var(--ssqm-gold),var(--ssqm-gold2));
  transition:width .08s linear;
}

/* ==========================================================
   LAYOUT
========================================================== */

.ssqm-layout{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns:250px minmax(0, 800px);
  justify-content:center;
  gap:42px;
  padding:34px 38px 44px;
  overflow:hidden;
}

.ssqm-layout.no-toc{
  grid-template-columns:minmax(0, 800px);
}

/* ==========================================================
   TOC
========================================================== */

.ssqm-toc{
  min-width:0;
  overflow:auto;
  padding:8px 2px 20px 0;
  border-right:1px solid var(--ssqm-border-soft);
}

.ssqm-toc-inner{
  position:sticky;
  top:0;
  padding-right:18px;
}

.ssqm-toc-title{
  margin:0 0 14px;
  color:var(--ssqm-gold);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:850;
}

.ssqm-toc-list{
  display:grid;
  gap:3px;
}

.ssqm-toc-link{
  display:block;
  padding:6px 2px;
  border-radius:10px;
  color:var(--ssqm-muted);
  font-size:13px;
  line-height:1.38;
  text-decoration:none !important;
  border:1px solid transparent;
  background:transparent;
  transition:background .16s ease, color .16s ease, border-color .16s ease, padding .16s ease;
}

.ssqm-toc-link:hover{
  color:var(--ssqm-title);
  background:rgba(214,184,113,.08);
  padding-left:8px;
  padding-right:8px;
}

.ssqm-toc-link.is-active{
  color:var(--ssqm-title);
  background:rgba(214,184,113,.13);
  border-color:rgba(138,106,36,.18);
  padding-left:9px;
  padding-right:9px;
  font-weight:700;
}

.ssqm-toc-link.is-h3{
  margin-left:12px;
  font-size:12.5px;
}

.ssqm-toc-link.is-h4{
  margin-left:22px;
  font-size:12px;
}

/* ==========================================================
   READER
========================================================== */

.ssqm-reader{
  min-width:0;
  overflow:auto;
  padding:2px 28px 34px 6px;
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:rgba(214,184,113,.45) transparent;
}

.ssqm-reader::-webkit-scrollbar{
  width:10px;
}

.ssqm-reader::-webkit-scrollbar-track{
  background:transparent;
}

.ssqm-reader::-webkit-scrollbar-thumb{
  background:rgba(214,184,113,.34);
  border-radius:999px;
  border:3px solid transparent;
  background-clip:content-box;
}

.ssqm-reader::-webkit-scrollbar-thumb:hover{
  background:rgba(214,184,113,.52);
  border:3px solid transparent;
  background-clip:content-box;
}

/* ==========================================================
   ARTICLE HEADER
========================================================== */

.ssqm-title{
  margin:0 0 12px;
  color:var(--ssqm-title);
  font-size:clamp(32px,3vw,50px);
  line-height:1.08;
  letter-spacing:-.055em;
}

.ssqm-subtitle{
  margin:0 0 18px;
  color:var(--ssqm-soft);
  font-size:20px;
  line-height:1.55;
}

.ssqm-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 28px;
}

.ssqm-meta span,
.ssqm-meta a{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid var(--ssqm-border);
  color:var(--ssqm-muted);
  background:var(--ssqm-chip);
  font-size:12px;
  line-height:1.2;
  text-decoration:none !important;
}

.ssqm-meta a:hover{
  color:var(--ssqm-gold);
  border-color:rgba(214,184,113,.34);
  background:rgba(214,184,113,.12);
}

/* ==========================================================
   CONTENT FONT SCALE
========================================================== */

.ssqm-content{
  color:var(--ssqm-text);
  font-size:var(--ssqm-reader-font);
  line-height:var(--ssqm-reader-line);
}

.ssqm-content p{
  margin:0 0 1.35em;
  font-size:var(--ssqm-reader-font);
  line-height:var(--ssqm-reader-line);
}

.ssqm-lead{
  font-weight:720;
  font-size:calc(var(--ssqm-reader-font) * 1.045);
  line-height:var(--ssqm-reader-line);
  color:var(--ssqm-title);
}

.ssqm-content h2,
.ssqm-content h3,
.ssqm-content h4{
  scroll-margin-top:24px;
  margin:2.1em 0 .65em;
  line-height:1.24;
  letter-spacing:-.03em;
  color:var(--ssqm-title);
}

.ssqm-content h2{
  font-size:1.65em;
}

.ssqm-content h3{
  font-size:1.35em;
}

.ssqm-content h4{
  font-size:1.16em;
}

/* ==========================================================
   SPECIAL BLOCK
========================================================== */

.ssqm-special{
  position:relative;
  margin:1.9em 0 2.1em;
  padding:1.45em 1.55em 1.45em 1.6em;
  border:1px solid rgba(138,106,36,.34);
  border-radius:24px;
  background:
    linear-gradient(135deg,rgba(214,184,113,.16),rgba(255,255,255,.04)),
    var(--ssqm-card);
  box-shadow:0 18px 52px rgba(80,60,20,.10);
  overflow:hidden;
}

.ssqm-special:before{
  content:"";
  position:absolute;
  left:0;
  top:18px;
  bottom:18px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--ssqm-gold),var(--ssqm-gold2));
}

.ssqm-special:after{
  content:"◇";
  position:absolute;
  right:24px;
  top:18px;
  color:var(--ssqm-gold);
  opacity:.18;
  font-size:34px;
  line-height:1;
}

.ssqm-special-label{
  display:inline-flex;
  margin-bottom:.85em;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(138,106,36,.28);
  background:rgba(214,184,113,.16);
  color:var(--ssqm-gold);
  font-size:11px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-weight:850;
}

.ssqm-special p{
  position:relative;
  z-index:1;
  margin:0;
  color:var(--ssqm-text);
  font-weight:650;
  font-size:var(--ssqm-reader-font);
  line-height:var(--ssqm-special-line);
}

/* ==========================================================
   PULLQUOTE, QUOTE, LIST
========================================================== */

.ssqm-pullquote{
  margin:2.4em 0;
  padding:1.35em 1.45em;
  border-top:1px solid rgba(138,106,36,.38);
  border-bottom:1px solid rgba(138,106,36,.38);
  color:var(--ssqm-gold);
  background:linear-gradient(90deg,rgba(214,184,113,.12),transparent);
}

.ssqm-pullquote p{
  margin:0;
  font-size:clamp(22px,2.9vw,30px);
  line-height:var(--ssqm-quote-line);
  letter-spacing:-.035em;
  font-weight:720;
}

.ssqm-content blockquote{
  margin:2em 0;
  padding:1.1em 1.25em;
  border-left:2px solid var(--ssqm-gold);
  background:rgba(214,184,113,.10);
  border-radius:0 16px 16px 0;
  color:var(--ssqm-soft);
  font-size:var(--ssqm-reader-font);
  line-height:var(--ssqm-reader-line);
}

.ssqm-content blockquote p{
  font-size:var(--ssqm-reader-font);
  line-height:var(--ssqm-reader-line);
}

.ssqm-content ul,
.ssqm-content ol{
  margin:0 0 1.5em 1.35em;
  padding-left:1.2em;
  font-size:var(--ssqm-reader-font);
  line-height:var(--ssqm-list-line);
}

.ssqm-content li{
  padding-left:.35em;
  margin:.78em 0;
  font-size:var(--ssqm-reader-font);
  line-height:var(--ssqm-list-line);
}

/* ==========================================================
   IMAGE
========================================================== */

.ssqm-inline-image{
  margin:2em 0;
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--ssqm-border);
  box-shadow:0 22px 70px rgba(49,39,21,.14);
}

.ssqm-inline-image img{
  width:100%;
  height:auto;
  display:block;
}

.ssqm-inline-image figcaption{
  padding:10px 14px;
  color:var(--ssqm-muted);
  font-size:13px;
  background:var(--ssqm-chip);
}

.ssqm-error{
  padding:18px;
  border:1px solid rgba(138,106,36,.30);
  border-radius:18px;
  color:var(--ssqm-muted);
  background:var(--ssqm-chip);
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1100px){
  .ssqm-layout{
    grid-template-columns:210px minmax(0, 740px);
    gap:28px;
    padding:28px 28px 38px;
  }

  .ssqm-title{
    font-size:clamp(30px,3.6vw,46px);
  }
}

@media (max-width:767px){
  .ssqm-context-trigger-wrap,
  .ssqm-root{
    display:none !important;
  }
}