/*
Theme Name: Oketheme
Version: 4.2
Theme URI: http://www.oketheme.com
Author: Tri Yuli Kurniawan
Author URI: http://www.oketheme.com
Description: Tema Resmi Website Oketheme.com
Tags: oketheme, blue #36A2EB, green #4BC0C0, orange #FF5C26
*/

/* ROOT VARIABLE */

:root {
    --color1: #36A2EB;
    --color2: #4BC0C0;
    --color3: #FF5C26;
    --colorborder: #E7EFFB;
    --colorbg: #F9FCFF;
    --colorwhite: #FFFFFF;
    --colorgrey: #AAAAAA;
    --colortext: #555555;
    --colordark: #0B0D14;
    --maxwidth: 1300px;
    --bradius: 8px;
    --x2bradius: calc(var(--bradius) * 2);
    --x10bradius: calc(var(--bradius) * 10);
    --autopad: calc((100% - var(--maxwidth)) / 2);
}

/* #region: RESET */
html { scroll-behavior: smooth; }
body {
    font-family: Poppins;
    font-size: 16px;
    line-height: 1.8em;
    color: var(--colortext);
    background: #FFF;
    margin: 0;
}

*,
:after,
:before {
    box-sizing: border-box;
}

ul,
li {
    margin: 0;
    padding: 0;
}

/* LINK */

a{
    color: var(--color1);
    transition: .5s;
}

a:hover {
    color: var(--color3);
}

a:active,
a:hover,
a:link,
a:visited {
    text-decoration: none;
}
a:focus {
    outline: none;
    color: var(--color1);
}

/* HEADING */

h1 {
    font-size: 1.6em;
}

h2 {
    font-size: 1.4em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5 {
    font-size: 1em;
}

h1,
h2,
h3,
h4,
h5 {
    margin: 10px 0;
    font-weight: 600;
    line-height: initial;
    color: var(--colordark);
}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
    margin-top: 0;
}

/* FORM, INPUT, SELECT, TEXTAREA, RADIO & BUTTON */
input,
button,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit
}

input,
select,
textarea {
    padding: .5em 1em;
    outline: 0;
    background: #FFF;
    border: 1px solid var(--colorborder);
    border-radius: var(--bradius);
    box-shadow: 0 2px 0 0 rgba(0,0,0,.027);
    line-height: normal;
}

/* Button */
.bttn:focus,
.button-primary:focus,
input[type='submit']:focus,
button:focus {
    outline: 0;
    color: var(--colorwhite);
}
.bttn,
.button-primary,
input[type='submit'],
button {
    cursor: pointer;
    padding: .5em 1.2em;
    background: var(--color1);
    border: none;
    outline: 0;
    color: var(--colorwhite);
    transition: .3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: normal;
    font-family: inherit;
    font-size: inherit;
    border-radius: var(--bradius);
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.bttn._ghost {
    background: transparent;
    border: 1px solid var(--colorborder);
    color: var(--color1);
    font-weight: 500;
    overflow: hidden;
}
.bttn._ghost:hover:after {
    background: var(--color1);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
    opacity: .1;
}
.bttn._ghost:hover {
    color: var(--color1);
    border-color: var(--color1);
}
.bttn:before,
.button-primary:before,
input[type='submit']:before,
button:before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.15);
    transform: translateX(-110%) skewX(-20deg);
    transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);;
}
.bttn:hover::before ,
.button-primary:hover::before ,
input[type='submit']:hover::before ,
button:hover::before  { 
    transform: translateX(110%) skewX(-20deg);
}
.bttn:hover,
.button-primary:hover,
.form-submit input:hover,
button:hover {
    color: var(--colorwhite);
    transform: translateY(-2px);
}

input[type=text]:focus,
select:focus,
textarea:focus {
    background: #FCFCFC;
}

textarea::placeholder,
input::placeholder {
    color: #AAA;
}

/* BLOCKQUOTE & CODE */
blockquote {
    font-size: 110%;
    width: 95%;
    margin: 20px auto;
    font-style: italic;
    padding: 10px 40px;
    border: 1px solid var(--colorborder);
    position: relative;
    background: var(--colorbg);
    border-radius: var(--bradius);
}

blockquote::before {
    font-family: arial, sans-serif;
    content: "\201C";
    color: var(--color1);
    font-size: 6em;
    position: absolute;
    left: 0;
    top: 15px;
}

blockquote::after {
    content: '';
}

code {
    background: var(--colordark);
    color: var(--colorborder);
    padding: 20px;
    display: block;
    border-radius: var(--bradius);
}

/* WP RESET IMAGE & CAPTION */

.wp-caption {
    width: auto!important;
}
img,
img.alignnone,
p img {
    max-width: 100%;
}

img {
    height: auto;
}

a img {
    border: none;
}

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img.aligncenter {
    display: block;
    margin: 10px auto;
}

img.alignright {
    display: inline;
    margin: 0 0 5px 5px;
}

img.alignleft {
    display: inline;
    margin: 0 5px 5px 0;
}

.wp-caption img {
    margin: 0;
    padding: 0;
    border: none;
}

.wp-caption p.wp-caption-text {
    font-style: italic;
    font-size: .8em;
    padding: 0;
    background: #ffffff90;
    margin: 0;
    text-align: center;
}

.wp-caption.aligncenter {
    display: block;
    margin: 10px auto;
}

.wp-caption.alignleft {
    float: left;
    margin: 5px 10px 5px 0;
}

.wp-caption.alignright {
    float: right;
    margin: 5px 0 5px 10px;
}

/* #endregion RESET */

/* #region: ANIMATIONS */

/* BLINKER */
@keyframes blinker {
    50% {
        opacity: 0;
    }
}
.blink {
    animation: blinker 1s linear infinite;
}

/* PULSE GLOW */
@keyframes pulse-glow {
    0%, 100% { transform: scale(1) translateX(20%); opacity: .1; }
    50% { transform: scale(3) translateY(-40%); opacity: 0.05; }
}

/* FADE */
@keyframes fadeDown {
    from { opacity:0; transform:translateY(-14px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeUp {
    from { opacity:0; transform:translateY(22px); }
    to   { opacity:1; transform:translateY(0); }
}

/* FLOATING IN */
@keyframes floatingIn{
    from{
        opacity: 0;
        transform: translateY(20px) scale(.95);
    }
    to{
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* FLOAT */
@keyframes float {
    0%,100% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
}

/* ORBFLOAT */
@keyframes orbFloat {
    0%,100% { opacity:.2; transform:translateX(-50%) translateY(0); }
    50%      { opacity:.5;  transform:translateX(-50%) translateY(22px); }
}

/* SHIMMER */
@keyframes shimmer {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}
.shimmer {
    color: transparent;
    background: linear-gradient(120deg, var(--color1) 10%, var(--color2) 55%, var(--color1) 90%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

/* MOVEINRIGT */
@keyframes moveInRight {
    0% {
        opacity: 0;
        transform: translateX(-50px)
    }

    80% {
        transform: translateX(10px)
    }

    100% {
        opacity: 1;
        transform: translateX(0px)
    }
}

/* CALLOUT */
@keyframes button-callout {
    0% {
        opacity: 0
    }

    40% {
        opacity: 0;
        transform: translateX(100%) perspective(50em) rotateY(50deg)
    }

    to {
        opacity: 1;
        visibility: visible
    }
}
.callout {
    animation: button-callout 1s ease-in-out;
    opacity: 1;
    visibility: visible;
}

/* START: Ambient Animation */
@media (prefers-reduced-motion: no-preference) {
    @keyframes animateAmbient {
        0% {
        transform: rotate(0deg) translateX(.5em) rotate(0deg) scale(1.12);
        }
        100% {
        transform: rotate(360deg) translateX(2em) rotate(-360deg) scale(1.12);
        }
    }
}

/* #endregion ANIMATIONS */

/* #region: FONTS SIZE & COLOR */
.small {
    font-size: .8em!important;
}
.medium {
    font-size: .9em!important;
}
.big {
    font-size: 1.4em!important;
    line-height: 1.2;
}
.jumbo {
    font-size: 2.7em!important;
    line-height: 1.2;
}
.hidden {
    font-size: 0;
}

.bgreen {
    background: var(--color2);
}
.borange {
    background: var(--color3);
}

.tblue {
    color: var(--color1);
}
.tgreen {
    color: var(--color2);
}
.torange {
    color: var(--color3);
}
.tgrey {
    color: #CCCCCC;
}
.twhite {
    color: #FFF!important;
}
.error,
.tred {
    color: red
}
.stabilo {
    border-radius: .5em 0 1em 0;
    padding: 0 5px 0 5px;
    margin-right: -5px;
    background-image: linear-gradient(
        -100deg,
        rgba(255, 224, 0, 0.1),
        rgba(255, 224, 0, 0.5) 95%,
        rgba(255, 224, 0, 0.1)
    );
    font-style: normal;
    text-shadow: 0px 1px 1px #fff;
}
/* #endregion FONTS */

/* #region: MIX */
/* BOX */
.info,
.notice,
.notis,
.sukses,
.warning {
    width: 100%;
    padding: 15px 20px;
    background: var(--colorbg);
    border: 1px solid var(--colorborder);
    overflow: hidden;
    border-radius: var(--bradius);
}
.notice,.notis {
    background: #FFFFEC;
    border-color: #FFB973;
    color: #FF8000;
}
.warning {
    background: #ffe2e2;
    border-color: #f7b1b1;
    color: red;
}
.sukses {
    background: #D9F4DB;
    border-color: #4CAF50;
    color: #4CAF50;
}

/* EXTRA */
.latin {
    font-size: 1.1em;
    font-style: italic;
    padding-right: 10px;
    margin-right: -10px;
}
.glyphicon,
[class*=el-icon-] {
    font-size: 80%;
    margin-right: 2px;
}
.rounded {
    border-radius: var(--bradius);
}
.circle {
    border-radius: 50%;
}

/* MARGIN */
.nm > * {
    margin: 0 !important;
}
.nomargin {
    margin: 0 !important;
}
.nomargin-top {
    margin-top: 0 !important;
}
.nomargin-bottom {
    margin-bottom: 0 !important;
}
.center {
    text-align: center;
}
.coret {
    text-decoration: line-through;
}
/* #endregion: MIX */

/* #region: LAYOUT */

/* FLEX */
.flex {
    display: flex;
}
.flex.column {
    flex-direction: column;
}

/* GRID */
.grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}
.grid.two-col {
    grid-template-columns: repeat(2, 1fr);
}
.grid.three-col {
    grid-template-columns: repeat(3, 1fr);
}
.grid.four-col {
    grid-template-columns: repeat(4, 1fr);
}

/* GAP */
.gap-5 {
    gap: 5px;
}
.gap-10 {
    gap: 10px;
}
.gap-15 {
    gap: 15px;
}
.gap-20 {
    gap: 20px;
}
.gap-30 {
    gap: 30px;
}
.gap-40 {
    gap: 40px;
}
.gap-50 {
    gap: 50px;
}

/* ROW */
.row {
    display: flex;
    flex-wrap: wrap;
}
.justify-center {
    justify-content: center;
}
.align-items-center {
    align-items: center;
}

/* #endregion */

/* #region: CARD */
.card {
    background: var(--colorwhite);
    border: 1px solid var(--colorborder);
    transition: all .5s ease;
    border-radius: var(--x2bradius);
    overflow: hidden;
    padding: 20px;
    cursor: default;
    position: relative;
    display: flex;
    flex-direction: column;
}
.card.no-padding {
    padding: 0;
}
.card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color1), var(--color2));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.card:hover::before { transform: scaleX(1); }
.card:hover {
    transform: translateY(-6px);
}

.card ._pigura {
    width: 100%;
    height: 260px;
    overflow: hidden;
    display: block;
    position: relative;
}
.card ._pigura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .35s ease;
}
.card:hover ._pigura img {
    transform: scale(1.1);
}

.card ._pigura ._overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all .35s ease;
}
.card ._pigura ._overlay:before {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--colorwhite);
    content: '';
    opacity: 0.7;
}
.card:hover ._pigura ._overlay {
    opacity: 1;
}
.card ._pigura ._overlay ._ghost {
    background: #ffffffcc;
}

.card ._pigura ._badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    font-size: .7em;
    line-height: normal;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #fff;
    background: var(--colordark);
    padding: 4px 14px;
    border-radius: var(--x10bradius);
}
.card ._pigura ._badge._new {
    background: var(--color3);
}
.card ._pigura ._badge._popular {
    background: var(--color2);
}

