/* Impor font Joti One dari Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Joti+One&display=swap');

/* Aturan global */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Variabel CSS */
:root {
    --gray: #A4A5A6;
    --yellow3: rgba(191, 141, 114, 0.3);
    --green: #496c45;
    --bright-green: #669966;
    --dark-gray: #232323;
    --middle-gray: #353535;
    --light-gray: #3b3b3b;
    --red: #FF5D12;
    --yellow: #FBAE43;
    --yellow1: #FFDFA7;
    --yellow1-border: #FFF2F1;
    --yellow2: #FAECD3;
    --brown: #481111;
    --blank: #2D1400;
    --text-brown: #6D2503;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
    --transition-slow: all 0.8s ease;
}

/* Font global */
html, body {
    font-family: 'Joti One', 'Noto Sans JP', sans-serif !important;
    font-weight: 300;
    line-height: 1.6;
    color: var(--blank);
    background-color: #FFF7EA;
    overflow-x: hidden;
    scrollbar-width: thin;
    scroll-behavior: smooth;
    scrollbar-color: var(--yellow) var(--dark-gray);
}

/* Kelas untuk font Joti One */
.joti-one-regular {
    font-family: 'Joti One', serif;
    font-weight: 400;
    font-style: normal;
}

/* Aturan lainnya tetap sama */
a {
    text-decoration: none;
    color: var(--light-text);
    transition: var(--transition);
}

a:hover {
    color: var(--gray-text);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    background: url(../images/pic.png) repeat;
    padding: 88px 32px 64px;
    border-radius: 64px;
    margin: 60px 30px;
    position: relative;
}

.container-logo-big {
    position: absolute;
    top: -37px;
    left: 0;
    width: 474px;
    height: 154px;
    z-index: 1;
}
.container-batman-2 {
    position: absolute;
    top: -19px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px!important;
    height: 72px!important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
   

    transition: var(--transition, all 0.3s ease);
}

.container-batman-2:hover {
    transform: translateX(-50%)  scale(1.05)!important;
}

@media screen and (max-width: 768px) {
    .container-batman-2 {
        width: 250px;
        height: 60px;
        font-size: 1.4rem;
        top: -15px;
    }
}

@media screen and (max-width: 480px) {
    .container-batman-2 {
        width: 200px;
        height: 50px;
        font-size: 1.2rem;
        top: -12px;
    }
}
.container-batman {
    position: absolute;
    top: -66px;
    right: -7px;
    width: 200px;
    height: 200px;
}

.light-container {
    background: var(--yellow2);
    border: 4px solid #fff;
    border-radius: 20px;
    padding: 40px;
    color: var(--text-brown);
}

.flex {
    display: flex;
    align-items: center;
}

.flex-1 {
    flex: 1;
}

.flex-d-c {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.center {
    text-align: center;
}

.pointer {
    cursor: pointer;
}

.break {
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: auto;
}

.scale {
    transition: var(--transition);
}

.scale:hover {
    transform: scale(1.1);
}

.f300 {
    font-weight: 300;
}

.f400 {
    font-weight: 400;
}

.f500 {
    font-weight: 500;
}

.f-eee {
    color: #eee;
}

.f-ccc {
    color: #ccc;
}

.f-666 {
    color: #666;
}

.f-999 {
    color: #999;
}

.mr10 {
    margin-right: 10px;
}

.mb20 {
    margin-bottom: 20px;
}

.red {
    color: var(--red);
}

.system-font {
    font-family: "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.header {
    width: 100%;
    height: 72px;
    padding: 12px 52px;
    background-color: var(--brown);
    color: var(--yellow);
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.header-logo {
    display: flex;
    align-items: center;
    margin-right: 40px;
    color: var(--yellow);
}

.header-logo img {
    width: 160px;
    height: 48px;
    margin-right: 5px;
}

.header-nav {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 68px;
}

.header-nav a {
    font-size: 20px;
    opacity: 0.6;
    transition: var(--transition);
}

.header-nav a:hover,
.header-nav a.active {
    opacity: 1;
    transform: scale(1.1);
}

.header-menu {
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 40px;
}

.header-menu-icon {
    width: 32px;
    height: 32px;
}

.header-menu-login {
    background: url(../images/btn-bg1.png) no-repeat center center;
    background-size: 100% 100%;
    color: var(--blank);
    width: 126px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}

.main {
    min-height: 100vh;
    padding-top: 72px;
}

.main-banner {
    width: 100%;
}

/* Hamburger menu */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
    margin-left: auto;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--yellow);
    transition: var(--transition);
}

/* Responsif */
@media screen and (max-width: 768px) {
    .header {
        padding: 0 15px;
    }

    .hamburger {
        display: flex;
    }

    .header-nav {
        position: fixed;
        top: 80px;
        left: -100%;
        width: 100%;
        background-color: var(--dark-gray);
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        transition: var(--transition);
        z-index: 999;
    }

    .header-nav.active {
        left: 0;
    }

    .header-nav a {
        padding: 15px 0;
        font-size: 1.2em;
    }

    .header-menu {
        margin-left: 15px;
    }

    .dropdown-menu {
        position: fixed;
        top: 80px;
        right: -100%;
        width: 100%;
        background-color: var(--dark-gray);
        border: none;
        border-radius: 0;
        transition: var(--transition);
    }

    .header-menu-fold:hover .dropdown-menu {
        right: 0;
    }

    .dropdown-item {
        padding: 15px 20px;
        text-align: center;
    }
}

