/* Single post layout: TOC | article | share */
.bg-single-layout{display:grid;grid-template-columns:240px minmax(0,1fr) 300px;gap:36px;padding:10px 0 70px;align-items:start}
.bg-single-toc,.bg-single-side{position:sticky;top:30px}
.admin-bar .bg-single-toc,.admin-bar .bg-single-side{top:62px}

/* Sticky tidak berfungsi jika ada induk dengan overflow hidden/auto (dipakai tema induk untuk
   dekorasi latar). "clip" memotong tanpa membuat scroll container, sehingga sticky tetap jalan. */
body.single-post,
body.single-post #page,
body.single-post .wrapper,
body.single-post #custom-background-css,
body.single-post main#content,
body.single-post main#content .container{overflow:visible !important;overflow-x:clip !important}

/* Daftar isi panjang: kotak bisa digulir sendiri agar semua item terjangkau saat menempel */
.bg-single-toc__box{position:relative;max-height:calc(100vh - 200px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d9c3d1 transparent}
.admin-bar .bg-single-toc__box{max-height:calc(100vh - 232px)}

/* search + toc */
.bg-single-search{display:flex;align-items:center;gap:10px;border:1px solid #e6e8ee;border-radius:8px;padding:8px 14px;background:#fff;margin-bottom:26px}
.bg-single-search i{color:#7a8497}
.bg-single-search input{border:0;outline:0;background:transparent;width:100%;font-size:15px;padding:0}
.bg-single-toc__box h3{font-size:16px;margin:0 0 10px}
/* Daftar isi dropdown (details/summary, tetap terbaca di HTML tanpa JS) */
.bg-toc-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none;font-size:16px;font-weight:700;color:#14213d;padding:10px 12px;border:1px solid #e6e8ee;border-radius:8px;background:#fff;margin:0 0 10px;user-select:none}
.bg-toc-summary::-webkit-details-marker{display:none}
.bg-toc-summary::marker{content:""}
.bg-toc-summary::after{content:"";width:9px;height:9px;border-right:2px solid #89216b;border-bottom:2px solid #89216b;transform:rotate(45deg);transition:transform .2s;margin-top:-4px;flex:none}
.bg-toc-details[open]>.bg-toc-summary::after{transform:rotate(225deg);margin-top:4px}
.bg-toc-summary:hover{border-color:#89216b}
.bg-toc-summary:focus-visible{outline:2px solid #89216b;outline-offset:2px}
@media (max-width:960px){
.bg-single-toc__box{max-height:none;overflow:visible}
.bg-toc-details[open] #bg-toc{max-height:60vh;overflow-y:auto;background:#fff}
}
#bg-toc{list-style:none;margin:0;padding:0;border-top:1px solid #e6e8ee}
#bg-toc li{border-bottom:1px dashed #e6e8ee}
#bg-toc li.is-sub a{padding-left:24px;font-size:14px}
#bg-toc a{display:block;padding:10px;font-size:15px;line-height:1.4;border-left:3px solid transparent;color:#34406a}
#bg-toc a.is-active{color:#89216b;font-weight:600;border-left-color:#89216b;background:#f6f1f5}

/* header */
.bg-single-cat{display:inline-block;background:linear-gradient(90deg,#89216b 0%,#da4453 100%);color:#fff;font-weight:600;font-size:14px;padding:3px 10px;border-radius:4px;margin-bottom:14px}
.bg-single-read{color:#5b6478;font-size:14px;margin-left:10px}
.bg-single-title{font-size:40px;line-height:1.25;margin:0 0 18px}
.bg-single-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;font-size:15px;margin-bottom:26px}
.bg-single-author{display:inline-flex;align-items:center;gap:8px}
.bg-single-author img{border-radius:50%}
.bg-single-updated{color:#89216b}

/* feature image (above key highlight) */
.bg-single-hero{margin:0 0 26px}
.bg-single-hero img{width:100%;height:auto;border-radius:12px;display:block}

/* content */
.bg-single-content{font-size:17.5px;line-height:1.75}
.bg-single-content h2,.bg-single-content h3{scroll-margin-top:90px}
.bg-single-content h2{margin-top:34px}
.bg-single-content table{width:100%}
.bg-single-content :not(figure.is-style-perbandingan) > table{border-collapse:collapse}
.bg-single-content :not(figure.is-style-perbandingan) > table th,.bg-single-content :not(figure.is-style-perbandingan) > table td{border:2px solid #9aa1b2}
.bg-single-content :not(figure.is-style-perbandingan) > table th{background:#eceef3;border-bottom:3px solid #4b5365}

/* Key Highlight widget (block pattern) */
.key-highlight{border-radius:12px;overflow:hidden;background:#f3dbe8;margin:0 0 28px;padding:0}
.key-highlight .key-highlight__title{background:linear-gradient(90deg,#89216b 0%,#da4453 100%);color:#fff;margin:0;padding:16px 24px;font-size:24px}
.key-highlight .key-highlight__list{margin:0;padding:20px 24px 12px 46px}
.key-highlight .key-highlight__list li{margin-bottom:10px}

/* Widget Perbandingan Smartphone (block pattern): Smartphone | Kelebihan | Kekurangan */
.perbandingan-smartphone{border-radius:12px;overflow:hidden;border:1px solid #ecd9e4;background:#fff;margin:0 0 28px;padding:0}
.perbandingan-smartphone .perbandingan-smartphone__title{background:linear-gradient(90deg,#89216b 0%,#da4453 100%);color:#fff;margin:0;padding:16px 24px;font-size:24px}
.perbandingan-smartphone figure.wp-block-table{margin:0;overflow-x:auto}
.perbandingan-smartphone figure.wp-block-table table{width:100%;margin:0;border-collapse:collapse;border:0;font-size:16px}
.perbandingan-smartphone figure.wp-block-table th,
.perbandingan-smartphone figure.wp-block-table td{padding:14px 18px;border:0;border-bottom:1px solid #f0e3ea;text-align:left;vertical-align:top}
.perbandingan-smartphone figure.wp-block-table thead th{background:#f6f1f5;color:#14213d;font-weight:600;border-bottom:2px solid #e6c9da}
.perbandingan-smartphone figure.wp-block-table thead th:nth-child(2){color:#1b7a43}
.perbandingan-smartphone figure.wp-block-table thead th:nth-child(3){color:#b3261e}
.perbandingan-smartphone figure.wp-block-table tbody td:first-child{font-weight:600;color:#14213d}
.perbandingan-smartphone figure.wp-block-table tbody td:nth-child(2){background:#f4fbf6}
.perbandingan-smartphone figure.wp-block-table tbody td:nth-child(3){background:#fff6f5}
.perbandingan-smartphone figure.wp-block-table thead th:first-child{width:28%}
.perbandingan-smartphone figure.wp-block-table thead th:nth-child(2),
.perbandingan-smartphone figure.wp-block-table thead th:nth-child(3){width:36%}
.perbandingan-smartphone figure.wp-block-table td:first-child img{display:block;width:96px;max-width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:10px;margin:0 0 10px}
.perbandingan-smartphone figure.wp-block-table tbody tr:last-child td{border-bottom:0}
@media (max-width:640px){
  .perbandingan-smartphone figure.wp-block-table table{min-width:560px}
}

/* Kolom kanan: Bagikan (horizontal) + widget Artikel Terbaru, menempel bersama */
.bg-single-side{display:flex;flex-direction:column;gap:22px;max-height:calc(100vh - 60px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d9c3d1 transparent}
.admin-bar .bg-single-side{max-height:calc(100vh - 92px)}
.bg-side-widget{border:1px solid #ecd9e4;border-radius:12px;overflow:hidden;background:#fff}
.bg-side-head{padding:14px 18px 12px;border-bottom:1px solid #e6e8ee}
.bg-side-head small{display:block;font-size:12px;letter-spacing:.6px;font-weight:500;color:#5b6478}
.bg-side-head strong{display:inline-block;font-size:20px;font-weight:700;line-height:1.3;background:linear-gradient(90deg,#89216b 0%,#da4453 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.bg-side-item{display:grid;grid-template-columns:78px 1fr;gap:12px;padding:12px 16px;border-bottom:1px dashed #e6e8ee;align-items:start;text-decoration:none}
.bg-side-thumb{display:block;width:78px;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,#2b2f55,#89216b 60%,#da4453)}
.bg-side-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.bg-side-title{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-weight:600;font-size:15px;line-height:1.35;color:#000}
.bg-side-item:hover .bg-side-title{color:#89216b}
.bg-side-date{display:block;font-size:12.5px;color:#5b6478;margin-top:3px}
.bg-side-more{display:block;text-align:center;padding:12px;font-weight:600;color:#89216b;font-size:15px;background:#fbf8fa;text-decoration:none}
.bg-side-more:hover{color:#da4453}

/* Warna teks hitam (artikel) */
.bg-single-title,.bg-single-content,.bg-single-content p,.bg-single-content li,.bg-single-content h2,.bg-single-content h3,.bg-single-content h4,.bg-single-meta,.bg-single-search input,#bg-toc a,.bg-toc-summary,.bg-single-share h4{color:#000}
#bg-toc a.is-active{color:#89216b}

/* share */
.bg-single-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.bg-single-share h4{flex:0 0 100%;margin:0 0 2px;font-size:16px}
.bg-single-share a{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:#f6f1f5;color:#8a7a86;margin:0;font-size:19px;transition:.2s}
.bg-single-share a:hover{background:linear-gradient(90deg,#89216b 0%,#da4453 100%);color:#fff}

@media (max-width:960px){
  .bg-single-layout{grid-template-columns:1fr;gap:22px}
  .bg-single-toc,.bg-single-side{position:static;max-height:none;overflow:visible}
  .bg-single-share{margin-bottom:4px}
  .bg-single-share a{margin:0;width:44px;height:44px}
  .bg-single-share h4{margin:0 0 2px}
  .bg-single-title{font-size:30px}
  .bg-single-article{order:1}.bg-single-toc{order:0}.bg-single-side{order:2}
}