:root {
    --aksen: rgba(0, 140, 95, 1);
    --aksenHover: rgba(0, 140, 95, .15);
    --filter: invert(32%) sepia(85%) saturate(4121%) hue-rotate(150deg) brightness(92%) contrast(104%);
    --gap: 3rem;
    --bayangan: #f0f1f5;
    --bg-100: #fff;
    --bg-50: #dadfdf;
    --border: #cbd4eb;
    --bodyBg: #f6f6f9;
    --bodyTeks: #5c7099;
    --invert: #fff;
    --postBg: #fefefe;
    --postTeks: #3a4a68;
    --titleTeks: #17294d;
}

[data-tema="gelap"] {
    --bayangan: #213040;
    --bg-100: #1c2834;
    --bg-50: #233240;
    --border: #36495b;
    --bodyBg: #15202b;
    --bodyTeks: #77828d;
    --postBg: #1c2834;
    --postTeks: #9dafbd;
    --titleTeks: #ccdff8;
}

[data-aksen="biru"] {
    --aksen: rgba(9, 115, 235, 1);
    --aksenHover: rgba(9, 115, 235, .075);
    --filter: invert(30%) sepia(100%) saturate(1585%) hue-rotate(198deg) brightness(93%) contrast(98%);
}

[data-aksen="jingga"] {
    --aksen: rgba(237, 120, 60, 1);
    --aksenHover: rgba(237, 120, 60, .075);
    --filter: invert(70%) sepia(81%) saturate(3394%) hue-rotate(334deg) brightness(96%) contrast(94%);
}

[data-aksen="merah"] {
    --aksen: rgba(229, 57, 53, 1);
    --aksenHover: rgba(229, 57, 53, .075);
    --filter: invert(21%) sepia(68%) saturate(3743%) hue-rotate(349deg) brightness(100%) contrast(80%);
}

[data-aksen="ungu"] {
    --aksen: rgba(120, 86, 255, 1);
    --aksenHover: rgba(120, 86, 255, .075);
    --filter: invert(34%) sepia(29%) saturate(3744%) hue-rotate(232deg) brightness(104%) contrast(106%);
}

ol.list>* li,
ul.bullet li,
ul.bullet li ul li,
ul.list>* li {
    margin-left: 1.5rem
}

.post-body a.btn-aksen:hover,
.post-body a.btn-outline:hover,
.post-body a.btn-sekunder:hover,
.post-body a.btn-utama:hover,
a {
    text-decoration: none
}

.btn-full,
.card-bantu,
.error-atas,
.komen-baru,
.sk .judul,
.unduh figcaption,
figure.unduh-gambar {
    text-align: center
}

.artikel,
.gambar,
.kiri-menu-teks {
    overflow: hidden
}

.kiri-atas,
.kiri-bawah,
.multi .kanan,
.s {
    align-self: flex-start
}

.aksi .bagi,
.aksi .komen,
.bagikan-medsos li div,
.banner-2 .banner-stat,
.feat-simple-judul,
.feat-simple-teks,
.gsc-control-cse .gsc-option-menu-container,
.judul-blog,
.kiri-menu-teks,
.komen-bio,
.komen-hapus-teks,
.komen-tanggal,
.paging-control,
.post-info .center,
.post-label,
.post-label a,
.table,
.topik-no,
kbd,
samp {
    white-space: nowrap
}

.feat-simple-teks,
.kiri-menu-teks,
.komen-author,
.komen-bio,
.post-label a {
    text-overflow: ellipsis
}

.adblock,
.aksi a,
.al-c,
.bagikan,
.beli,
.beli-alter-go,
.cari-ikon,
.center,
.donasi-isi a,
.error-isi,
.feat-bungkus,
.feat-simple-ikon,
.halaman,
.ham-ikon,
.ham-menu,
.ikuti-tautan,
.kiri-menu,
.komen-baru,
.komen-gambar,
.komen-gambar-bungkus .cek:checked~label,
.komen-sortir,
.layout,
.layout-label,
.layout-pilih,
.list,
.loading,
.mode-label,
.post-comment,
.post-kosong,
.post-label,
.profil a,
.sk,
.switch>*,
.tema-beli,
.tema-demo,
.tema-download,
.toc-judul,
.topik-isi li,
.widget-judul,
ul.sosial {
    align-items: center
}

#trx-id:checked~label[for=trx-id]:after,
#trx-world:checked~label[for=trx-world]:after,
.aktif:before,
.bg-aksen,
.btn-aksen,
.donasi-isi a:hover,
::selection,
button,
mark,
samp {
    background-color: var(--aksen)
}

.beli-metode .cek:checked+label,
.bg-aksenHover,
.gambar.bg-aksenHover,
.kubus li,
.lagi:hover {
    background-color: var(--aksenHover)
}

.banner>*,
.beli-metode>label:hover::after,
.beli-opt label:hover,
.box.aksen,
.btn-outline:hover,
.komen-foto.anon,
.komen-gambar:hover {
    background-color: var(--aksenHover);
    box-shadow: none
}

.box,
.pariwara,
.toc,
.tr-caption,
details,
kbd,
thead tr {
    background-color: var(--bayangan)
}

.bagikan-atas,
.bagikan-medsos a,
.beli details,
.beli-metode>label:after,
.btn-sekunder,
.card-isi::-webkit-scrollbar-thumb,
.cari-isi,
.komen-hapus-teks,
.komen-teks em,
.post-body .card-isi,
.post-body pre,
.related,
body {
    background-color: var(--bodyBg)
}

.btn-utama {
    background-color: var(--bodyTeks)
}

.adblock-bungkus,
.aksi,
.bagikan-bungkus,
.beli-bungkus,
.card-isi,
.cari-input,
.donasi-isi a,
.feat-artikel,
.feat-bungkus,
.kiri-bawah::-webkit-scrollbar-thumb,
.komen-expand-sembunyi,
.komen-formulir,
.komen-isi,
.post-artikel,
.sk-bungkus,
.switch:after,
.terkait-isi,
.trending-isi,
select {
    background-color: var(--postBg)
}

.bg-100 {
    background-color: var(--bg-100)
}

.bg-50 {
    background-color: var(--bg-50)
}

.btn-outline,
.cari-reset,
.kiri .cari-input,
.sosial a:hover,
.terkait-isi.penuh,
.tr-caption-container tbody tr:nth-child(2n),
textarea {
    background-color: transparent
}

.aksen-pilih:hover,
.btn-aksen:hover,
.btn-utama:hover,
button:hover {
    box-shadow: inset 0 0 0 99999px rgba(0, 0, 0, .15)
}

.btn-sekunder:hover {
    box-shadow: inset 0 0 0 99999px rgba(0, 0, 0, .05)
}

.adblock-bungkus,
.bagikan-atas,
.bagikan-bungkus,
.bagikan-gambar,
.bagikan-medsos a,
.banner>*,
.beli-bungkus,
.box,
.btn-aksen,
.btn-outline,
.btn-sekunder,
.btn-utama,
.card-isi,
.card-isi::-webkit-scrollbar-thumb,
.cari2 .cari-input,
.donasi-isi a,
.feat-artikel,
.ignielGambar img,
.kiri-bawah::-webkit-scrollbar-thumb,
.komen-formulir,
.komen-gambar,
.komen-hapus-teks,
.komen-isi,
.komen-teks em,
.post-artikel,
.post-body pre,
.round-m,
.sk-bungkus,
.terkait-gambar,
.terkait-isi,
.toc,
.trending-isi,
.unduh,
button,
details {
    border-radius: 7px
}

.aksen-pilih,
.aktif:before,
.beli-metode>label:after,
.komen-foto,
.komen-foto:before,
.komen-gambar-isi:before,
.komen-igniel>.komen-foto:after,
.profil-foto:after,
.round,
.switch:after,
.totop,
.totop:after {
    border-radius: 100px
}

.cari-reset:hover,
.disabled:hover,
[disabled]:hover,
button,
input {
    box-shadow: none
}

#aksen:checked~.aksen-label .kiri-menu-teks,
#isitopik:checked~.kiri-menu .kiri-menu-teks,
#trx-id:checked~label[for=trx-id],
#trx-world:checked~label[for=trx-world],
.aksen,
.aksen-label:hover .kiri-menu-teks,
.aksen>*,
.aktif,
.aktif .topik-no,
.aktif a,
.beli-metode .cek:checked+label,
.beli-metode label:hover,
.breadcrumb a:hover,
.btn-outline,
.card-terms a,
.entry-title a:hover,
.ignielTabs input:checked+label,
.ignielTabs label:hover,
.kiri-menu:hover,
.kiri-menu:hover a,
.komen-author label:hover,
.komen-hapus label:hover,
.komen-hapus-expand:checked+label,
.komen-sortir:hover,
.komen-teks a,
.link a:hover,
.list:hover .kiri-menu-teks,
.post-body a,
.post-body a.btn-outline,
.post-body pre .copy:hover,
.post-body pre.copied:before,
.post-info:not(.tema) a:hover,
.post-top .bagi:hover,
.post-top .komen:hover,
.referensi :target:after,
.syntax-copy:hover,
.terkait-judul a:hover,
.topik-isi .aktif a,
.topik-isi li:hover .topik-no,
.topik-isi li:hover a,
.trending a:hover,
a:hover,
h2[id]:hover::after,
h3[id]:hover::after {
    color: var(--aksen)
}

.breadcrumb .bread-home,
.btn-sekunder,
.caption,
.post-body a.btn-sekunder,
.tr-caption,
a,
body,
figcaption,
html {
    color: var(--bodyTeks)
}

.banner-stat,
.box.aksen,
.breadcrumb a,
.btn-sekunder:hover,
.card-info>*>:first-of-type,
.card-tipe,
.entry-title a,
.komen-author,
.komen-teks em,
.post-body,
.post-body a.btn-sekunder:hover,
.post-body pre .copy:after,
.post-body pre code,
.post-body pre:before,
.terkait-judul a,
.trending a,
blockquote:after,
blockquote:before,
input[type=text] {
    color: var(--postTeks)
}

.entry-title,
.judul,
.post-body h1,
.post-body h2,
.post-body h3,
.post-body h4,
.post-body h5,
.post-body h6,
.post-kosong-teks,
.toc-judul,
.widget-judul,
thead tr {
    color: var(--titleTeks)
}

.btn-aksen,
.btn-aksen:hover,
.btn-utama,
.btn-utama:hover,
.donasi-isi a:hover,
.ignielGambar .copyright,
.invert,
.post-body a.btn-aksen,
.post-body a.btn-utama,
::selection,
button,
mark,
samp {
    color: var(--invert)
}

.a-reply,
.aksen-label,
.aksen-pilih,
.cari-reset,
.ham-ikon,
.ignielTabs label,
.kiri .cari-ikon,
.komen-author label,
.komen-baru-tombol,
.komen-expand,
.komen-gambar,
.komen-hapus label,
.komen-sortir,
.pointer,
.post-body pre .copy,
.switch>*,
.syntax-copy,
.toc-judul:after,
.totop,
a.kiri-menu,
button,
h2[id]:after,
h3[id]:after,
label.kiri-menu,
summary {
    cursor: pointer
}

.center,
.f,
.komen-bungkus li,
.komen-gambar-bungkus .cek:checked~label,
.terkait li,
.toc-judul,
.topik-isi li {
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}

.g,
.terkait ul,
.unduh {
    display: grid
}

.a-cancel.h,
.a-reply.h,
.aksen-pilih .cek:not(:checked)~svg,
.cek,
.h,
.hidden,
.komen-input-expand:checked~.komen-expand .komen-expand-sembunyi,
.link .aktif:before,
.post-label a:not(:first-of-type),
.replaced,
.snippet.h,
.tema-bagi .bagi-teks,
.toc input[type=checkbox],
.topik-isi .aktif:before,
.unduh .copyright,
.unneeded-paging-control {
    display: none
}

.aktif:before,
.btn-full,
.cover,
.req:before,
.warna {
    display: block
}

a,
button,
details,
input,
select,
summary {
    border: none;
    outline: 0
}

#aksen:checked~.aksen-label .y,
#isitopik:checked~.topik-label .buka path,
.aktif .kiri-menu:hover .y,
.aktif .y,
.aktif.kiri-menu:hover .y,
.logo path,
.logokecil path {
    fill: var(--aksen);
    stroke: none
}

.banner .fill path,
.komen-sortir:hover path,
.tema-demo .fill path {
    fill: var(--aksen)
}

.aksi .tema-demo:not(.btn-outline) .fill path,
.bagikan-medsos a:hover path,
.beli .fill path,
.tema-beli .fill path,
.tema-download .fill path,
.totop .fill path {
    fill: var(--invert)
}

.aksen-label,
.bagikan-gambar,
.btn-go-wa,
.feat-gambar,
.flex-grow,
.halaman:before,
.kiri,
.kiri-menu-teks,
.komen-judul .widget-judul,
.post-info svg,
.profil a,
.topik .kiri-menu,
ul.topik-isi {
    flex: 1 0 auto
}

.caption,
.footnote,
.komen-teks em,
.post-body h5,
.referensi,
.tr-caption,
figcaption {
    font-size: 1rem;
    line-height: 1.65rem
}

.aksen-label i,
.post-info .harga span:first-child {
    font-size: 1.25rem
}

.kecil,
.post-body pre .copy,
.post-body pre:before {
    font-size: .85rem;
    font-size: clamp(.75rem, calc(.7204rem + .1296vw), .85rem);
    line-height: 1.25rem
}

#trx-id:checked~label[for=trx-id],
#trx-world:checked~label[for=trx-world],
.b,
.beli-metode .cek:checked+label,
.ignielTabs input:checked+label,
.judul,
.toc-judul,
.widget-judul,
b,
h1,
h2,
h3,
h4,
h5,
strong {
    font-weight: 700
}

.kiri-menu-teks,
.multi .entry-title {
    font-weight: 500
}