@media screen and (max-width: 480px) {
    .header {
        padding: 0 10px;
    }

    .header-logo img {
        width: 120px;
        height: 36px;
    }

    .header-logo-text {
        font-size: 0.9em;
    }

    .header-menu {
        height: 35px;
        line-height: 35px;
    }

    .login-btn {
        font-size: 0.9em;
    }
}

.personal-container {
    gap: 20px;
    margin-bottom: 20px;
    align-items: stretch;
}

@media screen and (max-width: 480px) {
    .personal-container {
        flex-direction: column;
        gap: 40px;
    }
}

.personal {
    display: flex;
    align-items: center;
    gap: 20px;
    border-radius: 10px;
    padding: 32px;
    max-width: 50%;
}

.personal-avatar {
    width: 268px;
    height: 268px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 8px solid #fff;
}

.personal-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.personal-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 64px;
    padding: 32px 0;
}

.personal-info-name {
    font-size: 32px;
    line-height: 48px;
    height: 48px;
    max-width: 300px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}

.personal-info-rank {
    width: fit-content;
    font-size: 32px;
    line-height: 48px;
    height: 48px;
}

.personal-info-poins {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background-color: var(--yellow1);
    border-radius: 20px;
    border: 4px solid var(--yellow1-border);
    font-size: 28px;
    line-height: 48px;
}

.personal-info-poins img {
    width: 40px;
    height: 40px;
}

.subscribe {
    flex: 2;
    padding: 20px;
    border-radius: 10px;
}

.subscribe-info {
    margin-bottom: 40px;
}

.subscribe-info h1 {
    font-size: 32px;
    height: 48px;
    line-height: 48px;
    font-weight: 400;
    color: var(--red);
}

.subscribe-info-x {
    width: 30px;
    height: 30px;
    margin-left: 10px;
}

.subscribe-info p {
    font-size: 28px;
    margin-bottom: 10px;
}

.subscribe-link-title,
.subscribe-invite-title {
    align-items: baseline;
    font-size: 36px;
    margin-bottom: 20px;
}

.subscribe-link-title span,
.subscribe-invite-title span {
    font-size: 28px;
    margin-left: 12px;
    color: var(--text-brown);
}

.subscribe-link-box,
.subscribe-invite-code {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
}

