:root {
    --mega-canvas: #030713;
    --mega-surface: #07142f;
    --mega-surface-2: #0b2050;
    --mega-blue: #0878f9;
    --mega-blue-deep: #0646cf;
    --mega-cyan: #28dfff;
    --mega-gold: #ffbf19;
    --mega-orange: #f47b08;
    --mega-text: #f6f9ff;
    --mega-text-soft: #dbe7ff;
    --mega-text-muted: #afc5e8;
    --mega-border: rgba(75, 177, 255, 0.22);
    --mega-glow: rgba(22, 158, 255, 0.34);
}

html {
    color-scheme: dark;
}

body {
    color: var(--mega-text) !important;
    background:
        radial-gradient(circle at 8% -10%, rgba(17, 126, 255, 0.35), transparent 38%),
        radial-gradient(circle at 94% 5%, rgba(255, 174, 0, 0.16), transparent 28%),
        linear-gradient(155deg, #02040d 0%, var(--mega-canvas) 42%, #061336 100%) fixed !important;
    line-height: 1.7;
}

body a {
    color: var(--mega-cyan);
}

body a:hover {
    color: var(--mega-gold);
}

::selection {
    color: #06112d;
    background: var(--mega-gold);
}

.container {
    max-width: 1200px;
}

body .header {
    background:
        radial-gradient(circle at 14% 0%, rgba(34, 180, 255, 0.2), transparent 42%),
        linear-gradient(180deg, rgba(7, 22, 61, 0.98), rgba(3, 9, 29, 0.98)) !important;
    border-bottom: 1px solid rgba(39, 205, 255, 0.24) !important;
    box-shadow: 0 12px 38px rgba(0, 0, 0, 0.58) !important;
}

.header-top {
    padding: 10px 0 !important;
}

.logo {
    flex: 0 0 230px !important;
    display: flex;
    align-items: center;
}

.logo img {
    display: block;
    width: auto !important;
    height: 58px !important;
    max-height: 58px !important;
    object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(33, 176, 255, 0.38));
}

.menu-toggle,
.side-nav-close {
    color: var(--mega-text) !important;
}

.main-menu-container {
    background: linear-gradient(90deg, #053bba 0%, #087df7 48%, #0560db 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-bottom: 1px solid rgba(34, 224, 255, 0.28) !important;
    box-shadow: 0 8px 24px rgba(0, 38, 126, 0.42) !important;
}

.main-menu a {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 13px !important;
    letter-spacing: 0.45px;
}

.main-menu a:hover,
.main-menu a.current {
    color: #08142e !important;
    background: linear-gradient(180deg, var(--mega-gold), var(--mega-orange)) !important;
}

.side-nav {
    background:
        radial-gradient(circle at 0 0, rgba(14, 121, 249, 0.42), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(255, 175, 0, 0.2), transparent 50%),
        #030918 !important;
    border-right: 1px solid var(--mega-border) !important;
}

.side-nav-logo img {
    filter: drop-shadow(0 0 18px rgba(28, 177, 255, 0.55));
}

.side-nav-menu a {
    color: var(--mega-text) !important;
}

.side-nav-menu a:hover {
    color: var(--mega-gold) !important;
    background: rgba(10, 109, 242, 0.2) !important;
}

.overlay {
    background-color: rgba(1, 4, 13, 0.86) !important;
}

.auth-button {
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28) !important;
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease !important;
}

.header-top .auth-buttons {
    align-items: stretch !important;
}

.header-top .auth-buttons .auth-button,
.side-nav-auth .auth-buttons .auth-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    min-height: 52px !important;
    padding: 12px 18px !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
}

.header-top .auth-buttons .btn-icon,
.side-nav-auth .auth-buttons .btn-icon {
    display: block !important;
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 20px !important;
    object-fit: contain !important;
}

.header-top .auth-buttons .auth-button span,
.side-nav-auth .auth-buttons .auth-button span {
    display: block !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.auth-button:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.08);
    box-shadow: 0 13px 28px rgba(0, 0, 0, 0.4) !important;
}