.adblock,
.aksi a,
.bagikan,
.bagikan-medsos a,
.beli,
.center,
.error-isi,
.halaman,
.ikuti-tautan,
.jc-c,
.komen-baru,
.komen-gambar,
.komen-gambar-bungkus .cek:checked~label,
.loading,
.post-kosong,
.prlx2,
.sk,
.switch>*,
.tema-beli,
.tema-demo,
.tema-download {
    justify-content: center
}

.card-info>*,
.card-judul,
.card-judul .card-info>*,
.jc-sb,
.komen-halaman,
.komen-header {
    justify-content: space-between
}

.aksi,
.aksi li,
.bagikan-medsos,
.bagikan-medsos li,
.breadcrumb,
.card-terms li,
.card-terms ul,
.kiri li,
.kiri ol,
.kiri ul,
.komen li,
.komen ol,
.komen ul,
.kubus,
.kubus li,
.terkait li,
.terkait ul,
.toc li,
.toc ol,
.toc ul,
.trending li,
.trending ul,
.unduh li,
.unduh ol {
    list-style-type: none;
    margin: 0;
    padding: 0
}

ol.list {
    counter-reset: list
}

ol.list>li:before {
    content: counters(list, ".") ". ";
    counter-increment: list
}

ul.list:first-child>li {
    list-style-position: inside;
    list-style-type: disc
}

ul.bullet li {
    list-style-position: outside;
    list-style-type: disc
}

.toc ul ul.bullet li {
    margin-left: 2.5rem
}

.bagikan-isi,
.box,
.card-isi,
.donasi-isi a,
.feat-bungkus,
.feat-isi,
.halaman-tautan,
.komen-formulir,
.komen-isi,
.related,
.single .post-artikel,
.terkait-isi,
.toc,
.trending-isi {
    padding: 1rem 1.5rem
}

.a,
.aktif:before,
.ignielTabs input:checked+label:after,
.kubus li,
.post-body pre .copy,
.post-body pre:before,
.switch:after,
h2[id]:after,
h3[id]:after {
    position: absolute
}

.fi,
.komen-gambar-bungkus .cek:checked~label,
.totop:after {
    position: fixed
}

.komen-balas .komen-igniel>.komen-foto,
.post-body pre,
.r,
blockquote,
h2[id],
h3[id] {
    position: relative
}

.aktif .kiri-menu:hover .x,
.aktif .x,
.aktif.kiri-menu:hover .x,
.cari-reset .silang {
    stroke: var(--bodyBg)
}

.btn-sekunder path,
.post-info path,
.widget-judul path {
    stroke: var(--bodyTeks)
}

#layout-grid:checked~.grid path,
#layout-list:checked~.list path,
.feat-simple-ikon path,
.ham-ikon path,
.widget-judul path {
    stroke: var(--titleTeks)
}

#isitopik:checked+svg path,
#layout:checked~.layout-label .list path,
#layout:not(:checked)~.layout-label .grid path,
#mode:checked~.mode-label .gelap path,
#mode:not(:checked)~.mode-label .terang path,
.a-cancel path,
.aktif path,
.beli-alternatif path,
.beli-alternatif-back path,
.btn-outline path,
.card-bantu path,
.card-terms .yes path,
.cari .ham-ikon:hover path,
.cari-reset svg>*,
.cari:hover .cari-ikon svg>*,
.kiri-menu:hover path,
.komen-author path,
.komen-expand path,
.lagi path,
.loading path,
.post-top>:hover path,
.switch span:hover path,
.topik .list:hover>svg path,
.topik-isi li:hover path {
    stroke: var(--aksen)
}

.aksen-label:hover .kiri-menu-teks,
.aksen-pilih:hover,
.aksi,
.aksi .bagi,
.aksi .komen,
.artikel,
.bagikan,
.bagikan-atas,
.bagikan-medsos a,
.beli,
.box,
.btn-aksen,
.btn-sekunder,
.btn-utama,
.card-info,
.cari-ikon,
.cari-input,
.cari-input:focus~.cari-ikon,
.cari-input:focus~.cari-reset,
.cari-isi,
.cari-reset,
.cover,
.feat-bungkus,
.feat-simple-teks,
.gambar,
.gambar img,
.ignielTabs label,
.kiri-bawah,
.komen-expand svg,
.komen-expand-sembunyi,
.komen-formulir,
.komen-gambar-isi:before,
.komen-isi,
.komen-parse,
.komen-teks em,
.post-body pre:before,
.related,
.sk,
.switch,
.switch:after,
.switch>*,
.syntax-judul,
.tema-versi,
.terkait-isi,
.toc,
.totop,
.tr-caption,
button,
details,
header,
kbd,
td,
tr {
    transition: .3s;
    -webkit-transition: .3s
}

.banner>*,
.bg-100,
.bg-50,
.btn-outline,
.card-isi,
.card-isi::-webkit-scrollbar-thumb,
.kiri-bawah::-webkit-scrollbar-thumb,
.komen-foto,
.komen-gambar,
.lagi,
.pariwara,
.post-body pre,
.toc-judul:after,
.trending-isi,
::selection {
    transition: background-color .3s
}

.card-terms,
.ignielTabs .content,
.ignielTabs input:checked+label:after,
.komen-balas li,
.komen-igniel>.komen-foto,
.komen-igniel>.komen-foto:after,
.komen-igniel>.komen-foto:before,
.req:before,
.unduh,
hr,
summary {
    transition: border-color .3s, box-shadow .3s
}

.card-info>*>:first-of-type,
.card-tipe,
.judul,
.judul-blog,
.komen-sortir:before,
.toc-judul,
.widget-judul,
h1,
h2,
h2[id]:hover::after,
h3,
h3[id]:hover::after,
h4,
h5 {
    transition: color .3s
}

* {
    box-sizing: border-box
}

.disabled,
[disabled] {
    cursor: not-allowed;
    opacity: .5
}

[data-mode=gelap] .disabled,
[data-mode=gelap] [disabled] {
    opacity: .35
}

body,
html {
    font: 400 14px/1.5rem 'Google Sans Text', system-ui, -apple-system, BlinkMacSystemFont, Roboto, Ubuntu, 'Segoe UI', Oxygen-Sans, 'Helvetica Neue', Arial, sans-serif;
    transition: background-color .3s, color .3s
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-wrap: anywhere;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none
}

a {
    transition: .3s
}

blockquote {
    font-size: 2rem;
    font-size: clamp(1.25rem, calc(1.1759rem + .3241vw), 1.5rem);
    line-height: 2.5rem;
    line-height: clamp(2.25rem, calc(2.1759rem + .3241vw), 2.5rem);
    margin: 3rem 0;
    padding: 1rem 4rem
}

blockquote:after,
blockquote:before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14,17H17L19,13V7H13V13H16M6,17H9L11,13V7H5V13H8L6,17Z' fill='%233a4a68'/%3E%3C/svg%3E");
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 3.25rem;
    height: 3.5rem;
    position: absolute;
    width: 3.5rem
}

[data-tema=gelap] blockquote:after,
[data-tema=gelap] blockquote:before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14,17H17L19,13V7H13V13H16M6,17H9L11,13V7H5V13H8L6,17Z' fill='%239dafbd'/%3E%3C/svg%3E")
}

blockquote:before {
    left: 0;
    top: -1.5rem
}

blockquote:after {
    bottom: -1.5rem;
    right: 0;
    transform: rotate(180deg)
}

.beli-alter-go span:first-of-type,
blockquote cite,
blockquote footer {
    font-style: italic
}

.aksen-label i,
.komen-teks em,
.komen-teks i,
.komen-teks strong,
.post-body pre .copy {
    font-style: normal
}

blockquote cite:before,
blockquote footer:before {
    content: '\2014';
    display: inline-block;
    margin-right: .5rem;
    margin-top: .5rem
}

button {
    font-family: inherit
}

.btn-aksen,
.btn-outline,
.btn-sekunder,
.btn-utama,
button {
    font-size: inherit;
    padding: .75rem 1.25rem
}

.btn-aksen svg,
.btn-outline svg,
.btn-sekunder svg,
.btn-utama svg,
.komen-parse-clear,
.unduh-teks>:first-of-type:not(.unduh-harga),
button svg {
    margin-right: .5rem
}

.btn-aksen path,
.btn-utama path,
.donasi-isi a:hover path,
button path {
    stroke: #fff
}

.a-cancel,
.aksi .bagi,
.btn-outline,
.komen-bungkus>li:target>.komen-isi,
.lagi {
    border: 1px solid var(--aksen)
}

.btn-demo {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9M12,4.5C17,4.5 21.27,7.61 23,12C21.27,16.39 17,19.5 12,19.5C7,19.5 2.73,16.39 1,12C2.73,7.61 7,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C15.76,17.5 19.17,15.36 20.82,12C19.17,8.64 15.76,6.5 12,6.5C8.24,6.5 4.83,8.64 3.18,12Z' fill='%2377828d'/%3E%3C/svg%3E")
}

.btn-aksen.btn-demo,
.btn-utama.btn-demo {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9M12,4.5C17,4.5 21.27,7.61 23,12C21.27,16.39 17,19.5 12,19.5C7,19.5 2.73,16.39 1,12C2.73,7.61 7,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C15.76,17.5 19.17,15.36 20.82,12C19.17,8.64 15.76,6.5 12,6.5C8.24,6.5 4.83,8.64 3.18,12Z' fill='%23fff'/%3E%3C/svg%3E")
}

.btn-download {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13,2.03C17.73,2.5 21.5,6.25 21.95,11C22.5,16.5 18.5,21.38 13,21.93V19.93C16.64,19.5 19.5,16.61 19.96,12.97C20.5,8.58 17.39,4.59 13,4.05V2.05L13,2.03M11,2.06V4.06C9.57,4.26 8.22,4.84 7.1,5.74L5.67,4.26C7.19,3 9.05,2.25 11,2.06M4.26,5.67L5.69,7.1C4.8,8.23 4.24,9.58 4.05,11H2.05C2.25,9.04 3,7.19 4.26,5.67M2.06,13H4.06C4.24,14.42 4.81,15.77 5.69,16.9L4.27,18.33C3.03,16.81 2.26,14.96 2.06,13M7.1,18.37C8.23,19.25 9.58,19.82 11,20V22C9.04,21.79 7.18,21 5.67,19.74L7.1,18.37M12,16.5L7.5,12H11V8H13V12H16.5L12,16.5Z' fill='%2377828d'/%3E%3C/svg%3E")
}

.btn-aksen.btn-download,
.btn-utama.btn-download {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13,2.03C17.73,2.5 21.5,6.25 21.95,11C22.5,16.5 18.5,21.38 13,21.93V19.93C16.64,19.5 19.5,16.61 19.96,12.97C20.5,8.58 17.39,4.59 13,4.05V2.05L13,2.03M11,2.06V4.06C9.57,4.26 8.22,4.84 7.1,5.74L5.67,4.26C7.19,3 9.05,2.25 11,2.06M4.26,5.67L5.69,7.1C4.8,8.23 4.24,9.58 4.05,11H2.05C2.25,9.04 3,7.19 4.26,5.67M2.06,13H4.06C4.24,14.42 4.81,15.77 5.69,16.9L4.27,18.33C3.03,16.81 2.26,14.96 2.06,13M7.1,18.37C8.23,19.25 9.58,19.82 11,20V22C9.04,21.79 7.18,21 5.67,19.74L7.1,18.37M12,16.5L7.5,12H11V8H13V12H16.5L12,16.5Z' fill='%23fff'/%3E%3C/svg%3E")
}

.btn-beli {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17,18A2,2 0 0,1 19,20A2,2 0 0,1 17,22C15.89,22 15,21.1 15,20C15,18.89 15.89,18 17,18M1,2H4.27L5.21,4H20A1,1 0 0,1 21,5C21,5.17 20.95,5.34 20.88,5.5L17.3,11.97C16.96,12.58 16.3,13 15.55,13H8.1L7.2,14.63L7.17,14.75A0.25,0.25 0 0,0 7.42,15H19V17H7C5.89,17 5,16.1 5,15C5,14.65 5.09,14.32 5.24,14.04L6.6,11.59L3,4H1V2M7,18A2,2 0 0,1 9,20A2,2 0 0,1 7,22C5.89,22 5,21.1 5,20C5,18.89 5.89,18 7,18M16,11L18.78,6H6.14L8.5,11H16Z' fill='%2377828d'/%3E%3C/svg%3E")
}

.btn-aksen.btn-beli,
.btn-utama.btn-beli {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17,18A2,2 0 0,1 19,20A2,2 0 0,1 17,22C15.89,22 15,21.1 15,20C15,18.89 15.89,18 17,18M1,2H4.27L5.21,4H20A1,1 0 0,1 21,5C21,5.17 20.95,5.34 20.88,5.5L17.3,11.97C16.96,12.58 16.3,13 15.55,13H8.1L7.2,14.63L7.17,14.75A0.25,0.25 0 0,0 7.42,15H19V17H7C5.89,17 5,16.1 5,15C5,14.65 5.09,14.32 5.24,14.04L6.6,11.59L3,4H1V2M7,18A2,2 0 0,1 9,20A2,2 0 0,1 7,22C5.89,22 5,21.1 5,20C5,18.89 5.89,18 7,18M16,11L18.78,6H6.14L8.5,11H16Z' fill='%23fff'/%3E%3C/svg%3E")
}

.btn-beli,
.btn-demo,
.btn-download {
    background-repeat: no-repeat;
    background-position: left 1.25rem center;
    background-size: 1.5rem;
    padding-left: 3.25rem
}

.beli-alternatif-go,
.post-body pre,
thead tr {
    text-align: left
}

.btn-full.btn-beli {
    background-position: 40% center
}

.btn-full.btn-download {
    background-position: 30% center
}

.komen code,
.komen-gambar-salah,
.komen-teks i,
code {
    color: #ff6060
}

kbd {
    border: 1px solid var(--bodyBg);
    box-shadow: 0 1px 1px rgb(12 13 14 / 15%), inset 0 1px 0 0 var(--bodyBg);
    text-shadow: 0 1px 0 var(--bodyBg)
}