.card ._content {
    display: flex;
    gap: 5px;
    flex-direction: column;
    flex: 1;
    position: relative;
}
.card.no-padding ._content {
    padding: 20px;
    border-top: 1px solid var(--colorborder);
}
.card ._content ._cat {
    font-size: .7em;
    color: var(--color1);
    text-transform: uppercase;
    margin: -5px 0!important;
}
.card ._content ._cat a:after {
    content: ' / ';
    font-size: .8em;
    color: var(--color1);
}
.card ._content ._cat a:last-child:after {
    content: '';
}
.card ._content h3 a {
    color: var(--colordark);
}
.card ._content ._desc {
    line-height: 1.6em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}
.card ._content ._desc > * {
    margin: 0;
}

.card ._footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid var(--colorborder);
    margin-top: 15px!important;
}

.card ._content ul li {
    margin: 0 0 5px 20px;
}
.card ._content ul li._no {
    text-decoration: line-through;
    color: #c2c9d1;
}
.card ._content ul li._yes {
    font-weight: 500;
    color: var(--color2);
}

/* CARD: LIST */
.card._list {
    flex-direction: row;
    gap: 20px;
    align-items: center;
}
.card._list ._pigura {
    width: 150px;
    height: 150px;
    flex-shrink: 0;
    border-radius: var(--x10bradius);
    border: 1px solid var(--colorborder);
}

/* CARD: THEME */
.card._theme ._pigura {
    height: 340px;
}
.card._theme ._pigura img {
    object-position: top;
}
.card._theme:hover ._pigura img {
    filter: blur(3px);
}

.card._theme ._content h3 {
    font-size: 1.5em;
}
.card._theme ._pricing ._start {
    font-size: .8em;
}
.card._theme ._pricing {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: normal;
}
.card._theme ._pricing ._start b {
    text-decoration: line-through;
    color: #c2c9d1;
    font-size: 1.1em;
}
.card._theme ._pricing ._start ._discount {
    position: absolute;
    top: 20px;
    right: 20px;
    font-style: normal;
    border: 1px solid #ff5c2638;
    background: #ff5c2614;
    line-height: 1em;
    padding: 5px 10px;
    border-radius: var(--x10bradius);
    color: var(--color3);
    text-transform: uppercase;
}
.card._theme ._pricing ._price b {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--colordark);
}

/* GROUP CARD */
.group-card {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--colorborder);
    border: 1px solid var(--colorborder);
    border-radius: var(--x2bradius);
    overflow: hidden;
    z-index: 1;
}
.group-card ._card > * {
    margin: 0;
}
.group-card ._card {
    position: relative;
    padding: 30px;
    display: flex;
    background: var(--colorbg);
    flex-direction: column;
    gap: 15px;
    overflow: hidden;
    cursor: default;
    transition: background .3s ease;
}
.group-card ._card:hover { background: var(--colorwhite); }
.group-card ._card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color1), var(--color2));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.group-card ._card:hover::before { transform: scaleX(1); }
.group-card ._card ._icon {
    width: 56px; 
    height: 56px;
    border-radius: var(--x10bradius);
    border: 1px solid var(--color1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .3s, border-color .3s, transform .3s;
    flex-shrink: 0;
}
.group-card ._card:hover ._icon {
    border-color: var(--color3)!important;
    transform: translateY(-3px);
}
.group-card ._card ._icon svg {
    width: 26px;
    height: 26px;
    stroke: var(--color1);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .3s;
}
.group-card ._card:hover ._icon svg {
    stroke: var(--color3)!important;
}
.group-card ._card:nth-child(even) ._icon {
    border-color: var(--color2);
}
.group-card ._card:nth-child(even) ._icon svg {
    stroke: var(--color2);
}
.group-card ._card h3 {
    padding-top: 10px;
}
.group-card ._card ._badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--color1);
    color: var(--color1);
    border-radius: var(--x10bradius);
    padding: 5px 10px;
    line-height: 1.2em;
    font-size: .75em;
    width: fit-content;
    letter-spacing: .2px;
}
.group-card ._card ._badge ._dot {
    width: 6px;
    height: 6px;
    background: var(--color1);
    display: inline-block;
    border-radius: 50%;
}
.group-card ._card:nth-child(even) ._badge {
    border-color: var(--color2);
    color: var(--color2);
}
.group-card ._card:nth-child(even) ._badge ._dot {
    background: var(--color2);
}

/* #endregion */

/* #region: MARQUEE */
.marquee3k ._item {
    display: inline-flex;
    align-items: center;
    gap: 60px;
    padding-right: 60px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: .9em;
    color: var(--colorwhite);
}
.marquee3k ._item:after {
    content: "✦";
    display: block;
    opacity: .5;
}
/* #endregion */

/* #region: TRUST */
.trust {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    z-index: 1;
    animation: fadeUp .8s ease .6s both;
}
.trust._full {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, .018);
    border-top: 1px solid rgba(255, 255, 255, .07);
    grid-template-columns: repeat(4, 1fr);
    padding: 20px var(--autopad);
}
.trust ._item {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}
.trust svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.trust ._item ._label {
    font-size: .9em;
    line-height: normal;
}
.trust ._item ._label b {
    font-size: 1.1em;
    color: var(--colorwhite);
}
/* #endregion */

/* #region: BROWSER */
.browser {
    border-bottom: 1px solid var(--colorborder);
    background: var(--colorwhite);
    padding: 10px 15px;
    display: flex;
    gap: 5px;
    align-items: center;
}
.browser ._dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    opacity: .55;
}
.browser ._dot:nth-child(1) {
    background: #FF5F57;
}
.browser ._dot:nth-child(2) {
    background: #FEBC2E;
}
.browser ._dot:nth-child(3) {
    background: #28C840;
}
.browser ._bar {
    flex: 1;
    height: 10px;
    background: rgba(0, 0, 0, .03);
    border-radius: 3px;
    margin-left: 7px;
}
/* #endregion */

/* #region: SECTION */

