:root {
    --bestie-yellow: #ffc101;
    --bestie-yellow-dark: #e9ab00;
    --bestie-orange: #ffaa15;
    --bestie-white: #ffffff;
    --bestie-ink: #1e1e1e;
    --bestie-page-gutter: clamp(24px, 2.2vw, 36px);

    --bs-primary: #ffc101;
    --bs-primary-rgb: 255, 193, 1;
    --bs-warning: #ffaa15;
    --bs-warning-rgb: 255, 170, 21;
    --bs-dark: #1e1e1e;
    --bs-dark-rgb: 30, 30, 30;
    --bs-body-color: #1e1e1e;
    --bs-body-bg: #ffffff;
    --bs-link-color: #1e1e1e;
    --bs-link-hover-color: #e9ab00;
    --bs-border-color: rgba(233, 171, 0, .32);
}

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

html,
body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    color: var(--bestie-ink);
    background: var(--bestie-white) !important;
    overflow-x: hidden;
    overscroll-behavior-x: none;
    -webkit-text-size-adjust: 100%;
}

#kt_app_root,
#kt_app_page,
#kt_app_wrapper,
#kt_app_main,
#kt_app_content,
#kt_app_content_container,
.app-root,
.app-page,
.app-wrapper,
.app-main {
    min-width: 0;
    max-width: 100%;
    background: var(--bestie-white) !important;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

img,
svg,
canvas,
iframe {
    height: auto;
}

.row,
[class*="col-"],
.app-container,
.container,
.container-fluid,
.container-xxl {
    min-width: 0;
}

#kt_app_wrapper,
#kt_app_main,
#kt_app_content {
    overflow-x: hidden;
}

body,
body :where(h1, h2, h3, h4, h5, h6, p, label, li, dt, dd, th, td, small, strong, b) {
    color: inherit;
}

#kt_app_content.app-content {
    color: var(--bestie-ink);
    background: var(--bestie-white) !important;
    margin-top: 0 !important;
    padding-top: var(--bestie-page-gutter) !important;
    padding-bottom: var(--bestie-page-gutter) !important;
}

#kt_app_content_container.app-container {
    width: min(100%, 1440px) !important;
    max-width: 1440px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: var(--bestie-page-gutter) !important;
    padding-left: var(--bestie-page-gutter) !important;
    background-color: var(--bestie-white);
    overflow-x: visible;
}

#kt_app_content_container.app-container > * {
    max-width: 100%;
}

/* Halaman game lama memakai full-bleed 100vw. Di dalam container global,
   netralkan offset viewport agar seluruh card tetap terlihat utuh. */
#kt_app_content_container :is(
    .pt-page,
    .tts-page,
    .tk-page,
    .tg-page,
    .ko-page,
    .gp-page
) {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

a {
    color: var(--bestie-ink);
}

a:hover,
a:focus-visible {
    color: var(--bestie-yellow-dark);
}

::selection {
    color: var(--bestie-ink);
    background: var(--bestie-yellow);
}

.btn-primary,
.btn-warning,
.page-item.active .page-link {
    border-color: var(--bestie-yellow) !important;
    background-color: var(--bestie-yellow) !important;
    color: var(--bestie-ink) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-warning:hover,
.btn-warning:focus,
.page-item.active .page-link:hover {
    border-color: var(--bestie-yellow-dark) !important;
    background-color: var(--bestie-yellow-dark) !important;
    color: var(--bestie-ink) !important;
}

.btn-outline-primary,
.btn-outline-warning {
    border-color: var(--bestie-yellow-dark) !important;
    color: var(--bestie-ink) !important;
}

.btn-outline-primary:hover,
.btn-outline-warning:hover {
    border-color: var(--bestie-yellow) !important;
    background-color: var(--bestie-yellow) !important;
    color: var(--bestie-ink) !important;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--bestie-yellow-dark);
    box-shadow: 0 0 0 .25rem rgba(255, 193, 1, .2);
}

.form-check-input:checked {
    border-color: var(--bestie-yellow-dark);
    background-color: var(--bestie-yellow);
}

.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.list-group-item,
.page-link {
    border-color: rgba(233, 171, 0, .28);
}

.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.list-group-item {
    background-color: var(--bestie-white);
    color: var(--bestie-ink);
}

.page-link {
    background-color: var(--bestie-white);
    color: var(--bestie-ink);
}

.page-link:hover,
.page-link:focus {
    border-color: var(--bestie-yellow-dark);
    background-color: rgba(255, 193, 1, .16);
    color: var(--bestie-ink);
}

.badge.bg-primary,
.badge.bg-warning,
.bg-primary,
.bg-warning {
    background-color: var(--bestie-yellow) !important;
    color: var(--bestie-ink) !important;
}

.text-primary,
.text-warning {
    color: var(--bestie-yellow-dark) !important;
}

hr,
.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: rgba(233, 171, 0, .3) !important;
}