.ignielGambar .copyright,
.komen-teks em,
.komen-teks i,
.unduh figcaption,
code,
kbd,
samp,
textarea {
    font-family: menlo, consolas, monaco, monospace
}

.beli-harga .usd,
.card-harga .usd,
.komen-baru-tombol,
.post-body pre code,
kbd,
samp {
    font-size: 1rem
}

kbd,
mark,
samp {
    border-radius: 3px;
    padding: .15rem .5rem
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0
}

kbd,
samp,
select {
    border-radius: 3px
}

select {
    padding: .25em .5em;
    -moz-appearance: button;
    -webkit-appearance: button;
    appearance: button
}

textarea-focus,
textarea:focus-visible {
    border-color: var(--aksen);
    border-width: 1px;
    outline: 0
}

.disabled {
    cursor: not-allowed;
    pointer-events: none
}

.gambar {
    background-color: var(--bayangan);
    background-image: linear-gradient(to right, var(--postBg) 10%, var(--bodyBg) 18%, var(--postBg) 33%);
    background-image: linear-gradient(to right, #f6f7f8 8%, #e4e4e4 18%, #f6f7f8 33%);
    background-size: 800px 104px;
    animation: 1.5s linear infinite kilau;
    -moz-animation: 1.5s linear infinite kilau;
    -webkit-animation: 1.5s linear infinite kilau;
    -o-animation: 1.5s linear infinite kilau
}

[data-tema=gelap] .gambar {
    background-image: linear-gradient(to right, #1a2632 8%, #162330 18%, #1a2632 33%)
}

.gambar img,
.kiri-bungkus {
    height: 100%
}

kbd,
samp {
    display: inline-block;
    margin: 2px 0;
    padding: 2px 5px;
    line-height: 1.5rem
}

img {
    height: auto;
    max-width: 100%;
    object-fit: cover
}

.header img:hover,
.ignielGambar:hover,
.logo:hover,
img:hover {
    backface-visibility: hidden;
    animation: .82s cubic-bezier(.36, .07, .19, .97) both getar;
    -moz-animation: .82s cubic-bezier(.36, .07, .19, .97) both getar;
    -webkit-animation: .82s cubic-bezier(.36, .07, .19, .97) both getar;
    -o-animation: .82s cubic-bezier(.36, .07, .19, .97) both getar;
    transform: translate3d(0, 0, 0);
    perspective: 1000px
}

#isitopik:checked~.topik-label .buka,
.aksen-label i,
.topik-label:hover .buka {
    transform: rotate(90deg)
}

.nowatermark.gambar-figure,
figure {
    margin: 0
}

.caption,
.post-body figcaption {
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' fill='%2377828d'/%3E%3C/svg%3E") left 2px/1.25rem no-repeat;
    margin-top: 1rem;
    padding-left: 1.75rem;
    text-align: left;
    width: 100%
}

.judul,
.kiri-menu-teks,
.toc-judul,
.widget-judul,
h1,
h2,
h3,
h4,
h5 {
    font-family: 'Google Sans Text', Arial, Helvetica, sans-serif;
    margin: 0;
    line-height: 1.75rem
}

h2[id]:after,
h3[id]:after {
    content: '';
    right: 0;
    font-size: initial;
    font-weight: 400
}

hr {
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--border)
}

iframe {
    width: 100%
}

input[type=text]::placeholder {
    opacity: .75
}

circle,
ellipse,
line,
path,
polygon,
polyline,
rect {
    clip-rule: evenodd;
    fill: none;
    fill-rule: evenodd;
    stroke: var(--bodyTeks);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
    stroke-width: 1.25px;
    transition: stroke .3s
}

.fill path {
    fill: var(--bodyTeks);
    stroke: none;
    stroke-width: 0;
    transition: fill .3s
}

.lazy,
.lazyloaded {
    opacity: 0;
    transition: opacity .3s linear
}

.lazyloaded {
    opacity: 1
}

.loading {
    margin: 1rem;
    cursor: progress
}

.loading svg {
    animation: 1s linear infinite putar;
    -o-animation: 1s linear infinite putar;
    -moz-animation: 1s linear infinite putar;
    -webkit-animation: 1s linear infinite putar;
    height: 2.25rem;
    width: 2.25rem
}

.seleksi {
    user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text
}

summary::marker {
    display: none;
    list-style-type: none
}

summary::-webkit-details-marker {
    display: none;
    list-style-type: none
}

summary::-moz-list-bullet {
    display: none;
    list-style-type: none
}

.post-info .tema-demo svg,
.profil-foto,
.profil-foto img,
.switch>*,
svg {
    height: 1.5rem;
    width: 1.5rem
}

.multi .kanan,
.s {
    position: sticky;
    position: -webkit-sticky;
    top: 1.5rem
}

.tx-merah {
    color: #e53935
}

.igniel {
    grid-template-areas: 'kiri konten' 'kiri bawah';
    grid-template-columns: auto minmax(100px, 1fr);
    margin: 2rem auto;
    max-width: calc(1190px + (var(--gap) * 2) + (2rem * 2));
    padding-left: .75rem;
    padding-right: 2rem
}

.blur {
    filter: blur(2px);
    -webkit-filter: blur(2px)
}

.kiri {
    grid-area: kiri;
    max-width: calc(200px + var(--gap) + 1.25rem);
    width: 100%
}

.kiri-menu-teks {
    margin-left: 1rem
}

.kiri-isi {
    top: 1.5rem
}

.kiri-bawah {
    flex-direction: column;
    height: 100vh;
    margin-right: calc(var(--gap) - 1.25rem);
    max-height: 87vh;
    overflow: auto;
    padding: 0 1.25rem;
    top: 4.5rem
}

.aksen-warna,
.post-info,
.post-label,
.post-label a,
ul.topik-isi {
    overflow: hidden
}

.kiri-bawah::-webkit-scrollbar {
    width: 7px
}

.kiri-menu figure,
.kiri-menu svg,
.topik .list svg {
    flex-shrink: 0
}

.warna {
    animation: 7s linear infinite putar;
    -moz-animation: 7s linear infinite putar;
    -webkit-animation: 7s linear infinite putar;
    -o-animation: 7s linear infinite putar;
    background: radial-gradient(red, #ff0, #0f0, #0ff, #00f, #ff00ff, red);
    background: conic-gradient(red, #ff0, #0f0, #0ff, #00f, #ff00ff, red);
    border-radius: 50%;
    min-height: 1.35rem;
    max-height: 1.35rem;
    min-width: 1.35rem;
    max-width: 1.35rem
}

.komen-parse,
.widget-tengah {
    min-height: 100px
}

.ikuti-tautan,
.kiri-menu,
.req:before {
    padding: .875rem 0
}

.aktif:before {
    content: '';
    bottom: 0;
    height: .5rem;
    left: -1.25rem;
    margin: auto;
    top: 0;
    width: .5rem
}

.topik-label.aktif:before {
    left: -2.75rem
}

.komen-teks,
li.req {
    margin-top: 1rem
}

.req:before {
    content: '';
    border-top: 1px solid #cbd4eb;
    padding-bottom: 0;
    width: 100%;
    height: unset;
    top: unset;
    margin: unset;
    bottom: unset;
    left: unset;
    position: relative;
    background: unset
}

.banner-2 .banner-ikon,
.cari,
.cari2,
.ignielTabs .tab2,
.komen-pesan,
.trending li:not(:last-of-type) {
    margin-bottom: 1rem
}

[data-tema=gelap] .req:before {
    border-top-color: #213040
}

header {
    margin-bottom: 2.5rem
}

.logo svg {
    height: 100%;
    width: 100%
}

.logokecil svg {
    height: 24px;
    width: 24px
}

.judul-blog {
    font-size: 1.5rem;
    text-transform: lowercase
}

.judul-blog:after {
    content: '.com';
    margin-left: -4px
}

.cari2 {
    top: 0;
    z-index: 2
}

.cari-isi {
    padding: 1rem 0
}

.cari-ikon {
    bottom: 6px;
    left: 0;
    opacity: 1;
    right: unset;
    visibility: visible
}

.cari-reset,
.cover {
    visibility: hidden;
    opacity: 0
}

.cari2 .cari-ikon {
    bottom: 0;
    left: unset;
    opacity: .5;
    right: 1.25rem;
    top: -3px
}

.cari2 .cari-input:focus~.cari-ikon {
    right: 3rem
}

.cari-ikon svg,
.sosial .twitter svg {
    height: 1.35rem;
    width: 1.35rem
}

.cari-input {
    border-bottom: 1px solid var(--bodyTeks);
    padding: 0 0 .75rem 2.5rem;
    width: 100%
}

.cari-input:focus {
    padding-left: 0;
    padding-right: 2.5rem
}

.cari2 .cari-input {
    border: 0
}

.cari2 .cari-input,
.cari2 .cari-input:focus {
    padding: 1rem 4rem 1rem 1.25rem
}

#trx-id:checked~label[for=trx-id]:after,
#trx-world:checked~label[for=trx-world]:after,
.beli-metode .cek:checked+label,
.beli-metode>label:hover::after,
.beli-opt label:hover,
.cari-input:focus,
.cari:hover .cari-input {
    border-color: var(--aksen)
}

.cari-reset {
    bottom: 10px;
    padding: 0;
    right: 2rem;
    top: 0
}

.aksi.tampil,
.cari2 .cari-reset {
    bottom: 0
}

.cari-reset svg {
    height: 1.65rem;
    margin-right: 0;
    vertical-align: -3px;
    width: 1.65rem
}

.cari-reset .bulat {
    fill: var(--aksen);
    stroke: none;
    stroke-width: 0
}

.cari-input:focus~.cari-ikon {
    right: 2.25rem;
    opacity: 0;
    visibility: hidden
}

#aksen:checked~.aksen-warna,
#bagi:checked~.bagikan,
#bagi:checked~.bagikan .cover,
#beli:checked~.ekstra .beli .cover,
#sk:checked~.ekstra .sk .cover,
.komen-expand:after,
.komen-gambar-bungkus .cek:checked~label .komen-gambar-isi:after,
.komen-gambar-isi:hover::before,
.komen-hapus-expand:checked~.komen-hapus-teks,
.totop.tampil {
    opacity: 1;
    visibility: visible
}

.cari-input:focus~.cari-reset {
    right: 0;
    opacity: 1;
    visibility: visible
}

.cari2 .cari-input:focus~.cari-reset {
    right: 1.25rem
}

.gsc-control-cse,
.gsc-input input,
.gsc-input-box,
.gsc-results .gsc-cursor-box .gsc-cursor-current-page,
.gsc-results .gsc-cursor-box .gsc-cursor-page,
.gsc-results .gsc-imageResult,
.gsc-webResult.gsc-result {
    background-color: transparent !important
}

.gsc-search-button-v2,
.gsc-search-button-v2:focus,
.gsc-search-button-v2:hover {
    background-color: var(--aksen) !important
}

.gs-result .gs-image,
.gsc-control-cse,
.gsc-input-box-focus,
.gsc-input-box-hover,
.gsc-results .gsc-imageResult,
.gsc-search-button-v2,
.gsc-webResult.gsc-result,
input.gsc-input {
    border: 0 !important
}

.gsc-input-box {
    border-color: var(--border) !important
}

.gcsc-branding a,
.gcsc-more-maybe-branding-box a,
.gcsc-more-maybe-branding-root a,
.gs-webResult.gs-result a.gs-title:link,
.gsst_a {
    border-bottom: 0 !important
}

.gs-result .gs-image,
.gsc-input-box {
    border-radius: 5px !important
}

.gcsc-find-more-on-google,
.gs-webResult.gs-result a.gs-title:hover,
.gs-webResult.gs-result a.gs-title:link b,
.gsc-cursor-current-page,
.gsc-results .gsc-cursor-box {
    color: var(--aksen) !important
}

.gs-webResult div.gs-visibleUrl {
    color: var(--bodyTeks) !important
}

.gs-fileFormatType,
.gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet {
    color: var(--postTeks) !important
}

.gsc-input {
    font-size: 1rem !important
}

.gs-imageResult a.gs-title:visited,
.gs-imageResult a.gs-title:visited b,
.gs-webResult.gs-result a.gs-title:link,
.gs-webResult.gs-result a.gs-title:visited,
.gs-webResult.gs-result a.gs-title:visited b {
    color: var(--titleTeks) !important;
    font-weight: 500
}

.gsc-above-wrapper-area-container,
.gsc-search-button-v2,
form.gsc-search-box,
table.gsc-input,
table.gsc-search-box {
    margin: 0 !important
}

.gs-web-image-box {
    margin-right: 1rem !important
}

.gsc-control-cse,
.gsc-orderby-container,
.gsc-orderby-label,
.gsc-result-info,
.gsc-result-info-container,
.gsib_b,
table.gsc-search-box td.gsc-input,
td.gsc-search-button {
    padding: 0 !important
}

table.gsc-search-box td.gsc-input {
    width: 100% !important
}

.gsc-search-button {
    display: block;
    margin-left: 1rem !important
}

.gsc-above-wrapper-area {
    border-color: var(--border) !important;
    margin: 1.5rem 0 1rem;
    padding: 0 0 1rem !important
}

.gcsc-find-more-on-google path,
.gsc-cursor-container-next path,
.gsc-search-button path {
    stroke: none !important
}

.gsc-search-button path {
    fill: var(--invert) !important
}

.gcsc-find-more-on-google path,
.gsc-cursor-container-next path {
    fill: var(--postTeks) !important
}

.topik .buka {
    transition: transform .3s
}

.aksen-label path,
.logo path,
.topik .buka path {
    transition: fill .3s, stroke .3s
}

.topik .buka,
.topik .h {
    margin-left: 1rem;
    margin-right: 0
}

.topik .dot {
    stroke-width: 1.5px
}

.beli-opt,
.tampilan,
.topik .list {
    flex-wrap: wrap
}

ul.topik-isi {
    margin-left: 1.5rem;
    max-height: 0;
    transition: max-height .3s, margin-bottom .3s linear
}

.kiri-bawah .topik-isi svg {
    height: 1.15rem;
    width: 1.15rem;
    margin-right: 1rem
}

.topik-isi .aktif span:first-of-type,
.topik-isi a {
    flex-shrink: 1;
    padding: .5rem 0;
    width: 100%
}

.topik-no {
    margin-right: .5rem
}

#isitopik:checked~.topik-label .buka path.dot {
    fill: none;
    stroke: var(--bodyBg);
    stroke-width: 1.5px
}

#isitopik:checked~ul.topik-isi {
    margin-bottom: .5rem;
    max-height: 100vh;
    transition: max-height .5s, margin-bottom .3s linear
}

.cover {
    background-color: rgba(0, 0, 0, .5);
    bottom: 0;
    height: 100vh;
    left: 0;
    right: 0;
    top: 0;
    width: 100vw;
    z-index: 3
}

.cover:after,
.komen-gambar-isi:after {
    content: '\00d7';
    color: #fff;
    cursor: pointer;
    font-size: 2.5rem;
    position: fixed;
    right: 1.5rem;
    top: 1.5rem
}

.ham-ikon {
    bottom: 0;
    padding: 1rem 1.25rem;
    left: 0;
    top: 0;
    z-index: 1
}

.ham-ikon svg {
    height: 1.74rem;
    width: 1.75rem
}

.clipboard {
    height: 0
}

#beli:checked~.ekstra .beli .cover,
#ham:checked~.ekstra .cover,
#sk:checked~.ekstra .sk .cover,
.komen-gambar-bungkus .cek:checked~label {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px)
}