section.container {
    position: relative;
    overflow: hidden;
}
section.container.bg-soft {
    background: var(--colorbg);
    border-top: 1px solid var(--colorborder);
    border-bottom: 1px solid var(--colorborder);
}
section.container.bg-linear {
    border-top: 1px solid var(--colorborder);
    background: linear-gradient(to bottom, var(--colorbg), var(--colorwhite));
}
section.container.bg-dark {
    color: var(--colorgrey);
    background: var(--colordark);
}
section.container.bg-dark h1,
section.container.bg-dark h2{
    color: var(--colorwhite);
}
section.container.bg-grid:after {
    position: absolute;
    content: "";
    inset: 0;
    background-image: linear-gradient(var(--colordark) 1px, transparent 1px), linear-gradient(90deg, var(--colordark) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, black, transparent);
    opacity: .05;
}
section.container.bg-dark.bg-grid:after {
    background-image: linear-gradient(var(--colorwhite) 1px, transparent 1px), linear-gradient(90deg, var(--colorwhite) 1px, transparent 1px);
}

section.container > ._header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 40px;
    position: relative;
    z-index: 1;
}
section.container > ._header ._pretitle {
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color3);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
section.container > ._header ._pretitle::before {
    content: '';
    width: 20px;
    height: 2px;
    background: var(--color3);
    border-radius: 2px;
}
section.container > ._header ._pretitle::after {
    content: '';
    width: 20px;
    height: 2px;
    background: var(--color3);
    border-radius: 2px;
}
section.container > ._header ._title {
    font-size: 3.6em;
    font-weight: 700;
    line-height: 1.2em;
    margin-top: 0.5rem;
}
section.container > ._header > p {
    font-size: 1.2em;
    max-width: 800px;
    margin: 10px 0;
}
section.container > ._header._left {
    align-items: flex-start;
    text-align: left;
    margin-left: 0;
}
section.container > ._header._left ._pretitle::after {
    display: none;
}
section.container > ._header._left:has(._more) {
    max-width: 100%;
    padding-right: 200px;
}
section.container > ._header._left ._more {
    position: absolute;
    bottom: 20px;
    right: 0;
}
section.container > ._content {
    position: relative;
    z-index: 1;
}

section.container ._circle-1 {
    position: absolute;
    width: 600px; height: 600px;
    border: 1px solid var(--color1);
    border-radius: 50%;
    top: -150px; left: 500px;
    animation: pulse-glow 28s ease-in-out infinite reverse;
}
section.container ._circle-2 {
    position: absolute;
    width: 700px;
    height: 700px;
    border: 1px solid var(--color2);
    border-radius: 50%;
    bottom: -50px;
    right: -400px;
    animation: pulse-glow 24s ease-in-out infinite;
}
section.container ._circle-3 {
    position: absolute;
    width: 500px; height: 500px;
    border: 1px solid var(--color3);
    border-radius: 50%;
    bottom: -100px; left: -200px;
    animation: pulse-glow 20s ease-in-out infinite;
}
section.container ._orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    width: 700px;
    height: 420px;
    background: radial-gradient(circle, var(--color1) 0%, transparent 70%);
    top: -160px;
    left: 50%;
    transform: translateX(-50%);
    animation: orbFloat 7s ease-in-out infinite;
}
/* #endregion */

/* #region: CONTAINER */
.container {
    width: 100%;
    padding: 80px var(--autopad);
    margin: 0;
}
.container .medium-width {
    max-width: 800px;
    margin: 0 auto;
}

.single.container {
    display: flex;
    gap: 30px;
}
.single.container .column-left {
    position: sticky;
    top: 20px;
    height: fit-content;
}
.single.container .column-right {
    position: sticky;
    flex-shrink: 0;
    width: 400px;
    top: 20px;
    height: fit-content;
}
/* #endregion */

/* #region: HERO CONTAINER */
.hero {
    padding: 120px var(--autopad);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.hero._single {
    min-height: 400px;
    padding: 140px var(--autopad) 90px;
}
.hero._single ._header {
    margin-bottom: 0;
    animation: fadeUp .65s ease .25s both;
}

/* Hero Content */
.hero ._content {
    max-width: 1100px;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 30px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.hero ._content > p {
    font-size: 1.2em;
    animation: fadeUp .65s ease .25s both;
    max-width: 600px;
    margin: 0 auto;
}

/* Hero Badge */
.hero ._badge {
    border: 1px solid var(--color2);
    color: var(--color2);
    padding: 5px 15px;
    border-radius: var(--x10bradius);
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    margin-bottom: -10px;
    font-size: .9em;
    animation: fadeUp .55s ease .05s both;
}
.hero ._badge:before {
    position: absolute;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: var(--color2);
    opacity: .1;
}
.hero ._badge ._dot {
    width: 10px;
    height: 10px;
    background: var(--color2);
    display: inline-block;
    border-radius: 50%;
}

/* Hero Category */
.hero ._cat {
    font-size: .9em;
    color: var(--color2);
    text-transform: uppercase;
    margin-bottom: -15px !important;
}
.hero ._cat a {
    color: var(--color2);
}
.hero ._cat a:after {
    content: ' / ';
    font-size: .8em;
    color: var(--color2);
}
.hero ._cat a:last-child:after {
    content: '';
}

/* Hero Action */
.hero ._action {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 15px;
    gap: 20px;
    /* animation: fadeUp .65s ease .35s both; */
}
.hero .bttn {
    font-size: 1.1em;
    padding: 15px 30px;
    font-weight: 500;
    background: var(--color3);
}
.hero ._ghost {
    border-color: rgba(255, 255, 255, .2);
    background: none;
    color: var(--colorgrey);
}
.hero ._ghost:hover {
    color: var(--colorwhite);
    border-color: rgba(255, 255, 255, .2);
}
.hero ._ghost:hover:before {
    display: none;
}
/* #endregion */

/* ----------------- HOME ----------------- */

/* #region: HEADER */
#header {
    padding: 20px var(--autopad);
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 2;
    grid-template-columns: 270px auto 30px;
    gap: 20px;
    display: grid;
    color: #DDD;
    animation: fadeDown .5s ease both;
}

#header > div {
    display: flex;
    align-items: center;
}

.headlogo a {
    font-size: 250%;
    color: #DDD;
    text-shadow: 3px 3px 0 #000, 6px 6px 0 rgba(0, 0, 0, .05)
}

.headlogo p {
    margin: 0;
    font-size: 110%
}

.headmenu {
    font-size: 90%;
    text-transform: uppercase;
    justify-self: end;
    display: flex;
    align-items: center;
}

/* MENU NAVIGASI */

.toggleMenu {
    display: none;
    color: #FFF;
    cursor: pointer;
    padding: 5px 10px;
    width: 80px;
}

.toggleMenu:hover,
.naviku a:hover {
    color: #FFF9;
}

.naviku>li {
    list-style: none;
    text-align: left;
    float: left;
    padding: 15px 10px;
}

.naviku a {
    padding: 5px 10px;
    color: #FFF;
}

.naviku:after {
    display: table;
    clear: both;
}

.naviku>li>a {
    display: block
}

.naviku ul {
    list-style: none;
    width: 200px
}

.naviku li {
    position: relative
}

.naviku>li>.parent {
    background-image: url(images/downArrow.png);
    padding-right: 25px;
    background-repeat: no-repeat;
    background-position: right
}

.naviku>li.hover>.parent {
    background-image: url(images/upArrow.png);
}

.naviku li ul {
    position: absolute;
    text-transform: none;
    padding: 10px;
    background: rgba(0, 0, 0, .7);
    border-radius: 8px;
    left: calc(100% /2 - 105px);
    top: 100%;
    display: none;
}

.naviku li ul::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    bottom: 100%;
    left: calc(100% /2 - 5px);
    border-width: 0 10px 10px;
    border-color: transparent transparent rgba(0, 0, 0, .7) transparent;
    border-style: solid;
}

.naviku>li.hover>ul {
    display: block
}

.naviku li li a {
    display: block;
    padding: 5px 10px
}

/* HEAD SEARCH */
.headsearch {
    position: relative;
    justify-content: center;
    padding-left: 20px;
}

.headsearch i {
    cursor: pointer;
}
.headsearch form {
    display: none;
    position: absolute;
    right: 5px;
    top: 100%;
    background: rgba(0, 0, 0, .7);
    padding: 15px;
    border-radius: var(--bradius);
    border-top-right-radius: 0;
    width: 260px;
}

.headsearch form::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    bottom: 100%;
    right: 0;
    border-width: 0 0 10px 12px;
    border-color: transparent transparent rgba(0, 0, 0, .7) transparent;
    border-style: solid;
}

.headsearch input {
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-bottom: 1px solid #FFFFFF30;
    color: #FFF;
    background: none;
    border-radius: 0;
    padding: 0 0 10px;
    font-size: .9em;
}
/* #endregion HEADER */

/* #region: HOME - HERO */
#hero._home {
    padding: 140px var(--autopad) 90px;
    min-height: 100vh;
}
#hero h1 {
    font-size: 5.2em;
    line-height: 1.1em;
    font-weight: 700;
    color: var(--colorwhite);
    animation: fadeUp .65s ease .15s both;
}
/* #endregion HERO */