.header-top .auth-buttons .auth-button:nth-child(1),
.side-nav-auth .auth-button:nth-child(1),
.mobile-auth-buttons .auth-button:nth-child(1) {
    color: #fff !important;
    background: linear-gradient(135deg, #168acb, #20b8f4) !important;
}

.header-top .auth-buttons .auth-button:nth-child(2),
.side-nav-auth .auth-button:nth-child(2),
.mobile-auth-buttons .auth-button:nth-child(2) {
    color: #fff !important;
    background: linear-gradient(135deg, #0f8e5e, #20c879) !important;
}

.header-top .auth-buttons .auth-button:nth-child(3),
.side-nav-auth .auth-button:nth-child(3),
.mobile-auth-buttons .auth-button:nth-child(3),
.auth-button.login-button {
    color: #071026 !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, var(--mega-gold), var(--mega-orange)) !important;
    border-color: rgba(255, 229, 139, 0.42) !important;
}

.mobile-auth-buttons {
    background: linear-gradient(90deg, #06215f, #075bcf) !important;
    border-top: 1px solid rgba(61, 213, 255, 0.24) !important;
}

.site-intro,
.content-section,
.features-grid-container,
.payment-responsible-section,
.partners,
.article-main,
.article-sidebar,
.list-main,
.sidebar,
.card,
.feature-card,
.article-card,
.article-header,
.article-content-box,
.recent-post-item,
.sidebar-section,
.footer-card,
.howto-step,
.metric {
    color: var(--mega-text) !important;
    background:
        radial-gradient(circle at 0 0, rgba(34, 168, 255, 0.11), transparent 50%),
        linear-gradient(145deg, rgba(10, 27, 67, 0.96), rgba(4, 11, 30, 0.98)) !important;
    border: 1px solid var(--mega-border) !important;
    border-radius: 15px !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.38) !important;
}

.site-intro p,
.article-content,
.article-content p,
.article-content li,
.article-content dt,
.article-content dd,
.article-content figcaption,
.article-description,
.feature-description,
.recent-post-content,
.article-text,
.article-list,
.article-card .article-description,
.howto-step p,
.metric-text span,
.app-subtitle,
.app-benefits li,
.support-links a,
.policy-links a {
    color: var(--mega-text-soft) !important;
}

.article-content {
    font-size: 17px;
    line-height: 1.85;
}

.article-content p {
    color: var(--mega-text-soft) !important;
    line-height: 1.85;
}

.article-content li {
    margin-bottom: 0.55em;
}

.main-banner {
    background:
        radial-gradient(circle at 5% 0%, rgba(38, 202, 255, 0.28), transparent 48%),
        radial-gradient(circle at 100% 100%, rgba(255, 173, 0, 0.2), transparent 45%),
        linear-gradient(135deg, #071b54, #041024 65%, #0b2559) !important;
    border: 1px solid rgba(49, 203, 255, 0.3) !important;
    border-radius: 19px !important;
    box-shadow: 0 24px 60px rgba(0, 25, 91, 0.52) !important;
}

.banner-logo,
.banner-slogan,
.banner-subtitle,
.site-title,
.page-title h1,
.section-title,
.features-title,
.app-title,
.howto-step h3,
.card-header h3 {
    color: #ffffff !important;
    text-shadow: 0 0 18px rgba(29, 170, 255, 0.28);
}

.banner-offer,
.metric-text strong,
.feature-title a,
.article-title a,
.recent-post-title a {
    color: var(--mega-gold) !important;
}

.article-content h2,
.article-content h3,
.article-content h1,
.article-content-box h1,
.article-content-box h2,
.article-content-box h3,
.content-section h2,
.content-section h3,
.site-intro h2,
.site-intro h3 {
    color: var(--mega-gold) !important;
}

.article-content h2 span,
.article-content h3 span,
.article-content h1 span,
.article-content-box h1 span,
.article-content-box h2 span,
.article-content-box h3 span,
.content-section h2 span,
.content-section h3 span,
.site-intro h2 span,
.site-intro h3 span {
    color: inherit !important;
    background: transparent !important;
}

.article-content p span,
.article-content li span,
.article-content dt span,
.article-content dd span,
.article-content blockquote span,
.article-content table span {
    color: inherit !important;
    background: transparent !important;
}

.article-content strong {
    color: var(--mega-text) !important;
}

/* Editor lama menyimpan subjudul sebagai span berukuran 20–39px. */
.article-content p > span[style*="font-size: 2"],
.article-content p > span[style*="font-size: 3"] {
    color: var(--mega-gold) !important;
    line-height: 1.4;
}

.article-content p > span[style*="font-size: 2"] strong,
.article-content p > span[style*="font-size: 3"] strong,
.article-content a strong {
    color: inherit !important;
}

.article-content a,
.article-content a span {
    color: var(--mega-cyan) !important;
    background: transparent !important;
}

.article-content a:hover,
.article-content a:hover span {
    color: var(--mega-gold) !important;
}

.article-content h4,
.article-content-box h4,
.content-section h4,
.site-intro h4,
.article-tags h4,
.sidebar-title {
    color: var(--mega-cyan) !important;
}

.article-content table {
    color: var(--mega-text-soft) !important;
    background: rgba(3, 14, 38, 0.96) !important;
    border: 1px solid var(--mega-border) !important;
}

.article-content th,
.article-content td {
    color: inherit !important;
    border-color: rgba(75, 177, 255, 0.3) !important;
}

.article-content th {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(8, 75, 189, 0.96), rgba(4, 38, 100, 0.98)) !important;
}

.article-content tr:nth-child(odd) {
    background: rgba(7, 24, 62, 0.74) !important;
}

.article-content tr:nth-child(even) {
    background: rgba(10, 40, 91, 0.7) !important;
}

.article-content code,
.article-content pre {
    color: #f6f9ff !important;
    background: #06163c !important;
    border-color: var(--mega-border) !important;
}

.article-content hr {
    border-color: rgba(75, 177, 255, 0.28) !important;
}

.article-content blockquote,
.article-content-box blockquote {
    color: var(--mega-text-soft) !important;
    background: rgba(7, 34, 84, 0.78) !important;
    border-left: 4px solid var(--mega-cyan) !important;
}

.toc-container {
    color: var(--mega-text-soft) !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(24, 184, 255, 0.14), transparent 52%),
        linear-gradient(145deg, rgba(7, 31, 78, 0.98), rgba(3, 14, 38, 0.98)) !important;
    border: 1px solid var(--mega-border) !important;
    border-left: 4px solid var(--mega-cyan) !important;
    box-shadow: 0 16px 36px rgba(0, 5, 20, 0.25) !important;
}

.toc-title {
    color: var(--mega-gold) !important;
    border-bottom-color: rgba(38, 197, 255, 0.2) !important;
}

.toc-link {
    color: var(--mega-text-soft) !important;
}

.toc-link:hover {
    color: var(--mega-cyan) !important;
}

.article-navigation {
    color: var(--mega-text-soft) !important;
    border-top-color: rgba(75, 177, 255, 0.24) !important;
}

.article-navigation a,
.recommended-posts a {
    color: var(--mega-cyan) !important;
    background: rgba(7, 30, 78, 0.92) !important;
    border: 1px solid var(--mega-border) !important;
}

.article-navigation a:hover,
.recommended-posts a:hover {
    color: #071026 !important;
    background: linear-gradient(135deg, var(--mega-gold), var(--mega-orange)) !important;
}

.feature-title a:hover,
.article-title a:hover,
.recent-post-title a:hover {
    color: var(--mega-cyan) !important;
}

.section-title::after,
.features-title::after {
    background: linear-gradient(90deg, var(--mega-blue), var(--mega-cyan), var(--mega-gold)) !important;
}

.app-download-section,
.key-metrics-section,
.howto-section {
    background:
        radial-gradient(circle at 8% 0%, rgba(14, 125, 247, 0.18), transparent 48%),
        linear-gradient(180deg, rgba(4, 13, 37, 0.9), rgba(7, 28, 72, 0.72)) !important;
    border-color: rgba(42, 196, 255, 0.17) !important;
}

.app-download-section {
    padding: 28px 0 22px;
    position: relative;
}

.app-download-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    flex-wrap: wrap;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 17px;
}