.profil-foto:after {
    left: -2px;
    height: calc(1.5rem + 2px);
    width: calc(1.5rem + 2px)
}

.aksen-label i {
    display: inline-block;
    margin-left: .5rem;
    transition: transform .3s
}

#aksen:checked~.aksen-label i {
    transform: rotate(-90deg)
}

#aksen:checked~.aksen-label .x {
    fill: var(--bodyBg);
    stroke: none
}

.aksen-warna {
    justify-content: space-between;
    max-height: 0;
    margin-bottom: 0;
    margin-top: 0;
    opacity: 0;
    visibility: visible;
    width: 100%;
    transition: background-color .3s, max-height .1s linear, margin-bottom .3s linear, margin-top .3s linear, opacity .3s linear, visibility .3s linear
}

#aksen:checked~.aksen-warna {
    max-height: 100%;
    margin-bottom: 1rem;
    margin-top: .5rem;
    transition: background-color .3s, max-height .5s linear, margin-bottom .3s linear, margin-top .3s linear, opacity .3s linear, visibility .3s linear
}

.aksen-pilih {
    height: 30px;
    padding: 5px 0;
    width: 30px
}

.aksen-pilih svg {
    margin: auto;
    bottom: -2px;
    height: 1.35rem;
    left: 0;
    right: 0;
    top: 0;
    width: 1.35rem
}

.aksen-pilih polyline {
    stroke: #fff;
    stroke-width: 3px
}

.aksen-pilih.hijau {
    background-color: #008c5f
}

.aksen-pilih.biru {
    background-color: #1d9bf0
}

.aksen-pilih.jingga {
    background-color: #ed783c
}

.aksen-pilih.merah {
    background-color: #e53935
}

.aksen-pilih.ungu {
    background-color: #7856ff
}

.switch {
    padding: 3px
}

.switch svg {
    height: 1rem;
    padding: .05rem;
    width: 1rem;
    z-index: 1
}

.ikuti svg,
.switch:after {
    height: 1.5rem;
    width: 1.5rem
}

.switch:after {
    content: '';
    transform: translateX(0)
}

.konten,
.kubus,
table {
    width: 100%
}

.layout .switch svg,
.tr-caption-container td {
    padding: 0
}

.ikuti path,
.komen-author path,
.terang path:last-child {
    stroke-width: 2px
}

#layout:checked~.layout-label .switch:after,
#mode:checked~.mode-label .switch:after {
    transform: translateX(100%);
    -webkit-transform: translateX(100%)
}

[dir=rtl] #layout:checked~.layout-label .switch:after,
[dir=rtl] #mode:checked~.mode-label .switch:after {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%)
}

.ikuti {
    margin: 1.25rem 0
}

.ikuti svg {
    margin-right: 0;
    margin-left: -1rem
}

.ikuti .kiri-menu-teks {
    flex: 0 1 auto
}

footer {
    font-size: 12px;
    margin-top: auto
}

.link li:not(:last-child):after {
    content: '\2011';
    margin: 0 .35rem 0 .15rem;
    vertical-align: bottom
}

ul.sosial {
    gap: .75rem;
    margin: .75rem 0
}

.codepen:hover path {
    fill: #292e34
}

.facebook:hover path,
.messenger:hover path {
    fill: #4267b2
}

.instagram:hover path {
    fill: #833ab4
}

.sosial .tiktok svg {
    height: 1.15rem;
    width: 1.15rem
}

.twitter:hover path {
    fill: #1da1f2
}

.tiktok:hover path {
    fill: #000
}

.youtube:hover path {
    fill: #ff0000
}

.atribut p {
    line-height: 1rem;
    margin: 0 0 .5rem
}

.konten {
    grid-area: konten;
    grid-template-areas: 'baliho baliho' 'tengah kanan';
    grid-template-columns: minmax(100px, 1fr) auto;
    max-width: calc(990px + var(--gap))
}

.blog-posts,
.terkait ul,
[data-layout=list] .kustom-post,
[data-layout=list] .thm .blog-posts {
    grid-template-columns: repeat(2, 1fr)
}

.page .konten {
    display: block;
    max-width: 100%;
    width: 100%
}

.sch .konten {
    grid-template-areas: 'tengah kanan'
}

.baliho {
    grid-area: baliho
}

.tengah {
    grid-area: tengah;
    max-width: 640px
}

.page .tengah {
    flex-basis: auto;
    margin-right: 0;
    max-width: 100%;
    width: auto
}

.thm .tengah {
    margin-right: 0;
    max-width: calc(990px + var(--gap))
}

.layout {
    gap: 2rem;
    justify-content: space-between;
    margin-bottom: 1rem
}

.box,
.center,
.ignielGambar,
.post-body figure,
.related,
.table,
.toc,
.unduh,
details,
hr,
table {
    margin: 2rem 0
}

.adblock-teks p:last-of-type,
.layout .widget-judul {
    margin-bottom: 0
}

.layout .list svg {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg)
}

.kustom-post,
.page .donasi-isi,
.thm .blog-posts {
    grid-template-columns: repeat(3, 1fr)
}

.blog-posts,
.kustom-post {
    gap: 1.5rem
}

.post-bungkus {
    flex-wrap: wrap;
    height: 100%
}

.post-isi {
    grid-template-rows: auto 1fr auto
}

.beli-utama,
.unduh {
    grid-template-rows: auto 1fr
}

.post-gambar {
    border-radius: 7px 7px 0 0;
    line-height: 0
}

.post-gambar img {
    width: 100vw
}

.entry-title {
    font-size: 1.15rem;
    font-size: clamp(1rem, calc(.9556rem + .1944vw), 1.15rem);
    line-height: clamp(1.5rem, calc(1.4259rem + .3241vw), 1.75rem);
    margin: 1rem
}

.single .entry-title {
    font-size: 2rem;
    font-size: clamp(1.5rem, calc(1.3519rem + .6481vw), 2rem);
    line-height: 3rem;
    line-height: clamp(2.25rem, calc(2.0278rem + .9722vw), 3rem);
    margin: 0
}

.single .post-artikel {
    overflow: unset
}

.post-info {
    font-size: clamp(.85rem, calc(.8071rem + .1875vw), 1rem);
    justify-content: space-between;
    margin: 1rem
}

.post-desc,
.post-top,
.single .post-info {
    margin: 1rem 0 0
}

.post-info .harga span:last-child {
    display: inline-block;
    line-height: 1.5em;
    margin-top: .5em
}

.post-info .harga sup {
    font-size: .65rem;
    line-height: 1.25rem;
    margin-right: .15rem;
    vertical-align: top
}

.post-info .center {
    margin: 0
}

.post-info svg {
    height: 1.15rem;
    width: 1.15rem;
    margin-right: .35rem
}

.snippet {
    font-size: clamp(.925rem, calc(.8071rem + .1875vw), 1rem);
    line-height: clamp(1.35rem, calc(1.3071rem + .1875vw), 1.5rem)
}

.post-label {
    margin-right: 1.5rem
}

.komen-teks em,
.post-body pre {
    white-space: pre-wrap;
    tab-size: 4
}

.post-top {
    gap: 1rem;
    justify-content: flex-end;
    z-index: 2
}

.aksi,
.lagi a,
.post-body pre.copied:after {
    z-index: 1
}

.table {
    overflow: auto
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td,
th {
    padding: 1rem 2rem
}

tbody tr:nth-child(2n) {
    background-color: rgba(237, 238, 240, .5)
}

[data-tema=gelap] tbody tr:nth-child(2n) {
    background-color: rgba(24, 35, 46, .75)
}

.tr-caption-container {
    margin: 2rem auto !important
}

.tr-caption-container a {
    line-height: 0;
    padding: 0 !important
}

td.tr-caption {
    display: block;
    margin-top: 1rem;
    padding: 1.25rem
}

[data-layout=list] .blog-posts {
    grid-template-columns: repeat(1, 1fr)
}

[data-layout=list] .post-isi {
    grid-template-areas: 'gambar judul' 'gambar info';
    grid-template-columns: minmax(0, 33%) 1fr;
    grid-template-rows: unset
}

[data-layout=list] .post-gambar {
    border-radius: 7px 0 0 7px;
    grid-area: gambar
}

[data-layout=list] .judul {
    grid-area: judul
}

[data-layout=list] .post-info {
    align-items: flex-end;
    gap: 1rem;
    grid-area: info
}

.post-body {
    font-size: 16px;
    font-size: clamp(1rem, calc(.9573rem + .1867vw), 1.144rem);
    line-height: 1.75rem;
    line-height: clamp(1.75rem, calc(1.6759rem + .3241vw), 2rem);
    margin-top: 2rem
}

.card-terms a,
.post-body a:not([class*=btn-],
.note) {
    border-bottom: 1px dashed var(--aksen)
}

.card-terms a:hover,
.post-body a:not([class*=btn-],
.note):hover {
    border-bottom: 1px dotted var(--aksen)
}

.post-body h1,
.post-body h2,
.post-body h3,
.post-body h4,
.post-body h5,
.post-body h6 {
    margin: 2rem 0 1rem
}

.komen-gambar-bungkus,
.post-body pre,
.syntax {
    margin: 1.5rem 0
}

.bagikan-judul,
.post-body h1,
.post-body h2 {
    line-height: 1.5em
}

.post-body h3 {
    line-height: 1.85rem
}

.syntax-judul {
    background-color: var(--border);
    border-radius: 7px 7px 0 0;
    font-family: system-ui, sans-serif;
    font-weight: 600;
    justify-content: space-between;
    padding: .75rem 1.5rem
}

.post-body pre {
    direction: ltr;
    line-height: 1.65rem;
    max-height: 350px;
    padding: 4.5rem 1.5rem 1rem
}

.post-body pre .copy,
.post-body pre:before {
    font-family: system-ui, sans-serif;
    font-weight: 600;
    padding-bottom: .75rem;
    padding-right: 1.5rem;
    padding-top: .75rem;
    right: 0;
    top: 0;
    white-space: nowrap
}

.post-body pre:before {
    content: '</>';
    background-color: var(--border);
    left: 0;
    padding-left: 1.5rem;
    right: 0
}

.post-body pre.css:before {
    content: 'CSS'
}

.post-body pre.html:before {
    content: 'HTML'
}

.post-body pre.js:before {
    content: 'Javascript'
}

.post-body pre.jquery:before {
    content: 'jQuery'
}

.post-body pre.php:before {
    content: 'PHP'
}

.post-body pre[data-title]:before {
    content: attr(data-title)
}

.post-body pre[class] .copy:after {
    content: 'Salin'
}

.post-body pre.copied:before {
    content: '\2713 \A0 \A0' attr(data-copy);
    font-family: 'Google Sans Text', Arial, Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-align: right;
    z-index: 1
}

.post-body pre code {
    max-height: 300px;
    padding-left: 0;
    padding-right: 2.75rem;
    transition: color .3s, opacity .3s
}

.post-body pre.copied code {
    opacity: .25
}

.post-body pre:after {
    content: '';
    bottom: 0;
    display: block;
    left: 0;
    opacity: .5;
    position: absolute;
    right: 0;
    top: 2.5rem;
    z-index: -1
}

.komen code,
.komen-teks em,
.komen-teks i,
.post-body pre,
.post-body pre code {
    overflow: auto;
    hyphens: none;
    -ms-hyphens: none;
    -webkit-hyphens: none;
    user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text
}

.bagikan-teks,
.komen-author,
.komen-bio,
.komen-isi,
.lagi,
ul.komen-balas {
    overflow: hidden
}

.post-body button {
    margin: .5rem 0
}

.post-body code mark,
.post-body pre code mark,
.post-body pre mark {
    background-color: var(--aksenHover);
    color: var(--aksen);
    margin: 0;
    padding: 0
}

.bawah {
    grid-area: bawah
}

.lagi {
    line-height: 1.75rem
}

.lagi a {
    flex-direction: column;
    flex-grow: 1;
    margin: 0;
    padding: 2rem;
    text-align: center
}

.lagi a svg {
    height: 3rem;
    margin-top: 1.5rem;
    width: 3rem
}

.lagi a path {
    stroke-width: .75px
}

.kubus {
    bottom: 0;
    height: 100%;
    left: 0;
    right: 0;
    top: 0
}

.kubus li {
    bottom: -150px;
    display: block;
    height: 20px;
    width: 20px;
    animation: 25s linear infinite kubus;
    -o-animation: 25s linear infinite kubus;
    -moz-animation: 25s linear infinite kubus;
    -webkit-animation: 25s linear infinite kubus
}

.halaman span span,
.komen-footer a,
.komen-input-expand:checked~.komen-expand .komen-expand-lihat,
.unduh a {
    display: inline-block
}

.kubus li:first-child {
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s
}

.kubus li:nth-child(2) {
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s
}

.kubus li:nth-child(3) {
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s
}

.kubus li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s
}