/* #region: HOME - HEADLINE */
#headline > ._header {
    margin-bottom: 30px;
}
#headline .group-card {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 10px!important;
}
#headline .group-card ._card {
    padding: 20px;
    background: var(--colorwhite);
    text-align: center;
    gap: 0;
}
#headline .group-card ._card h3 {
    font-size: 2.6em;
    font-weight: 700;
    line-height: 1.1em;
    padding-top: 0;
}
#headline .group-card ._card h3 span {
    color: var(--color1);
}
#headline .group-card ._card p {
    font-size: .9em;
}
#headline ._rating {
    position: absolute;
    bottom: calc(100% + 50px);
    right: 20px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 110px;
    background: var(--colorwhite);
    border: 1px solid var(--colorborder);
    border-radius: var(--bradius);
    padding: 7px 10px;
    text-align: center;
    animation: float 5s ease-in-out infinite 1s;
}
#headline ._rating b {
    font-size: 1.5em;
    font-weight: 700;
}
#headline ._rating span {
    font-size: .8em;
    line-height: normal;
}
#headline ._visual {
    margin-top: -200px;
    max-width: 600px;
    animation: float 5s ease-in-out infinite 2s;
}
/* #endregion HEADLINE */

/* #region: HOME - FEATURES */
#features-marquee {
    background: var(--color1);
    padding: 10px 0;
    overflow: hidden;
    position: relative;
}

/* #endregion MARQUEE */

/* #region: HOME - PERSONA */
#persona > ._content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
#persona ._card {
    position: relative;
    border-radius: var(--x2bradius);
    border: 1px solid var(--colorborder);
    background: var(--colorwhite);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    overflow: hidden;
    cursor: default;
    transition: .3s ease;
}
#persona ._card:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    background: var(--color1);
    opacity: .07;
}
#persona ._card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color1), var(--color2));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
#persona ._card:hover {
    transform: translateY(-6px);
}
#persona ._card:hover::after { transform: scaleX(1); }
#persona ._card > img {
    max-width: 280px;
    padding: 20px;
}
#persona ._card ._content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--colorwhite);
    flex-grow: 1;
    z-index: 1;
    position: relative;
    overflow: hidden;
}
#persona ._tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .7em;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color1);
    margin-bottom: -20px!important;
}
#persona ._tag:before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--color1);
    border-radius: 10px;
}
#persona h3 {
    font-size: 1.8em;
    line-height: 1.1em;
    font-weight: 700;
}
#persona ul li {
    list-style-type: none;
    display: flex;
    gap: 10px;
    font-size: .9em;
}
#persona ._dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin-top: 5px;
}
#persona ._dot:before {
    position: absolute;
    content: '';
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: var(--color1);
    opacity: .1;
}
#persona li svg {
    width: 10px;
    height: 10px;
    stroke: var(--color1);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

#persona ._card:nth-child(2):before,
#persona ._card:nth-child(2) ._tag:before,
#persona ._card:nth-child(2) ._dot:before {
    background: var(--color2);
}
#persona ._card:nth-child(2) ._tag {
    color: var(--color2);
}
#persona ._card:nth-child(2) li svg {
    stroke: var(--color2);
}
#persona ._card:nth-child(3):before,
#persona ._card:nth-child(3) ._tag:before,
#persona ._card:nth-child(3) ._dot:before {
    background: var(--color3);
}
#persona ._card:nth-child(3) ._tag {
    color: var(--color3);
}
#persona ._card:nth-child(3) li svg {
    stroke: var(--color3);
}

/* #endregion: FOR EVERYONE */

/* #region: HOME - SHOWCASE */
#showcase {
    background: radial-gradient(circle, var(--colorbg), var(--colorwhite));
    border-bottom: 1px solid var(--colorborder);
}
#showcase > ._content {
    gap: 20px;
}
#showcase .card ._footer {
    display: none;
}
#showcase .card._other {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: none;
    border-style: dashed;
}
#showcase .card._other:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    background: var(--color1);
    opacity: .03;
    z-index: -1;
    transition: .3s ease;
}
#showcase .card._other:hover:after {
    opacity: .07;
}
#showcase .card._other ._circle {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    border: 1px solid var(--colorborder);
}
#showcase .card._other ._circle svg {
    width: 18px;
    height: 18px;
    stroke: var(--color1);
    stroke-width: 2.2;
    fill: none;
    stroke-linecap: round;
}
#showcase .card._other:hover ._circle {
    transform: scale(1.1);
}
#showcase .card._other ._ghost {
    background: var(--colorwhite);
}

/* #endregion */

/* #region: HOME - CLIENT */
#client {
    background: var(--colorwhite);
    padding: 60px 0;
    position: relative; 
    z-index: 2;
    display: flex;
    flex-direction: column; 
    gap: 40px;
    overflow: hidden;
}
#client::before {
    left: 0;
    background: linear-gradient(to right, #fff 10%, transparent 90%);
}
#client::after {
    right: 0;
    background: linear-gradient(to left, #fff 10%, transparent 90%);
}
#client::before,
#client::after {
    content: '';
    position: absolute; top: 0; bottom: 0;
    width: 200px; z-index: 3;
    pointer-events: none;
}
#client img {
    height: 60px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    flex-shrink: 0;
    margin: 0 30px;
    filter: saturate(0.8) opacity(0.7);
    transition: filter .25s, transform .25s;
}
#client img:hover {
    filter: saturate(1) opacity(1);
    transform: scale(1.1);
}

/* #endregion */

/* #region: HOME - TESTIMONIAL */
#testimonial .owl-item {
    padding: 10px;
}
#testimonial ._rating {
    display: flex;
    gap: 10px;
    align-items: center;
    background: var(--colorwhite);
    border: 1px solid var(--colorborder);
    padding: 5px 15px;
    border-radius: var(--x10bradius);
    font-size: .9em;
    margin-top: 20px;
}
#testimonial ._rating b {
    font-size: 1.3em;
    color: var(--colordark);
}
#testimonial ._rating ._google{
    max-width: 80px;
}
#testimonial ._comment {
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}
#testi-page .card {
    width:calc(33.333% - 13px);
	margin-bottom:20px;
    float: left;
}
.testi-card ._rate {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
}
.testi-card ._comment {
    position: relative;
    overflow: hidden;
    flex: 1;
}
.testi-card ._comment::before {
    font-family: Georgia, Times, 'Times New Roman', serif;
    content: "\201C";
    color: #eee;
    font-size: 6em;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 30px 5px 0;
    position: relative;
    top: 20px;
}
.testi-card ._detail {
    display: flex;
    gap: 20px;
    align-items: center;
    border-top: 1px solid var(--colorborder);
    padding-top: 20px;
}
.testi-card ._detail h3 {
    font-size: 1.1em;
    margin: 0;
}
.testi-card ._initial {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--color1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 1.2em;
    background: var(--color1);
}
.testi-card ._info {
    font-size: .9em;
    line-height: 1.2em;
    color: var(--colorgrey);
}
.testi-card .ratestar {
    max-width: 90px;
}
#testimonial .owl-item:nth-child(3n+2) ._initial {
    background: var(--color2);
}
#testimonial .owl-item:nth-child(3n+3) ._initial {
    background: var(--color3);
}
/* #endregion */

/* #region: SUPPORT */
#support {
    padding-bottom: 100px;
}
#support:before {
    display: none;
    content: '';
    position: absolute;
    left: 50%;
    top: 30px;
    transform: translateX(-50%);
    background-image: url(images/ca-hover.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 500px;
    height: 1000px;
    opacity: .02;
}
#support ._content {
    display: flex;
    gap: 50px;
}
#support ._content h2 {
    font-size: 2.8em;
    margin-bottom: 30px
}
#support ._content ul li {
    padding: 3px 0;
    margin-left: 20px
}
#support ._visual {
    width: 420px;
    margin-top: -180px;
    position: relative;
    flex-shrink: 0;
}
#support ._visual .ca {
    animation: float 5s ease-in-out infinite 1s;
}
#support ._visual .shine {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 700px;
    z-index: -1;
    opacity: .3;
}
#support ._badge {
    position: absolute;
    z-index: 1;
    display: flex;
    gap: 10px;
    align-items: center;
    background: var(--colorwhite);
    border: 1px solid var(--colorborder);
    border-radius: var(--x10bradius);
    padding: 2px 10px;
    text-align: center;
    font-weight: 500;
    font-size: .9em;
}
#support ._badge._fast {
    bottom: 160px;
    right: 10px;
    animation: float 5s ease-in-out infinite 3s;
}
#support ._badge._wa {
    top: 90px;
    left: 20px;
    right: unset;
    animation: float 6s ease-in-out infinite 2s;
}
#support ._badge._live {
    top: 40px;
    right: 30px;
    animation: float 7s ease-in-out infinite 3s;
}
#support ._badge._ticket {
    bottom: 110px;
    left: 0;
    animation: float 6s ease-in-out infinite 3s;
}
#support ._badge:before {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--colortext);
    border-radius: 10px;
    animation: blinker 2s linear infinite;
}
#support ._badge._wa:before {
    background: var(--color2);
}
#support ._badge._ticket:before {
    background: var(--color3);
}
#support ._badge._live:before {
    background: var(--color1);
}
/* #endregion */