/* Shared Bestie surfaces */
.bestie-topbar,
.bestie-sidebar,
.bestie-header-search input,
.bestie-sidebar-toggle,
.bestie-header-action {
    background-color: var(--bestie-white);
    color: var(--bestie-ink);
}

.bestie-topbar {
    background: var(--bestie-yellow);
    border-bottom-color: var(--bestie-yellow-dark);
}

.bestie-sidebar-toggle,
.bestie-header-action,
.bestie-header-search input {
    border-color: var(--bestie-yellow-dark);
}

.bestie-header-action:hover,
.bestie-sidebar-nav a:hover,
.bestie-sidebar-nav a:focus {
    background: var(--bestie-yellow);
    color: var(--bestie-ink);
}

.bestie-global-showcase-row,
.bestie-showcase-card,
.bestie-showcase-card > .card-body,
.bestie-site-footer,
.bestie-copyright-footer {
    background: var(--bestie-white) !important;
    background-color: var(--bestie-white) !important;
    color: var(--bestie-ink) !important;
}

#kt_app_content:has(.bestie-global-showcase-row) {
    padding-bottom: 0 !important;
}

#kt_app_content_container:has(.bestie-global-showcase-row) {
    padding-bottom: 0 !important;
}

.bestie-global-showcase-row {
    margin-bottom: 0 !important;
}

.bestie-site-footer h5,
.bestie-site-footer .bestie-footer-heading-link,
.bestie-site-footer .footer-link,
.bestie-footer-icon,
.bestie-copyright-footer .bestie-copyright-text,
.bestie-copyright-footer .bestie-copyright-text a {
    color: var(--bestie-ink) !important;
}

.bestie-site-footer .bestie-footer-heading-link {
    text-decoration: none;
}

.bestie-site-footer .footer-link:hover,
.bestie-site-footer .bestie-footer-heading-link:hover,
.bestie-footer-icon:hover,
.bestie-copyright-footer .bestie-copyright-text a:hover {
    color: var(--bestie-yellow) !important;
}

@media (max-width: 767.98px) {
    :root {
        --bestie-page-gutter: 14px;
    }

    html,
    body {
        overflow-x: clip;
    }

    .app-container,
    .container,
    .container-fluid,
    .container-xxl {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    [class*="col-"] {
        max-width: 100%;
    }

    .card,
    .modal-content,
    .offcanvas,
    .dropdown-menu {
        max-width: 100%;
    }

    .bestie-games-page,
    .bestie-about-page,
    .bestie-contact-page,
    .mitra-page,
    .tk-page,
    .tg-page,
    .tts-page,
    .gp-page,
    .ko-page,
    .pt-page,
    .quiz-wrapper,
    .kl-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: visible;
    }

    .bestie-games-shell,
    .bestie-about-hero,
    .bestie-about-actions,
    .bestie-contact-hero,
    .bestie-contact-grid,
    .mitra-hero,
    .mitra-options,
    .tk-shell,
    .tg-shell,
    .tts-shell,
    .gp-shell,
    .ko-shell,
    .pt-card,
    .quiz-wrapper > *,
    .kl-wrapper > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .bestie-site-footer,
    .bestie-global-showcase-row,
    .bestie-copyright-footer {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .bestie-site-footer {
        padding-left: max(12px, env(safe-area-inset-left)) !important;
        padding-right: max(12px, env(safe-area-inset-right)) !important;
    }

    .bestie-copyright-footer {
        margin-bottom: -1px !important;
    }

    button,
    .btn,
    input,
    select,
    textarea {
        max-width: 100%;
    }

    body[data-kt-app-header-fixed="true"] #kt_app_wrapper {
        padding-top: 0 !important;
    }

    #kt_app_content.app-content,
    #kt_app_content.app-content.mt-5 {
        margin-top: 0 !important;
    }

    #kt_app_content_container.app-container {
        padding-left: var(--bestie-page-gutter) !important;
        padding-right: var(--bestie-page-gutter) !important;
    }
}

@media (max-width: 420px) {
    :root {
        --bestie-page-gutter: 12px;
    }

    #kt_app_content_container.app-container {
        padding-left: var(--bestie-page-gutter) !important;
        padding-right: var(--bestie-page-gutter) !important;
    }
}