.kubus li:nth-child(5) {
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s
}

.kubus li:nth-child(6) {
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s
}

.kubus li:nth-child(7) {
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 5s
}

.kubus li:nth-child(8) {
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s
}

.kubus li:nth-child(9) {
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s
}

.kubus li:nth-child(10) {
    left: 0;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s
}

.related {
    border-left: 3px solid var(--aksen);
    padding: 1rem 1.5rem
}

.post-body .toc a,
.post-body figure a,
.post-body figure a:hover,
.related a,
.unduh a,
.unduh a:hover {
    border-bottom-style: unset
}

.box.info {
    background-color: #fcfce4;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' fill='%23ecb621'/%3E%3C/svg%3E")
}

.box.success,
.komen-teks em[rel=success] {
    background-color: #e1ffe7;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%2375c127'/%3E%3C/svg%3E")
}

.box.tips {
    background-color: #e7f2ff;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19,1L17.74,3.75L15,5L17.74,6.26L19,9L20.25,6.26L23,5L20.25,3.75M9,4L6.5,9.5L1,12L6.5,14.5L9,20L11.5,14.5L17,12L11.5,9.5M19,15L17.74,17.74L15,19L17.74,20.25L19,23L20.25,20.25L23,19L20.25,17.74' fill='%2300a7e6'/%3E%3C/svg%3E")
}

.box.warning {
    background-color: #ffe7eb;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.2,16.06L3.88,12L2.2,7.94L6.26,6.26L7.94,2.2L12,3.88L16.06,2.2L17.74,6.26L21.8,7.94L20.12,12L21.8,16.06L17.74,17.74L16.06,21.8L12,20.12L7.94,21.8L6.26,17.74L2.2,16.06M13,17V15H11V17H13M13,13V7H11V13H13Z' fill='%23c00827'/%3E%3C/svg%3E")
}

.box.info,
.box.success,
.box.tips,
.box.warning,
.komen-teks em[rel=success] {
    background-position: left 1rem top 1rem;
    background-position: left clamp(1.15rem, calc(1.0648rem + -.0648vw), 1rem) top 1em;
    background-repeat: no-repeat;
    background-size: 1.25rem;
    background-size: clamp(1.35rem, calc(1.2315rem + .5185vw), 1.25rem);
    color: #3a4a68;
    padding-left: clamp(3.25rem, calc(3.1019rem + .6481vw), 3rem);
    position: relative
}

.box.info:before,
.box.success:before,
.box.tips:before,
.box.warning:before,
.komen-teks em[rel=success]:before {
    content: '';
    bottom: 0;
    border-left-width: 1px;
    border-left-style: solid;
    height: calc(100% - (2.85rem + 1.25rem));
    position: absolute;
    left: clamp(1.75rem, calc(1.6759rem + .3241vw), 1.25rem);
    top: clamp(3rem, calc(2.35rem + .3241vw), 3.25rem)
}

.box.info:before {
    border-left-color: #ecb621
}

.box.success:before,
.komen-teks em[rel=success]:before {
    border-left-color: #75c127
}

.box.tips:before {
    border-left-color: #00a7e6
}

.box.warning:before {
    border-left-color: #c00827
}

.unduh {
    border: 1px solid var(--border);
    grid-template-areas: 'unduh-gambar unduh-judul' 'unduh-gambar unduh-teks';
    grid-template-columns: auto 1fr;
    gap: 1.5rem 2rem;
    padding: 1.15rem 1.5rem
}

.unduh h2,
.unduh h3,
.unduh-judul {
    grid-area: unduh-judul;
    font-weight: 500;
    margin: 0
}

.unduh .ignielGambar {
    margin-top: auto
}

.unduh-gambar {
    grid-area: unduh-gambar
}

figure.unduh-gambar {
    line-height: initial;
    margin: .5rem 0 0
}

.unduh img {
    border-radius: 15px;
    max-width: 75px
}

.unduh-teks {
    grid-area: unduh-teks
}

.unduh a {
    margin-bottom: .75rem
}

.unduh figcaption {
    background: 0 0;
    font-size: .65rem;
    margin-top: .25rem;
    padding: 0;
    text-align: center;
    width: auto
}

.komen-parse,
.komen-teks em {
    direction: ltr;
    text-align: left
}

.ignielTabs label:not(:last-of-type),
.unduh-harga {
    margin-right: 2rem
}

details {
    padding: .75rem 1.25rem
}

summary {
    font-weight: 500;
    list-style-type: none;
    position: relative
}

details[open] summary {
    border-bottom: 1px solid var(--border);
    padding-bottom: .75rem
}

details summary:after {
    content: '\002b';
    position: absolute;
    right: 0
}

details[open] summary:after {
    content: '\002d'
}

.post-body .card .freemium,
.referensi h2,
.referensi h3,
.referensi h4,
.toc ol ol,
.toc ol ul,
.toc ul ol,
.toc ul ul {
    margin-top: 0
}

.referensi ol,
.referensi ul {
    margin-bottom: 0;
    padding-left: inherit
}

.referensi :target:after {
    content: '#';
    margin-left: .25rem
}

.step {
    padding-inline-start: 1.5rem
}

.breadcrumb {
    flex-wrap: wrap;
    font-size: clamp(.85rem, calc(.8056rem + .1944vw), 1rem);
    margin-bottom: 1rem
}

.breadcrumb li:not(:first-of-type):before {
    content: '\203A';
    font-size: 1.25rem;
    margin: 0 .5rem
}

.halaman span span {
    animation: 1s linear infinite putar;
    -o-animation: 1s ease-out putar;
    -moz-animation: 1s ease-out putar;
    -webkit-animation: 1s linear infinite putar;
    font-size: 1.5rem;
    margin-left: .75rem
}

.terkait ul,
.trending ul {
    animation: .3s ease-out zoom;
    -o-animation: .3s ease-out zoom;
    -moz-animation: .3s ease-out zoom;
    -webkit-animation: .3s ease-out zoom
}

.terkait ul {
    gap: 2rem 3rem
}

.terkait ul.noimage {
    grid-gap: 1.5rem 3rem
}

.terkait-isi.penuh {
    margin-top: 1.5rem;
    padding: 0
}

.terkait-gambar {
    flex-shrink: 0;
    height: 72px;
    margin-right: 1rem;
    width: 72px
}

.aksi {
    bottom: -10rem;
    gap: .5rem;
    padding: 1rem 0
}

.aksi .bagi,
.aksi .komen {
    margin: 0;
    padding: .75rem 1rem
}

.aksi .linkedin svg,
.aksi .tema-bagi svg,
.aksi .twitter svg {
    margin-right: 0
}

.aksi .bagi svg,
.aksi .komen svg,
.post-top .bagi svg,
.post-top .komen svg {
    height: 1.15rem;
    margin-right: .5rem;
    width: 1.15rem
}

.aksi .komen,
.post-top .bagi,
.post-top .komen {
    align-items: center;
    margin: 0
}

.totop svg,
.totop:after {
    margin: auto;
    top: 0;
    right: 0;
    left: 0
}

.bagikan,
.bagikan-bungkus {
    z-index: -1
}

#bagi:checked~.bagikan {
    z-index: 0
}

.bagikan-teks {
    display: -webkit-box;
    height: 100%;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical
}

.bagikan-atas {
    gap: 1.5rem;
    padding: 1.25rem 1.5rem
}

.bagikan-gambar {
    height: 100%;
    line-height: 0
}

.bagikan-desc {
    margin-top: .5em
}

.bagikan-bawah {
    flex-direction: column;
    gap: 1rem;
    margin: 1.25rem 0 0
}

.bagikan-medsos {
    gap: 1.25rem;
    grid-template-columns: repeat(6, 1fr);
    margin-top: .5rem
}

.bagikan-medsos li div {
    margin-top: .5em;
    text-align: center
}

.bagikan-medsos a {
    padding: 1rem
}

.bagikan-medsos .whatsapp:hover {
    background-color: #128c7e
}

.bagikan-medsos .telegram:hover {
    background-color: #08c
}

.bagikan-medsos .facebook:hover {
    background-color: #4267b2
}

.bagikan-medsos .twitter:hover {
    background-color: #1da1f2
}

.bagikan-medsos .linkedin:hover {
    background-color: #0077b5
}

.bagikan-medsos .pinterest:hover {
    background-color: #e60023
}

.donasi svg:first-child {
    height: 2rem;
    width: 35px
}

.donasi svg:last-child,
.feat-simple-ikon svg {
    height: 1rem;
    width: 1rem
}

.donasi img {
    width: 35px
}

.donasi-ikon {
    margin-right: 1rem
}

.donasi-isi {
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr)
}

.beli-opt,
.donasi-isi a {
    gap: 1rem
}

.beli-go-tele,
.donasi-isi a,
.donasi-isi a span {
    flex-grow: 1
}

.totop {
    bottom: 8rem;
    right: 4rem;
    height: 3.5rem;
    opacity: 0;
    visibility: hidden;
    width: 3.5rem;
    transform: translateZ(0);
    -webkit-transform: translateZ(0)
}

.totop:after {
    content: '';
    border: 2px solid #fff;
    bottom: 0;
    display: block;
    height: calc(3.5rem - 10px);
    padding: 0;
    width: calc(3.5rem - 10px)
}

.totop.tampil {
    bottom: 2rem;
    z-index: 2
}

.totop svg {
    bottom: 0;
    min-height: 2.5rem;
    min-width: 2.5rem
}

.bawah,
.donasi,
.halaman,
.komen,
.komen-bungkus,
.terkait {
    margin-top: 3rem
}

.feat,
.komen-baru,
.komen-bungkus>li:not(:last-child),
.komen-formulir,
.komen-halaman,
.post-body .card,
.widget-konten {
    margin-bottom: 2rem
}

.banner-1 .banner-stat,
.komen-sortir {
    margin-bottom: 1.5rem
}

.komen-sortir:before {
    content: 'Terbaru'
}

#komen:checked~.komen-judul .komen-sortir:before {
    content: 'Terlama'
}

.komen-sortir svg {
    height: 1.15rem;
    margin-left: .5rem;
    width: 1.15rem
}

.komen-bungkus,
.post-kosong {
    flex-direction: column
}

#komen:checked~.komen-bungkus {
    flex-direction: column-reverse
}

.komen-foto {
    flex: 0 0 50px;
    height: 50px;
    width: 50px
}

.komen-igniel>.komen-foto img {
    margin-left: 3px;
    margin-top: 1px
}

.komen-expand {
    margin-top: 1.5rem;
    z-index: 1
}

.komen-expand:after {
    content: '';
    border-top: 1px solid var(--border);
    position: absolute;
    right: 0;
    left: 2rem;
    top: .85rem;
    transition: border-color .3s, opacity .3s, visibility .3s;
    width: calc(100% - 2rem);
    z-index: -1
}

.komen-expand svg {
    height: 1.05rem;
    margin-right: .5rem;
    margin-top: 2px;
    width: 1.05rem
}

.komen-expand-sembunyi {
    padding-right: 1rem
}

.komen-input-expand:checked~.komen-expand svg {
    margin-top: 3px;
    transform: rotate(180deg)
}

.komen-input-expand:checked~.komen-balas {
    max-height: 0;
    padding-bottom: 0
}

.bagikan,
.bagikan-bungkus,
.beli,
.beli-bungkus,
.komen-gambar-bungkus .cek:checked~label .komen-gambar-isi:hover::before,
.komen-gambar-isi:after,
.komen-gambar-isi:before,
.komen-hapus-teks,
.komen-input-expand:checked+.komen-expand:after,
.sk,
.sk-bungkus {
    opacity: 0;
    visibility: hidden
}

ul.komen-balas {
    max-height: 100%;
    transition: max-height .3s, padding .3s
}

.komen-balas .komen-foto {
    flex-basis: 36px;
    height: 36px;
    width: 36px
}

.komen-igniel>.komen-foto {
    border: 2px solid var(--bodyBg)
}

.komen-balas .komen-igniel>.komen-foto {
    border-color: var(--postBg)
}

.komen-gambar-isi:before,
.komen-igniel>.komen-foto:after,
.komen-igniel>.komen-foto:before,
.loading-isi div,
.profil-foto:after {
    content: '';
    position: absolute
}

.komen-igniel>.komen-foto:before {
    background: var(--aksen) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12' fill='none' stroke='%23fff' stroke-width='3px' /%3E%3C/svg%3E") center/.7rem no-repeat;
    bottom: 0;
    box-shadow: 0 0 0 1px var(--bodyBg);
    height: 1rem;
    right: -.25rem;
    width: 1rem;
    z-index: 1
}

.komen-igniel>.komen-foto:after,
.profil-foto:after {
    border: 1px solid var(--aksen);
    bottom: 0;
    margin: auto;
    top: 0
}

.beli-konten .kecil,
.komen-footer,
.komen-konten .box {
    margin-bottom: .5rem
}

.komen-balas>li,
.komen-isi .komen-formulir {
    border-top: 1px solid var(--border);
    margin-top: 1.5rem
}

.komen-igniel>.komen-foto:after {
    height: 48px;
    left: 0;
    width: 48px
}

.komen-balas .komen-igniel>.komen-foto:before {
    background-position-y: 2px;
    background-size: .5rem;
    box-shadow: 0 0 0 1px var(--postBg);
    height: .75rem;
    right: -3.5px;
    width: .75rem
}

.komen-balas .komen-igniel>.komen-foto:after {
    height: 34px;
    width: 34px
}

.komen-isi {
    flex: 1 1 auto;
    margin-left: 1rem
}

.komen-balas .komen-isi {
    margin-left: 1.25rem;
    padding: 0
}

.komen-bio {
    flex-direction: column
}

.komen-hapus label {
    font-size: 1.5rem;
    font-weight: 700
}