/* #region: CTA */
#cta {
    padding: 0 var(--autopad);
    overflow: unset;
}
#cta ._content {
    background: #121422;
    border: 1px solid #1b2134;
    padding: 60px;
    border-radius: 30px;
    max-width: 100%;
    top: -40px;
}
#cta ._content > * {
    position: relative;
}
#cta ._content:before {
    position: absolute;
    content: "";
    inset: 0;
    background-image: linear-gradient(var(--colorwhite) 1px, transparent 1px), linear-gradient(90deg, var(--colorwhite) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black, transparent);
    opacity: .07;
}
#cta ._content > ._header ._title {
    font-size: 3.6em;
    font-weight: 700;
    line-height: 1.2em;
    margin-top: 0.5rem;
}
/* #endregion */

/* #region: FOOTER */
#footer {
    background: linear-gradient(to bottom, var(--colordark), #1E2134);
    position: relative;
    color: var(--colorgrey);
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 200px;
    overflow: hidden;
}
#footer a {
    color: var(--colorgrey);
}
#footer a:hover {
    color: var(--colorwhite);
}
#footer:before {
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: url(images/footer-bg.png) center bottom repeat-x;
    z-index: 1;
}
#footer h4 {
    color: var(--colorwhite);
    font-size: 1.5em;
}
#footer ._orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    width: 100%;
    height: 600px;
    background: radial-gradient(circle, var(--color1) 0%, transparent 70%);
    bottom: -200px;
    left: 50%;
    transform: translateX(-50%);
    animation: orbFloat 7s ease-in-out infinite;
    z-index: 0;
}
.footbar {
    margin-bottom: 20px;
    padding: 20px 0;
    position: relative;
    z-index: 1;
}
.footbar a:hover {
    color: var(--color3);
}
.footbar ul li {
    padding: 5px 0;
    margin-left: 5px;
    list-style: none;
}
.copyright {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 1;
    font-size: .9em;
    line-height: 1.1em;
}
.copyright h5 {
    color: var(--colorgrey);
    font-weight: 500;
    margin: 0;
}
/* #endregion */

/* ----------------- END HOME ----------------- */

/* #region: ARCHIVE - THEME COLLECTION */
#theme.container {
    padding-top: 50px;
}
/* Theme Filter */
.theme-filter {
    position: sticky;
    top: 0;
    width: 100%;
    gap: 0;
    z-index: 99;
    background: var(--colorbg);
    padding: 0 var(--autopad);
    border-bottom: 1px solid var(--colorborder);
}
.theme-filter > div {
    height: 80px;
    display: flex;
    align-items: center;
}
.theme-filter ul {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 5px 0;
}
.theme-filter ul li {
    list-style-type: none;
    padding: 5px 15px;
    border-radius: var(--x10bradius);
    line-height: 1.2em;
    border: 1px solid var(--colorborder);
    background: var(--colorwhite);
    color: #888;
    transition: all .3s ease;
}
.theme-filter ul li:hover {
    color: var(--colortext);
}
.theme-filter ul li:has(input[type="radio"]:checked)  {
    background: var(--color1);
    color: #FFF;
    border-color: var(--color1);
}
.theme-filter input {
    display: none;
}
.theme-filter label {
    cursor: pointer;
}

/* Theme Container */
.theme-header {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--colorborder);
    margin-bottom: 20px;
    display: flex;
    gap: 25px;
    align-items: center;
}
.theme-header #dev-select {
    margin-left: auto;
}
.theme-header #dev-select select {
    padding: 2px 5px;
    margin-left: 5px;
}
.theme-header .tblue {
    border: 1px solid var(--colorborder);
    padding: 2px 10px;
    border-radius: var(--x10bradius);
    margin-left: 5px;
}

/* Theme Grid */
.theme-grid {
    margin: 0 -10px;
}
.theme-grid .card-cover {
    float: left;
    width: 33.33%;
    padding: 10px;
}
.theme-grid .card ._pigura {
    height: 280px;
}

.contain.type-taxo {
    padding-top: 10px;
}

.theme-container.type-taxo {
    padding: 35px;
}

.theme-container.type-taxo .flex-container {
    justify-content: space-between;
    align-items: center;
}

.theme-container.type-taxo .flex-container > *:last-child {
    margin-left: auto;
}

.theme-type {
    line-height: 2em;
}

.theme-type a {
    display: inline-block;
    border: 1px solid  var(--color1);
    padding: 2px 10px;
    border-radius: 20px;
    margin: 2px 0;
}

.theme-type a:hover {
    border-color: var(--color3)
}

.themehead .theme-type a {
    border-color: #FFF;
    color: #FFF;
    padding: 2px 15px;
    margin-top: 10px;
}

/* THEME PRICE */
.themeprice {
    display: flex;
    gap: 3px;
    justify-content: center;
    color: var(--color3);
}

.themeprice span {
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.5em;
}
/* #endregion */

/* #region: CPT THEME - Hero */
#hero._theme {
    flex-direction: row;
    gap: 40px;
    padding-bottom: 140px;
    min-height: 100vh;
}
#hero._theme ._content {
    text-align: left;
    align-items: flex-start;
    gap: 20px;
}
#hero._theme h1 .latin {
    display: block;
    font-size: .6em;
    line-height: 1.2em;
}
#hero._theme ._content p {
    max-width: 100%;
}
#hero._theme ._pricing {
    display: flex;
    flex-direction: column;
}
#hero._theme ._start {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 10px;
}
#hero._theme ._start ._text {
    width: 100%;
}
#hero._theme ._start b {
    text-decoration: line-through;
    font-size: 1.1em;
    color: var(--colorwhite);
    opacity: .8;
}
#hero._theme ._start i {
    font-style: normal;
    border: 1px solid #ff5c2638;
    background: #ff5c2614;
    line-height: 1em;
    padding: 4px 10px;
    border-radius: var(--x10bradius);
    color: var(--color3);
    font-size: .9em;
    font-weight: 600;
    text-transform: uppercase;
}
#hero._theme ._price b {
    font-size: 3.2em;
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1.2em;
    color: var(--colorwhite);
}
#hero._theme ._content ._action {
    justify-content: flex-start;
}

/* Hero Pricing Fixed */
#hero._theme ._content.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    background: var(--colordark);
    max-width: 100%;
    padding: 20px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    transform: translateY(0);
    animation: fadeDown .35s ease;
}
#hero._theme ._content.fixed h2 a{
    font-size: 2.2em;
    color: var(--colorwhite);
}
#hero._theme ._content.fixed ._pricing {
    flex-direction: row;
    gap: 10px;
    align-items: center;
}
#hero._theme ._content.fixed ._pricing ._text {
    width: auto;
}
#hero._theme ._content.fixed ._pricing ._start {
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
}
#hero._theme ._content.fixed ._price b {
    font-size: 1.6em;
}
#hero._theme ._content.fixed ._action {
    padding: 0;
}

/* Hero Preview */
#hero ._preview {
    position: relative;
    width: 730px;
    height: 498px;
    background-image: url(images/laptop.png);
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
#hero ._preview .browser {
    display: none;
}
.vert {
    left: 112px;
    top: 34px;
    width: 500px;
    height: 318px;
}
.vert .simply-scroll-clip {
    width: 100%;
    height: 318px;
}
#hero ._preview ._rating {
    position: absolute;
    top: -20px;
    right: 30px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 110px;
    background: var(--colorwhite);
    border: 1px solid var(--colorborder);
    border-radius: var(--bradius);
    padding: 7px 10px;
    text-align: center;
    color: var(--colortext);
    animation: float 5s ease-in-out infinite 1s;
}
#hero ._preview ._rating b {
    font-size: 1.5em;
    font-weight: 700;
}
#hero ._preview ._rating span {
    font-size: .8em;
    line-height: normal;
}
#hero ._hint {
    position: absolute;
    bottom: 120px;
    left: -20px; 
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    pointer-events: none;
    z-index: 5;
    animation: float 7s ease-in-out infinite 1s;
}
#hero ._hint ._text {
    font-style: italic;
    font-size: .9em;
    line-height: 1.4;
    text-align: right;
}
#hero ._hint ._arrow {
    height: 60px;
    transform: rotate(-45deg);
    opacity: .75;
    stroke: #fff;
    left: 60px;
    top: -50px;
    position: absolute;
}

/* #endregion */

/* #region: CPT THEME - About */
#about.container {
    overflow: unset;
}
#about ._content {
    display: flex;
    gap: 20px;
}
#about .group-card {
    grid-template-columns: repeat(2, 1fr);
}
#about .group-card ._card:first-child {
    grid-column: span 2;
    gap: 0;
}
#about .group-card ._card:first-child b a {
    padding: 3px 8px;
    border-radius: var(--x10bradius);
    border: 1px solid var(--colorborder);
    font-size: .9em;
    font-weight: 400;
    line-height: 1em;
}
#about .group-card ._card:first-child b a:before {
    content: '✓';
    margin-right: 3px;
    color: var(--color1);
}
#about .group-card ._card:last-child{
    justify-content: center;
    align-items: center;
    text-align: center;
}
#about .group-card  ._circle {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    border: 1px solid var(--colorborder);
}
#about .group-card  ._circle svg {
    width: 18px;
    height: 18px;
    stroke: var(--color1);
    stroke-width: 2.2;
    fill: none;
    stroke-linecap: round;
}
#about ._sidebar {
    width: 400px;
    height: fit-content;
    flex-shrink: 0;
    background: var(--colorwhite);
    border: 1px solid var(--colorborder);
    border-radius: var(--x2bradius);
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    position: sticky;
    top: 20px;
    overflow: hidden;
}
#about ._sidebar h3 {
    padding: 20px;
    background: var(--colorbg);
    border-bottom: 1px solid var(--colorborder);
}
#about .wyget li {
    list-style: none;
    display: grid;
    grid-template-columns: auto 1fr;
    padding: 20px;
    border-bottom: 1px dashed var(--colorborder);
    gap: 5px 20px;
    line-height: 1.2em;
}
#about .wyget li:last-child {
    border-bottom-style: solid;
}
#about .wyget svg {
    width: 46px;
    height: 46px;
    padding: 12px;
    border: 1px solid var(--colorborder);
    background: var(--colorbg);
    border-radius: 50%;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: var(--color1);
    grid-row: span 2;
    align-self: center;
}
#about .wyget li b {
    font-weight: 600;
}
#about .wyget li i {
    font-style: normal;
    border: 1px solid var(--colorborder);
    background: var(--colorbg);
    padding: 3px 8px;
    border-radius: var(--x10bradius);
    font-size: .8em;
    display: inline-block;
}
#about .wyget li:nth-child(2) svg {
    stroke: var(--color2);
}
#about .wyget li:nth-child(3) svg {
    stroke: var(--color3);
}
#about .wyget li:nth-child(4) svg {
    stroke: #46B9C9;
    padding: 11px;
}