.subscribe-box {
    flex: 1;
    padding: 24px 12px;
    font-size: 28px;
    background-color: var(--yellow1);
    border-radius: 20px;
    border: 4px solid var(--yellow1-border);
    line-height: 48px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subscribe-box:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.subscribe-btn {
    width: 252px;
    height: 80px;
    line-height: 60px;
    font-size: 28px;
    text-align: center;
    padding: 10px;
    background: url(../images/btn-bg1.png) no-repeat center center;
    background-size: 100% 100%;
    color: var(--blank);
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}

.subscribe-btn:hover {
    transform: scale(1.05);
}

.subscribe-invite {
    margin-top: 40px;
}

/* Responsif untuk subscribe */
@media screen and (max-width: 1024px) {
    .subscribe-link-title,
    .subscribe-invite-title {
        font-size: 44px;
        margin-bottom: 16px;
    }

    .subscribe-link-title span,
    .subscribe-invite-title span {
        font-size: 22px;
    }

    .subscribe-box {
        font-size: 28px;
        padding: 20px 10px;
        line-height: 42px;
    }

    .subscribe-btn {
        width: 220px;
        height: 70px;
        font-size: 36px;
    }

    .subscribe-link-box,
    .subscribe-invite-code {
        gap: 16px;
        margin-bottom: 28px;
    }

    .subscribe-invite {
        margin-top: 32px;
    }
}

@media screen and (max-width: 768px) {
    .subscribe-link-title,
    .subscribe-invite-title {
        font-size: 36px;
        margin-bottom: 14px;
    }

    .subscribe-link-title span,
    .subscribe-invite-title span {
        font-size: 20px;
    }

    .subscribe-box {
        font-size: 24px;
        padding: 16px 8px;
        line-height: 36px;
    }

    .subscribe-btn {
        width: 180px;
        height: 60px;
        font-size: 32px;
    }

    .subscribe-link-box,
    .subscribe-invite-code {
        gap: 12px;
        margin-bottom: 24px;
    }

    .subscribe-invite {
        margin-top: 28px;
    }
}

@media screen and (max-width: 480px) {
    .subscribe-link-title,
    .subscribe-invite-title {
        font-size: 28px;
        margin-bottom: 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .subscribe-link-title span,
    .subscribe-invite-title span {
        font-size: 16px;
        margin-left: 0;
    }

    .subscribe-link-box,
    .subscribe-invite-code {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 20px;
    }

    .subscribe-box {
        width: 100%;
        font-size: 20px;
        padding: 12px 8px;
        line-height: 30px;
    }

    .subscribe-btn {
        width: 100%;
        height: 50px;
        font-size: 24px;
        padding: 8px;
    }

    .subscribe-invite {
        margin-top: 24px;
    }
}

@media screen and (max-width: 360px) {
    .subscribe-link-title,
    .subscribe-invite-title {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .subscribe-link-title span,
    .subscribe-invite-title span {
        font-size: 14px;
    }

    .subscribe-box {
        font-size: 18px;
        padding: 10px 6px;
        line-height: 27px;
        border-width: 3px;
    }

    .subscribe-btn {
        height: 45px;
        font-size: 20px;
        padding: 6px;
    }

    .subscribe-link-box,
    .subscribe-invite-code {
        gap: 10px;
        margin-bottom: 16px;
    }

    .subscribe-invite {
        margin-top: 20px;
    }
}

.rank-container {
    position: relative;
    margin-top: 78px;
    border-radius: 0 20px 20px 20px;
    font-size: 32px;
    overflow: visible;
}

.ranking-logo {
    width: 333px;
    height: 58px;
    border-radius: 20px 20px 0 0;
    border: 4px solid #fff;
    border-bottom: none;
    background-color: var(--yellow2);
    position: absolute;
    top: -58px;
    left: -4px;
    display: flex;
    justify-content: center;
}

.ranking-logo img {
    height: 94px;
}

.rank-header {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    align-items: center;
    padding: 15px;
    gap: 15px;
}

.rank-points {
    justify-content: flex-end;
}

.rank-points img {
    width: 54px;
    height: 54px;
}

.rank-search input {
    width: 100%;
    padding: 8px 15px;
    border-radius: 20px;
    border: 1px solid var(--light-gray);
    background: var(--dark-gray);
    color: #fff;
    outline: none;
}

.rank-search input::placeholder {
    color: var(--gray);
}

.rank-item {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    align-items: center;
    padding: 15px;
    gap: 15px;
    border-bottom: 1px solid var(--light-gray);
    transition: var(--transition);
}

.rank-item-number {
    color: var(--red);
    font-size: 32px;
}

.rank-item-number-top3 {
    background: url(../images/orange.png) no-repeat center center;
    background-size: 100% 100%;
    width: 48px;
    height: 48px;
    color: #813600;
    font-size: 28px;
    text-align: center;
    line-height: 56px;
}

.rank-item-user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    overflow: hidden;
}

.rank-item-user-info img {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.rank-item-user-details {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rank-item-user-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rank-item-user-handle {
    font-size: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rank-item-score {
    color: var(--red);
    justify-content: flex-end;
    white-space: nowrap;
}

.rank-item-score img {
    width: 54px;
    height: 54px;
}

.rank-list-empty {
    text-align: center;
    margin-top: 48px;
    opacity: 0.5;
}

.faq-container {
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 10px;
    background: var(--dark-gray);
}

.faq-title {
    font-size: 1.5em;
    color: #fff;
    margin-bottom: 40px;
    text-align: center;
}

.faq-item {
    background: var(--middle-gray);
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
    transition: var(--transition);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    cursor: pointer;
    background: var(--middle-gray);
}

.faq-question h2 {
    font-size: 1.2em;
    color: #fff;
    font-weight: 500;
    margin: 0;
}

.faq-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--yellow);
    transition: transform 0.3s ease;
}

.faq-answer {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item.active .faq-answer {
    padding: 20px;
    max-height: 300px;
    border-top: 1px solid #606060;
}

.faq-item.active .faq-toggle {
    transform: rotate(180deg);
}

.faq-item:hover {
    background: var(--light-gray);
}

.footer {
    width: 100%;
}

.footer img {
    width: 100%;
    height: 100%;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(23, 1, 2, 0.8);
    z-index: 2000;
    backdrop-filter: blur(5px);
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: url(../images/dialog-bg.png) no-repeat center center;
    border-radius: 10px;
    width: 624px;
    height: 620px;
    color: var(--text-brown);
    position: relative;
    justify-content: flex-end;
    animation: modalFadeIn 0.3s ease;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 8px;
    width: 60px;
    height: 60px;
}

.modal-content-icon {
    width: 100%;
    height: 100%;
}

.dialog-btn {
    width: 300px;
    height: 55px;
    background: url(../images/btn-bg2.png) no-repeat center center;
    background-size: 100% 100%;
    color: var(--blank);
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
}

.dialog-btn:hover {
    transform: scale(1.1);
}

.dialog-btn-wallet {
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.login-modal {
    padding-bottom: 62px;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-modal-header h2 {
    font-size: 62px;
    margin-bottom: 52px;
}

.modal-close {
    cursor: pointer;
    font-size: 24px;
    color: var(--gray);
    transition: var(--transition);
}

.modal-close:hover {
    color: #fff;
}

.modal-body {
    padding: 30px;
}

.modal-body p {
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.1em;
}

.modal-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.modal-btn {
    padding: 10px 30px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 1em;
    transition: var(--transition);
}

.logout-modal {
    background: url(../images/dialog-bg-high.png) no-repeat center center;
    background-size: contain;
    height: 660px;
}

.logout-modal-user {
    gap: 16px;
    font-size: 32px;
    align-items: flex-start;
}

.logout-modal-user-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.logout-modal-btn-box {
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 60px;
}

.confirm-modal {
    padding-bottom: 30px;
}

.confirm-modal-header {
    font-size: 32px;
    margin-bottom: 20px;
    width: 70%;
    text-align: center;
}

.cancel-btn {
    background: var(--middle-gray);
    color: #fff;
}

.cancel-btn:hover {
    background: var(--light-gray);
}

.confirm-btn {
    background: var(--yellow);
    color: #fff;
}

.confirm-btn:hover {
    background: var(--yellow3);
}

.login-btn {
    cursor: pointer;
    padding: 0 10px;
}

.toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    background-color: #6D2503;
    padding: 20px 30px;
    border-radius: 5px;
    z-index: 2000;
    backdrop-filter: blur(5px);
    font-size: 28px;
}

/* Responsif untuk container */
@media screen and (max-width: 1920px) {
    .container {
        max-width: 1600px;
        margin: 40px auto;
        padding: 60px 24px 64px;
    }

    .container-logo-big {
        width: 400px;
        height: 130px;
    }

    .container-batman {
        width: 180px;
        height: 180px;
    }
}

@media screen and (max-width: 1600px) {
    .container {
        max-width: 1400px;
        margin: 40px auto;
    }
}

@media screen and (max-width: 1440px) {
    .container {
        max-width: 1200px;
        margin: 30px auto;
        padding: 50px 20px 64px;
    }

    .container-logo-big {
        width: 350px;
        height: 115px;
    }

    .container-batman {
        width: 160px;
        height: 160px;
    }

    .personal-avatar {
        width: 220px;
        height: 220px;
    }

    .personal-info {
        gap: 40px;
    }

    .personal-info-name,
    .personal-info-rank,
    .personal-info-poins {
        font-size: 28px;
        line-height: 42px;
    }
}

@media screen and (max-width: 1024px) {
    .container {
        margin: 20px 10px;
        padding: 40px 16px 64px;
    }

    .container-logo-big {
        width: 300px;
        height: 100px;
    }

    .container-batman {
        width: 140px;
        height: 140px;
    }

    .personal {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .personal-avatar {
        width: 200px;
        height: 200px;
    }

    .personal-info {
        gap: 30px;
        padding: 20px 0;
    }

    .subscribe {
        padding: 15px;
    }

    .subscribe-info h1 {
        font-size: 28px;
    }

    .subscribe-info p {
        font-size: 24px;
    }

    .subscribe-box {
        font-size: 28px;
    }

    .subscribe-btn {
        width: 200px;
        height: 60px;
        font-size: 32px;
    }

    .rank-container {
        font-size: 28px;
    }

    .ranking-logo {
        width: 280px;
        height: 50px;
    }

    .ranking-logo img {
        height: 80px;
    }

    .rank-header,
    .rank-item {
        grid-template-columns: 150px 1fr 180px;
    }

    .rank-item-user-info img {
        width: 72px;
        height: 72px;
    }

    .rank-points img,
    .rank-item-score img {
        width: 48px;
        height: 48px;
    }
}

@media screen and (max-width: 768px) {
    .container {
        margin: 15px 8px;
        padding: 30px 12px 64px;
    }

    .container-logo-big {
        width: 250px;
        height: 85px;
    }

    .container-batman {
        width: 120px;
        height: 120px;
    }

    .personal-avatar {
        width: 180px;
        height: 180px;
    }

    .personal-info {
        gap: 20px;
    /

System: Saya memahami bahwa Anda ingin memperbaiki kode CSS agar font `'capy'` dalam `@font-face` menggunakan sumber font "Joti One" dari Google Fonts, sambil mempertahankan nama `'capy'` untuk digunakan di seluruh proyek. Kode Anda saat ini memiliki masalah karena `@font-face` menggunakan `src: local('Joti One')`, yang tidak andal untuk font yang diimpor dari Google Fonts, dan ada inkonsistensi antara penggunaan `'capy'` dan `"Joti One"` di berbagai bagian kode. Saya akan memperbaiki kode untuk memastikan font "Joti One" dari Google Fonts digunakan secara konsisten dengan nama `'capy'`, sambil menjaga struktur kode yang ada sebisa mungkin.

### Masalah Utama
1. **Penggunaan `src: local('Joti One')`**:
   - `local('Joti One')` merujuk ke font yang terinstal di perangkat pengguna, bukan font yang diimpor via Google Fonts. Jika "Joti One" tidak terinstal secara lokal, font `'capy'` tidak akan dimuat dengan benar.
   - Google Fonts menyediakan font melalui URL, dan `@font-face` dengan `local()` tidak diperlukan untuk font yang diimpor.

2. **Inkonsistensi Font**:
   - Kelas `.joti-one-regular` menggunakan `font-family: "Joti One", serif;`, yang merujuk langsung ke font Google Fonts.
   - Namun, `html, body` menggunakan `font-family: 'capy', 'Noto Sans JP', sans-serif;`, yang bergantung pada `@font-face` untuk `'capy'`.
   - Ini menyebabkan potensi ketidaksesuaian jika `'capy'` tidak dimuat dengan benar.

3. **Redundansi**:
   - Anda mengimpor "Joti One" dari Google Fonts dan mencoba mendefinisikan ulang sebagai `'capy'` dengan `@font-face`. Pendekatan ini tidak efisien karena Anda bisa langsung menggunakan `"Joti One"` atau membuat alias tanpa `@font-face` yang bermasalah.

### Solusi
Untuk mempertahankan nama `'capy'` di seluruh proyek tanpa mengubah banyak kode (misalnya, referensi `font-family: 'capy'` di `html, body`), kita akan:
1. Mengimpor "Joti One" dari Google Fonts.
2. Menghapus `@font-face` yang menggunakan `local('Joti One')` karena tidak diperlukan.
3. Memastikan semua elemen yang menggunakan `'capy'` mendapatkan font "Joti One" dari Google Fonts dengan mengganti referensi `'capy'` ke `"Joti One"` atau menggunakan pendekatan alias yang lebih sederhana.
4. Memperbaiki kelas `.joti-one-regular` agar konsisten dengan nama font yang digunakan.

Namun, karena Anda secara eksplisit ingin mempertahankan nama `'capy'` di `@font-face`, saya akan memberikan solusi alternatif yang menggunakan `@font-face` dengan sumber Google Fonts secara langsung (meskipun ini bukan praktik umum untuk Google Fonts). Pendekatan utama saya akan tetap sederhana dan efisien dengan menghapus `@font-face` yang tidak perlu, kecuali Anda memiliki alasan kuat untuk mempertahankannya (misalnya, banyak kode yang sudah menggunakan `'capy'`).

### Kode yang Diperbaiki
Berikut adalah kode CSS yang diperbaiki. Saya akan menghapus `@font-face` yang bermasalah dan mengganti semua referensi `'capy'` ke `"Joti One"` untuk konsistensi, karena ini adalah cara paling andal dan efisien untuk menggunakan Google Fonts. Saya juga akan memastikan font diterapkan dengan benar di seluruh proyek. Jika Anda ingin tetap menggunakan nama `'capy'`, saya akan memberikan alternatif setelah kode ini.

```css
/* Impor font Joti One dari Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Joti+One&display=swap');

/* Aturan global */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Variabel CSS */
:root {
    --gray: #A4A5A6;
    --yellow3: rgba(191, 141, 114, 0.3);
    --green: #496c45;
    --bright-green: #669966;
    --dark-gray: #232323;
    --middle-gray: #353535;
    --light-gray: #3b3b3b;
    --red: #FF5D12;
    --yellow: #FBAE43;
    --yellow1: #FFDFA7;
    --yellow1-border: #FFF2F1;
    --yellow2: #FAECD3;
    --brown: #481111;
    --blank: #2D1400;
    --text-brown: #6D2503;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
    --transition-slow: all 0.8s ease;
}

/* Font global */
html, body {
    font-family: 'Joti One', 'Noto Sans JP', sans-serif !important;
    font-weight: 300;
    line-height: 1.6;
    color: var(--blank);
    background-color: #FFF7EA;
    overflow-x: hidden;
    scrollbar-width: thin;
    scroll-behavior: smooth;
    scrollbar-color: var(--yellow) var(--dark-gray);
}

/* Kelas untuk font Joti One */
.joti-one-regular {
    font-family: 'Joti One', serif;
    font-weight: 400;
    font-style: normal;
}

/* Aturan lainnya tetap sama */
a {
    text-decoration: none;
    color: var(--light-text);
    transition: var(--transition);
}

a:hover {
    color: var(--gray-text);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    background: url(../images/pic.png) repeat;
    padding: 88px 32px 64px;
    border-radius: 64px;
    margin: 60px 30px;
    position: relative;
}

.container-logo-big {
    position: absolute;
    top: -37px;
    left: 0;
    width: 474px;
    height: 154px;
    z-index: 1;
}

.container-batman {
    position: absolute;
    top: -66px;
    right: -7px;
    width: 200px;
    height: 200px;
}

.light-container {
    background: var(--yellow2);
    border: 4px solid #fff;
    border-radius: 20px;
    padding: 40px;
    color: var(--text-brown);
}

.flex {
    display: flex;
    align-items: center;
}

.flex-1 {
    flex: 1;
}

.flex-d-c {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.center {
    text-align: center;
}

.pointer {
    cursor: pointer;
}

.break {
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: auto;
}

.scale {
    transition: var(--transition);
}

.scale:hover {
    transform: scale(1.1);
}

.f300 {
    font-weight: 300;
}

.f400 {
    font-weight: 400;
}

.f500 {
    font-weight: 500;
}

.f-eee {
    color: #eee;
}

.f-ccc {
    color: #ccc;
}

.f-666 {
    color: #666;
}

.f-999 {
    color: #999;
}

.mr10 {
    margin-right: 10px;
}

.mb20 {
    margin-bottom: 20px;
}

.red {
    color: var(--red);
}

.system-font {
    font-family: "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.header {
    width: 100%;
    height: 72px;
    padding: 12px 52px;
    background-color: var(--brown);
    color: var(--yellow);
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.header-logo {
    display: flex;
    align-items: center;
    margin-right: 40px;
    color: var(--yellow);
}

.header-logo img {
    width: 160px;
    height: 48px;
    margin-right: 5px;
}

.header-nav {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 68px;
}

.header-nav a {
    font-size: 20px;
    opacity: 0.6;
    transition: var(--transition);
}

.header-nav a:hover,
.header-nav a.active {
    opacity: 1;
    transform: scale(1.1);
}

.header-menu {
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 40px;
}

.header-menu-icon {
    width: 32px;
    height: 32px;
}

.header-menu-login {
    background: url(../images/btn-bg1.png) no-repeat center center;
    background-size: 100% 100%;
    color: var(--blank);
    width: 126px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}

.main {
    min-height: 100vh;
    padding-top: 72px;
}

.main-banner {
    width: 100%;
}

/* Hamburger menu */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
    margin-left: auto;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--yellow);
    transition: var(--transition);
}

/* Responsif */
@media screen and (max-width: 768px) {
    .header {
        padding: 0 15px;
    }

    .hamburger {
        display: flex;
    }

    .header-nav {
        position: fixed;
        top: 80px;
        left: -100%;
        width: 100%;
        background-color: var(--dark-gray);
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        transition: var(--transition);
        z-index: 999;
    }

    .header-nav.active {
        left: 0;
    }

    .header-nav a {
        padding: 15px 0;
        font-size: 1.2em;
    }

    .header-menu {
        margin-left: 15px;
    }

    .dropdown-menu {
        position: fixed;
        top: 80px;
        right: -100%;
        width: 100%;
        background-color: var(--dark-gray);
        border: none;
        border-radius: 0;
        transition: var(--transition);
    }

    .header-menu-fold:hover .dropdown-menu {
        right: 0;
    }

    .dropdown-item {
        padding: 15px 20px;
        text-align: center;
    }
}

@media screen and (max-width: 480px) {
    .header {
        padding: 0 10px;
    }

    .header-logo img {
        width: 120px;
        height: 36px;
    }

    .header-logo-text {
        font-size: 0.9em;
    }

    .header-menu {
        height: 35px;
        line-height: 35px;
    }

    .login-btn {
        font-size: 0.9em;
    }
}

.personal-container {
    gap: 20px;
    margin-bottom: 20px;
    align-items: stretch;
}

@media screen and (max-width: 480px) {
    .personal-container {
        flex-direction: column;
        gap: 40px;
    }
}

.personal {
    display: flex;
    align-items: center;
    gap: 20px;
    border-radius: 10px;
    padding: 32px;
    max-width: 50%;
}

.personal-avatar {
    width: 268px;
    height: 268px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 8px solid #fff;
}

.personal-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.personal-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 64px;
    padding: 32px 0;
}

.personal-info-name {
    font-size: 32px;
    line-height: 48px;
    height: 48px;
    max-width: 300px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}

.personal-info-rank {
    width: fit-content;
    font-size: 32px;
    line-height: 48px;
    height: 48px;
}

.personal-info-poins {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background-color: var(--yellow1);
    border-radius: 20px;
    border: 4px solid var(--yellow1-border);
    font-size: 28px;
    line-height: 48px;
}

.personal-info-poins img {
    width: 40px;
    height: 40px;
}

.subscribe {
    flex: 2;
    padding: 20px;
    border-radius: 10px;
}

.subscribe-info {
    margin-bottom: 40px;
}

.subscribe-info h1 {
    font-size: 32px;
    height: 48px;
    line-height: 48px;
    font-weight: 400;
    color: var(--red);
}

.subscribe-info-x {
    width: 30px;
    height: 30px;
    margin-left: 10px;
}

.subscribe-info p {
    font-size: 28px;
    margin-bottom: 10px;
}

.subscribe-link-title,
.subscribe-invite-title {
    align-items: baseline;
    font-size: 36px;
    margin-bottom: 20px;
}

.subscribe-link-title span,
.subscribe-invite-title span {
    font-size: 28px;
    margin-left: 12px;
    color: var(--text-brown);
}

.subscribe-link-box,
.subscribe-invite-code {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
}

.subscribe-box {
    flex: 1;
    padding: 24px 12px;
    font-size: 28px;
    background-color: var(--yellow1);
    border-radius: 20px;
    border: 4px solid var(--yellow1-border);
    line-height: 48px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.subscribe-box:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.subscribe-btn {
    width: 252px;
    height: 80px;
    line-height: 60px;
    font-size: 28px;
    text-align: center;
    padding: 10px;
    background: url(../images/btn-bg1.png) no-repeat center center;
    background-size: 100% 100%;
    color: var(--blank);
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
}

.subscribe-btn:hover {
    transform: scale(1.05);
}

.subscribe-invite {
    margin-top: 40px;
}

/* Responsif untuk subscribe */
@media screen and (max-width: 1024px) {
    .subscribe-link-title,
    .subscribe-invite-title {
        font-size: 44px;
        margin-bottom: 16px;
    }

    .subscribe-link-title span,
    .subscribe-invite-title span {
        font-size: 22px;
    }

    .subscribe-box {
        font-size: 28px;
        padding: 20px 10px;
        line-height: 42px;
    }

    .subscribe-btn {
        width: 220px;
        height: 70px;
        font-size: 36px;
    }

    .subscribe-link-box,
    .subscribe-invite-code {
        gap: 16px;
        margin-bottom: 28px;
    }

    .subscribe-invite {
        margin-top: 32px;
    }
}

@media screen and (max-width: 768px) {
    .subscribe-link-title,
    .subscribe-invite-title {
        font-size: 36px;
        margin-bottom: 14px;
    }

    .subscribe-link-title span,
    .subscribe-invite-title span {
        font-size: 20px;
    }

    .subscribe-box {
        font-size: 24px;
        padding: 16px 8px;
        line-height: 36px;
    }

    .subscribe-btn {
        width: 180px;
        height: 60px;
        font-size: 32px;
    }

    .subscribe-link-box,
    .subscribe-invite-code {
        gap: 12px;
        margin-bottom: 24px;
    }

    .subscribe-invite {
        margin-top: 28px;
    }
}

@media screen and (max-width: 480px) {
    .subscribe-link-title,
    .subscribe-invite-title {
        font-size: 28px;
        margin-bottom: 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .subscribe-link-title span,
    .subscribe-invite-title span {
        font-size: 16px;
        margin-left: 0;
    }

    .subscribe-link-box,
    .subscribe-invite-code {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 20px;
    }

    .subscribe-box {
        width: 100%;
        font-size: 20px;
        padding: 12px 8px;
        line-height: 30px;
    }

    .subscribe-btn {
        width: 100%;
        height: 50px;
        font-size: 24px;
        padding: 8px;
    }

    .subscribe-invite {
        margin-top: 24px;
    }
}

@media screen and (max-width: 360px) {
    .subscribe-link-title,
    .subscribe-invite-title {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .subscribe-link-title span,
    .subscribe-invite-title span {
        font-size: 14px;
    }

    .subscribe-box {
        font-size: 18px;
        padding: 10px 6px;
        line-height: 27px;
        border-width: 3px;
    }

    .subscribe-btn {
        height: 45px;
        font-size: 20px;
        padding: 6px;
    }

    .subscribe-link-box,
    .subscribe-invite-code {
        gap: 10px;
        margin-bottom: 16px;
    }

    .subscribe-invite {
        margin-top: 20px;
    }
}

.rank-container {
    position: relative;
    margin-top: 78px;
    border-radius: 0 20px 20px 20px;
    font-size: 32px;
    overflow: visible;
}

.ranking-logo {
    width: 333px;
    height: 58px;
    border-radius: 20px 20px 0 0;
    border: 4px solid #fff;
    border-bottom: none;
    background-color: var(--yellow2);
    position: absolute;
    top: -58px;
    left: -4px;
    display: flex;
    justify-content: center;
}

.ranking-logo img {
    height: 94px;
}

.rank-header {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    align-items: center;
    padding: 15px;
    gap: 15px;
}

.rank-points {
    justify-content: flex-end;
}

.rank-points img {
    width: 54px;
    height: 54px;
}

.rank-search input {
    width: 100%;
    padding: 8px 15px;
    border-radius: 20px;
    border: 1px solid var(--light-gray);
    background: var(--dark-gray);
    color: #fff;
    outline: none;
}

.rank-search input::placeholder {
    color: var(--gray);
}

.rank-item {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    align-items: center;
    padding: 15px;
    gap: 15px;
    border-bottom: 1px solid var(--light-gray);
    transition: var(--transition);
}

.rank-item-number {
    color: var(--red);
    font-size: 32px;
}

.rank-item-number-top3 {
    background: url(../images/orange.png) no-repeat center center;
    background-size: 100% 100%;
    width: 48px;
    height: 48px;
    color: #813600;
    font-size: 28px;
    text-align: center;
    line-height: 56px;
}

.rank-item-user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    overflow: hidden;
}

.rank-item-user-info img {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.rank-item-user-details {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rank-item-user-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rank-item-user-handle {
    font-size: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rank-item-score {
    color: var(--red);
    justify-content: flex-end;
    white-space: nowrap;
}

.rank-item-score img {
    width: 54px;
    height: 54px;
}

.rank-list-empty {
    text-align: center;
    margin-top: 48px;
    opacity: 0.5;
}

.faq-container {
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 10px;
    background: var(--dark-gray);
}

.faq-title {
    font-size: 1.5em;
    color: #fff;
    margin-bottom: 40px;
    text-align: center;
}

.faq-item {
    background: var(--middle-gray);
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
    transition: var(--transition);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    cursor: pointer;
    background: var(--middle-gray);
}

.faq-question h2 {
    font-size: 1.2em;
    color: #fff;
    font-weight: 500;
    margin: 0;
}

.faq-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--yellow);
    transition: transform 0.3s ease;
}

.faq-answer {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item.active .faq-answer {
    padding: 20px;
    max-height: 300px;
    border-top: 1px solid #606060;
}

.faq-item.active .faq-toggle {
    transform: rotate(180deg);
}

.faq-item:hover {
    background: var(--light-gray);
}

.footer {
    width: 100%;
}

.footer img {
    width: 100%;
    height: 100%;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(23, 1, 2, 0.8);
    z-index: 2000;
    backdrop-filter: blur(5px);
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: url(../images/dialog-bg.png) no-repeat center center;
    border-radius: 10px;
    width: 624px;
    height: 620px;
    color: var(--text-brown);
    position: relative;
    justify-content: flex-end;
    animation: modalFadeIn 0.3s ease;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 8px;
    width: 60px;
    height: 60px;
}

.modal-content-icon {
    width: 100%;
    height: 100%;
}

.dialog-btn {
    width: 300px;
    height: 55px;
    background: url(../images/btn-bg2.png) no-repeat center center;
    background-size: 100% 100%;
    color: var(--blank);
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
}

.dialog-btn:hover {
    transform: scale(1.1);
}

.dialog-btn-wallet {
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.login-modal {
    padding-bottom: 62px;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-modal-header h2 {
    font-size: 62px;
    margin-bottom: 52px;
}

.modal-close {
    cursor: pointer;
    font-size: 24px;
    color: var(--gray);
    transition: var(--transition);
}

.modal-close:hover {
    color: #fff;
}

.modal-body {
    padding: 30px;
}

.modal-body p {
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.1em;
}

.modal-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.modal-btn {
    padding: 10px 30px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-size: 1em;
    transition: var(--transition);
}

.logout-modal {
    background: url(../images/dialog-bg-high.png) no-repeat center center;
    background-size: contain;
    height: 660px;
}

.logout-modal-user {
    gap: 16px;
    font-size: 32px;
    align-items: flex-start;
}

.logout-modal-user-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.logout-modal-btn-box {
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 60px;
}

.confirm-modal {
    padding-bottom: 30px;
}

.confirm-modal-header {
    font-size: 32px;
    margin-bottom: 20px;
    width: 70%;
    text-align: center;
}

.cancel-btn {
    background: var(--middle-gray);
    color: #fff;
}

.cancel-btn:hover {
    background: var(--light-gray);
}

.confirm-btn {
    background: var(--yellow);
    color: #fff;
}

.confirm-btn:hover {
    background: var(--yellow3);
}

.login-btn {
    cursor: pointer;
    padding: 0 10px;
}

.toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    background-color: #6D2503;
    padding: 20px 30px;
    border-radius: 5px;
    z-index: 2000;
    backdrop-filter: blur(5px);
    font-size: 28px;
}

/* Responsif untuk container */
@media screen and (max-width: 1920px) {
    .container {
        max-width: 1600px;
        margin: 40px auto;
        padding: 60px 24px 64px;
    }

    .container-logo-big {
        width: 400px;
        height: 130px;
    }

    .container-batman {
        width: 180px;
        height: 180px;
    }
}

@media screen and (max-width: 1600px) {
    .container {
        max-width: 1400px;
        margin: 40px auto;
    }
}

@media screen and (max-width: 1440px) {
    .container {
        max-width: 1200px;
        margin: 30px auto;
        padding: 50px 20px 64px;
    }

    .container-logo-big {
        width: 350px;
        height: 115px;
    }

    .container-batman {
        width: 160px;
        height: 160px;
    }

    .personal-avatar {
        width: 220px;
        height: 220px;
    }

    .personal-info {
        gap: 40px;
    }

    .personal-info-name,
    .personal-info-rank,
    .personal-info-poins {
        font-size: 28px;
        line-height: 42px;
    }
}

@media screen and (max-width: 1024px) {
    .container {
        margin: 20px 10px;
        padding: 40px 16px 64px;
    }

    .container-logo-big {
        width: 300px;
        height: 100px;
    }

    .container-batman {
        width: 140px;
        height: 140px;
    }

    .personal {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .personal-avatar {
        width: 200px;
        height: 200px;
    }

    .personal-info {
        gap: 30px;
        padding: 20px 0;
    }

    .subscribe {
        padding: 15px;
    }

    .subscribe-info h1 {
        font-size: 28px;
    }

    .subscribe-info p {
        font-size: 24px;
    }

    .subscribe-box {
        font-size: 28px;
    }

    .subscribe-btn {
        width: 200px;
        height: 60px;
        font-size: 32px;
    }

    .rank-container {
        font-size: 28px;
    }

    .ranking-logo {
        width: 280px;
        height: 50px;
    }

    .ranking-logo img {
        height: 80px;
    }

    .rank-header,
    .rank-item {
        grid-template-columns: 150px 1fr 180px;
    }

    .rank-item-user-info img {
        width: 72px;
        height: 72px;
    }

    .rank-points img,
    .rank-item-score img {
        width: 48px;
        height: 48px;
    }
}

@media screen and (max-width: 768px) {
    .container {
        margin: 15px 8px;
        padding: 30px 12px 64px;
    }

    .container-logo-big {
        width: 250px;
        height: 85px;
    }

    .container-batman {
        width: 120px;
        height: 120px;
    }

    .personal-avatar {
        width: 180px;
        height: 180px;
    }

    .personal-info {
        gap: 20px;
    }

    .personal-info-name,
    .personal-info-rank,
    .personal-info-poins {
        font-size: 24px;
        line-height: 36px;
    }

    .subscribe-info h1 {
        font-size: 24px;
    }

    .subscribe-info p {
        font-size: 20px;
    }

    .subscribe-box {
        font-size: 24px;
    }

    .subscribe-btn {
        width: 180px;
        height: 50px;
        font-size: 28px;
    }

    .rank-container {
        font-size: 24px;
        margin-top: 60px;
    }

    .ranking-logo {
        width: 240px;
        height: 45px;
        top: -45px;
    }

    .ranking-logo img {
        height: 70px;
    }

    .rank-header,
    .rank-item {
        grid-template-columns: 100px 1fr 150px;
        padding: 12px;
        gap: 10px;
    }

    .rank-item-user-info {
        gap: 10px;
    }

    .rank-item-user-info img {
        width: 60px;
        height: 60px;
    }

    .rank-item-user-handle {
        font-size: 18px;
    }

    .rank-points img,
    .rank-item-score img {
        width: 40px;
        height: 40px;
    }
}

@media screen and (max-width: 580px) {
    .container {
        margin: 36px 5px;
        padding: 20px 8px 64px;
        border-radius: 20px;
    }

    .container-logo-big {
        width: 200px;
        height: 70px;
    }

    .container-batman {
        width: 100px;
        height: 100px;
    }

    .personal-avatar {
        width: 150px;
        height: 150px;
    }

    .personal-info {
        gap: 15px;
    }

    .personal-info-name,
    .personal-info-rank,
    .personal-info-poins {
        font-size: 20px;
        line-height: 30px;
    }

    .subscribe-info h1 {
        font-size: 20px;
    }

    .subscribe-info p {
        font-size: 16px;
    }

    .subscribe-box {
        font-size: 20px;
    }

    .subscribe-btn {
        width: 150px;
        height: 40px;
        font-size: 20px;
        line-height: 24px;
    }

    .rank-container {
        font-size: 20px;
        margin-top: 50px;
        padding: 10px;
        overflow: visible;
    }

    .ranking-logo {
        width: 200px;
        height: 40px;
        top: -40px;
    }

    .ranking-logo img {
        height: 60px;
    }

    .rank-header,
    .rank-item {
        grid-template-columns: 60px 1fr 100px;
        padding: 8px;
        gap: 8px;
    }

    .rank-item-user-info {
        gap: 8px;
    }

    .rank-item-user-info img {
        width: 48px;
        height: 48px;
    }

    .rank-item-user-handle {
        font-size: 16px;
    }

    .rank-points img,
    .rank-item-score img {
        width: 32px;
        height: 32px;
    }
}

@media screen and (max-width: 360px) {
    .rank-container {
        font-size: 18px;
    }

    .ranking-logo {
        width: 180px;
        height: 35px;
        top: -35px;
    }

    .ranking-logo img {
        height: 50px;
    }

    .rank-header,
    .rank-item {
        grid-template-columns: 50px 1fr 80px;
        padding: 6px;
        gap: 6px;
    }

    .rank-item-user-info img {
        width: 40px;
        height: 40px;
    }

    .rank-item-user-handle {
        font-size: 14px;
    }

    .rank-points img,
    .rank-item-score img {
        width: 28px;
        height: 28px;
    }
}

.pagination {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 11px;
}

.pagination-item {
    width: 38px;
    height: 41px;
    box-shadow: 0px -2px 0px 0px #DD8103 inset;
    border-radius: 8px;
    background: #F59F2B;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
}

.pagination-item:hover {
    border: 2px solid #DD8103;
}

.pagination-item.active {
    border: 2px solid #DD8103;
    background-color: #FAECD3;
    color: #DD8103;
}