.komen-hapus-teks {
    right: 2.5rem;
    padding: .35rem .75rem;
    top: 0;
    z-index: 1;
    transition: background-color .3s, opacity .3s linear, visibility .3s linear
}

.komen-author {
    margin-right: 2rem
}

.komen-author svg {
    height: 1rem;
    margin-left: .25rem;
    vertical-align: -2px;
    width: 1rem
}

.komen-tanggal {
    margin-top: .15rem;
    max-width: 50%;
    opacity: .75
}

.komen-author-url {
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    padding-left: 2.5rem;
    transition: max-height .3s, margin-top .3s linear
}

.komen-author-url .seleksi {
    white-space: normal
}

.komen-author-url:after,
.komen-author-url:before {
    content: '';
    bottom: 0;
    display: block;
    left: 1rem;
    position: absolute
}

.komen-author-url:before {
    border-left: 1px solid var(--bodyTeks);
    top: -.25rem;
    height: .5rem
}

.komen-author-url:after {
    border-bottom: 1px solid var(--bodyTeks);
    border-left: 1px solid var(--bodyTeks);
    border-bottom-left-radius: 5px;
    height: .75rem;
    top: 0;
    width: .75rem
}

.komen-input-link:checked~.komen-header .komen-author-url {
    margin-top: .25rem;
    max-height: 100%;
    transition: max-height .3s, margin-top .3s linear
}

.komen-balas>li {
    padding-top: 1.5rem
}

.komen-balas>li:first-of-type {
    border: 0;
    padding-top: 0
}

.komen-balas>li:first-of-type:target,
.komen-balas>li:last-of-type:target,
.komen-balas>li:target {
    border-bottom: 1px solid var(--aksen);
    border-top: 1px solid var(--aksen);
    padding-bottom: 1.5rem;
    padding-top: 1.5rem
}

.komen-footer {
    margin-top: 2rem
}

.komen-footer a {
    padding: .35rem .75rem
}

.komen-footer svg {
    height: 1.15rem;
    margin-right: .25rem;
    width: 1.15rem
}

.a-reply {
    margin: 0;
    padding: .5rem .75rem
}

.a-reply svg {
    transform: scale(-1)
}

.komen-formulir iframe {
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdMfWW1d6j_QMHdnVOho6bmqLt1E-q9mclgqMm1bDNX9S-NenL0bo0LdCKCa3DpWGwDfGtYzzDNGjQLZc-8kxFQaxXbq4fzO1cuOBhOUOl3WvsJyfDQIoXx3XwFMXj7nM1JUoGk1rYQY18/");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 4rem
}

[data-tema=gelap] .komen-formulir iframe {
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ejC9ptzFE98-KcDMhXylgvZMRkxNnjv9UIUZrHJvHgmJd3-x-7NyJJ7-Pcv2aLn-C3lm91UQW-foU9FsbDIwzIORJiy6iJt8UlX78fIqev9aeftL5E5vEXOS0Ocxuczt8hKwUVj7Dj1j/");
    filter: invert(87%) sepia(55%) saturate(407%) hue-rotate(168deg) brightness(90%) contrast(96%);
    -webkit-filter: invert(87%) sepia(55%) saturate(407%) hue-rotate(168deg) brightness(90%) contrast(96%)
}

.komen-isi .komen-formulir {
    border-radius: 0;
    padding: 1.5rem 0 0
}

.komen-baru-tombol {
    line-height: inherit;
    padding: .625rem 1.25rem
}

.komen-pesan svg {
    height: 1.25rem;
    margin-right: .25rem;
    vertical-align: -3px;
    width: 1.25rem
}

.kiri-atas,
.komen-pesan ul,
header {
    margin-left: 1.25rem
}

.komen-bungkus .komen-pesan li,
.komen-pesan li {
    display: list-item;
    list-style-type: disc
}

.komen-teks em {
    display: block;
    line-height: 1.65rem;
    margin: 1.5rem 0 0;
    max-height: 250px;
    padding: .75rem 1rem
}

.komen-gambar {
    border: 1px solid var(--aksen);
    margin: 1.5rem 0;
    padding: 2rem
}

.komen-gambar-isi:before {
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M21 9V3H15' stroke='%233a4a68'/%3E%3Cpath d='M3 15V21H9' stroke='%233a4a68'/%3E%3Cpath d='M21 3L13.5 10.5' stroke='%233a4a68'/%3E%3Cpath d='M10.5 13.5L3 21' stroke='%233a4a68'/%3E%3C/svg%3E") center/1.25rem no-repeat rgba(0, 0, 0, .15);
    right: .5rem;
    height: 2rem;
    line-height: 0;
    padding: 0 .1rem .2rem;
    top: .5rem;
    width: 2rem;
    z-index: 6
}

.komen-gambar-bungkus .cek:checked~label {
    background-color: rgba(0, 0, 0, .75);
    bottom: 0;
    right: 0;
    height: 100vh;
    left: 0;
    top: 0;
    width: 100vw;
    z-index: 5
}

[data-tema=gelap] .komen-gambar-bungkus .cek:checked~label {
    background-color: rgba(0, 0, 0, .15)
}

.komen-gambar-bungkus .cek:checked~label .komen-gambar-isi img {
    max-height: calc(100vh - 5rem);
    max-width: calc(100vw - 3rem)
}

.komen-halaman-num,
.toc ol ul li,
.toc ul ol li,
.toc ul ul li,
.tol ol ol li {
    margin-left: 1rem
}

.ignielTabs label {
    display: inline-block;
    float: left;
    padding: 0 1rem 1rem;
    position: relative;
    top: 0
}

.beli-alternatif-back,
.ignielTabs #tab1:checked~.content .tab1,
.ignielTabs #tab2:checked~.content .tab2,
.komen-parse,
.parallax,
.parallax ins {
    display: block
}

.ignielTabs input:checked+label:after {
    content: '';
    border-bottom: 2px solid var(--aksen);
    bottom: -1px;
    display: block;
    left: 0;
    right: 0;
    width: 100%
}

.ignielTabs .content {
    border-top: 1px solid var(--border);
    clear: both;
    padding-top: 1.25rem
}

.komen-parse {
    color: var(--postTeks);
    border: 1px solid var(--border);
    border-radius: 5px;
    margin: .5rem 0 1.5rem;
    padding: 1rem 1.25rem;
    resize: none;
    width: 100%
}

.beli-alternatif,
.beli-go-email,
.card-harga {
    text-align: right
}

.card {
    margin-bottom: 3rem
}

.card-atas a,
.card-unduh a,
.card-unduh div {
    font-size: 1.25rem;
    font-weight: 500;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem
}

.card-isi {
    line-height: 1.75rem;
    margin-top: 1rem;
    max-height: calc(100vh - 11rem);
    overflow: auto
}

.card-isi::-webkit-scrollbar {
    width: 13px
}

.card-isi::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    border: 3px solid transparent
}

.post-body .card-isi {
    line-height: inherit;
    max-height: unset;
    overflow: unset
}

.post-body .card-isi::-webkit-scrollbar {
    display: none
}

.card-info,
.card-terms {
    border-top: 1px solid var(--border);
    margin-top: 1rem;
    padding-top: 1rem
}

.card-tipe {
    font-size: 1.15rem
}

.card-harga {
    font-size: 1.5rem
}

.beli-harga sup,
.card-harga sup {
    font-size: .75rem;
    line-height: 1rem;
    margin-right: .15rem;
    vertical-align: top
}

.beli-harga .usd sup,
.card-harga .freemium sup,
.card-harga .usd sup {
    line-height: 1.25rem;
    font-size: .65rem
}

.card-terms li,
.tema-filter {
    gap: .5rem
}

.card-terms svg {
    flex-shrink: 0;
    height: 1.15rem;
    margin-top: .075rem;
    width: 1.15rem
}

.card-terms .no path {
    stroke: #f44336
}

.card-bantu,
.card-unduh label>*,
.card-unduh>* {
    margin-top: 1.25rem
}

.card .freemium {
    font-size: 1rem;
    margin-top: .5rem
}

.card-bantu svg {
    height: 1rem;
    margin-right: .25rem;
    vertical-align: -2px;
    width: 1rem
}

.tema-versi {
    border-bottom-right-radius: 7px;
    line-height: normal;
    padding: .5em;
    z-index: 1
}

.beli-metode,
.beli-metode>label:after,
.beli-opt label {
    border: 1px solid var(--border)
}

.tema-filter>* {
    line-height: 1rem;
    padding: .65rem .85rem
}

.beli details {
    margin: 0;
    padding-bottom: 1.25rem;
    padding-top: 1.25rem
}

.beli details[open] summary {
    border: 0;
    padding-bottom: 1rem
}

.beli svg {
    margin-right: .25rem;
    vertical-align: -5px
}

.bagikan,
.beli,
.sk {
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition-delay: .2s
}

.bagikan-bungkus,
.beli-bungkus,
.sk-bungkus {
    top: -10vh;
    transition: top .2s ease-out, opacity .3s, visibility .3s;
    z-index: -1
}

.beli-utama {
    grid-template-areas: 'beli-konten beli-trx' 'beli-mp beli-trx' 'beli-go beli-go';
    grid-template-columns: auto auto;
    gap: 1.5rem 5rem;
    max-height: 100%;
    opacity: 1;
    transform: translateX(0);
    transition: opacity, max-height, transform .3s
}

#alter:checked~.beli-utama {
    max-height: 0;
    transform: translateX(-100vw);
    transition: opacity, max-height, transform
}

.beli-alter {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateX(100vw);
    transition: opacity .1s, max-height, transform .3s
}

#alter:checked~.beli-alter {
    max-height: 100%;
    opacity: 1;
    transform: translateX(0)
}

.beli-konten {
    grid-area: beli-konten
}

.beli-trx {
    grid-area: beli-trx
}

.beli .judul,
.sk .judul {
    font-size: 1.5rem;
    margin-bottom: 2rem
}

.beli-metode {
    flex-direction: column;
    margin-top: 1rem;
    padding: 1rem 1.25rem
}

.beli-metode>label {
    padding: .25rem 0 1rem
}

.beli-metode>label:after {
    content: '';
    height: 1rem;
    transition: background-color .2s, border-color .2s;
    width: 1rem
}

.beli-metode>label:last-of-type {
    border-top: 1px solid var(--border);
    margin-top: 1.25rem;
    padding-top: 1.25rem
}

#trx-id:checked~label[for=trx-id]:after,
#trx-world:checked~label[for=trx-world]:after {
    box-shadow: 0 0 0 2px var(--postBg) inset;
    border-width: 1px
}

#trx-world:checked~.trx-id,
.trx-world {
    max-height: 0;
    margin-top: -1rem;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height, margin-top, opacity, visibility
}

#trx-world:checked~.trx-world,
.trx-id {
    max-height: 100vh;
    margin-top: 0;
    opacity: 1;
    visibility: visible;
    transition: max-height .2s, margin-top .2s, opacity .2s, visibility .2s
}

#trx-world:checked~.trx-world {
    margin-bottom: .25rem
}

.beli-opt label {
    flex-grow: 1;
    padding: 1rem;
    text-align: center
}

.beli-reg {
    margin-top: .75rem
}

.beli-mp {
    grid-area: beli-mp
}

.beli-mp img {
    max-width: 100px
}

.beli-mp-isi {
    gap: 1.5rem;
    margin-top: 1rem
}

.beli-alternatif,
.beli-go-form {
    margin-top: 1.5rem
}

.beli-go {
    grid-area: beli-go
}

.beli-go input {
    vertical-align: middle
}

.beli-alter ul {
    padding-left: 1.25rem
}

.beli-alter-go {
    gap: 3rem;
    justify-content: space-between;
    margin: 3rem 0 2rem
}

.beli-alternatif svg,
.beli-alternatif-back svg {
    height: 1.25rem;
    width: 1.25rem;
    vertical-align: -4px
}

.beli-alternatif path,
.beli-alternatif-back path {
    fill: none
}

.beli-go-email {
    flex-grow: 0
}

#bagi:checked~.bagikan,
#beli:checked~.ekstra .beli,
#sk:checked~.ekstra .sk {
    opacity: 1;
    visibility: visible;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition-delay: 0s
}

#bagi:checked~.bagikan .bagikan-bungkus,
#beli:checked~.ekstra .beli-bungkus,
#sk:checked~.ekstra .sk-bungkus {
    opacity: 1;
    top: 0;
    visibility: visible;
    z-index: 4
}

.sk ol {
    padding-inline-start: 1rem
}

.banner {
    gap: 1.5rem;
    grid-template-areas: 'banner1 banner2 banner3' 'banner1 banner2 banner4';
    grid-template-columns: .85fr .65fr 1fr;
    grid-template-rows: 1fr;
    margin-bottom: 2rem
}

.banner>* {
    overflow: hidden;
    padding: 2rem
}

.banner svg {
    opacity: .15
}

.banner-1 {
    flex-direction: column;
    grid-area: banner1
}

.banner-2 {
    align-items: center;
    flex-direction: column;
    grid-area: banner2;
    justify-content: center;
    text-align: center
}

.banner-3 {
    grid-area: banner3
}

.banner-4 {
    grid-area: banner4
}

.banner-stat {
    font-size: 2rem;
    font-size: clamp(1.5rem, 1.3269rem + .7692vw, 2rem);
    line-height: 2.5rem;
    line-height: clamp(2rem, 1.8269rem + .7692vw, 2.5rem);
    margin-bottom: 1rem
}

.banner-1 .banner-info {
    flex-grow: 1;
    font-size: 1.25rem;
    line-height: 1.85rem
}

.banner-1 .banner-ikon {
    bottom: -1rem;
    right: -1.5rem;
    transform: rotate(-15deg)
}

.banner-1 svg,
.post-kosong>svg {
    height: 10rem;
    width: 10rem
}

.banner-2 svg {
    height: 5rem;
    vertical-align: bottom;
    width: 5rem
}

.banner-3 .banner-ikon,
.banner-4 .banner-ikon {
    top: .25rem;
    right: 1rem
}

.banner-3 svg,
.banner-4 svg {
    height: 4rem;
    width: 4rem
}