#about .specs ._cat a:after {
    content: ', ';
    font-size: .8em;
    color: var(--color2);
}
#about .specs ._cat a:last-child:after {
    content: '';
}
#about .specs {
    border-bottom: 1px solid var(--colorborder);
}
#about .specs li {
    list-style: none;
    padding: 10px 20px;
    border-bottom: 1px dashed var(--colorborder);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    line-height: 1.5em;
}
#about .specs li:last-child {
    border-bottom: none;
}
#about .specs li span {
    opacity: .7;
}
#about .specs li b {
    font-weight: 400;
    text-align: right;
    max-width: 60%;
}
#about ._author {
    padding: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#about ._author .avatar {
    width: 70px;
    height: 70px;
    position: absolute;
    top: -35px;
    right: 35px;
    padding: 5px;
    background: var(--colorwhite);
    border: 1px solid var(--colorborder);
}
/* #endregion */

/* #region: CPT THEME - Screenshot */
#screenshot ._content {
    max-width: 1020px;
    background: var(--colorwhite);
    border: 1px solid var(--colorborder);
    border-radius: var(--x2bradius);
    padding: 15px;
    margin: 0 auto;
}
#screenshot ._content img {
    border-radius: var(--bradius);
}
.lSSlideOuter .lSPager.lSGallery img {
    border: none;
}
.lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter .lSPager.lSGallery li:hover {
    border-color: var(--colorborder);
    border-radius: var(--bradius);
}
/* #endregion */

/* #region: CPT THEME - Fitur */
#features ._content ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--colorborder);
    border: 1px solid var(--colorborder);
    border-radius: var(--x2bradius);
    overflow: hidden;
}
#features ._content ul li {
    list-style: none;
    display: flex;
    flex-direction: column;
    background: var(--colorbg);
    gap: 20px;
    padding: 20px;
    transition: all .3s ease;
    cursor: default;
    position: relative;
}
#features ._content ul li:hover {
    background: var(--colorwhite);
}
#features ._content ul li::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color1), var(--color2));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
#features ._content ul li:hover::before { transform: scaleX(1); }
#features ._content ul li > * {
    margin: 0;
}
#features ._content ul li h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    flex-wrap: wrap;
}
#features ._content ul li h3::before {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--color1);
    border-radius: 50%;
}
#features ._content ul li:nth-child(even) h3::before {
    background: var(--color2);
}
#features ._content ul li img {
    width: 100%;
    margin-bottom: 20px;
    border-radius: var(--bradius);
    border: 1px solid var(--colorborder);
}
/* #endregion */

/* #region: CPT THEME - Video */
#video ._content {
    max-width: 1020px;
    height: 560px;
    background: var(--colorwhite);
    border: 1px solid var(--colorborder);
    border-radius: var(--x2bradius);
    padding: 15px;
    margin: 0 auto;
}
#video ._content iframe {
    width: 100%;
    height: 100%;
    border-radius: var(--bradius);
}
/* #endregion */

/* #region: CPT THEME - Pricing */
#pricing > ._content {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    padding-top: 30px;
}
#pricing ._card {
    max-width: 440px;
    background: var(--colorwhite);
    border-top: 5px solid var(--color1);
    border-radius: var(--x2bradius);
    padding: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: .5s;
    box-shadow: 0 10px 20px rgba(54, 162, 235, .05);
    position: relative;
    overflow: hidden;
}
#pricing ._card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(54, 162, 235, .1);
}

/* Pricing License */
#pricing ._card ._license {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#pricing ._license ._label {
    font-size: .8em;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color1);
}
#pricing ._card ._license h3 {
    font-weight: 700;
    font-size: 2em;
    line-height: 1em;
}

/* Pricing Price */
#pricing ._card ._price {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
#pricing ._price ._rp {
    font-size: 1.2em;
    font-weight: 500;
}
#pricing ._price ._idr {
    font-size: 2.8em;
    font-weight: 900;
    letter-spacing: -2px;
    color: var(--colordark);
}
#pricing ._price ._before {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
}
#pricing ._price ._before b {
    text-decoration: line-through;
    color: #c2c9d1;
    font-size: 1.2em;
}
#pricing ._price ._before ._discount{
    border: 1px solid #ff5c2638;
    background: #ff5c2614;
    line-height: 1em;
    padding: 4px 10px;
    border-radius: var(--x10bradius);
    color: var(--color3);
    font-size: .8em;
    font-weight: 600;
    text-transform: uppercase;
}
#pricing ._price ._sekali {
    width: 100%;
}
#pricing ._price ._oneprice {
    border: 1px solid #F5D76E;
    padding: 6px 15px;
    border-radius: var(--x10bradius);
    font-size: .9em;
    color: #92620A;
    background: #FFF9E6;
    line-height: 1.2em;
    display: inline-flex;
    gap: 10px;
    align-items: center;
}
#pricing ._price ._oneprice::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #92620A;
    border-radius: 50%;
    animation: blinker 1s linear infinite;
}

/* Pricing Features */
#pricing ._features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#pricing ._features > li:first-child,
#pricing ._features > li:first-child:before {
    color: var(--color2);
    font-weight: 600;
}
#pricing ._features li ul {
    list-style: none;
    border-top: 1px dashed var(--colorborder);
    margin-top: 5px;
    padding-top: 5px;
}
#pricing ._features li:before {
    content: "✓";
    margin-right: 10px;
    color: var(--color2);
    font-weight: 600;
}
#pricing ._features li._no:before {
    content: "✗";
    color: #c2c9d1;
    display: inline-block;
}
#pricing ._features li._extra li:before {
    content: "+";
    font-size: 1.3em;
    font-weight: 400;
}
#pricing ._features li._extra li {
    color: var(--colortext);
    margin: 3px 0;
}
#pricing ._features li._extra > b {
    margin-right: 10px;
}
#pricing ._features li._extra > ._toggle {
    cursor: pointer;
    transition: .3s;
    font-size: 0.85em;
    border: 1px solid var(--colorborder);
    border-radius: var(--x10bradius);
    padding: 3px 8px;
    line-height: normal;
    display: inline-block;
}
#pricing ._features li._extra > ._toggle:hover {
    color: var(--color3);
}
#pricing ._features li._extra > ul {
    display: none;
}
#pricing ._features li._no {
    text-decoration: line-through;
    color: #c2c9d1;
}
#pricing ._features li._yes {
    color: var(--color2);
}
#pricing ._features li._divider {
    border-top: 1px solid var(--colorborder);
    padding-top: 10px;
    margin-top: 5px;
}

/* Pricing Promo */
#pricing ._promo {
    text-align: center;
    font-size: .9em;
    margin-top: 10px;
}
#pricing ._promo ._label b {
    color: var(--colordark);
    padding: 2px 10px;
    border-radius: var(--bradius);
    border: 1px dashed #ff5c2638;
    background: #ff5c2614;
    font-size: 1em;
    font-weight: 600;
}
#pricing ._promo ._expired b {
    color: var(--color3);
}

/* Pricing Action */
#pricing ._action {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}
#pricing ._card .bttn {
    padding: 15px 30px;
    font-size: 1.1em;
    font-weight: 600;
}
#pricing ._warranty {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    font-size: .9em;
}
#pricing ._warranty svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
#pricing ._warranty b {
    color: var(--color2);
}

/* Pricing Trust */
#pricing:not(.hero) .trust {
    max-width: 900px;
    margin: 30px auto 20px;
}
#pricing:not(.hero) .trust ._item ._label b {
    color: var(--colordark);
}

/* Pricing Payment */
#pricing ._payment img {
    border-radius: var(--bradius);
    border: 1px solid var(--colorborder);
    position: relative;
    z-index: 1;
    margin: 0 auto;
    display: block;
}