.app-title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.app-title {
    margin: 0;
    font-size: 23px;
    line-height: 1.2;
}

.app-subtitle {
    margin: 0;
    font-size: 14px;
}

.app-actions {
    display: flex;
    gap: 14px;
    align-items: stretch;
    flex-wrap: wrap;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 19px;
    border-radius: 13px;
    text-decoration: none;
    transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.download-btn i {
    font-size: 20px;
}

.download-btn .btn-text {
    font-weight: 800;
}

.app-benefits {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px 18px;
}

.app-benefits li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.key-metrics-section {
    padding: 23px 0;
}

.metrics {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.metric {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 17px;
}

.metric i {
    font-size: 23px;
}

.metric-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.metric-text strong {
    font-size: 18px;
}

.metric-text span {
    font-size: 13px;
}

.howto-section {
    padding: 40px 0 50px;
}

.howto-section .section-title {
    text-align: center;
    margin-bottom: 28px;
}

.howto-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.howto-step {
    position: relative;
    overflow: hidden;
    padding: 22px 20px;
}

.howto-step::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, rgba(31, 197, 255, 0.17), transparent 56%);
    pointer-events: none;
}

.howto-icon {
    position: relative;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    margin-bottom: 14px;
}

.howto-step h3,
.howto-step p {
    position: relative;
}

.howto-step h3 {
    margin: 0 0 9px;
    font-size: 18px;
}

.howto-step p {
    margin: 0;
    font-size: 14px;
}