.kanan {
    grid-area: kanan;
    width: 350px
}

.kanan .widget-konten:first-child {
    margin-left: auto;
    margin-right: auto;
    text-align: center
}

.kiri-atas,
.tengah,
header {
    margin-right: var(--gap)
}

.widget-judul {
    font-size: 1.25rem;
    margin-bottom: 1rem
}

.widget-judul svg {
    height: 1.25rem;
    margin-right: .5rem;
    width: 1.25rem
}

.error-desc,
.error-teks,
.multiplex,
.widget-pertama,
.widget-tengah {
    margin: 1rem 0
}

.pariwara:not(:empty) {
    min-height: 0
}

.post .kanan .pariwara:not(:empty) {
    min-height: 600px
}

.post-kosong-isi {
    margin: 2rem 0 4rem
}

.post-kosong-teks {
    text-decoration: underline
}

.feat-artikel {
    flex-direction: column;
}

.feat-gambar {
    line-height: 0;
    min-width: 250px
}

.feat-judul {
    margin: 0 0 .75rem
}

.feat-bungkus {
    border-radius: 5px
}

.feat-simple-judul {
    border-right: 1px solid var(--border);
    margin-left: .5rem;
    padding-right: 1rem
}

.feat-simple-teks {
    margin-left: 1rem;
    overflow: hidden
}

.error-bungkus {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0
}

.error-isi {
    flex-direction: column;
    height: 100vh;
    padding: 2rem;
    width: 100vw
}

.error-judul {
    font-size: 6rem;
    font-size: clamp(3rem, calc(2.1111rem + 3.8889vw), 6rem);
    opacity: .35
}

.error-desc {
    font-size: 2.5rem;
    font-size: clamp(1.35rem, calc(1.0093rem + 1.4907vw), 2.5rem)
}

.error-teks {
    font-size: 1.25rem;
    font-size: clamp(.75rem, calc(.6019rem + .6481vw), 1.25rem)
}

.error-desc,
.error-judul,
sup {
    line-height: initial
}

.adblock,
.adblock-ikon,
.bagikan,
.beli,
.sk {
    bottom: 0;
    right: 0;
    left: 0;
    top: 0
}

.adblock {
    background-color: rgba(0, 0, 0, .5)
}

.adblock-bungkus,
.beli-bungkus {
    z-index: 4
}

.adblock-bungkus,
.bagikan-bungkus,
.beli-bungkus,
.sk-bungkus {
    max-height: 90vh;
    max-width: 780px
}

.adblock-isi,
.beli-isi,
.sk-isi {
    padding: 2rem 3rem
}

.adblock-isi,
.bagikan-isi,
.beli-isi,
.sk-isi {
    align-items: flex-start;
    max-height: 80vh;
    overflow: auto
}

.adblock-judul {
    font-size: 2rem;
    text-align: center
}

.adblock-ikon {
    margin-right: 2rem;
    margin-top: 1rem;
    opacity: .5
}

.adblock svg {
    height: 5rem;
    width: 5rem
}

.adblock-teks {
    font-size: 1.25rem;
    line-height: 1.75rem
}

.parallax {
    height: 1200px;
    margin: 1rem auto
}

.prlx1 {
    clip-path: inset(0 0 0 0);
    overflow: hidden
}

.prlx2 {
    align-items: center;
    margin: auto;
    min-height: 600px !important
}

.prlx1,
.prlx2 {
    bottom: 1.5rem;
    left: 0;
    right: 0;
    top: 1.5rem
}

.parallax ins,
.prlx1 {
    margin: auto;
    min-height: 600px;
    min-width: 300px;
    height: 100%;
    width: 100%
}

.ignielGambar {
    overflow: hidden;
    text-align: center
}

figure.gambar-figure {
    line-height: 0;
    margin: 0
}

.gambar-bungkus {
    display: inline-block;
    overflow: hidden
}

.ignielGambar .copyright {
    background-color: rgba(29, 33, 41, .5);
    border-bottom-right-radius: 7px;
    border-top-left-radius: 7px;
    bottom: 0;
    right: 0;
    font-size: .95rem;
    padding: .05rem .75rem;
    text-align: right
}

.ignielGambar .wm-left+.copyright {
    border-radius: 0 7px;
    left: 0;
    right: unset
}

.komen-gambar-isi,
.toc {
    display: table
}

.toc-judul {
    clear: both;
    display: block
}

.toc-judul:after {
    content: '\002d';
    background-color: var(--border);
    border-radius: 3px;
    clear: both;
    float: right;
    line-height: 0;
    margin-left: 1rem;
    padding: .75rem .5rem
}

.toc ol,
.toc ul {
    margin-top: 1rem;
    max-height: 100%;
    max-width: 100%;
    opacity: 1;
    overflow: hidden;
    transition: max-height .1s, max-width, margin-top .3s linear, opacity .3s linear, visibility .3s linear;
    visibility: visible
}

#toc:checked~.toc-judul:after {
    content: '\002b'
}

#toc:checked~ol,
#toc:checked~ul {
    margin-top: 0;
    max-height: 0;
    max-width: 0;
    opacity: 0;
    transition: max-height, max-width, margin-top .3s linear, opacity .3s linear, visibility .3s linear;
    visibility: hidden
}

.ekstra {
    z-index: 3
}

@keyframes getar {
    10%,
    90% {
        transform: translate3d(-1px, 0, 0)
    }
    20%,
    80% {
        transform: translate3d(2px, 0, 0)
    }
    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0)
    }
    40%,
    60% {
        transform: translate3d(4px, 0, 0)
    }
}

@-webkit-keyframes getar {
    10%,
    90% {
        transform: translate3d(-1px, 0, 0)
    }
    20%,
    80% {
        transform: translate3d(2px, 0, 0)
    }
    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0)
    }
    40%,
    60% {
        transform: translate3d(4px, 0, 0)
    }
}

@-moz-keyframes getar {
    10%,
    90% {
        transform: translate3d(-1px, 0, 0)
    }
    20%,
    80% {
        transform: translate3d(2px, 0, 0)
    }
    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0)
    }
    40%,
    60% {
        transform: translate3d(4px, 0, 0)
    }
}

@keyframes kilau {
    0% {
        background-position: -468px 0
    }
    100% {
        background-position: 468px 0
    }
}

@-webkit-keyframes kilau {
    0% {
        background-position: -468px 0
    }
    100% {
        background-position: 468px 0
    }
}

@-moz-keyframes kilau {
    0% {
        background-position: -468px 0
    }
    100% {
        background-position: 468px 0
    }
}

@keyframes loading {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes loading {
    0% {
        -webkit-transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg)
    }
}