/* Pricing Ribbon */
#pricing ._card._popular:before,
#pricing ._card._best:before {
    content: '★ Paling Populer';
    position: absolute;
    top: 18px;
    right: -1px;
    background: var(--color3);
    color: var(--colorwhite);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .75em;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    line-height: 1.5em;
    padding: 8px 15px;
    border-radius: 100px 0 0 100px;
    box-shadow: 0 10px 20px rgba(54, 162, 235, .10);
}
#pricing ._card._best:before {
    content: '✓ Best Value';
    background: var(--color2);
}
/* Popular */
#pricing ._card._popular {
    border-top-color: var(--color3);
    transform: translateY(-20px);
    box-shadow: 0 10px 50px #ff5c2638;
    z-index: 2;
}
#pricing ._card._popular:hover {
    transform: translateY(-25px) scale(1.05);
}
#pricing ._card._popular ._license ._label {
    color: var(--color3);
}
#pricing ._card._popular ._features > li:first-child,
#pricing ._card._popular ._features > li:first-child:before {
    color: var(--color3);
}

#pricing ._card._popular .bttn {
    background: var(--color3);
}

/* Best */
#pricing ._card._best {
    border-top-color: var(--color2);
}
#pricing ._card._best ._license ._label {
    color: var(--color2);
}
#pricing ._card._best ._license ._detail {
    display: flex;
    flex-direction: column;
}
#pricing ._card._best .bttn {
    background: var(--color2);
}

/* Coming Soon */
#pricing.soon {
    min-height: 100vh;
}
#pricing.soon ._header {
    margin-bottom: 0;
}
#pricing.soon h2 {
    font-size: 5em;
    line-height: 1.1em;
    font-weight: 700;
}
#pricing.soon ._content {
    align-items: normal;
}
#pricing.soon ._badge {
    margin: 0;
}
#pricing .marquee3k {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: var(--color1);
    padding: 10px 0px;
    z-index: 1;
}
#countdown {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin: 30px auto;
    position: relative;
}
#countdown div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
#countdown div span:first-child {
    font-size: 3em;
    font-weight: 700;
    border: 1px solid #1b2134;
    background: #121422;
    border-radius: var(--x2bradius);
    color: var(--colorwhite);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
}

/* #endregion */

/* #region: CPT THEME - Paket Website */
.hero._pw {
    padding: 160px var(--autopad) 380px;
}
#intro._pw {
    padding-top: 0;
    overflow: unset;
}
#intro._pw img {
    margin: -360px auto 20px;
}

#pw.card {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: #fff;
    margin-top: 40px;
}
#pw.card .bttn {
    align-self: flex-start;
}
#pw.card::after {
    content: '';
    position: absolute;
    bottom: -5%;
    right: 10px;
    width: 350px;
    height: 350px;
    background-image: url(images/svg/domain.svg);
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    z-index: -1;
}

/* #endregion */

/* #region: CPT THEME - FAQ */
#faq.container {
    display: flex;
    gap: 40px;
    overflow: unset;
}
#faq ._header {
    width: 40%;
    flex-shrink: 0;
    position: sticky;
    top: 40px;
    height: fit-content;
    margin: 0;
}
#faq ._contact {
    background: var(--colorwhite);
    border: 1px solid var(--colorborder);
    border-radius: var(--x2bradius);
    padding: 20px;
    position: relative;
    overflow: hidden;
    margin-top: 20px;
}
#faq ._contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color1), var(--color2));
}
#faq ._content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}
#faq ._item {
    border: 1px solid var(--colorborder);
    border-radius: var(--x2bradius);
    background: var(--colorwhite);
}
#faq ._item p {
    margin-bottom: 0;
}
#faq ._item h3 {
    padding: 20px;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
#faq ._item h3::after {
    content: '+';
    font-weight: normal;
    font-size: 1.3em;
    color: var(--colorborder);
}
#faq ._item ._desc {
    display: none;
    border-top: 1px solid var(--colorborder);
    margin: 0 20px 20px;
    overflow: hidden;
}
#faq ._item._open h3{
    color: var(--color1);
}
#faq ._item._open h3::after {
    content: '-';
    color: var(--color1);
}
/* #endregion: FAQ */

/* #region: SINGLE - WRAP POST */
.wrap-post ul li {
    border-bottom: 1px dotted var(--colorborder);
    padding: 2px 0;
    margin-left: 20px;
}
.wrap-post h2,
.wrap-post h3 {
    margin: 20px 0;
}
.wrap-post img {
    border-radius: var(--bradius);
    box-shadow: 0 2px 4px 0 rgba(103, 151, 255, .08), 0 8px 20px 0 rgba(103, 151, 255, .1) !important;
}
.wrap-post table, .wrap-post td {
	border: 1px solid var(--colorborder);
	padding: 10px;
	background: var(--colorbg);
	vertical-align: top;
}
.wrap-post table ul li {
	border-bottom: none;
}
/* #endregion */

/* #region: SINGLE - AUTHOR BOX */
.author-box {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 20px;
    align-items: center;
    border: 1px solid var(--colorborder);
    padding: 20px;
    border-radius: var(--bradius);
    overflow: hidden;
}
.author-box h3 {
    order: -1;
    grid-column: span 2;
    padding: 20px;
    margin: -20px -20px 0!important;
    background: var(--colorbg);
    border-bottom: 1px solid var(--colorborder);
}
/* #endregion */

/* #region: SINGLE - SIDEBAR */
.sidebar {
    padding: 20px;
    background: var(--colorwhite);
    border: 1px solid var(--colorborder);
    border-radius: var(--bradius);
    overflow: hidden;
}
.sidebar h4 {
    border-bottom: 1px solid var(--colorborder);
    background: var(--colorbg);
    padding: 20px;
    font-size: 1.2em;
    margin: -20px -20px 20px;
}
.sidebar ul li {
    padding: 5px 0;
    list-style-type: none;
    border-bottom: 1px dashed var(--colorborder);
}
.sidebar ul li a {
    color: var(--colordark);
}
.sidebar ul li a:hover {
    color: var(--color3);
}
.sidebar ul li:last-child {
    border: none;
}

/* Side Theme */
#sidetheme .browser,
#sidetheme .card:before {
    display: none;
}
#sidetheme .card {
    border: none;
    border-radius: 0;
}
#sidetheme .card ._content {
    padding: 20px 0 0;
    border: none;
}
#sidetheme .card:hover {
    transform: none;
}
#sidetheme .card ._pigura {
    height: 220px;
    border-radius: var(--bradius);
    border: 1px solid var(--colorborder);
}
/* List Bank */
.list-bank li {
    overflow: hidden;
    padding: 10px 0 !important;
    display: block;
}
.list-bank img {
    float: left;
    margin-right: 10px;
    border-radius: var(--bradius);
    border: 1px solid var(--colorborder);
}
/* History */
.history ul li {
    padding: 3px 0;
    margin: 5px 10px 5px 30px;
}
.history {
    border-left: 1px dashed #DDD;
    margin: 10px 0 0 10px;
}
.history li {
    margin: 0 10px 10px 14px;
    padding: 0 0 0 5px;
    border-bottom: none;
    list-style-image: url('images/dot-grey.png');
}
.history li:first-child {
    list-style-image: url('images/dot-green.png');
}
/* #endregion */

/* #region: SINGLE - PAGINATION */
.pagination {
    width: 100%;
    text-align: center;
}
.pagination a,
.pagination>.current {
    border: 1px solid var(--colorborder);
    padding: 5px 10px;
    background: var(--colorbg);
    margin: 0 2px;
    display: inline-block;
    min-width: 40px;
    text-align: center;
    border-radius: 50%;
}
.pagination a:hover,
.pagination>.current {
    color: #FFF;
    background: var(--color1);
}
.pagination .next.page-numbers,
.pagination .prev.page-numbers {
    border-radius: var(--bradius);
}
/* #endregion */