.app-logo {
    border-radius: 18px !important;
    box-shadow: 0 12px 28px rgba(4, 109, 250, 0.32), 0 0 0 1px rgba(255, 190, 22, 0.3) !important;
}

.download-btn,
.btn-primary,
.view-all-reviews,
.pagination-current {
    color: #071026 !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, var(--mega-gold), var(--mega-orange)) !important;
    border: 0 !important;
    box-shadow: 0 10px 26px rgba(241, 136, 0, 0.26) !important;
}

.download-btn.android,
.btn-secondary {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--mega-blue-deep), var(--mega-cyan)) !important;
    box-shadow: 0 10px 26px rgba(8, 120, 249, 0.32) !important;
}

.download-btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.view-all-reviews:hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.07);
}

.app-benefits i,
.howto-icon i,
.metric i,
.card-header i,
.platform-overview .card-content i,
.platform-hours i,
.platform-contact i,
.platform-fax i,
.platform-email i,
.platform-website i,
.platform-main i {
    color: var(--mega-cyan) !important;
}

.howto-icon {
    background: linear-gradient(135deg, var(--mega-blue), var(--mega-cyan)) !important;
    box-shadow: 0 8px 20px rgba(8, 120, 249, 0.35) !important;
}

.breadcrumb,
.breadcrumb-inner,
.article-meta,
.recent-post-date,
.feature-description,
.article-description,
.copyright-text,
.footer-links a {
    color: var(--mega-text-muted) !important;
}

.breadcrumb a,
.breadcrumb-link {
    color: var(--mega-cyan) !important;
}

.tags-container a.tag-link,
.pagination a,
.pagination span,
.pagination-link {
    color: var(--mega-text) !important;
    background: rgba(7, 30, 78, 0.92) !important;
    border: 1px solid var(--mega-border) !important;
    border-radius: 999px !important;
}

.tags-container a.tag-link:hover,
.pagination a:hover,
.pagination-link:hover {
    color: #071026 !important;
    background: linear-gradient(135deg, var(--mega-gold), var(--mega-orange)) !important;
}

.modern-footer {
    background:
        radial-gradient(circle at 10% 0%, rgba(17, 127, 255, 0.22), transparent 45%),
        linear-gradient(180deg, #06163c, #020711) !important;
    border-top: 1px solid rgba(37, 194, 255, 0.22) !important;
}

.card-header {
    background: linear-gradient(120deg, rgba(8, 75, 189, 0.78), rgba(4, 24, 70, 0.92)) !important;
    border-bottom: 1px solid var(--mega-border) !important;
}

.support-link:hover,
.policy-link:hover,
.support-links a:hover,
.policy-links a:hover {
    color: var(--mega-gold) !important;
    background-color: rgba(8, 120, 249, 0.16) !important;
}

.contact-button.live-chat {
    background: linear-gradient(135deg, #064acb, #16cdec) !important;
}

.contact-button.register {
    color: #071026 !important;
    background: linear-gradient(135deg, var(--mega-gold), var(--mega-orange)) !important;
}

.footer-bottom {
    background: rgba(1, 5, 15, 0.94) !important;
    border-top: 1px solid rgba(46, 185, 255, 0.16) !important;
}

.form-input,
.form-textarea,
.search-bar {
    color: var(--mega-text) !important;
    background-color: rgba(3, 13, 39, 0.96) !important;
    border-color: var(--mega-border) !important;
}

.form-input:focus,
.form-textarea:focus {
    border-color: var(--mega-cyan) !important;
    box-shadow: 0 0 0 3px rgba(40, 223, 255, 0.14) !important;
}

img {
    border-color: var(--mega-border);
}

@media (max-width: 768px) {
    .logo {
        flex: initial !important;
    }

    .logo img {
        height: 44px !important;
        max-height: 44px !important;
    }

    .mobile-auth-buttons {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 9px 10px !important;
        width: calc(100% - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .mobile-auth-buttons .auth-button {
        flex: 1 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        padding: 9px 5px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    .mobile-auth-buttons .auth-button span {
        display: block;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-auth-buttons .auth-button:nth-child(3) {
        flex: 1.7 !important;
    }

    .app-download-wrapper {
        align-items: flex-start;
        flex-direction: column;
    }

    .app-actions {
        width: 100%;
        flex-direction: column;
        gap: 11px;
    }

    .download-btn {
        width: 100%;
    }

    .app-benefits,
    .metrics,
    .howto-steps {
        grid-template-columns: 1fr;
    }

    .app-logo {
        width: 68px !important;
        height: 68px !important;
    }

    .howto-section {
        padding: 32px 0 42px;
    }
}

@media (min-width: 769px) and (max-width: 992px) {
    .app-benefits,
    .metrics,
    .howto-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}