@-moz-keyframes loading {
    0% {
        -webkit-transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes putar {
    from {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

@-webkit-keyframes putar {
    from {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

@-moz-keyframes putar {
    from {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

@keyframes zoom {
    0% {
        transform: scale(0)
    }
    100% {
        transform: scale(1)
    }
}

@-webkit-keyframes zoom {
    0% {
        transform: scale(0)
    }
    100% {
        transform: scale(1)
    }
}

@-moz-keyframes zoom {
    0% {
        transform: scale(0)
    }
    100% {
        transform: scale(1)
    }
}

@keyframes kubus {
    0% {
        transform: translateY(0) rotate(0);
        opacity: 1;
        border-radius: 0
    }
    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%
    }
}

@-webkit-keyframes kubus {
    0% {
        transform: translateY(0) rotate(0);
        opacity: 1;
        border-radius: 0
    }
    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%
    }
}

@-moz-keyframes kubus {
    0% {
        transform: translateY(0) rotate(0);
        opacity: 1;
        border-radius: 0
    }
    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%
    }
}

@media screen and (max-width:1280px) {
    #aksen:checked~.aksen-warna,
    .igniel {
        margin: 0
    }
    header {
        margin-bottom: 1.25rem
    }
    .logo-ikon:before {
        content: '';
        background: url('/assets/logo/logo-ava.png') center/contain no-repeat;
        filter: var(--filter);
        -webkit-filter: var(--filter);
        height: 1.5rem;
        margin: auto;
        max-width: 21px;
        width: auto;
        transition: height .3s, filter .3s, -webkit-filter .3s, width .3s
    }
    a.logo-ikon:after {
        content: 'Dotycat';
        bottom: 0;
        left: 2.75rem;
        line-height: 1.75rem;
        top: 0
    }
    .igniel {
        max-width: 100%;
        padding: 0
    }
    .kiri {
        background-color: var(--postBg);
        height: 100vh;
        max-width: 65px;
        min-width: 63px;
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        transition: .3s;
        width: auto;
        z-index: 3
    }
    .kiri-bungkus {
        padding: 2rem 1rem
    }
    .kiri-isi {
        position: static;
        top: 0
    }
    .cari {
        margin-bottom: 0
    }
    .kiri .cari-ikon {
        position: static;
        text-align: center
    }
    .cari-ikon svg {
        height: 1.5rem;
        width: 1.5rem
    }
    .cari-input {
        border: 0;
        left: 2.75rem;
        margin-top: .5rem;
        width: 200px
    }
    .cari2 {
        transition: top .3s
    }
    #isitopik:checked~ul.topik-isi,
    .ikuti-tautan,
    .topik .list:hover ul.topik-isi {
        transition: .3s
    }
    .cari2.tutup {
        top: -10rem
    }
    .cari2 .cari-input {
        left: unset;
        margin-top: 0;
        width: 100%
    }
    .cari-input::placeholder {
        opacity: .5
    }
    .cari-input,
    .cari-input:focus {
        padding: 1rem 3rem 1rem 1.25rem
    }
    .cari-input:focus,
    .cari:hover .cari-input {
        border: 0
    }
    .kiri .cari-reset {
        bottom: 0;
        right: -180px;
        top: -3px;
        z-index: 1
    }
    .kiri .cari-reset .bulat {
        fill: #fff
    }
    .kiri .cari-reset .silang {
        stroke: var(--aksen)
    }
    .kiri .cari-input:focus~.cari-reset {
        right: -195px
    }
    .kiri-bawah {
        align-items: center;
        margin-right: 0;
        overflow: unset;
        padding: 0;
        position: static
    }
    .topik .kiri-menu {
        max-width: 0;
        padding: 0;
        position: static
    }
    .kiri-menu-teks {
        left: 1.25rem
    }
    .topik .list {
        cursor: pointer
    }
    .topik-label.aktif:before {
        left: -1.25rem
    }
    .aksen-warna,
    ul.topik-isi {
        background-color: var(--bodyBg);
        box-shadow: 0 10px 20px 2px rgba(0, 0, 0, .15), 0 6px 20px 5px rgba(0, 0, 0, .1), 0 8px 10px -5px rgba(0, 0, 0, .05);
        border-radius: 7px;
        left: 2.25rem;
        margin-bottom: 1rem;
        margin-left: 0;
        max-height: 100vh;
        padding: .5rem 1.25rem;
        top: 3rem;
        transition: .3s
    }
    .ikuti-tautan:after,
    .topik-isi a,
    a.logo-ikon:after {
        white-space: nowrap
    }
    .topik-no {
        margin-left: 3rem;
        margin-right: 0
    }
    .mode-label .switch,
    .tampilan {
        align-items: center;
        flex-direction: column
    }
    .aksen-label i,
    .ham-ikon,
    .kiri-atas,
    .logo svg,
    footer,
    svg.buka {
        display: none
    }
    .aksen-warna {
        justify-content: unset;
        left: 2.5rem;
        width: auto
    }
    .aksen-pilih:not(:last-child) {
        margin-right: 1rem
    }
    #mode:checked~.mode-label .switch:after {
        transform: translateY(100%)
    }
    .ikuti-tautan {
        border-radius: 25px;
        padding: .5rem
    }
    .ikuti-tautan:after {
        content: 'Ikuti';
        left: 3rem
    }
    .ikuti svg {
        margin-left: 0
    }
    .bawah,
    .konten {
        margin: 1rem 2rem 2rem
    }
    .konten,
    .page .konten {
        max-width: calc(100% - 4rem)
    }
    .tengah {
        margin-right: 2rem
    }
    .tengah,
    .thm .tengah {
        max-width: 100%
    }
    .ikuti-tautan:after,
    .kiri .cari-input,
    .kiri-menu-teks,
    a.logo-ikon:after {
        background-color: var(--aksen);
        border-radius: 5px
    }
    #aksen:checked~.aksen-label .kiri-menu-teks,
    #isitopik:checked~.kiri-menu .kiri-menu-teks,
    .aksen-label:hover .kiri-menu-teks,
    .ikuti-tautan:after,
    .kiri .cari-input,
    .kiri .cari-input::placeholder,
    .kiri-menu-teks,
    .list:hover .kiri-menu-teks,
    a.logo-ikon:after {
        color: #fff
    }
    .cari2,
    .kiri .cari-ikon,
    .logo-ikon:before {
        display: block
    }
    .kiri .cari-ikon,
    .kiri-menu,
    .mode-label,
    .topik .list {
        padding: 1.25rem 0
    }
    .ikuti,
    .kiri-menu,
    .logo,
    .tampilan,
    .topik .list {
        position: relative
    }
    .ikuti-tautan:hover::after,
    .kiri .cari-input:focus~.cari-ikon,
    .kiri .cari:hover .cari-input,
    .tampilan:hover>.aksen-warna,
    .topik .list:hover ul.topik-isi,
    a.logo-ikon:hover::after {
        opacity: 1;
        visibility: visible
    }
    .ikuti-tautan:after,
    .kiri .cari-input,
    .kiri-menu-teks,
    .mode-label:hover~.aksen-warna,
    a.logo-ikon:after,
    ul.topik-isi {
        opacity: 0;
        visibility: hidden
    }
    .kiri-atas,
    header {
        margin-left: 0;
        margin-right: 0
    }
    .aksen-warna,
    .ikuti-tautan:after,
    .kiri .cari-input,
    .kiri-menu-teks,
    a.logo-ikon:after,
    ul.topik-isi {
        position: absolute;
        z-index: 1
    }
    .ikuti-tautan:after,
    .kiri-menu-teks,
    a.logo-ikon:after {
        display: table;
        font-size: .85rem;
        font-weight: 400;
        overflow: unset;
        padding: 0 .5rem;
        transition: opacity .3s ease-out, visibility .3s ease-out
    }
    .kiri-menu:hover .kiri-menu-teks,
    .list:hover .kiri-menu-teks {
        max-width: 100%;
        opacity: 1;
        visibility: visible
    }
}

@media screen and (max-width:1024px) {
    .snippet {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical
    }
}

@media screen and (max-width:900px) {
    [data-layout=list] .kustom-post,
    [data-layout=list] .thm .blog-posts {
        grid-template-columns: repeat(1, 1fr)
    }
    .konten {
        grid-template-areas: 'baliho baliho' 'tengah tengah' 'kanan kanan';
        margin-left: 2rem
    }
    .sch .konten {
        grid-template-areas: 'tengah tengah' 'kanan kanan'
    }
    .tengah {
        margin-right: 0
    }
    .kanan {
        margin-top: 2rem;
        width: 100%
    }
    .kanan,
    .multi .kanan {
        position: static
    }
    .baliho .widget-konten {
        margin-bottom: 1rem
    }
    .cari-isi {
        margin-bottom: 0
    }
    .totop {
        right: 2rem
    }
    .adblock-bungkus,
    .bagikan-bungkus,
    .beli-bungkus,
    .sk-bungkus {
        max-width: 90vw
    }
    .prlx2 {
        left: 2rem
    }
    .beli-utama {
        column-gap: 2rem
    }
    .card-isi {
        max-height: unset;
        overflow: unset
    }
}

@media screen and (max-width:768px) {
    html:not([data-layout=list]) .post-info.tema {
        flex-wrap: wrap
    }
    html:not([data-layout=list]) .post-info.tema>* {
        flex: 1 0 100%
    }
    html:not([data-layout=list]) .post-info .harga {
        margin-bottom: 1rem;
        text-align: center
    }
    .banner {
        grid-template-areas: 'banner1 banner2' 'banner4 banner3';
        grid-template-columns: 1.25fr 1fr;
        grid-template-rows: auto auto
    }
    .banner-info-2 {
        display: none
    }
    .adblock-bungkus,
    .bagikan-bungkus,
    .beli-bungkus,
    .sk-bungkus {
        top: -5vh
    }
    .beli-alter-go {
        flex-direction: column;
        gap: 1.5rem
    }
    .beli-go-tele {
        width: 100%
    }
    .page .donasi-isi {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media screen and (max-width:680px) {
    html:not([data-layout=list]) .kustom-post,
    html:not([data-layout=list]) .thm .blog-posts {
        grid-template-columns: repeat(2, 1fr)
    }
    .beli-bungkus {
        margin-left: 0
    }
    .beli-utama {
        gap: 2rem;
        grid-template-areas: 'beli-konten' 'beli-trx' 'beli-mp' 'beli-go';
        grid-template-columns: unset
    }
    .beli-konten {
        display: flex;
        justify-content: space-between;
        gap: 2rem
    }
    .beli .judul {
        margin-bottom: 0
    }
    .beli-opt {
        gap: .75rem
    }
}

@media screen and (max-width:600px) {
    .donasi-isi,
    .page .donasi-isi,
    .terkait ul {
        grid-template-columns: repeat(1, 1fr)
    }
    .igniel {
        margin: 0 1.5rem 1.5rem;
        padding: 0
    }
    .kiri {
        bottom: 0;
        left: 0;
        max-width: 70vw;
        min-width: 320px;
        overflow: hidden auto;
        position: fixed;
        right: 0;
        top: 0;
        transform: translateX(-100vw);
        -webkit-transform: translateX(-100vw);
        -ms-transform: translateX(-100vw);
        transition: .3s;
        z-index: 4
    }
    [dir=rtl] .kiri {
        transform: translateX(100vw);
        -webkit-transform: translateX(100vw);
        -ms-transform: translateX(100vw)
    }
    .kiri-bungkus {
        height: auto;
        padding: 2rem 0 2rem 2rem
    }
    .kiri-bawah {
        height: calc(100vh - 105px);
        align-items: unset;
        margin-top: 0;
        max-height: unset
    }
    header {
        margin-bottom: 2rem
    }
    .logo svg {
        max-height: 30px;
        width: auto
    }
    ul.topik-isi {
        flex-basis: 100%;
        margin-left: 1.5rem;
        padding: 0 2rem 0 0;
        top: unset;
        width: 100%
    }
    .aksen-label i,
    .kiri-menu-teks,
    .komen-balas .komen-isi {
        margin-left: 1rem
    }
    .aksen-warna,
    ul.topik-isi {
        left: unset;
        margin-bottom: 0;
        max-height: 0;
        transition: max-height .3s, margin-bottom .3s linear
    }
    .topik .list {
        padding: 0
    }
    #isitopik:checked~ul.topik-isi {
        transition: max-height .5s, margin-bottom .3s linear
    }
    .topik .kiri-menu {
        max-width: 100%;
        position: relative
    }
    .aktif:before {
        left: -1.5rem
    }
    .topik-label.aktif:before {
        left: -3rem
    }
    .kiri-menu-teks {
        color: inherit;
        font-size: 1rem;
        font-weight: 500;
        left: unset;
        overflow: hidden;
        padding: 0
    }
    .mode-label .switch,
    .tampilan {
        flex-direction: row
    }
    .tampilan:hover>.aksen-warna {
        opacity: 0;
        visibility: hidden
    }
    .aksen-warna {
        max-height: 0;
        margin-bottom: 0;
        margin-top: 0;
        padding: 0;
        width: 100%;
        top: unset;
        transition: max-height .1s linear, margin-bottom .3s linear, margin-top .3s linear, opacity .3s linear, visibility .3s linear
    }
    #aksen:checked~.aksen-warna {
        margin-bottom: 1rem;
        margin-top: .5rem;
        transition: max-height .5s linear, margin-bottom .3s linear, margin-top .3s linear, opacity .3s linear, visibility .3s linear
    }
    #mode:checked~.mode-label .switch:after {
        transform: translateX(100%)
    }
    .aksen-warna,
    .kiri-menu-teks,
    ul.topik-isi {
        background-color: transparent;
        border-radius: 0;
        box-shadow: unset;
        position: static;
        z-index: unset
    }
    .kiri-bawah .ikuti svg {
        height: 1.5rem;
        width: 1.5rem
    }
    .komen-balas .komen-foto,
    .komen-igniel>.komen-foto img {
        height: 30px;
        min-height: 30px;
        min-width: 30px;
        width: 30px
    }
    .ikuti-tautan {
        border-radius: 10px
    }
    .ikuti svg {
        margin-left: -1rem
    }
    footer {
        padding-bottom: 2.75rem
    }
    #ham:checked~.kiri {
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0)
    }
    .konten {
        margin: 0
    }
    .konten,
    .page .konten {
        max-width: 100%
    }
    .page .tengah {
        margin-right: 0
    }
    .bawah {
        margin: 3rem 0 0
    }
    .cari2 .cari-input,
    .cari2 .cari-input:focus {
        padding: 1.25rem 4rem
    }
    .single .cari2 {
        margin-bottom: .5rem
    }
    .feat-artikel {
        flex-direction: column
    }
    .feat-gambar img {
        width: 100vw
    }
    .terkait ul {
        gap: 1.5rem
    }
    .bagikan-gambar {
        max-width: 75px
    }
    .bagikan-medsos {
        gap: 1rem
    }
    .komen-foto {
        flex-basis: 36px
    }
    .komen-foto,
    .komen-foto img {
        height: 36px;
        min-height: 36px;
        min-width: 36px;
        width: 36px
    }
    .komen-igniel>.komen-foto:after {
        height: 34px;
        min-height: 34px;
        min-width: 34px;
        width: 34px
    }
    .komen-igniel>.komen-foto:before {
        background-size: .5rem;
        height: .75rem;
        width: .75rem
    }
    .komen-balas .komen-foto {
        flex-basis: 28px
    }
    .komen-balas .komen-igniel>.komen-foto:after {
        height: 28px;
        min-height: 28px;
        min-width: 28px;
        width: 28px
    }
    .komen-balas .komen-igniel>.komen-foto img {
        height: 24px;
        min-height: 24px;
        min-width: 24px;
        width: 24px
    }
    .komen-balas .komen-igniel>.komen-foto:before {
        background-position-y: 1px;
        background-size: .5rem;
        height: .65rem;
        right: -.3rem;
        width: .65rem
    }
    .a-reply {
        padding: .4rem .6rem
    }
    .totop {
        right: 1.5rem
    }
    .parallax {
        left: -3rem;
        width: calc(100% + 6rem)
    }
    .prlx2 {
        left: 0
    }
    .ignielGambar .copyright {
        font-size: .75rem;
        line-height: 1.5rem;
        padding: .025rem .5rem
    }
    #aksen:checked~.aksen-label .kiri-menu-teks,
    #isitopik:checked~.kiri-menu .kiri-menu-teks,
    .aksen-label:hover .kiri-menu-teks,
    .list:hover .kiri-menu-teks {
        color: var(--aksen)
    }
    .aksen-label i,
    .igniel,
    .konten,
    .logo svg,
    footer,
    svg.buka {
        display: block
    }
    .ham-ikon,
    .kiri-menu-teks {
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-box;
        display: -webkit-flex
    }
    .ikuti-tautan:after,
    .kiri-atas,
    .logo-ikon:before,
    a.logo-ikon:after {
        display: none
    }
    .banner,
    .kustom-post,
    html:not([data-layout=list]) .blog-posts {
        gap: 15px
    }
    .komen-baru,
    .komen-bungkus>li:not(:last-child),
    .komen-formulir,
    .komen-halaman,
    .post .feat,
    .widget-konten {
        margin-bottom: 1.5rem
    }
    .kiri-atas,
    .kiri-bawah,
    header {
        padding-right: 2rem
    }
    .ikuti-tautan,
    .kiri-menu,
    .topik .kiri-menu {
        padding: 1rem 0
    }
    #ham:checked~.ekstra .cover,
    #ham:checked~.kiri,
    .cari-input,
    .judul-blog,
    .kiri-bawah,
    .kiri-menu-teks,
    ul.topik-isi {
        opacity: 1;
        visibility: visible
    }
    .bagikan-bungkus,
    .beli-bungkus,
    .sk-bungkus {
        max-width: 90vw
    }
    .bagikan-bungkus,
    .sk-bungkus {
        margin-left: 0
    }
}

@media screen and (max-width:568px) {
    .banner {
        grid-template-columns: 1.75fr 1fr
    }
    .banner-1 .banner-info {
        font-size: 1.2rem
    }
    .beli-isi,
    .sk-isi {
        padding: 1rem 1.5rem 1.25rem
    }
}

@media screen and (max-width:480px) {
    .banner {
        grid-template-areas: 'banner1 banner1' 'banner4 banner4' 'banner3 banner2';
        grid-template-columns: 1fr 1fr
    }
    .banner>* {
        padding: 1.5rem
    }
    .banner-2 {
        display: block;
        position: relative;
        text-align: left
    }
    .banner-2 .banner-ikon {
        position: absolute;
        margin-bottom: 0;
        right: 1rem;
        top: .25rem
    }
    .banner-2 svg {
        height: 4rem;
        width: 4rem
    }
    .igniel {
        margin: 0 1rem 1rem
    }
    .komen-baru,
    .komen-bungkus>li:not(:last-child),
    .komen-formulir,
    .komen-halaman,
    .post .feat,
    .widget-judul,
    .widget-konten {
        margin-bottom: 1rem
    }
    .single .cari2 {
        margin-bottom: 0
    }
    .feat-isi {
        padding: .75rem 1.25rem
    }
    .feat-simple-judul {
        display: none
    }
    .feat-simple-teks {
        margin-left: .75rem
    }
    .banner,
    .kustom-post,
    html:not([data-layout=list]) .blog-posts {
        gap: 10px
    }
    .post-info {
        margin-bottom: .75rem
    }
    .card-isi,
    .feat-bungkus,
    .komen-formulir,
    .komen-isi,
    .single .post-artikel,
    .terkait-isi,
    .trending-isi {
        padding: .75rem 1rem
    }
    .totop {
        height: 2.5rem;
        right: 1rem;
        width: 2.5rem
    }
    .totop:after {
        height: calc(2.5rem - 10px);
        width: calc(2.5rem - 10px)
    }
    .totop svg {
        min-height: 1.75rem;
        min-width: 1.75rem
    }
    .adblock-isi {
        flex-direction: column
    }
    .adblock-ikon {
        align-self: center;
        margin-right: 0
    }
    .unduh {
        grid-template-areas: 'unduh-judul' 'unduh-gambar' 'unduh-teks';
        grid-template-columns: auto;
        justify-items: center
    }
    .unduh-teks>:first-of-type:not(.unduh-harga) {
        margin-right: 1rem
    }
    .parallax {
        left: -2rem;
        width: calc(100% + 4rem)
    }
    .card-isi {
        padding-bottom: 1rem
    }
    .step {
        padding-inline-start: 1rem
    }
    .bagikan-teks {
        -webkit-line-clamp: 3
    }
    .bagikan-medsos {
        grid-template-columns: repeat(4, 1fr)
    }
    .bagikan-medsos li:nth-child(5) {
        grid-area: 2/2/3/3
    }
    .bagikan-medsos li:nth-child(6) {
        grid-area: 2/3/3/4
    }
}

@media screen and (max-width:420px) {
    .post-info .harga span:first-child {
        font-size: 1.15rem
    }
}

@media screen and (max-width:360px) {
    body,
    html {
        font-size: 13px
    }
    .kiri {
        min-width: 280px
    }
    .beli .judul {
        font-size: 1.25rem
    }
    .beli-alternatif-back,
    .beli-go label {
        font-size: .85rem
    }
    .bagikan-gambar {
        max-width: 50px
    }
}

@media screen and (max-width:320px) {
    body,
    html {
        font-size: 12px
    }
}