/* #region: SINGLE - COMMENT */
.comments ._ghost {
    height: 60px;
    align-self: flex-start;
}
.comment_text,
.comment_text .children {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.comments .komentar {
    padding: 15px;
    position: relative;
    overflow: hidden;
}
.comments .avatar {
    width: 70px;
    height: 70px;
}
.comment_text li {
    list-style-type: none;
    overflow: hidden;
    margin-left: 20px;
    border-top-left-radius: var(--bradius);
    border-bottom-left-radius: var(--bradius);
    border: 1px solid var(--colorborder);
}
.comment_text li li {
    border-right: none;
}
.comment_text li li:last-child {
    border-bottom-left-radius: 0;
    border-bottom: none;
    border-right: none;
}
.comment_text .depth-1 {
    margin: 0;
    background: var(--colorbg);
    border-radius: var(--bradius);
}
.comment_text li,
.comment_text li li li,
.comment_text li li li li li {
    background: var(--colorbg);
}
.comment_text li li,
.comment_text li li li li,
.comment_text li li li li li li {
    background: #FFF;
}
.comment_text li li .avatar {
    width: 30px;
    height: 30px;
}

/* COMMENT FORM */
.comments input[type="text"],
.comments textarea {
    width: 100%;
}
.comments label {
    font-weight: bold;
}
.comments .comment-respond {
    padding: 15px;
    background: var(--colorbg);
    border-radius: var(--bradius);
    border: 1px solid var(--colorborder);
}
.comment .comment-respond {
    margin: 0 20px 20px;
    background: var(--colorwhite);
}
.comments .comment-reply-title small {
    margin-left: 10px;
}
.comments .form-submit {
    margin-bottom: 0;
}

/* RATING */
.ratecount:first-letter {
    font-size: 2em;
    font-weight: 700;
    margin-right: -5px;
}
.rating input[type="radio"] {
    margin: 5px;
    width: 25px;
    height: 25px;
    cursor: pointer;
}
.rating label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
/* #endregion */

/* #region: POPUP */
.popup-wrap{
	position:fixed;
	inset:0;
	z-index:9999;
	display:flex;
	align-items:center;
	justify-content:center;
	opacity:0;
	visibility:hidden;
    transition: .4s;
}
.popup-wrap.active{
	opacity:1;
	visibility:visible;
}
.popup-wrap.active::before{
    content:"";
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.6);
}
.popup-wrap .popup-box{
	position:relative;
	z-index:2;
	width:100%;
	max-width: 800px;
    min-width: 320px;
    line-height: 1.6em;
	background:#fff;
	border-radius:12px;
	padding:20px;
    transform: translateY(24px) scale(.97);
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
.popup-wrap.active .popup-box{
    transform: translateY(0) scale(1);
}
.popup-box ._header {
    display: flex;
    flex-direction: column;
}
.popup-box ul li {
    margin-left: 20px;
}
.popup-box ._footer {
    font-size: .8em;
    border-top: 1px solid var(--colorborder);
    padding-top: 20px;
    line-height: 1.5em;
}
.popup-close{
	position:absolute;
	top:10px;
	right:10px;
	font-size:24px;
	cursor:pointer;
    border: 1px solid var(--colorborder);
    background: var(--colorbg);
    color: var(--colortext);
    line-height: 1em;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contact */
#kontak .popup-box {
    max-width: 450px;
}
#kontak ._item {
    border: 1px solid var(--colorborder);
    background: var(--colorbg);
    padding: 15px;
    border-radius: var(--bradius);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 20px;
    align-items: center;
    color: var(--colortext);
    transition: .3s ease;
}
#kontak ._item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
#kontak ._item ._icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--x10bradius);
    background: var(--color1); 
    grid-row: span 3;
}
#kontak ._item h4 {
    text-transform: uppercase;
    font-size: .8em;
    color: var(--colorgrey);
    margin: 0 0 5px;
}
#kontak ._item b {
    font-size: 1.2em;
}
#kontak ._item svg {
    width: 20px;
    height: 20px;
    stroke: white;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
}
#kontak ._item:first-child ._icon {
    background: var(--color3);
}
#kontak ._item._wa ._icon {
    background: var(--color2);
}
#kontak ._item._wa svg {
    fill: white;
    stroke: none;
    width: 22px;
    height: 22px;
}

/* #endregion */

/* #region: OWL SLIDER */
.owl-controls .owl-buttons div {
    background: #fffc;
    border-radius: 50%;
}
.smallslider .owl-controls .owl-buttons .owl-prev,
.megaslider .owl-controls .owl-buttons .owl-prev {
    left: 120px;
}
.smallslider .owl-controls .owl-buttons .owl-next,
.megaslider .owl-controls .owl-buttons .owl-next {
    right: 120px;
}
.owl-carousel .owl-buttons .owl-prev {
    transition: .5s;
    opacity: 0;
}
.owl-carousel:hover .owl-buttons .owl-prev {
    left: 40px;
    opacity: .5;
}
.owl-carousel .owl-buttons .owl-next {
    transition: .5s;
    opacity: 0;
}
.owl-carousel:hover .owl-buttons .owl-next {
    right: 40px;
    opacity: .5;
}
/* #endregion */

/* #region: SERVICES @temp-service.php */
.intro-services.container {
    padding-bottom: 0;
}
#service-wrap.container{
    grid-template-columns: 63% auto;
    padding-top: 40px;
}
#no-service {
    grid-column: span 2;
}

.card-service>div.active,.tema-pw>div.active {
    border-color: var(--color1);
    box-shadow: 0 3px 9px rgba(43, 135, 218, .15);
    position: relative;
}
.card-service>div.active:before,.tema-pw>div.active:before {
    content: 'Dipilih';
    position: absolute;
    top: 0;
    right: 0;
    background: var(--color1);
    color: #FFF;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 8px;
    padding: 2px 10px;
    font-size: 80%;
}
.card-service .card {
    cursor: pointer;
}

.services input[type='text'],
.services select,
.services textarea {
    width: 100%;
    margin: 8px 0;
}
.services {
    position: relative;
}
.services .info.false {
    border-color: red;
    position: relative;
}
.services .info.false:before {
    content: 'Error';
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(255, 0, 0, 0.497);
    color: #FFF;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 8px;
    padding: 2px 10px;
    font-size: 80%;
}
.services .check {
    display: none;
}

/* Modifikasi JSColor pada Services */
.services .jscolor {
    background-color: #FFF;
    color: var(--colortext);
    border: 1px solid var(--colorborder);
    margin: 8px 5px 8px 0;
    border-radius: var(--bradius);
    width: 150px;
}

/* Domain Exist */
.services #domain-exist {
    padding: 10px;
    border: 1px solid var(--colorborder);
    background: #FFF;
    border-radius: var(--bradius);
    display: grid;
    gap: 20px;
    grid-template-columns: auto 120px;
}
.services #domain-exist input {
    margin: 0;
    border: none;
    padding: 5px;
    font-size: 24px;
    box-shadow: none;
}
.services #domain-exist input[type=text]:focus {
    background: none;
}
.services #domain-exist button {
    border-radius: 5px;
    padding: 6px 10px;
}
.services #domain-exist #added {
    padding: 5px;
    color: #4CAF50;
}

/* Modifikasi WP Domain Checker pada Services */
.services #wdc-style .input-group {
    box-shadow: none;
    border-radius: var(--bradius) !important;
    margin: 0;
    padding: 5px;
    border: 1px solid var(--colorborder);
    background: #FFF;
}
.services #wdc-style #Search,
.services #wdc-style .input-group .input-group-btn {
    border-color: transparent !important;
    background: none;
    outline: none;
}
.services #wdc-style .large #Search {
    height: auto;
}
.services #wdc-style .large button#Submit {
    height: auto;
    font-size: initial;
    padding: .5em 1.1em;
    line-height: initial;
    text-transform: none;
    border-radius: 5px !important;
    letter-spacing: normal;
    margin: 0;
}
.services #wdc-style .callout {
    margin: 15px 0 0;
}

/* Tema PW */
.services .tema-pw {
    border-radius: var(--bradius);
    padding: 15px;
    gap: 15px;
    background: #FFF;
}
.services .tema-pw>div {
    position: relative;
    border-radius: var(--bradius);
    transition: .5s;
    cursor: pointer;
    gap: 0;
    background: var(--colorborder);
}
.services .tema-pw>div p {
    padding: 5px;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #e7effbf0;
    font-weight: 600;
    margin: 0;
    border-bottom-right-radius: var(--bradius);
    border-bottom-left-radius: var(--bradius);
}
.services .tema-pw>div.active p{
    background: #36a2ebb0;
    color: #FFF;
}
.services .tema-pw>div:hover {
    box-shadow: 0 3px 9px rgba(43, 135, 218, .15);
    border-color: var(--color1);
}
.services .tema-pw img {
    max-width: unset;
    border-radius: var(--bradius);
}
.services #tema-detail {
    margin-top: 20px;
}
.services .list-order li {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
}
.services .kode-order {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    font-size: 160px;
    line-height: 140px;
    opacity: 0.04;
    color: var(--color1);
    cursor: default;
    user-select: none;
}
.services .top-invoice {
    display: none;
    grid-template-columns: 280px auto;
    gap: 20px;
    border-bottom: 1px solid var(--colorborder);
    padding-bottom: 20px;
    margin-bottom: 20px;
    font-size: .9em;
    line-height: 1.5em;
}

/* Detail Service */
.detail-service li {
    display: flex;
    justify-content: space-between;
}
.detail-service #form-button {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}
#show-rincian {
    display: none;
}
.topline {
    border-top: 2px solid var(--colorborder);
    padding-top: 5px;
    margin-top: 5px;
}
.botline {
    border-bottom: 2px solid var(--colorborder);
    padding-bottom: 5px;
    margin-bottom: 5px;
    font-size: 1.2em;
}

.sidebar.promo {
    border-style: dashed;
}
.sidebar.true {
    border-color: var(--color2);
    background: #ebffe9;
    position: relative;
}
.sidebar.true:before {
    content: 'Promo Aktif';
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(14, 180, 111, 0.497);
    color: #FFF;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 8px;
    padding: 2px 10px;
    font-size: 80%;
}

/* #endregion */

/* #region: MIXED */

#license ._free {
    grid-column: span 2;
}

/* AVATAR */
.avatar {
    border-radius: 50%;
    float: left;
    margin: 0 15px 10px 0;
	width: 100px;
	height: 100px;
}

/* BREADCRUMBS */
.crumbs {
    padding-bottom: 10px;
    font-size: .9em;
    border-bottom: 1px solid var(--colorborder)
}

/* SHARE SOCMED */
.shareicon span {
    font-size: 35px;
    margin: 0;
}
.shareicon a {
    border-radius: var(--bradius);
    width: 35px;
    height: 35px;
    display: inline-block;
    overflow: hidden;
    margin-right: 5px;
}

/* AUTOHEADING */
.seo {
    font-size: 0;
    margin: 0;
    padding: 0
}

/* Horizontal Scroll */
.hscroll {
    white-space: nowrap;
    overflow: auto;
}
.hscroll::-webkit-scrollbar {
    display: none;
}

/* #endregion */